/* src/field/src/Field.css */
.o-ui-field {
  display: grid;
  align-items: center;
  grid-template-rows: max-content max-content max-content;
  grid-template-areas: "label" "input" "message";
  row-gap: 0;
}
.o-ui-field-fluid {
  width: 100%;
}
.o-ui-field .o-ui-field-label {
  grid-area: label;
  padding-bottom: var(--hop-space-stack-xs);
}
.o-ui-field-input {
  grid-area: input;
}
.o-ui-field .o-ui-field-message {
  grid-area: message;
  padding-top: var(--hop-space-stack-xs);
}

/* src/field/src/FieldMessage.css */
.o-ui-field-message {
  max-width: 50ch;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.o-ui-field-message-fluid {
  max-width: 100%;
}
.o-ui-field-message-neutral {
  color: var(--hop-neutral-text-weak);
}
.o-ui-field-message-success {
  color: var(--hop-success-text-weak);
}
.o-ui-field-message-error {
  color: var(--hop-danger-text-weak);
}

/* src/field/src/Label.css */
.o-ui-field-label {
  color: var(--hop-neutral-text-weak);
  white-space: nowrap;
}
.o-ui-field-label-required {
  margin-left: var(--hop-space-inline-xs);
}

/* src/field/src/index.css */