@launchpad-ui/form 0.6.8 → 0.6.10

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/RequiredAsterisk.tsx","../src/Label.tsx","../src/Checkbox.tsx","../src/utils/index.ts","../src/TextField.tsx","../src/CompactTextField.tsx","../src/FieldError.tsx","../src/FieldSet.tsx","../src/Form.tsx","../src/FormGroup.tsx","../src/FormHint.tsx","../src/FormField.tsx","../src/IconField.tsx","../src/Radio.tsx","../src/RadioGroup.tsx","../src/Select.tsx","../src/TextArea.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n  'data-test-id'?: string;\n};\n\nconst RequiredAsterisk = ({\n  className,\n  'data-test-id': testId = 'required-asterisk',\n  ...rest\n}: RequiredAsteriskProps) => {\n  const classes = cx('RequiredAsterisk', className);\n\n  return (\n    <span {...rest} data-test-id={testId} className={classes}>\n      *\n    </span>\n  );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n","import type { LabelHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  required?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n  'data-test-id'?: string;\n};\n\nconst Label = ({\n  disabled,\n  className,\n  children,\n  required = false,\n  optional = false,\n  'data-test-id': testId = 'label',\n  ...rest\n}: LabelProps) => {\n  const classes = cx('Form-label', className, disabled && 'Form-label--disabled');\n\n  return (\n    <label {...rest} data-test-id={testId} className={classes}>\n      {children}\n      {optional && !required && <small className=\"Form-labelOptional\">(optional)</small>}\n      {required && !optional && <RequiredAsterisk />}\n    </label>\n  );\n};\n\nexport { Label };\nexport type { LabelProps };\n","import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n  /**\n   * The className to pass into the Checkbox's Label component\n   */\n  labelClassName?: string;\n  'data-test-id'?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      children,\n      disabled,\n      checked,\n      labelClassName,\n      'data-test-id': testId = 'checkbox',\n      ...rest\n    },\n    ref\n  ) => {\n    const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n    if (!children && !hasAriaLabel) {\n      console.warn(\n        'If you do not provide children, you must specify an aria-label for accessibility'\n      );\n    }\n\n    return (\n      <Label className={labelClassName}>\n        <input\n          {...rest}\n          ref={ref}\n          checked={checked}\n          aria-checked={checked ? 'true' : 'false'}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          className=\"Form-checkbox\"\n          disabled={disabled}\n          type=\"checkbox\"\n          data-test-id={testId}\n        />{' '}\n        {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n      </Label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n","type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n  fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n","import type { InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  suffix?: string;\n  tiny?: boolean;\n  overrideWidth?: string;\n  'data-test-id'?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      className,\n      type = 'text',\n      tiny = false,\n      readOnly,\n      tabIndex = 0,\n      suffix,\n      overrideWidth,\n      'data-test-id': testId = 'text-field',\n      ...rest\n    },\n    ref\n  ) => {\n    const classes = overrideWidth\n      ? className\n      : cx('FormInput', `FormInput-${type}`, className, tiny && 'FormInput--tiny');\n\n    if (suffix) {\n      return (\n        <div className=\"FormInput-suffixContainer\">\n          <input\n            {...rest}\n            type={type}\n            data-test-id={testId}\n            className={cx(classes, 'FormInput-suffix')}\n            readOnly={readOnly}\n            ref={ref}\n            aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n          />\n          <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n            {suffix}\n          </label>\n        </div>\n      );\n    }\n\n    return (\n      <input\n        {...rest}\n        type={type}\n        className={classes}\n        readOnly={readOnly}\n        tabIndex={tabIndex}\n        ref={ref}\n        data-test-id={testId}\n        style={\n          overrideWidth\n            ? {\n                width: overrideWidth,\n              }\n            : undefined\n        }\n        aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n      />\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n","import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n  label: string;\n  needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      needsErrorFeedback,\n      value,\n      onFocus,\n      onBlur,\n      'data-test-id': testId = 'compact-text-field',\n      ...rest\n    },\n    ref\n  ) => {\n    const [isActive, setIsActive] = useState(\n      (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n    );\n\n    const isActiveState = isActive || needsErrorFeedback;\n\n    const classes = cx('CompactTextField', className, isActiveState && 'is-active');\n\n    const placeholder = isActiveState ? '' : label;\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setIsActive(true);\n      if (onFocus) {\n        onFocus(event);\n      }\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      const value = event.target.value || '';\n      setIsActive(value.trim().length !== 0);\n      if (onBlur) {\n        onBlur(event);\n      }\n    };\n\n    return (\n      <div className={classes} data-test-id={testId}>\n        <Label htmlFor={id}>{label}</Label>\n        <TextField\n          {...rest}\n          id={id}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n      </div>\n    );\n  }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n","import type { FieldPath } from './utils';\nimport type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = HTMLAttributes<HTMLSpanElement> & {\n  name: FieldPath;\n  errorMessage?: string;\n  'data-test-id'?: string;\n};\n\nconst FieldError = ({\n  name,\n  errorMessage,\n  className,\n  'data-test-id': testId = 'field-error',\n  ...rest\n}: FieldErrorProps) => {\n  if (!errorMessage) {\n    return null;\n  }\n\n  return (\n    <span\n      {...rest}\n      className={cx('Form-fieldError', className)}\n      aria-live=\"polite\"\n      data-test-id={testId}\n      id={createFieldErrorId(name)}\n    >\n      {`Error - ${errorMessage}`}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = HTMLAttributes<HTMLFieldSetElement> & {\n  'data-test-id'?: string;\n};\n\nconst FieldSet = ({\n  children,\n  className,\n  'data-test-id': testId = 'field-set',\n  ...rest\n}: FieldSetProps) => {\n  const classes = cx('FieldSet', className);\n\n  return (\n    <fieldset data-test-id={testId} className={classes} {...rest}>\n      {children}\n    </fieldset>\n  );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n","import type { FormHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormProps = FormHTMLAttributes<HTMLFormElement> & {\n  inline?: boolean;\n  // Increases margin between form fields to make room for error messages.\n  // This prevents the form from shifting when rendering a field error.\n  // This may be desired when the form contains external links that will\n  // shift while clicking if the form shifts from validation.\n  hasIncreasedErrorMargin?: boolean;\n  'data-test-id'?: string;\n};\n\nconst Form = (props: FormProps) => {\n  const {\n    className,\n    inline,\n    children,\n    hasIncreasedErrorMargin,\n    'data-test-id': testId = 'form',\n    ...rest\n  } = props;\n\n  const classes = cx(\n    'Form',\n    className,\n    inline && 'Form--inline',\n    !!hasIncreasedErrorMargin && 'Form--increasedErrorMargin'\n  );\n\n  return (\n    <form {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </form>\n  );\n};\n\nexport { Form };\nexport type { FormProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = HTMLAttributes<HTMLDivElement> & {\n  name?: string | string[];\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  'data-test-id'?: string;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n  const {\n    className,\n    name,\n    ignoreValidation,\n    isInvalid,\n    children,\n    'data-test-id': testId = 'form-group',\n    ...rest\n  } = props;\n\n  const classes = cx('Form-group', className, !ignoreValidation && isInvalid && 'is-invalid');\n\n  return (\n    <div className={classes} data-test-id={testId} {...rest}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = HTMLAttributes<HTMLDivElement> & {\n  'data-test-id'?: string;\n};\n\nconst FormHint = ({\n  className,\n  children,\n  'data-test-id': testId = 'form-hint',\n  ...rest\n}: FormHintProps) => {\n  const classes = cx('Form-hint', className);\n\n  return (\n    <div {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n","import { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n  isRequired: boolean;\n  label?: string;\n  name: string;\n  htmlFor: string;\n  hint?: string;\n  errorMessage?: string;\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  children: JSX.Element;\n  className?: string;\n  onBlur?: (field: string) => void;\n  'data-test-id'?: string;\n};\n\nconst FormField = ({\n  isRequired,\n  label,\n  name,\n  htmlFor,\n  hint,\n  errorMessage,\n  ignoreValidation,\n  isInvalid,\n  children,\n  className,\n  onBlur,\n  'data-test-id': testId = 'form-field',\n}: FormFieldProps) => {\n  const handleBlur = () => {\n    onBlur && onBlur(name);\n  };\n\n  return (\n    <FormGroup\n      className={cx('FormField', className)}\n      name={name}\n      ignoreValidation={ignoreValidation}\n      isInvalid={isInvalid}\n      onBlur={handleBlur}\n      data-test-id={testId}\n    >\n      {label && (\n        <label htmlFor={htmlFor}>\n          {label}\n          {isRequired && <RequiredAsterisk />}\n        </label>\n      )}\n      {hint && <FormHint className=\"FormField-hint\">{hint}</FormHint>}\n      {children}\n      <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n    </FormGroup>\n  );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = HTMLAttributes<HTMLDivElement> & {\n  icon(args: IconProps): JSX.Element;\n  children: JSX.Element | JSX.Element[];\n  'data-test-id'?: string;\n};\n\nconst IconField = ({\n  icon,\n  children,\n  className,\n  'data-test-id': testId = 'icon-field',\n  ...rest\n}: IconFieldProps) => {\n  const Icon = icon;\n\n  const classes = cx('IconField', className);\n\n  return (\n    <div className={classes} data-test-id={testId} {...rest}>\n      {children}\n      <Icon size=\"small\" />\n    </div>\n  );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n","import type { CSSProperties, InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {\n  labelClassName?: string;\n  labelStyle?: CSSProperties;\n  'data-test-id'?: string;\n};\n\nconst Radio = ({\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  checked = false,\n  children,\n  className,\n  disabled = false,\n  id,\n  labelClassName,\n  labelStyle,\n  'data-test-id': testId = 'radio',\n  ...rest\n}: RadioProps) => {\n  const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n  if (!children && !hasAriaLabel) {\n    console.warn(\n      'If you do not provide children, you must specify an aria-label for accessibility'\n    );\n  }\n\n  return (\n    <>\n      <input\n        {...rest}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={cx('Form-radio', className)}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        data-test-id={testId}\n        type=\"radio\"\n      />\n      <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n        {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n      </Label>\n    </>\n  );\n};\n\nexport { Radio };\nexport type { RadioProps };\n","import type { ChangeEvent, FormEvent, ReactElement, ReactNode } from 'react';\n\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n  /**\n   * The legend that describes this groups of radio buttons. The legend\n   * is important for screen reader users.\n   */\n  legend?: string;\n  /**\n   * The children passed into the RadioGroup.\n   */\n  children?: ReactNode;\n  /**\n   * Custom classname(s) passed to the fieldset inner div.\n   */\n  className?: string;\n  /**\n   * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n   */\n  disabled?: boolean;\n  /**\n   * The RadioGroup's id.\n   */\n  id?: string;\n  /**\n   * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n   */\n  name: string;\n  /**\n   * This function is passed into each Radio onChange synthetic event handler.\n   */\n  onChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;\n  /**\n   * The value to compare against the Radio's value to determine if the Radio will be checked.\n   */\n  value: string;\n\n  'data-test-id'?: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n  const {\n    name,\n    value,\n    onChange,\n    children,\n    disabled,\n    legend,\n    'data-test-id': testId = 'radio-group',\n    ...rest\n  } = props;\n  const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n  function updateRadioElems(elem: ReactNode): ReactNode {\n    if (!isValidElement(elem)) {\n      return elem;\n    }\n\n    const item = elem as ReactElement;\n\n    if (item?.type && item.type === Radio) {\n      return cloneElement(item, {\n        ...item.props,\n        name,\n        checked: item.props.value === value,\n        onChange,\n        disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n      });\n    }\n\n    if (item?.type && item.type === Label) {\n      return cloneElement(item, {\n        ...item.props,\n        onChange,\n        disabled,\n      });\n    }\n\n    const elemChildren = item?.props?.children;\n    if (elemChildren) {\n      if (Array.isArray(elemChildren)) {\n        return cloneElement(item, {\n          children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n        });\n      }\n      return cloneElement(item, {\n        children: updateRadioElems(elemChildren),\n      });\n    }\n\n    if (item?.type && item.type !== Radio && item.type !== Label) {\n      return item;\n    }\n\n    return null;\n  }\n\n  const radios = Children.map(children, (child) => updateRadioElems(child));\n  return (\n    <fieldset data-test-id={testId} ref={fieldsetRef}>\n      {legend && (\n        <legend>\n          <VisuallyHidden>{legend}</VisuallyHidden>\n        </legend>\n      )}\n      <div {...rest}>{radios}</div>\n    </fieldset>\n  );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n","import type { SelectHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  'data-test-id'?: string;\n};\n\nconst Select = ({\n  className,\n  children,\n  'data-test-id': testId = 'select',\n  ...rest\n}: SelectProps) => {\n  const classes = cx('FormInput', 'FormInput-select', className);\n\n  return (\n    <select {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </select>\n  );\n};\n\nexport { Select };\nexport type { SelectProps };\n","import type { KeyboardEvent, TextareaHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  'data-test-id'?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, 'data-test-id': testId = 'text-area', ...props }, ref) => {\n    const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (\n        e.key === 'ArrowRight' ||\n        e.key === 'ArrowDown' ||\n        e.key === 'ArrowUp' ||\n        e.key === 'ArrowLeft'\n      ) {\n        e.stopPropagation();\n      }\n      if (e.key === 'Escape') {\n        e.nativeEvent.stopImmediatePropagation();\n      }\n    };\n\n    return (\n      <textarea\n        {...props}\n        className={cx('FormInput', className)}\n        ref={ref}\n        data-test-id={testId}\n        aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],"names":["RequiredAsterisk","className","testId","rest","classes","cx","Label","disabled","children","required","optional","_jsx","Checkbox","forwardRef","ariaLabel","ariaLabelledby","checked","labelClassName","ref","hasAriaLabel","undefined","console","warn","displayName","TextField","type","tiny","readOnly","tabIndex","suffix","overrideWidth","createFieldErrorId","id","width","CompactTextField","label","needsErrorFeedback","value","onFocus","onBlur","isActive","setIsActive","useState","toString","trim","length","isActiveState","placeholder","handleFocus","event","handleBlur","target","FieldError","name","errorMessage","FieldSet","Form","props","inline","hasIncreasedErrorMargin","FormGroup","ignoreValidation","isInvalid","FormHint","FormField","isRequired","htmlFor","hint","_jsxs","IconField","icon","Icon","Radio","labelStyle","_Fragment","RadioGroup","onChange","legend","fieldsetRef","useRef","updateRadioElems","elem","isValidElement","item","cloneElement","elemChildren","Array","isArray","Children","map","elemChild","radios","child","VisuallyHidden","Select","TextArea","onKeyDown","e","key","stopPropagation","nativeEvent","stopImmediatePropagation"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/RequiredAsterisk.tsx","../src/Label.tsx","../src/Checkbox.tsx","../src/utils/index.ts","../src/TextField.tsx","../src/CompactTextField.tsx","../src/FieldError.tsx","../src/FieldSet.tsx","../src/Form.tsx","../src/FormGroup.tsx","../src/FormHint.tsx","../src/FormField.tsx","../src/IconField.tsx","../src/Radio.tsx","../src/RadioGroup.tsx","../src/Select.tsx","../src/TextArea.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n  'data-test-id'?: string;\n};\n\nconst RequiredAsterisk = ({\n  className,\n  'data-test-id': testId = 'required-asterisk',\n  ...rest\n}: RequiredAsteriskProps) => {\n  const classes = cx(styles.requiredAsterisk, className);\n\n  return (\n    <span {...rest} data-test-id={testId} className={classes}>\n      *\n    </span>\n  );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n","import type { LabelHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {\n  required?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n  'data-test-id'?: string;\n};\n\nconst Label = ({\n  disabled,\n  className,\n  children,\n  required = false,\n  optional = false,\n  'data-test-id': testId = 'label',\n  ...rest\n}: LabelProps) => {\n  const classes = cx(styles.label, className, disabled && styles.labelDisabled);\n\n  return (\n    <label {...rest} data-test-id={testId} className={classes}>\n      {children}\n      {optional && !required && <small className={styles.labelOptional}>(optional)</small>}\n      {required && !optional && <RequiredAsterisk />}\n    </label>\n  );\n};\n\nexport { Label };\nexport type { LabelProps };\n","import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n  /**\n   * The className to pass into the Checkbox's Label component\n   */\n  labelClassName?: string;\n  'data-test-id'?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      children,\n      disabled,\n      checked,\n      labelClassName,\n      'data-test-id': testId = 'checkbox',\n      ...rest\n    },\n    ref\n  ) => {\n    const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n    if (!children && !hasAriaLabel) {\n      console.warn(\n        'If you do not provide children, you must specify an aria-label for accessibility'\n      );\n    }\n\n    return (\n      <Label className={labelClassName}>\n        <input\n          {...rest}\n          ref={ref}\n          checked={checked}\n          aria-checked={checked ? 'true' : 'false'}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          className={styles.checkbox}\n          disabled={disabled}\n          type=\"checkbox\"\n          data-test-id={testId}\n        />{' '}\n        {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n      </Label>\n    );\n  }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n","type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n  fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n","import type { InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  suffix?: string;\n  tiny?: boolean;\n  overrideWidth?: string;\n  'data-test-id'?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      className,\n      type = 'text',\n      tiny = false,\n      readOnly,\n      tabIndex = 0,\n      suffix,\n      overrideWidth,\n      'data-test-id': testId = 'text-field',\n      ...rest\n    },\n    ref\n  ) => {\n    const classes = overrideWidth\n      ? className\n      : cx(styles.formInput, tiny && styles.formInputTiny, className);\n\n    if (suffix) {\n      return (\n        <div className={styles.suffixContainer}>\n          <input\n            {...rest}\n            type={type}\n            data-test-id={testId}\n            className={classes}\n            readOnly={readOnly}\n            ref={ref}\n            aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n          />\n          <label className={styles.suffix} htmlFor={rest.id}>\n            {suffix}\n          </label>\n        </div>\n      );\n    }\n\n    return (\n      <input\n        {...rest}\n        type={type}\n        className={classes}\n        readOnly={readOnly}\n        tabIndex={tabIndex}\n        ref={ref}\n        data-test-id={testId}\n        style={\n          overrideWidth\n            ? {\n                width: overrideWidth,\n              }\n            : undefined\n        }\n        aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n      />\n    );\n  }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n","import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport styles from './styles/Form.module.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n  label: string;\n  needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      needsErrorFeedback,\n      value,\n      onFocus,\n      onBlur,\n      'data-test-id': testId = 'compact-text-field',\n      ...rest\n    },\n    ref\n  ) => {\n    const [isActive, setIsActive] = useState(\n      (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n    );\n\n    const isActiveState = isActive || needsErrorFeedback;\n\n    const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);\n\n    const placeholder = isActiveState ? '' : label;\n\n    const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setIsActive(true);\n      if (onFocus) {\n        onFocus(event);\n      }\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n      const value = event.target.value || '';\n      setIsActive(value.trim().length !== 0);\n      if (onBlur) {\n        onBlur(event);\n      }\n    };\n\n    return (\n      <div className={classes} data-test-id={testId}>\n        <Label htmlFor={id}>{label}</Label>\n        <TextField\n          {...rest}\n          id={id}\n          placeholder={placeholder}\n          value={value}\n          ref={ref}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n        />\n      </div>\n    );\n  }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n","import type { FieldPath } from './utils';\nimport type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = HTMLAttributes<HTMLSpanElement> & {\n  name: FieldPath;\n  errorMessage?: string;\n  'data-test-id'?: string;\n};\n\nconst FieldError = ({\n  name,\n  errorMessage,\n  className,\n  'data-test-id': testId = 'field-error',\n  ...rest\n}: FieldErrorProps) => {\n  if (!errorMessage) {\n    return null;\n  }\n\n  return (\n    <span\n      {...rest}\n      className={cx(styles.fieldError, className)}\n      aria-live=\"polite\"\n      data-test-id={testId}\n      id={createFieldErrorId(name)}\n    >\n      {`Error - ${errorMessage}`}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = HTMLAttributes<HTMLFieldSetElement> & {\n  'data-test-id'?: string;\n};\n\nconst FieldSet = ({\n  children,\n  className,\n  'data-test-id': testId = 'field-set',\n  ...rest\n}: FieldSetProps) => {\n  const classes = cx(styles.fieldSet, className);\n\n  return (\n    <fieldset data-test-id={testId} className={classes} {...rest}>\n      {children}\n    </fieldset>\n  );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n","import type { FormHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = FormHTMLAttributes<HTMLFormElement> & {\n  inline?: boolean;\n  // Increases margin between form fields to make room for error messages.\n  // This prevents the form from shifting when rendering a field error.\n  // This may be desired when the form contains external links that will\n  // shift while clicking if the form shifts from validation.\n  hasIncreasedErrorMargin?: boolean;\n  'data-test-id'?: string;\n};\n\nconst Form = (props: FormProps) => {\n  const {\n    className,\n    inline,\n    children,\n    hasIncreasedErrorMargin,\n    'data-test-id': testId = 'form',\n    ...rest\n  } = props;\n\n  const classes = cx(\n    styles.form,\n    className,\n    inline && styles.formInline,\n    !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin\n  );\n\n  return (\n    <form {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </form>\n  );\n};\n\nexport { Form };\nexport type { FormProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = HTMLAttributes<HTMLFieldSetElement> & {\n  name?: string | string[];\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  'data-test-id'?: string;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n  const {\n    className,\n    name,\n    ignoreValidation,\n    isInvalid,\n    children,\n    'data-test-id': testId = 'form-group',\n    ...rest\n  } = props;\n\n  const classes = cx(\n    styles.formGroup,\n    className,\n    !ignoreValidation && isInvalid && styles.isInvalid\n  );\n\n  return (\n    <fieldset className={classes} data-test-id={testId} {...rest}>\n      {children}\n    </fieldset>\n  );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n","import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = HTMLAttributes<HTMLDivElement> & {\n  'data-test-id'?: string;\n};\n\nconst FormHint = ({\n  className,\n  children,\n  'data-test-id': testId = 'form-hint',\n  ...rest\n}: FormHintProps) => {\n  const classes = cx(styles.hint, className);\n\n  return (\n    <div {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n","import { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype FormFieldProps = {\n  isRequired: boolean;\n  label?: string;\n  name: string;\n  htmlFor: string;\n  hint?: string;\n  errorMessage?: string;\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  children: JSX.Element;\n  className?: string;\n  onBlur?: (field: string) => void;\n  'data-test-id'?: string;\n};\n\nconst FormField = ({\n  isRequired,\n  label,\n  name,\n  htmlFor,\n  hint,\n  errorMessage,\n  ignoreValidation,\n  isInvalid,\n  children,\n  className,\n  onBlur,\n  'data-test-id': testId = 'form-field',\n}: FormFieldProps) => {\n  const handleBlur = () => {\n    onBlur && onBlur(name);\n  };\n\n  return (\n    <FormGroup\n      className={cx(styles.field, className)}\n      name={name}\n      ignoreValidation={ignoreValidation}\n      isInvalid={isInvalid}\n      onBlur={handleBlur}\n      data-test-id={testId}\n    >\n      {label && (\n        <label htmlFor={htmlFor}>\n          {label}\n          {isRequired && <RequiredAsterisk />}\n        </label>\n      )}\n      {hint && <FormHint className={styles.hint}>{hint}</FormHint>}\n      {children}\n      <FieldError className={styles.fieldErrorMessage} name={name} errorMessage={errorMessage} />\n    </FormGroup>\n  );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = HTMLAttributes<HTMLDivElement> & {\n  icon(args: IconProps): JSX.Element;\n  children: JSX.Element | JSX.Element[];\n  'data-test-id'?: string;\n};\n\nconst IconField = ({\n  icon,\n  children,\n  className,\n  'data-test-id': testId = 'icon-field',\n  ...rest\n}: IconFieldProps) => {\n  const Icon = icon;\n\n  const classes = cx(styles.iconField, className);\n\n  return (\n    <div className={classes} data-test-id={testId} {...rest}>\n      {children}\n      <Icon size=\"small\" className={styles.iconFieldIcon} />\n    </div>\n  );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n","import type { CSSProperties, InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {\n  labelClassName?: string;\n  labelStyle?: CSSProperties;\n  'data-test-id'?: string;\n};\n\nconst Radio = ({\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  checked = false,\n  children,\n  className,\n  disabled = false,\n  id,\n  labelClassName,\n  labelStyle,\n  'data-test-id': testId = 'radio',\n  ...rest\n}: RadioProps) => {\n  const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n  if (!children && !hasAriaLabel) {\n    console.warn(\n      'If you do not provide children, you must specify an aria-label for accessibility'\n    );\n  }\n\n  return (\n    <>\n      <input\n        {...rest}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={cx(styles.radio, className)}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        data-test-id={testId}\n        type=\"radio\"\n      />\n      <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n        {disabled ? <span className={styles.labelDisabled}>{children}</span> : children}\n      </Label>\n    </>\n  );\n};\n\nexport { Radio };\nexport type { RadioProps };\n","import type { ChangeEvent, FormEvent, ReactElement, ReactNode } from 'react';\n\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\n\ntype RadioGroupProps = {\n  /**\n   * The legend that describes this groups of radio buttons. The legend\n   * is important for screen reader users.\n   */\n  legend?: string;\n  /**\n   * The children passed into the RadioGroup.\n   */\n  children?: ReactNode;\n  /**\n   * Custom classname(s) passed to the fieldset inner div.\n   */\n  className?: string;\n  /**\n   * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n   */\n  disabled?: boolean;\n  /**\n   * The RadioGroup's id.\n   */\n  id?: string;\n  /**\n   * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n   */\n  name: string;\n  /**\n   * This function is passed into each Radio onChange synthetic event handler.\n   */\n  onChange?(e: ChangeEvent | FormEvent<HTMLInputElement>): void;\n  /**\n   * The value to compare against the Radio's value to determine if the Radio will be checked.\n   */\n  value: string;\n\n  'data-test-id'?: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n  const {\n    name,\n    value,\n    onChange,\n    children,\n    disabled,\n    legend,\n    'data-test-id': testId = 'radio-group',\n    ...rest\n  } = props;\n  const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n  function updateRadioElems(elem: ReactNode): ReactNode {\n    if (!isValidElement(elem)) {\n      return elem;\n    }\n\n    const item = elem as ReactElement;\n\n    if (item?.type && item.type === Radio) {\n      return cloneElement(item, {\n        ...item.props,\n        name,\n        checked: item.props.value === value,\n        onChange,\n        disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n      });\n    }\n\n    if (item?.type && item.type === Label) {\n      return cloneElement(item, {\n        ...item.props,\n        onChange,\n        disabled,\n      });\n    }\n\n    const elemChildren = item?.props?.children;\n    if (elemChildren) {\n      if (Array.isArray(elemChildren)) {\n        return cloneElement(item, {\n          children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n        });\n      }\n      return cloneElement(item, {\n        children: updateRadioElems(elemChildren),\n      });\n    }\n\n    if (item?.type && item.type !== Radio && item.type !== Label) {\n      return item;\n    }\n\n    return null;\n  }\n\n  const radios = Children.map(children, (child) => updateRadioElems(child));\n  return (\n    <fieldset data-test-id={testId} ref={fieldsetRef}>\n      {legend && (\n        <legend>\n          <VisuallyHidden>{legend}</VisuallyHidden>\n        </legend>\n      )}\n      <div {...rest}>{radios}</div>\n    </fieldset>\n  );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n","import type { SelectHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectProps = SelectHTMLAttributes<HTMLSelectElement> & {\n  'data-test-id'?: string;\n};\n\nconst Select = ({\n  className,\n  children,\n  'data-test-id': testId = 'select',\n  ...rest\n}: SelectProps) => {\n  const classes = cx(styles.formInput, className);\n\n  return (\n    <select {...rest} data-test-id={testId} className={classes}>\n      {children}\n    </select>\n  );\n};\n\nexport { Select };\nexport type { SelectProps };\n","import type { KeyboardEvent, TextareaHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {\n  'data-test-id'?: string;\n};\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  ({ className, 'data-test-id': testId = 'text-area', ...props }, ref) => {\n    const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {\n      if (\n        e.key === 'ArrowRight' ||\n        e.key === 'ArrowDown' ||\n        e.key === 'ArrowUp' ||\n        e.key === 'ArrowLeft'\n      ) {\n        e.stopPropagation();\n      }\n      if (e.key === 'Escape') {\n        e.nativeEvent.stopImmediatePropagation();\n      }\n    };\n\n    return (\n      <textarea\n        {...props}\n        className={cx(styles.formInput, className)}\n        ref={ref}\n        data-test-id={testId}\n        aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n);\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],"names":["RequiredAsterisk","className","testId","rest","classes","cx","styles","requiredAsterisk","Label","disabled","children","required","optional","label","labelDisabled","labelOptional","_jsx","Checkbox","forwardRef","ariaLabel","ariaLabelledby","checked","labelClassName","ref","hasAriaLabel","undefined","console","warn","checkbox","displayName","TextField","type","tiny","readOnly","tabIndex","suffix","overrideWidth","formInput","formInputTiny","suffixContainer","createFieldErrorId","id","width","CompactTextField","needsErrorFeedback","value","onFocus","onBlur","isActive","setIsActive","useState","toString","trim","length","isActiveState","compactTextField","placeholder","handleFocus","event","handleBlur","target","FieldError","name","errorMessage","fieldError","FieldSet","fieldSet","Form","props","inline","hasIncreasedErrorMargin","form","formInline","formIncreasedErrorMargin","FormGroup","ignoreValidation","isInvalid","formGroup","FormHint","hint","FormField","isRequired","htmlFor","field","_jsxs","fieldErrorMessage","IconField","icon","Icon","iconField","iconFieldIcon","Radio","labelStyle","_Fragment","radio","RadioGroup","onChange","legend","fieldsetRef","useRef","updateRadioElems","elem","isValidElement","item","cloneElement","elemChildren","Array","isArray","Children","map","elemChild","radios","child","VisuallyHidden","Select","TextArea","onKeyDown","e","key","stopPropagation","nativeEvent","stopImmediatePropagation"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,mBAAmB,CAAC;AAAA,EACxBC;AAAAA,EACA,gBAAgBC,SAAS;AAAA,KACtBC;AAHqB,MAIG;AAC3B,QAAMC,UAAUC,QAAAA,GAAGC,OAAOC,kBAAkBN,SAA1B;AAElB;OACYE;AAAAA,IAAM,gBAAcD;AAAAA,IAAQ,WAAWE;AAAAA,IAAjD,UAAA;AAAA,EAAA,CADF;AAKD;ACRD,MAAMI,QAAQ,CAAC;AAAA,EACbC;AAAAA,EACAR;AAAAA,EACAS;AAAAA,EACAC,WAAW;AAAA,EACXC,WAAW;AAAA,EACX,gBAAgBV,SAAS;AAAA,KACtBC;AAPU,MAQG;AAChB,QAAMC,UAAUC,QAAGC,GAAAA,OAAOO,OAAOZ,WAAWQ,YAAYH,OAAOQ,aAA7C;AAElB;OACaX;AAAAA,IAAM,gBAAcD;AAAAA,IAAQ,WAAWE;AAAAA,IAAlD,UAAA,CACGM,UACAE,YAAY,CAACD,2CAAY,SAAA;AAAA,MAAO,WAAWL,OAAOS;AAAAA,MAAzB,UAAA;AAAA,IAAA,CAF5B,GAGGJ,YAAY,CAACC,YAAaI,2BAAAA,IAAA,kBAH7B,CAAA,CAAA,CAAA;AAAA,EAAA,CADF;AAOD;ACjBKC,MAAAA,WAAWC,iBACf,CACE;AAAA,EACE,cAAcC;AAAAA,EACd,mBAAmBC;AAAAA,EACnBV;AAAAA,EACAD;AAAAA,EACAY;AAAAA,EACAC;AAAAA,EACA,gBAAgBpB,SAAS;AAAA,KACtBC;AARL,GAUAoB,QACG;AACGC,QAAAA,eAAeL,cAAcM,UAAaL,mBAAmBK;AAC/D,MAAA,CAACf,YAAY,CAACc,cAAc;AAC9BE,YAAQC,KACN,kFADF;AAAA,EAGD;AAED,yCACG,OAAD;AAAA,IAAO,WAAWL;AAAAA,IAAlB,UAAA,CACEN,2BAAA;SACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAckB,UAAU,SAAS;AAAA,MACjC,cAAYF;AAAAA,MACZ,mBAAiBC;AAAAA,MACjB,WAAWd,OAAOsB;AAAAA,MAClB;AAAA,MACA,MAAK;AAAA,MACL,gBAAc1B;AAAAA,IAVhB,CAAA,GAWG,KACFO,0CAAW,QAAA;AAAA,MAAM,WAAWH,OAAOQ;AAAAA,MAAxB;AAAA,IAAA,CAAA,IAA2DJ,QAbzE;AAAA,EAAA,CADF;AAiBD,CAtCwB;AAyC3BO,SAASY,cAAc;ACtDvB,MAAM,qBAAqB,CAAC,oBAC1B,kBAAkB,GAAG,CAAC,GAAG,eAAe,EAAE,KAAK,EAAE,UAAU;ACYvDC,MAAAA,YAAYZ,iBAChB,CACE;AAAA,EACEjB;AAAAA,EACA8B,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC;AAAAA,EACAC,WAAW;AAAA,EACXC,QAAAA;AAAAA,EACAC;AAAAA,EACA,gBAAgBlC,SAAS;AAAA,KACtBC;AATL,GAWAoB,QACG;AACGnB,QAAAA,UAAUgC,gBACZnC,YACAI,WAAGC,OAAO+B,WAAWL,QAAQ1B,OAAOgC,eAAerC,SAAjD;AAEN,MAAIkC,SAAQ;AACV,2CACE,OAAA;AAAA,MAAK,WAAW7B,OAAOiC;AAAAA,MAAvB,UAAA,CACEvB,2BAAA;WACMb;AAAAA,QACJ;AAAA,QACA,gBAAcD;AAAAA,QACd,WAAWE;AAAAA,QACX;AAAA,QACA;AAAA,QACA,oBAAkBD,KAAK,uBAAuBqC,mBAAmBrC,KAAKsC,EAAN;AAAA,MAAA,CAPlE,GASAzB,2BAAA,IAAA,SAAA;AAAA,QAAO,WAAWV,OAAO6B;AAAAA,QAAQ,SAAShC,KAAKsC;AAAAA,QAA/C,UACGN;AAAAA,MAAAA,CAXL,CAAA;AAAA,IAAA,CADF;AAAA,EAgBD;AAED;OAEQhC;AAAAA,IACJ;AAAA,IACA,WAAWC;AAAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAcF;AAAAA,IACd,OACEkC,gBACI;AAAA,MACEM,OAAON;AAAAA,IAETX,IAAAA;AAAAA,IAEN,oBAAkBtB,KAAK,uBAAuBqC,mBAAmBrC,KAAKsC,EAAN;AAAA,EAAA,CAhBpE;AAmBD,CAzDyB;AA4D5BX,UAAUD,cAAc;AC5DlBc,MAAAA,mBAAmBzB,iBACvB,CACE;AAAA,EACEjB;AAAAA,EACAwC;AAAAA,EACA5B,OAAAA;AAAAA,EACA+B;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,gBAAgB7C,SAAS;AAAA,KACtBC;AATL,GAWAoB,QACG;AACH,QAAM,CAACyB,WAAUC,WAAX,IAA0BC,MAAAA,UAC7B,OAAOL,UAAU,aAAaA,QAAQA,MAAMM,aAAa,IAAIC,KAAOC,EAAAA,WAAW,CAD1C;AAIxC,QAAMC,gBAAgBN,aAAYJ;AAElC,QAAMxC,UAAUC,QAAGC,GAAAA,OAAOiD,kBAAkBtD,WAAWqD,iBAAiBhD,OAAO0C,QAA7D;AAEZQ,QAAAA,cAAcF,gBAAgB,KAAKzC;AAEnC4C,QAAAA,cAAc,CAACC,UAAwC;AAC3DT,gBAAY,IAAD;AACX,QAAIH,SAAS;AACXA,cAAQY,KAAD;AAAA,IACR;AAAA,EAAA;AAGGC,QAAAA,aAAa,CAACD,UAAwC;AACpDb,UAAAA,SAAQa,MAAME,OAAOf,SAAS;AACpCI,gBAAYJ,OAAMO,KAAOC,EAAAA,WAAW,CAAzB;AACX,QAAIN,QAAQ;AACVA,aAAOW,KAAD;AAAA,IACP;AAAA,EAAA;AAGH,yCACE,OAAA;AAAA,IAAK,WAAWtD;AAAAA,IAAS,gBAAcF;AAAAA,IAAvC,UAAA,CACEc,2BAAA,IAAC,OAAD;AAAA,MAAO,SAASyB;AAAAA,MAAhB,UAAqB5B;AAAAA,IAAAA,CAArB,GACAG,2BAAA,IAAC,WAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAASsD;AAAAA,MACT,QAAQE;AAAAA,IAAAA,CATZ,CAAA;AAAA,EAAA,CADF;AAcD,CAtDgC;AAyDnChB,iBAAiBd,cAAc;AC1D/B,MAAMgC,aAAa,CAAC;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA9D;AAAAA,EACA,gBAAgBC,SAAS;AAAA,KACtBC;AALe,MAMG;AACrB,MAAI,CAAC4D,cAAc;AACV,WAAA;AAAA,EACR;AAED;OAEQ5D;AAAAA,IACJ,WAAWE,QAAAA,GAAGC,OAAO0D,YAAY/D,SAApB;AAAA,IACb,aAAU;AAAA,IACV,gBAAcC;AAAAA,IACd,IAAIsC,mBAAmBsB,IAAD;AAAA,IALxB,UAOI,WAAUC;AAAAA,EAAAA,CARhB;AAWD;AC1BD,MAAME,WAAW,CAAC;AAAA,EAChBvD;AAAAA,EACAT;AAAAA,EACA,gBAAgBC,SAAS;AAAA,KACtBC;AAJa,MAKG;AACnB,QAAMC,UAAUC,QAAAA,GAAGC,OAAO4D,UAAUjE,SAAlB;AAElB,wCACE,YAAA;AAAA,IAAU,gBAAcC;AAAAA,IAAQ,WAAWE;AAAAA,IAA3C,GAAwDD;AAAAA,IAAxD;AAAA,EAAA,CADF;AAKD;ACPKgE,MAAAA,OAAO,CAACC,UAAqB;AAC3B,QAAA;AAAA,IACJnE;AAAAA,IACAoE;AAAAA,IACA3D;AAAAA,IACA4D;AAAAA,IACA,gBAAgBpE,SAAS;AAAA,OACtBC;AAAAA,EACDiE,IAAAA;AAEJ,QAAMhE,UAAUC,QAAAA,GACdC,OAAOiE,MACPtE,WACAoE,UAAU/D,OAAOkE,YACjB,CAAC,CAACF,2BAA2BhE,OAAOmE,wBAJpB;AAOlB;OACYtE;AAAAA,IAAM,gBAAcD;AAAAA,IAAQ,WAAWE;AAAAA,IAAjD;AAAA,EAAA,CADF;AAKD;ACzBKsE,MAAAA,YAAY,CAACN,UAA0B;AACrC,QAAA;AAAA,IACJnE;AAAAA,IACA6D;AAAAA,IACAa;AAAAA,IACAC,WAAAA;AAAAA,IACAlE;AAAAA,IACA,gBAAgBR,SAAS;AAAA,OACtBC;AAAAA,EACDiE,IAAAA;AAEEhE,QAAAA,UAAUC,QAAAA,GACdC,OAAOuE,WACP5E,WACA,CAAC0E,oBAAoBC,cAAatE,OAAOsE,SAHzB;AAMlB,wCACE,YAAA;AAAA,IAAU,WAAWxE;AAAAA,IAAS,gBAAcF;AAAAA,IAA5C,GAAwDC;AAAAA,IAAxD;AAAA,EAAA,CADF;AAKD;ACzBD,MAAM2E,WAAW,CAAC;AAAA,EAChB7E;AAAAA,EACAS;AAAAA,EACA,gBAAgBR,SAAS;AAAA,KACtBC;AAJa,MAKG;AACnB,QAAMC,UAAUC,QAAAA,GAAGC,OAAOyE,MAAM9E,SAAd;AAElB;OACWE;AAAAA,IAAM,gBAAcD;AAAAA,IAAQ,WAAWE;AAAAA,IAAhD;AAAA,EAAA,CADF;AAKD;ACAD,MAAM4E,YAAY,CAAC;AAAA,EACjBC;AAAAA,EACApE,OAAAA;AAAAA,EACAiD;AAAAA,EACAoB;AAAAA,EACAH,MAAAA;AAAAA,EACAhB;AAAAA,EACAY;AAAAA,EACAC,WAAAA;AAAAA,EACAlE;AAAAA,EACAT;AAAAA,EACA8C;AAAAA,EACA,gBAAgB7C,SAAS;AAZR,MAaG;AACpB,QAAMyD,aAAa,MAAM;AACvBZ,cAAUA,OAAOe,IAAD;AAAA,EAAA;AAGlB,yCACG,WAAD;AAAA,IACE,WAAWzD,QAAAA,GAAGC,OAAO6E,OAAOlF,SAAf;AAAA,IACb;AAAA,IACA;AAAA,IACA,WAAA2E;AAAA,IACA,QAAQjB;AAAAA,IACR,gBAAczD;AAAAA,IANhB,UAAA,CAQGW,UACCuE,2BAAA,KAAA,SAAA;AAAA,MAAO;AAAA,MAAP,UAAA,CACGvE,QACAoE,6CAAe,kBAFlB,CAAA,CAAA,CAAA;AAAA,IAAA,CAAA,GAKDF,SAAQ/D,2BAAA,IAAC,UAAD;AAAA,MAAU,WAAWV,OAAOyE;AAAAA,MAA5B,UAAmCA;AAAAA,IAAAA,CAAnC,GACRrE,UACDM,2BAAA,IAAC,YAAD;AAAA,MAAY,WAAWV,OAAO+E;AAAAA,MAAmB;AAAA,MAAY;AAAA,IAAA,CAhB/D,CAAA;AAAA,EAAA,CADF;AAoBD;AChDD,MAAMC,YAAY,CAAC;AAAA,EACjBC;AAAAA,EACA7E;AAAAA,EACAT;AAAAA,EACA,gBAAgBC,SAAS;AAAA,KACtBC;AALc,MAMG;AACpB,QAAMqF,OAAOD;AAEb,QAAMnF,UAAUC,QAAAA,GAAGC,OAAOmF,WAAWxF,SAAnB;AAElB,yCACE,OAAA;AAAA,IAAK,WAAWG;AAAAA,IAAS,gBAAcF;AAAAA,IAAvC,GAAmDC;AAAAA,IAAnD,UACGO,CAAAA,UACDM,2BAAA,IAAC,MAAD;AAAA,MAAM,MAAK;AAAA,MAAQ,WAAWV,OAAOoF;AAAAA,IAAAA,CAFvC,CAAA;AAAA,EAAA,CADF;AAMD;ACjBD,MAAMC,QAAQ,CAAC;AAAA,EACb,cAAcxE;AAAAA,EACd,mBAAmBC;AAAAA,EACnBC,UAAU;AAAA,EACVX;AAAAA,EACAT;AAAAA,EACAQ,WAAW;AAAA,EACXgC;AAAAA,EACAnB;AAAAA,EACAsE;AAAAA,EACA,gBAAgB1F,SAAS;AAAA,KACtBC;AAXU,MAYG;AACVqB,QAAAA,eAAeL,cAAcM,UAAaL,mBAAmBK;AAE/D,MAAA,CAACf,YAAY,CAACc,cAAc;AAC9BE,YAAQC,KACN,kFADF;AAAA,EAGD;AAED,yCACEkE,WAAAA,UAAA;AAAA,IAAA,UAAA,CACE7E,2BAAA;SACMb;AAAAA,MACJ,cAAYgB;AAAAA,MACZ,mBAAiBC;AAAAA,MACjB,WAAWf,QAAAA,GAAGC,OAAOwF,OAAO7F,SAAf;AAAA,MACb;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAcC;AAAAA,MACd,MAAK;AAAA,IAAA,CAVT,GAYEc,2BAAA,IAAC,OAAD;AAAA,MAAO,WAAWM;AAAAA,MAAgB,SAASmB;AAAAA,MAAI,OAAOmD;AAAAA,MAAtD,UACGnF,WAAWO,2BAAA,IAAA,QAAA;AAAA,QAAM,WAAWV,OAAOQ;AAAAA,QAAxB;AAAA,MAAA,CAAA,IAA2DJ;AAAAA,IAAAA,CAb3E,CAAA;AAAA,EAAA,CADF;AAkBD;ACNKqF,MAAAA,aAAa,CAAC3B,UAA2B;AACvC,QAAA;AAAA,IACJN;AAAAA,IACAjB;AAAAA,IACAmD;AAAAA,IACAtF;AAAAA,IACAD;AAAAA,IACAwF;AAAAA,IACA,gBAAgB/F,SAAS;AAAA,OACtBC;AAAAA,EACDiE,IAAAA;AACE8B,QAAAA,cAAcC,aAA4B,IAAtB;AAE1B,WAASC,iBAAiBC,MAA4B;;AAChD,QAAA,CAACC,MAAAA,eAAeD,IAAD,GAAQ;AAClBA,aAAAA;AAAAA,IACR;AAED,UAAME,OAAOF;AAEb,SAAIE,6BAAMxE,SAAQwE,KAAKxE,SAAS4D,OAAO;AACrC,aAAOa,MAAAA,aAAaD,MAAM;AAAA,QACxB,GAAGA,KAAKnC;AAAAA,QACRN;AAAAA,QACAzC,SAASkF,KAAKnC,MAAMvB,UAAUA;AAAAA,QAC9BmD;AAAAA,QACAvF,UAAU,SAAO8F,UAAKnC,UAALmC,mBAAY9F,cAAa,cAAc8F,KAAKnC,MAAM3D,WAAWA;AAAAA,MAAAA,CAL7D;AAAA,IAOpB;AAED,SAAI8F,6BAAMxE,SAAQwE,KAAKxE,SAASvB,OAAO;AACrC,aAAOgG,MAAAA,aAAaD,MAAM;AAAA,QACxB,GAAGA,KAAKnC;AAAAA,QACR4B;AAAAA,QACAvF;AAAAA,MAAAA,CAHiB;AAAA,IAKpB;AAEKgG,UAAAA,gBAAeF,kCAAMnC,UAANmC,mBAAa7F;AAClC,QAAI+F,cAAc;AACZC,UAAAA,MAAMC,QAAQF,YAAd,GAA6B;AAC/B,eAAOD,MAAAA,aAAaD,MAAM;AAAA,UACxB7F,UAAUkG,MAASC,SAAAA,IAAIJ,cAAeK,CAAcV,cAAAA,iBAAiBU,SAAD,CAA1D;AAAA,QAAA,CADO;AAAA,MAGpB;AACD,aAAON,MAAAA,aAAaD,MAAM;AAAA,QACxB7F,UAAU0F,iBAAiBK,YAAD;AAAA,MAAA,CADT;AAAA,IAGpB;AAED,SAAIF,6BAAMxE,SAAQwE,KAAKxE,SAAS4D,SAASY,KAAKxE,SAASvB,OAAO;AACrD+F,aAAAA;AAAAA,IACR;AAEM,WAAA;AAAA,EACR;AAED,QAAMQ,SAASH,MAASC,SAAAA,IAAInG,UAAWsG,CAAUZ,UAAAA,iBAAiBY,KAAD,CAAlD;AACf,yCACE,YAAA;AAAA,IAAU,gBAAc9G;AAAAA,IAAQ,KAAKgG;AAAAA,IAArC,UAAA,CACGD,UACCjF,2BAAA,IAAA,UAAA;AAAA,MAAA,yCACGiG,+BAAD;AAAA,QAAA,UAAiBhB;AAAAA,MAAAA,CAAjB;AAAA,IAAA,CAHN,GAMEjF,2BAAA;SAASb;AAAAA,MAAT,UAAgB4G;AAAAA,IAAAA,CANlB,CAAA;AAAA,EAAA,CADF;AAUD;ACxGD,MAAMG,SAAS,CAAC;AAAA,EACdjH;AAAAA,EACAS;AAAAA,EACA,gBAAgBR,SAAS;AAAA,KACtBC;AAJW,MAKG;AACjB,QAAMC,UAAUC,QAAAA,GAAGC,OAAO+B,WAAWpC,SAAnB;AAElB;OACcE;AAAAA,IAAM,gBAAcD;AAAAA,IAAQ,WAAWE;AAAAA,IAAnD;AAAA,EAAA,CADF;AAKD;ACXK+G,MAAAA,WAAWjG,iBACf,CAAC;AAAA,EAAEjB;AAAAA,EAAW,gBAAgBC,SAAS;AAAA,KAAgBkE;AAAtD,GAA+D7C,QAAQ;AAChE6F,QAAAA,YAAY,CAACC,MAA0C;AAEzDA,QAAAA,EAAEC,QAAQ,gBACVD,EAAEC,QAAQ,eACVD,EAAEC,QAAQ,aACVD,EAAEC,QAAQ,aACV;AACAD,QAAEE,gBAAF;AAAA,IACD;AACGF,QAAAA,EAAEC,QAAQ,UAAU;AACtBD,QAAEG,YAAYC;IACf;AAAA,EAAA;AAGH;OAEQrD;AAAAA,IACJ,WAAW/D,QAAAA,GAAGC,OAAO+B,WAAWpC,SAAnB;AAAA,IACb;AAAA,IACA,gBAAcC;AAAAA,IACd,oBAAkBkE,MAAM,uBAAuB5B,mBAAmB4B,MAAM3B,EAAP;AAAA,IACjE;AAAA,EAAA,CAPJ;AAUD,CA1BwB;AA6B3B0E,SAAStF,cAAc;;;;;;;;;;;;;;;;;"}

package/dist/style.css

@@ -1,102 +1,107 @@
-.RequiredAsterisk {
-  color: var(--color-system-red-700);
-}
-.Form-group {
+._formGroup_1w090_1 {
   margin: 2rem 0;
+  padding: 0;
+  border: none;
 }
 
-/* The margin for .Form-group and the min-height of .Form-fieldError
+/* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 
-.Form--increasedErrorMargin .Form-group {
+._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1 {
   margin: 2.8rem 0;
 }
 
-.Form--inline .Form-group {
+._formInline_1w090_13 ._formGroup_1w090_1 {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
 }
 
-.Form .Form-group:first-child {
+._form_1w090_1 ._formGroup_1w090_1:first-child {
   margin-top: 0;
 }
 
-.Form .Form-group:last-child {
+._form_1w090_1 ._formGroup_1w090_1:last-child {
   margin-bottom: 0;
 }
 
-.Form--inline .Form-group + .Form-group,
-.Form--inline .Form-group + .Button {
+._inlineForm_1w090_27 ._formGroup_1w090_1 + ._formGroup_1w090_1,
+._inlineForm_1w090_27 ._formGroup_1w090_1 + .Button {
   margin-left: 1rem;
 }
 
-.Form-label {
+._label_1w090_32 {
   font-size: 1.3rem;
   font-family: var(--font-family-base);
   word-break: break-word;
 }
 
-.Form-label--disabled {
+._labelDisabled_1w090_38 {
   color: var(--color-gray-800);
 }
 
-.Form-labelOptional {
+._labelOptional_1w090_42 {
   margin-left: 0.4em;
   color: var(--color-text-subtle-primary);
   fill: var(--color-text-subtle-primary);
 }
 
-.Form-group .Form-label {
+._compactTextField_1w090_48 ._label_1w090_32 {
+  position: absolute;
+  top: -2px;
+  left: 10px;
+  padding: 0 3px;
+  color: var(--color-text);
+  opacity: 0;
+  pointer-events: none;
+  background-color: var(--color-background);
+  transform-origin: 0 0; /* preserve left alignment after scaling */
+  transition: all 100ms ease-in-out;
+  z-index: 1; /* Fixes layout issue in Firefox */
+}
+
+._formGroup_1w090_1 ._label_1w090_32 {
   display: flex;
   align-items: center;
   margin-bottom: 0.2rem;
 }
 
-.u-d-inline .Form-label + .Form-label {
-  margin-left: 1rem;
-}
-
-.Form-group .Form-label + .Form-label {
+._formGroup_1w090_1 ._label_1w090_32 + ._label_1w090_32 {
   margin-top: 0.5rem;
 }
 
-.Form .Form-error {
-  background: var(--color-system-red-600);
-  color: var(--color-white);
-  font-weight: var(--font-weight-regular);
-  padding: 0.7rem 1.4rem;
-  border-radius: var(--border-radius);
-}
-
-.Form-fieldError {
+._fieldError_1w090_72 {
   color: var(--color-system-red-600);
   font-size: 1.3rem;
 }
 
-/* The margin for .Form-group and the min-height of .Form-fieldError
+/* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 
-.Form--increasedErrorMargin .Form-fieldError {
+._formIncreasedErrorMargin_1w090_9 ._fieldError_1w090_72 {
   min-height: 2.8rem;
 }
 
-.Form-label .Form-fieldError {
+._label_1w090_32 ._fieldError_1w090_72 {
   float: right;
 }
 
-.Form:not(.Form--inline) .Form-fieldError {
+._form_1w090_1:not(._inlineForm_1w090_27) ._fieldError_1w090_72 {
   display: block;
   padding-top: 0.5rem;
   text-align: left;
 }
 
-.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {
+._formIncreasedErrorMargin_1w090_9:not(._inlineForm_1w090_27) ._fieldError_1w090_72 {
   padding-top: 0.1rem;
   padding-bottom: 0.5rem;
 }
 
-.Form .is-invalid .Form-label {
+._iconField_1w090_98 ._formInput_1w090_98 {
+  padding-left: 3rem;
+}
+
+._form_1w090_1 ._isInvalid_1w090_102 ._label_1w090_32 {
   color: var(--color-system-red-600);
 }
 
@@ -108,26 +113,56 @@
   color: var(--color-gray-600);
 }
 
-.Form .is-invalid .Select-control,
-.Form .is-invalid .CustomSelect > div,
-.Form .is-invalid .FormInput {
+._form_1w090_1 ._isInvalid_1w090_102 .Select-control,
+._form_1w090_1 ._isInvalid_1w090_102 .CustomSelect > div,
+._form_1w090_1 ._isInvalid_1w090_102 ._formInput_1w090_98 {
   border-color: var(--color-system-red-600);
 }
 
-.Form--increasedErrorMargin .Form-group.is-invalid {
+._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1._isInvalid_1w090_102 {
   margin-bottom: 0;
 }
 
-.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {
+._formIncreasedErrorMargin_1w090_9 ._formGroup_1w090_1._isInvalid_1w090_102 + ._formGroup_1w090_1 {
   margin-top: 0;
 }
 
-.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {
+._hint_1w090_124 {
+  display: block;
+  margin-top: 0.3rem;
+  font-size: 1.3rem;
+  font-weight: var(--font-weight-regular);
+  color: var(--color-text-subtle-primary);
+}
+
+._field_1w090_72 ._hint_1w090_124 {
+  margin: 0;
+  font-size: 1.3rem;
+  color: var(--color-text-subtle-primary);
+  fill: var(--color-text-subtle-primary);
+}
+
+._form_1w090_1 ._field_1w090_72 label,
+._form_1w090_1 ._field_1w090_72 ._isInvalid_1w090_102 label {
+  color: var(--color-text);
+}
+
+._fieldErrorMessage_1w090_144 {
+  color: var(--color-system-red-600);
+  font-size: 1.3rem;
+}
+
+._field_1w090_72._formGroup_1w090_1 {
+  margin: 1rem 0;
+}
+
+._field_1w090_72._formGroup_1w090_1:first-child {
   margin-top: 0;
 }
+
 /* stylelint-disable no-descending-specificity */
 
-.FormInput {
+._formInput_1w090_98 {
   display: block;
   width: 100%;
   padding: 0.6rem 1rem;
@@ -139,54 +174,51 @@
   border: 1px solid var(--color-gray-500);
   border-radius: var(--border-radius);
   transition: all 100ms linear;
+  height: 3.2rem;
 }
 
-.FormInput:-moz-placeholder-shown {
+._formInput_1w090_98:-moz-placeholder-shown {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-.FormInput:placeholder-shown {
+._formInput_1w090_98:placeholder-shown {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-input.FormInput,
-select.FormInput {
-  height: 3.2rem;
-}
-
-input.FormInput:-moz-read-only {
+input._formInput_1w090_98:-moz-read-only {
   background-color: var(--color-white-100);
 }
 
-.FormInput.is-disabled,
-input.FormInput:disabled,
-select.FormInput:disabled,
-input.FormInput:read-only {
+._formInput_1w090_98._isDisabled_1w090_179,
+input._formInput_1w090_98:disabled,
+select._formInput_1w090_98:disabled,
+input._formInput_1w090_98:read-only {
   background-color: var(--color-white-100);
 }
 
-.FormInput.is-disabled:hover,
-.FormInput:disabled:hover {
+._formInput_1w090_98._isDisabled_1w090_179:hover,
+._formInput_1w090_98:disabled:hover {
   cursor: not-allowed;
 }
 
-textarea.FormInput {
+textarea._formInput_1w090_98 {
   min-height: 2.5em;
+  height: auto;
   resize: none;
 }
 
-textarea.FormInput:-moz-read-only {
+textarea._formInput_1w090_98:-moz-read-only {
   background-color: var(--color-white-100);
 }
 
-textarea.FormInput:disabled,
-textarea.FormInput:read-only {
+textarea._formInput_1w090_98:disabled,
+textarea._formInput_1w090_98:read-only {
   background-color: var(--color-white-100);
 }
 
-input.FormInput::-webkit-autofill {
+input._formInput_1w090_98::-webkit-autofill {
   box-shadow: 0 0 0 50px var(--color-background-field) inset;
 }
 
@@ -219,37 +251,32 @@ input[type='checkbox']:disabled {
   pointer-events: none;
 }
 
-input.FormInput--tiny {
-  padding: 0.1rem 0.6rem;
-  height: 2.4rem;
-}
-
-.FormInput.is-focused,
-.FormInput:focus {
+._formInput_1w090_98._isFocused_1w090_233,
+._formInput_1w090_98:focus {
   outline: 0;
   border-color: var(--color-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-.FormInput[readonly],
-.FormInput[readonly]:focus {
+._formInput_1w090_98[readonly],
+._formInput_1w090_98[readonly]:focus {
   color: var(--color-text-subtle-primary);
   border-color: var(--color-gray-500);
   box-shadow: none;
 }
 
-.Form-checkbox {
-  align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */
+._checkbox_1w090_247 {
+  align-self: flex-start; /* Default for .label is center, but this looks bad on multi-line checkbox labels */
   flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */
   margin-right: 0.5rem;
   margin-top: 0.4rem;
 }
 
-.Form-radio {
+._radio_1w090_254 {
   margin-right: 0.5rem;
 }
 
-.FormInput-select {
+select._formInput_1w090_98 {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -261,11 +288,11 @@ input.FormInput--tiny {
   padding-right: 2rem;
 }
 
-.FormInput-number {
+._number_1w090_268 {
   min-width: 4.5rem;
 }
 
-.FormInput-suffixContainer {
+._suffixContainer_1w090_272 {
   display: inline-flex;
   border: 1px solid var(--color-gray-500);
   border-radius: var(--border-radius);
@@ -273,31 +300,31 @@ input.FormInput--tiny {
   transition: all 0.1s linear;
 }
 
-.FormInput-suffixContainer[focus-within] {
+._suffixContainer_1w090_272[focus-within] {
   border-color: var(--color-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-.FormInput-suffixContainer[focus-within] {
+._suffixContainer_1w090_272[focus-within] {
   border-color: var(--color-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-.FormInput-suffixContainer:focus-within {
+._suffixContainer_1w090_272:focus-within {
   border-color: var(--color-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-.FormInput-suffixContainer .FormInput {
+._suffixContainer_1w090_272 ._formInput_1w090_98 {
   border: none;
   border-radius: var(--border-radius) 0 0 var(--border-radius);
 }
 
-.FormInput-suffixContainer .FormInput:focus {
+._suffixContainer_1w090_272 ._formInput_1w090_98:focus {
   box-shadow: none;
 }
 
-.FormInput-suffixContainer label.FormInput-suffix {
+._suffixContainer_1w090_272 ._suffix_1w090_272 {
   padding: 0 2px;
   background-color: var(--color-gray-100);
   color: var(--color-gray-500);
@@ -308,8 +335,8 @@ input.FormInput--tiny {
   position: initial;
 }
 
-input.FormInput-suffix::-webkit-outer-spin-button,
-input.FormInput-suffix::-webkit-inner-spin-button {
+._suffix_1w090_272::-webkit-outer-spin-button,
+._suffix_1w090_272::-webkit-inner-spin-button {
   -webkit-appearance: none;
           appearance: none;
   margin: 0;
@@ -317,86 +344,49 @@ input.FormInput-suffix::-webkit-inner-spin-button {
 
 /* Firefox */
 
-input.FormInput-suffix[type='number'] {
+._suffix_1w090_272[type='number'] {
   -webkit-appearance: textfield;
      -moz-appearance: textfield;
           appearance: textfield;
 }
 
 /* stylelint-enable no-descending-specificity */
-.CompactTextField {
-  position: relative;
-  width: 100%;
-}
 
-.CompactTextField .Form-label {
+._iconFieldIcon_1w090_317 {
   position: absolute;
-  top: -2px;
-  left: 10px;
-  padding: 0 3px;
-  color: var(--color-text);
-  opacity: 0;
-  pointer-events: none;
-  background-color: var(--color-background);
-  transform-origin: 0 0; /* preserve left alignment after scaling */
-  transition: all 100ms ease-in-out;
-  z-index: 1; /* Fixes layout issue in Firefox */
+  fill: var(--color-gray-600);
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1rem;
 }
 
-.CompactTextField.is-active .Form-label {
-  border-radius: var(--border-radius);
-  opacity: 1;
-  pointer-events: auto;
-  transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
-}
-.FieldSet {
-  border: none;
-  margin: 2rem 0;
-  padding: 0;
-}
-.Form-hint {
-  display: block;
-  margin-top: 0.3rem;
-  font-size: 1.3rem;
-  font-weight: var(--font-weight-regular);
-  color: var(--color-text-subtle-primary);
-}
-.FormField-hint {
-  margin: 0;
-  font-size: 1.3rem;
-  color: var(--color-text-subtle-primary);
-  fill: var(--color-text-subtle-primary);
+._formInputTiny_1w090_325 {
+  padding: 0.1rem 0.6rem;
+  height: 2.4rem;
 }
 
-.Form .FormField .Form-label,
-.Form .FormField .is-invalid .Form-label {
-  color: var(--color-text);
+._iconField_1w090_98 {
+  position: relative;
 }
 
-.FormField-errorMessage {
-  color: var(--color-system-red-600);
-  font-size: 1.3rem;
+._requiredAsterisk_1w090_334 {
+  color: var(--color-system-red-700);
 }
 
-.FormField.Form-group {
-  margin: 1rem 0;
+._fieldSet_1w090_338 {
+  border: none;
+  margin: 2rem 0;
+  padding: 0;
 }
 
-.FormField.Form-group:first-child {
-  margin-top: 0;
-}
-.IconField {
+._compactTextField_1w090_48 {
   position: relative;
+  width: 100%;
 }
 
-.IconField .FormInput {
-  padding-left: 3rem;
-}
-
-.FormInput ~ .Icon {
-  position: absolute;
-  fill: var(--color-gray-600);
-  top: 50%;
-  transform: translateY(-50%);
-  left: 1rem;
+._compactTextField_1w090_48._isActive_1w090_349 ._label_1w090_32 {
+  border-radius: var(--border-radius);
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
 }