@launchpad-ui/form 0.1.0 → 0.2.1

package/dist/index.es.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../scripts/react-shim.js", "../src/Checkbox.tsx", "../src/Label.tsx", "../src/RequiredAsterisk.tsx", "../src/CompactTextField.tsx", "../src/TextField.tsx", "../src/utils/index.ts", "../src/FieldError.tsx", "../src/FieldSet.tsx", "../src/Form.tsx", "../src/FormField.tsx", "../src/FormGroup.tsx", "../src/FormHint.tsx", "../src/IconField.tsx", "../src/InputGroup.tsx", "../src/Radio.tsx", "../src/RadioGroup.tsx", "../src/Select.tsx", "../src/TextArea.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n  /**\n   * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n   */\n  'aria-label'?: string;\n  /**\n   * id attribute of the label text elsewhere in the app, used for screen reader support\n   * Use this for cases where you have a visible label on the page that is not close to\n   * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Label for the Checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * The className to pass into the Checkbox's Label component\n   */\n  labelClassName?: string;\n  /**\n   * The test id for the data-test-id attribute for React Testing Library support\n   */\n  testId?: string;\n};\n\nclass Checkbox extends Component<CheckboxProps> {\n  inputRef: RefObject<HTMLInputElement>;\n\n  constructor(props: CheckboxProps) {\n    super(props);\n    this.inputRef = createRef();\n  }\n\n  value() {\n    return this.inputRef.current?.value;\n  }\n\n  checked() {\n    return this.inputRef.current?.checked;\n  }\n\n  render() {\n    const {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      children,\n      disabled,\n      testId,\n      checked,\n      labelClassName,\n      ...other\n    } = this.props;\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          {...other}\n          ref={this.inputRef}\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          data-test-id={testId}\n          type=\"checkbox\"\n        />{' '}\n        {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n      </Label>\n    );\n  }\n}\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\nexport type LabelProps = {\n  htmlFor?: string;\n  required?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  hidden?: boolean;\n};\n\nexport const Label = ({\n  htmlFor,\n  disabled,\n  className,\n  children,\n  required = false,\n  optional = false,\n  ...other\n}: LabelProps) => {\n  const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n  return (\n    <label {...other} className={classes} htmlFor={htmlFor}>\n      {children}\n      {optional && !required && <small className=\"Form-labelOptional u-subtle\">(optional)</small>}\n      {required && !optional && <RequiredAsterisk />}\n    </label>\n  );\n};\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n  testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n  const classes = cx('RequiredAsterisk');\n\n  return (\n    <span className={classes} data-test-id={testId} {...rest}>\n      *\n    </span>\n  );\n};\n\nexport { RequiredAsterisk };\n", "import cx from 'clsx';\nimport { isBoolean } from 'lodash-es';\nimport { Component, FocusEvent } from 'react';\n\nimport { Label } from './Label';\nimport { TextField, TextFieldProps } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n  label: string;\n  needsErrorFeedback?: boolean;\n};\n\nclass CompactTextField extends Component<CompactTextFieldProps, { isActive: boolean }> {\n  textField?: TextField | null;\n\n  constructor(props: CompactTextFieldProps) {\n    super(props);\n    const value = props.value;\n\n    this.state = {\n      isActive: (isBoolean(value) || value ? value.toString() : '').trim().length !== 0,\n    };\n  }\n\n  render() {\n    const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;\n    const isActive = this.state.isActive || needsErrorFeedback;\n\n    const classes = cx('CompactTextField', className, {\n      'is-active': isActive,\n    });\n\n    const placeholder = isActive ? '' : label;\n\n    return (\n      <div className={classes}>\n        <Label htmlFor={id}>{label}</Label>\n        <TextField\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\n          placeholder={placeholder}\n          ref={(textField) => {\n            this.textField = textField;\n          }}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        />\n      </div>\n    );\n  }\n\n  handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    this.setState({ isActive: true });\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    const value = event.target.value || '';\n    this.setState({ isActive: value.trim().length !== 0 });\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n  };\n\n  value = () => (this.textField ? this.textField.value() : '');\n\n  focus = () => {\n    if (this.textField) {\n      this.textField.focus();\n    }\n  };\n}\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import cx from 'clsx';\nimport { Component, createRef, InputHTMLAttributes, RefObject } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  suffix?: string;\n  testId?: string;\n  tiny?: boolean;\n  overrideWidth?: string;\n};\n\nclass TextField extends Component<TextFieldProps> {\n  inputRef: RefObject<HTMLInputElement>;\n  constructor(props: TextFieldProps) {\n    super(props);\n    this.inputRef = createRef();\n  }\n\n  render() {\n    const {\n      className,\n      type = 'text',\n      tiny = false,\n      readOnly,\n      tabIndex = 0,\n      testId,\n      suffix,\n      overrideWidth,\n      ...rest\n    } = this.props;\n    const classes = overrideWidth\n      ? className\n      : cx('FormInput', `FormInput-${type}`, className, {\n          'FormInput--tiny': tiny,\n        });\n    if (suffix) {\n      return (\n        <div className=\"FormInput-suffixContainer\">\n          <input\n            {...rest}\n            type={type}\n            className={cx(classes, 'FormInput-suffix')}\n            readOnly={readOnly}\n            ref={this.inputRef}\n            data-test-id={testId}\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={this.inputRef}\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  getElement() {\n    return this.inputRef.current;\n  }\n\n  value() {\n    return this.inputRef.current?.value;\n  }\n\n  focus() {\n    this.inputRef.current?.focus();\n  }\n\n  blur() {\n    this.inputRef.current?.blur();\n  }\n\n  select() {\n    this.inputRef.current?.focus();\n  }\n}\n\nexport type { TextFieldProps };\nexport { TextField };\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 { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n  name: FieldPath;\n  errorMessage?: string;\n  className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n  if (!errorMessage) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cx('Form-fieldError', className)}\n      aria-live=\"polite\"\n      id={createFieldErrorId(name)}\n    >\n      {`Error - ${errorMessage}`}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n  children?: ReactNode;\n  testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n  return (\n    <fieldset className=\"FieldSet\" data-test-id={testId}>\n      {children}\n    </fieldset>\n  );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n  id?: string;\n  name?: string;\n  action?: string;\n  className?: string;\n  inline?: boolean;\n  method?: string;\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  onBlurCapture?(e: FocusEvent): void;\n  onSubmit?(e: FormEvent<EventTarget>): void;\n  ariaLabel?: string;\n  children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n    props;\n  const classes = cx('Form', className, {\n    'Form--inline': inline,\n    'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n  });\n\n  return (\n    <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n      {children}\n    </form>\n  );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\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};\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}: 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    >\n      {label && (\n        <label htmlFor={htmlFor}>\n          {label}\n          {isRequired && <RequiredAsterisk />}\n        </label>\n      )}\n      {hint && <FormHint className=\"FormField-hint u-subtle\">{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 { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n  name?: string | string[];\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  className?: string;\n  onBlur?: () => void;\n  testId?: string;\n  children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n  const classes = cx('Form-group', className, {\n    'is-invalid': !ignoreValidation && isInvalid,\n  });\n\n  return (\n    <div className={classes} data-test-id={testId} {...other}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n  children: ReactNode;\n  className?: string;\n  id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n  const classes = cx('Form-hint', className);\n\n  return (\n    <div {...rest} className={classes}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n  icon({ ...other }: IconProps): JSX.Element;\n  children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n  const Icon = icon;\n\n  return (\n    <div className=\"IconField\">\n      {children}\n      <Icon size={IconSize.SMALL} />\n    </div>\n  );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nexport const InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n  const classes = cx('InputGroup', className);\n\n  return (\n    <div {...other} className={classes}>\n      {children}\n    </div>\n  );\n};\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n  /**\n   * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n   */\n  'aria-label'?: string;\n  /**\n   * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Is the Radio checked?\n   */\n  checked?: boolean;\n  /**\n   * Label for the Checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * Custom classname(s) to add to the Radio.\n   */\n  className?: string;\n  /**\n   * Is the Radio disabled?\n   */\n  disabled?: boolean;\n  /**\n   * The id to pair the Radio input with the label for screen reader support.\n   */\n  id?: string;\n  /**\n   * The className to pass into the Radio's Label component\n   */\n  labelClassName?: string;\n  /**\n   * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n   */\n  name?: string;\n  /**\n   * The function to pass into the Radio onChange synthetic event handler.\n   */\n  onChange?(e: React.ChangeEvent): void;\n  /**\n   * Optional inline CSS styles to add to the Radio label.\n   */\n  labelStyle?: object;\n  /**\n   * The value passed into Radio.\n   */\n  value: number | 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  name,\n  onChange = () => undefined,\n  labelStyle,\n  value,\n  ...props\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        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={cx('Form-radio', className)}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        name={name}\n        onChange={onChange}\n        type=\"radio\"\n        value={value}\n        {...props}\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 { 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?: React.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: React.ChangeEvent | React.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\nconst RadioGroup = (props: RadioGroupProps) => {\n  const { name, value, onChange, children, disabled, legend, ...other } = props;\n  const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n  function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n    if (!isValidElement(elem)) {\n      return elem;\n    }\n\n    if (elem?.type && elem.type === Radio) {\n      return cloneElement(elem, {\n        ...elem.props,\n        name,\n        checked: elem.props.value === value,\n        onChange,\n        disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n      });\n    }\n\n    if (elem?.type && elem.type === Label) {\n      return cloneElement(elem, {\n        ...elem.props,\n        onChange,\n        disabled,\n      });\n    }\n\n    const elemChildren = elem?.props?.children;\n    if (elemChildren) {\n      if (Array.isArray(elemChildren)) {\n        return cloneElement(elem, {\n          children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n        });\n      }\n      return cloneElement(elem, {\n        children: updateRadioElems(elemChildren),\n      });\n    }\n\n    if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n      return elem;\n    }\n\n    return null;\n  }\n\n  const radios = Children.map(children, (child) => updateRadioElems(child));\n  return (\n    <fieldset ref={fieldsetRef}>\n      {legend && (\n        <legend>\n          <VisuallyHidden>{legend}</VisuallyHidden>\n        </legend>\n      )}\n      <div {...other}>{radios}</div>\n    </fieldset>\n  );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n  children: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n  testId?: string;\n  value?: number | string;\n  'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n  const classes = cx('FormInput', 'FormInput-select', className);\n\n  return (\n    <select {...rest} className={classes} data-test-id={testId}>\n      {children}\n    </select>\n  );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import cx from 'clsx';\nimport { Component, createRef, RefObject, TextareaHTMLAttributes } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nclass TextArea extends Component<TextAreaProps> {\n  textareaRef: RefObject<HTMLTextAreaElement>;\n\n  constructor(props: TextAreaProps) {\n    super(props);\n    this.textareaRef = createRef();\n  }\n\n  render() {\n    const { className, ...props } = this.props;\n\n    return (\n      <textarea\n        {...props}\n        className={cx('FormInput', className)}\n        ref={this.textareaRef}\n        aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n        onKeyDown={onKeyDown}\n      />\n    );\n  }\n\n  focus() {\n    this.textareaRef.current?.focus();\n  }\n}\n\nfunction onKeyDown(e: React.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\nexport { TextArea };\nexport type { TextAreaProps };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\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   * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n   */\n  'aria-label'?: string;\n  /**\n   * id attribute of the label text elsewhere in the app, used for screen reader support\n   * Use this for cases where you have a visible label on the page that is not close to\n   * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Label for the Checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * The className to pass into the Checkbox's Label component\n   */\n  labelClassName?: string;\n  /**\n   * The test id for the data-test-id attribute for React Testing Library support\n   */\n  testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      children,\n      disabled,\n      testId,\n      checked,\n      labelClassName,\n      ...other\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          {...other}\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          data-test-id={testId}\n          type=\"checkbox\"\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", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n  htmlFor?: string;\n  required?: boolean;\n  optional?: boolean;\n  disabled?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  hidden?: boolean;\n};\n\nconst Label = ({\n  htmlFor,\n  disabled,\n  className,\n  children,\n  required = false,\n  optional = false,\n  ...other\n}: LabelProps) => {\n  const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n  return (\n    <label {...other} className={classes} htmlFor={htmlFor}>\n      {children}\n      {optional && !required && <small className=\"Form-labelOptional u-subtle\">(optional)</small>}\n      {required && !optional && <RequiredAsterisk />}\n    </label>\n  );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n  testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n  const classes = cx('RequiredAsterisk');\n\n  return (\n    <span className={classes} data-test-id={testId} {...rest}>\n      *\n    </span>\n  );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { FocusEvent } from 'react';\n\nimport cx from 'clsx';\nimport { isBoolean } from 'lodash-es';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField, TextFieldProps } 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    { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n    ref\n  ) => {\n    const [isActive, setIsActive] = useState(\n      (isBoolean(value) || value ? value.toString() : '').trim().length !== 0\n    );\n\n    const isActiveState = isActive || needsErrorFeedback;\n\n    const classes = cx('CompactTextField', className, {\n      'is-active': isActiveState,\n    });\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}>\n        <Label htmlFor={id}>{label}</Label>\n        <TextField\n          {...rest}\n          id={id}\n          name={name}\n          type={type}\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 { InputHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n  suffix?: string;\n  testId?: string;\n  tiny?: boolean;\n  overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      className,\n      type = 'text',\n      tiny = false,\n      readOnly,\n      tabIndex = 0,\n      testId,\n      suffix,\n      overrideWidth,\n      ...rest\n    },\n    ref\n  ) => {\n    const classes = overrideWidth\n      ? className\n      : cx('FormInput', `FormInput-${type}`, className, {\n          'FormInput--tiny': tiny,\n        });\n    if (suffix) {\n      return (\n        <div className=\"FormInput-suffixContainer\">\n          <input\n            {...rest}\n            type={type}\n            className={cx(classes, 'FormInput-suffix')}\n            readOnly={readOnly}\n            ref={ref}\n            data-test-id={testId}\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", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n  fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n  name: FieldPath;\n  errorMessage?: string;\n  className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n  if (!errorMessage) {\n    return null;\n  }\n\n  return (\n    <span\n      className={cx('Form-fieldError', className)}\n      aria-live=\"polite\"\n      id={createFieldErrorId(name)}\n    >\n      {`Error - ${errorMessage}`}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n  children?: ReactNode;\n  testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n  return (\n    <fieldset className=\"FieldSet\" data-test-id={testId}>\n      {children}\n    </fieldset>\n  );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n  id?: string;\n  name?: string;\n  action?: string;\n  className?: string;\n  inline?: boolean;\n  method?: string;\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  onBlurCapture?(e: FocusEvent): void;\n  onSubmit?(e: FormEvent<EventTarget>): void;\n  ariaLabel?: string;\n  children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n    props;\n  const classes = cx('Form', className, {\n    'Form--inline': inline,\n    'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n  });\n\n  return (\n    <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n      {children}\n    </form>\n  );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\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};\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}: 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    >\n      {label && (\n        <label htmlFor={htmlFor}>\n          {label}\n          {isRequired && <RequiredAsterisk />}\n        </label>\n      )}\n      {hint && <FormHint className=\"FormField-hint u-subtle\">{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 { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n  name?: string | string[];\n  ignoreValidation?: boolean;\n  isInvalid?: boolean;\n  className?: string;\n  onBlur?: () => void;\n  testId?: string;\n  children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n  const classes = cx('Form-group', className, {\n    'is-invalid': !ignoreValidation && isInvalid,\n  });\n\n  return (\n    <div className={classes} data-test-id={testId} {...other}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n  children: ReactNode;\n  className?: string;\n  id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n  const classes = cx('Form-hint', className);\n\n  return (\n    <div {...rest} className={classes}>\n      {children}\n    </div>\n  );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n  icon({ ...other }: IconProps): JSX.Element;\n  children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n  const Icon = icon;\n\n  return (\n    <div className=\"IconField\">\n      {children}\n      <Icon size={IconSize.SMALL} />\n    </div>\n  );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n  const classes = cx('InputGroup', className);\n\n  return (\n    <div {...other} className={classes}>\n      {children}\n    </div>\n  );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n  /**\n   * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n   */\n  'aria-label'?: string;\n  /**\n   * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n   */\n  'aria-labelledby'?: string;\n  /**\n   * Is the Radio checked?\n   */\n  checked?: boolean;\n  /**\n   * Label for the Checkbox\n   */\n  children?: React.ReactNode;\n  /**\n   * Custom classname(s) to add to the Radio.\n   */\n  className?: string;\n  /**\n   * Is the Radio disabled?\n   */\n  disabled?: boolean;\n  /**\n   * The id to pair the Radio input with the label for screen reader support.\n   */\n  id?: string;\n  /**\n   * The className to pass into the Radio's Label component\n   */\n  labelClassName?: string;\n  /**\n   * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n   */\n  name?: string;\n  /**\n   * The function to pass into the Radio onChange synthetic event handler.\n   */\n  onChange?(e: React.ChangeEvent): void;\n  /**\n   * Optional inline CSS styles to add to the Radio label.\n   */\n  labelStyle?: object;\n  /**\n   * The value passed into Radio.\n   */\n  value: number | 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  name,\n  onChange = () => undefined,\n  labelStyle,\n  value,\n  ...props\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        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={cx('Form-radio', className)}\n        checked={checked}\n        disabled={disabled}\n        id={id}\n        name={name}\n        onChange={onChange}\n        type=\"radio\"\n        value={value}\n        {...props}\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 { 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?: React.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: React.ChangeEvent | React.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\nconst RadioGroup = (props: RadioGroupProps) => {\n  const { name, value, onChange, children, disabled, legend, ...other } = props;\n  const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n  function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n    if (!isValidElement(elem)) {\n      return elem;\n    }\n\n    if (elem?.type && elem.type === Radio) {\n      return cloneElement(elem, {\n        ...elem.props,\n        name,\n        checked: elem.props.value === value,\n        onChange,\n        disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n      });\n    }\n\n    if (elem?.type && elem.type === Label) {\n      return cloneElement(elem, {\n        ...elem.props,\n        onChange,\n        disabled,\n      });\n    }\n\n    const elemChildren = elem?.props?.children;\n    if (elemChildren) {\n      if (Array.isArray(elemChildren)) {\n        return cloneElement(elem, {\n          children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n        });\n      }\n      return cloneElement(elem, {\n        children: updateRadioElems(elemChildren),\n      });\n    }\n\n    if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n      return elem;\n    }\n\n    return null;\n  }\n\n  const radios = Children.map(children, (child) => updateRadioElems(child));\n  return (\n    <fieldset ref={fieldsetRef}>\n      {legend && (\n        <legend>\n          <VisuallyHidden>{legend}</VisuallyHidden>\n        </legend>\n      )}\n      <div {...other}>{radios}</div>\n    </fieldset>\n  );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n  children: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  id?: string;\n  name?: string;\n  onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n  testId?: string;\n  value?: number | string;\n  'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n  const classes = cx('FormInput', 'FormInput-select', className);\n\n  return (\n    <select {...rest} className={classes} data-test-id={testId}>\n      {children}\n    </select>\n  );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n  const onKeyDown = (e: React.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      aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n      onKeyDown={onKeyDown}\n    />\n  );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/index.js

@@ -86,50 +86,38 @@ var Label = ({
 
 // src/Checkbox.tsx
 var import_Form2 = require("./styles/Form.css");
-var Checkbox = class extends import_react.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = (0, import_react.createRef)();
-  }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  checked() {
-    return this.inputRef.current?.checked;
-  }
-  render() {
-    const {
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      children,
-      disabled,
-      testId,
-      checked,
-      labelClassName,
-      ...other
-    } = this.props;
-    const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
-    if (!children && !hasAriaLabel) {
-      console.warn("If you do not provide children, you must specify an aria-label for accessibility");
-    }
-    return /* @__PURE__ */ React.createElement(Label, {
-      className: labelClassName
-    }, /* @__PURE__ */ React.createElement("input", {
-      ...other,
-      ref: this.inputRef,
-      checked,
-      "aria-checked": checked ? "true" : "false",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledby,
-      className: "Form-checkbox",
-      disabled,
-      "data-test-id": testId,
-      type: "checkbox"
-    }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
-      className: "Form-label--disabled"
-    }, children) : children);
+var Checkbox = (0, import_react.forwardRef)(({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby,
+  children,
+  disabled,
+  testId,
+  checked,
+  labelClassName,
+  ...other
+}, ref) => {
+  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
+  if (!children && !hasAriaLabel) {
+    console.warn("If you do not provide children, you must specify an aria-label for accessibility");
   }
-};
+  return /* @__PURE__ */ React.createElement(Label, {
+    className: labelClassName
+  }, /* @__PURE__ */ React.createElement("input", {
+    ...other,
+    ref,
+    checked,
+    "aria-checked": checked ? "true" : "false",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: "Form-checkbox",
+    disabled,
+    "data-test-id": testId,
+    type: "checkbox"
+  }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
+    className: "Form-label--disabled"
+  }, children) : children);
+});
+Checkbox.displayName = "Checkbox";
 
 // src/CompactTextField.tsx
 var import_clsx4 = __toESM(require("clsx"));
@@ -145,128 +133,92 @@ var import_FormInput = require("./styles/FormInput.css");
 var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
 
 // src/TextField.tsx
-var TextField = class extends import_react2.Component {
-  constructor(props) {
-    super(props);
-    this.inputRef = (0, import_react2.createRef)();
-  }
-  render() {
-    const {
-      className,
-      type = "text",
-      tiny = false,
-      readOnly,
-      tabIndex = 0,
-      testId,
-      suffix,
-      overrideWidth,
-      ...rest
-    } = this.props;
-    const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
-      "FormInput--tiny": tiny
-    });
-    if (suffix) {
-      return /* @__PURE__ */ React.createElement("div", {
-        className: "FormInput-suffixContainer"
-      }, /* @__PURE__ */ React.createElement("input", {
-        ...rest,
-        type,
-        className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
-        readOnly,
-        ref: this.inputRef,
-        "data-test-id": testId,
-        "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-      }), /* @__PURE__ */ React.createElement("label", {
-        className: "FormInput-suffix",
-        htmlFor: rest.id
-      }, suffix));
-    }
-    return /* @__PURE__ */ React.createElement("input", {
+var TextField = (0, import_react2.forwardRef)(({
+  className,
+  type = "text",
+  tiny = false,
+  readOnly,
+  tabIndex = 0,
+  testId,
+  suffix,
+  overrideWidth,
+  ...rest
+}, ref) => {
+  const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
+    "FormInput--tiny": tiny
+  });
+  if (suffix) {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "FormInput-suffixContainer"
+    }, /* @__PURE__ */ React.createElement("input", {
       ...rest,
       type,
-      className: classes,
+      className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
       readOnly,
-      tabIndex,
-      ref: this.inputRef,
+      ref,
       "data-test-id": testId,
-      style: overrideWidth ? {
-        width: overrideWidth
-      } : void 0,
       "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
-    });
-  }
-  getElement() {
-    return this.inputRef.current;
-  }
-  value() {
-    return this.inputRef.current?.value;
-  }
-  focus() {
-    this.inputRef.current?.focus();
+    }), /* @__PURE__ */ React.createElement("label", {
+      className: "FormInput-suffix",
+      htmlFor: rest.id
+    }, suffix));
   }
-  blur() {
-    this.inputRef.current?.blur();
-  }
-  select() {
-    this.inputRef.current?.focus();
-  }
-};
+  return /* @__PURE__ */ React.createElement("input", {
+    ...rest,
+    type,
+    className: classes,
+    readOnly,
+    tabIndex,
+    ref,
+    "data-test-id": testId,
+    style: overrideWidth ? {
+      width: overrideWidth
+    } : void 0,
+    "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
+  });
+});
+TextField.displayName = "TextField";
 
 // src/CompactTextField.tsx
 var import_CompactTextField = require("./styles/CompactTextField.css");
 var import_FormInput2 = require("./styles/FormInput.css");
-var CompactTextField = class extends import_react3.Component {
-  constructor(props) {
-    super(props);
-    this.handleFocus = (event) => {
-      this.setState({ isActive: true });
-      if (this.props.onFocus) {
-        this.props.onFocus(event);
-      }
-    };
-    this.handleBlur = (event) => {
-      const value = event.target.value || "";
-      this.setState({ isActive: value.trim().length !== 0 });
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
-    };
-    this.value = () => this.textField ? this.textField.value() : "";
-    this.focus = () => {
-      if (this.textField) {
-        this.textField.focus();
-      }
-    };
-    const value = props.value;
-    this.state = {
-      isActive: ((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0
-    };
-  }
-  render() {
-    const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
-    const isActive = this.state.isActive || needsErrorFeedback;
-    const classes = (0, import_clsx4.default)("CompactTextField", className, {
-      "is-active": isActive
-    });
-    const placeholder = isActive ? "" : label;
-    return /* @__PURE__ */ React.createElement("div", {
-      className: classes
-    }, /* @__PURE__ */ React.createElement(Label, {
-      htmlFor: id
-    }, label), /* @__PURE__ */ React.createElement(TextField, {
-      ...rest,
-      id,
-      name,
-      type,
-      placeholder,
-      ref: (textField) => {
-        this.textField = textField;
-      },
-      onFocus: this.handleFocus,
-      onBlur: this.handleBlur
-    }));
-  }
-};
+var CompactTextField = (0, import_react3.forwardRef)(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
+  const [isActive, setIsActive] = (0, import_react3.useState)(((0, import_lodash_es.isBoolean)(value) || value ? value.toString() : "").trim().length !== 0);
+  const isActiveState = isActive || needsErrorFeedback;
+  const classes = (0, import_clsx4.default)("CompactTextField", className, {
+    "is-active": isActiveState
+  });
+  const placeholder = isActiveState ? "" : label;
+  const handleFocus = (event) => {
+    setIsActive(true);
+    if (onFocus) {
+      onFocus(event);
+    }
+  };
+  const handleBlur = (event) => {
+    const value2 = event.target.value || "";
+    setIsActive(value2.trim().length !== 0);
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: classes
+  }, /* @__PURE__ */ React.createElement(Label, {
+    htmlFor: id
+  }, label), /* @__PURE__ */ React.createElement(TextField, {
+    ...rest,
+    id,
+    name,
+    type,
+    placeholder,
+    value,
+    ref,
+    onFocus: handleFocus,
+    onBlur: handleBlur
+  }));
+});
+CompactTextField.displayName = "CompactTextField";
 
 // src/FieldError.tsx
 var import_clsx5 = __toESM(require("clsx"));
@@ -506,33 +458,24 @@ var Select = ({ className, children, testId, ...rest }) => {
 var import_clsx13 = __toESM(require("clsx"));
 var import_react5 = require("react");
 var import_FormInput4 = require("./styles/FormInput.css");
-var TextArea = class extends import_react5.Component {
-  constructor(props) {
-    super(props);
-    this.textareaRef = (0, import_react5.createRef)();
-  }
-  render() {
-    const { className, ...props } = this.props;
-    return /* @__PURE__ */ React.createElement("textarea", {
-      ...props,
-      className: (0, import_clsx13.default)("FormInput", className),
-      ref: this.textareaRef,
-      "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
-      onKeyDown
-    });
-  }
-  focus() {
-    this.textareaRef.current?.focus();
-  }
-};
-function onKeyDown(e) {
-  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
-    e.stopPropagation();
-  }
-  if (e.key === "Escape") {
-    e.nativeEvent.stopImmediatePropagation();
-  }
-}
+var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
+  const onKeyDown = (e) => {
+    if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
+      e.stopPropagation();
+    }
+    if (e.key === "Escape") {
+      e.nativeEvent.stopImmediatePropagation();
+    }
+  };
+  return /* @__PURE__ */ React.createElement("textarea", {
+    ...props,
+    className: (0, import_clsx13.default)("FormInput", className),
+    ref,
+    "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
+    onKeyDown
+  });
+});
+TextArea.displayName = "TextArea";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Checkbox,