@launchpad-ui/form 0.8.14 → 0.8.15

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/SelectField.tsx","../src/TextArea.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = ComponentProps<'span'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = ComponentProps<'label'> & {\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 { ComponentProps } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = ComponentProps<'input'> & {\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 { ComponentProps } 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 = ComponentProps<'input'> & {\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 { ComponentProps } from 'react';\n\nimport { AlertRhombus } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = ComponentProps<'span'> & {\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      aria-label=\"Error\"\n      id={createFieldErrorId(name)}\n    >\n      <AlertRhombus size=\"small\" /> {errorMessage}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = ComponentProps<'fieldset'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = ComponentProps<'form'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = ComponentProps<'fieldset'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = ComponentProps<'div'> & {\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 { Label } from './Label';\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} required={isRequired}>\n          {label}\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = ComponentProps<'div'> & {\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, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<ComponentProps<'input'>, '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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectFieldProps = ComponentProps<'select'> & {\n  'data-test-id'?: string;\n};\n\nconst SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(\n  ({ className, children, 'data-test-id': testId = 'select', ...rest }: SelectFieldProps, ref) => {\n    const classes = cx(styles.formInput, className);\n\n    return (\n      <select {...rest} data-test-id={testId} className={classes} ref={ref}>\n        {children}\n      </select>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n\nexport { SelectField };\nexport type { SelectFieldProps };\n","import type { KeyboardEvent, ComponentProps } 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 = ComponentProps<'textarea'> & {\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":["cx","jsx","forwardRef","jsxs","suffix","label","isActive","useState","value","AlertRhombus","isInvalid","hint","Fragment","useRef","isValidElement","cloneElement","Children","VisuallyHidden"],"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/SelectField.tsx","../src/TextArea.tsx","../src/useNumberField.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype RequiredAsteriskProps = ComponentProps<'span'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport styles from './styles/Form.module.css';\n\ntype LabelProps = ComponentProps<'label'> & {\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 { ComponentProps } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype CheckboxProps = ComponentProps<'input'> & {\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","import { useMemo, useRef } from 'react';\n\ntype FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n  fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nfunction hasObjectChanged<T extends object>(obj1: T, obj2: T): boolean {\n  return (\n    Object.keys(obj1).length !== Object.keys(obj2).length ||\n    Object.keys(obj1).some((k) => {\n      const key = k as keyof T;\n      return typeof obj1[key] === 'object' && typeof obj2[key] === 'object'\n        ? hasObjectChanged(obj1[key] as T, obj2[key] as T)\n        : obj1[key] !== obj2[key];\n    })\n  );\n}\n\nfunction useObjectMemo<T extends object>(obj: T) {\n  const objRef = useRef(obj);\n\n  return useMemo(() => {\n    if (hasObjectChanged(obj, objRef.current)) {\n      objRef.current = obj;\n    }\n\n    return objRef.current;\n  }, [obj]);\n}\n\nexport { createFieldErrorId, useObjectMemo };\nexport type { FieldPath };\n","import type { ComponentProps } 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 = ComponentProps<'input'> & {\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 { ComponentProps } from 'react';\n\nimport { AlertRhombus } from '@launchpad-ui/icons';\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = ComponentProps<'span'> & {\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      aria-label=\"Error\"\n      id={createFieldErrorId(name)}\n    >\n      <AlertRhombus size=\"small\" /> {errorMessage}\n    </span>\n  );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n","import type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FieldSetProps = ComponentProps<'fieldset'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormProps = ComponentProps<'form'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormGroupProps = ComponentProps<'fieldset'> & {\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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype FormHintProps = ComponentProps<'div'> & {\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 type { FieldErrorProps } from './FieldError';\nimport type { FormHintProps } from './FormHint';\nimport type { LabelProps } from './Label';\n\nimport { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { Label } from './Label';\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  LabelProps?: Partial<LabelProps>;\n  FormHintProps?: Partial<FormHintProps>;\n  FieldErrorProps?: Partial<FieldErrorProps>;\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  LabelProps = {},\n  FormHintProps = {},\n  FieldErrorProps = {},\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} required={isRequired} {...LabelProps}>\n          {label}\n        </Label>\n      )}\n      {hint && (\n        <FormHint className={styles.hint} {...FormHintProps}>\n          {hint}\n        </FormHint>\n      )}\n      {children}\n      <FieldError\n        className={styles.fieldErrorMessage}\n        name={name}\n        errorMessage={errorMessage}\n        {...FieldErrorProps}\n      />\n    </FormGroup>\n  );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n","import type { IconProps } from '@launchpad-ui/icons';\nimport type { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport styles from './styles/Form.module.css';\n\ntype IconFieldProps = ComponentProps<'div'> & {\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, ComponentProps } from 'react';\n\nimport { cx } from 'classix';\n\nimport { Label } from './Label';\nimport styles from './styles/Form.module.css';\n\ntype RadioProps = Omit<ComponentProps<'input'>, '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 { ComponentProps } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport styles from './styles/Form.module.css';\n\ntype SelectFieldProps = ComponentProps<'select'> & {\n  'data-test-id'?: string;\n};\n\nconst SelectField = forwardRef<HTMLSelectElement, SelectFieldProps>(\n  ({ className, children, 'data-test-id': testId = 'select', ...rest }: SelectFieldProps, ref) => {\n    const classes = cx(styles.formInput, className);\n\n    return (\n      <select {...rest} data-test-id={testId} className={classes} ref={ref}>\n        {children}\n      </select>\n    );\n  }\n);\n\nSelectField.displayName = 'SelectField';\n\nexport { SelectField };\nexport type { SelectFieldProps };\n","import type { KeyboardEvent, ComponentProps } 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 = ComponentProps<'textarea'> & {\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","import type { AriaButtonProps } from '@react-aria/button';\nimport type { AriaNumberFieldProps } from '@react-aria/numberfield';\n\nimport { ExpandLess, ExpandMore } from '@launchpad-ui/icons';\nimport { useButton } from '@react-aria/button';\nimport { useLocale } from '@react-aria/i18n';\nimport { useNumberField as useReactAriaNumberField } from '@react-aria/numberfield';\nimport { useNumberFieldState } from '@react-stately/numberfield';\nimport { cx } from 'classix';\nimport { useRef } from 'react';\n\nimport styles from './styles/Form.module.css';\nimport { useObjectMemo } from './utils';\n\ntype UseNumberFieldProps = AriaNumberFieldProps & {\n  className?: string;\n  'data-test-id'?: string;\n  id?: string;\n  name?: string;\n};\n\nconst defaultFormatOptions: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 6,\n};\n\nconst useNumberField = ({\n  className: rootClassName,\n  'data-test-id': testId = 'input',\n  id,\n  name,\n  ...otherProps\n}: UseNumberFieldProps = {}): {\n  fieldErrorProps: ReturnType<typeof useReactAriaNumberField>['errorMessageProps'];\n  formHintProps: ReturnType<typeof useReactAriaNumberField>['descriptionProps'];\n  labelProps: ReturnType<typeof useReactAriaNumberField>['labelProps'];\n  renderNumberField: () => JSX.Element;\n} => {\n  // @react-aria's hooks have a state-updating effect somewhere that depends on \"formatOptions\",\n  // so we need to memoize it to prevent an infinite render loop.\n  const formatOptions = useObjectMemo({\n    ...defaultFormatOptions,\n    ...otherProps.formatOptions,\n  });\n  const { locale } = useLocale();\n  const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });\n  const inputRef = useRef<HTMLInputElement>(null);\n  const {\n    descriptionProps: formHintProps,\n    errorMessageProps: fieldErrorProps,\n    labelProps,\n    groupProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  } = useReactAriaNumberField({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);\n\n  return {\n    fieldErrorProps,\n    formHintProps,\n    labelProps,\n    renderNumberField: () => (\n      <div {...groupProps} className={styles.numberField}>\n        <input\n          {...inputProps}\n          className={cx(styles.formInput, styles['numberField-input'])}\n          data-test-id={testId}\n          name={name}\n          ref={inputRef}\n        />\n        <div className={styles['numberField-stepperContainer']}>\n          <Stepper {...incrementButtonProps}>\n            <ExpandLess />\n          </Stepper>\n          <Stepper {...decrementButtonProps}>\n            <ExpandMore />\n          </Stepper>\n        </div>\n      </div>\n    ),\n  };\n};\n\nconst Stepper = (props: AriaButtonProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const { buttonProps } = useButton(props, buttonRef);\n\n  return (\n    <button {...buttonProps} className={styles['numberField-stepper']} ref={buttonRef}>\n      {props.children}\n    </button>\n  );\n};\n\nexport { useNumberField };\nexport type { UseNumberFieldProps };\n"],"names":["cx","jsx","forwardRef","jsxs","useRef","useMemo","suffix","label","isActive","useState","value","AlertRhombus","isInvalid","hint","Fragment","isValidElement","cloneElement","Children","VisuallyHidden","useLocale","useNumberFieldState","useReactAriaNumberField","ExpandLess","ExpandMore","useButton"],"mappings":"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"}

package/dist/style.css

@@ -7,7 +7,7 @@
   --lp-component-form-color-text-label-disabled: var(--lp-color-gray-400);
 }
 
-._formGroup_p76jo_10 {
+._formGroup_1u9hb_10 {
   margin: 2rem 0;
   padding: 0;
   border: none;
@@ -16,25 +16,25 @@
 /* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 
-._formIncreasedErrorMargin_p76jo_18 ._formGroup_p76jo_10 {
+._formIncreasedErrorMargin_1u9hb_18 ._formGroup_1u9hb_10 {
   margin: 2.8rem 0;
 }
 
-._formInline_p76jo_22 ._formGroup_p76jo_10 {
+._formInline_1u9hb_22 ._formGroup_1u9hb_10 {
   display: inline-block;
   vertical-align: middle;
   margin: 0;
 }
 
-._form_p76jo_10 ._formGroup_p76jo_10:first-child {
+._form_1u9hb_10 ._formGroup_1u9hb_10:first-child {
   margin-top: 0;
 }
 
-._form_p76jo_10 ._formGroup_p76jo_10:last-child {
+._form_1u9hb_10 ._formGroup_1u9hb_10:last-child {
   margin-bottom: 0;
 }
 
-._formInput_p76jo_36 {
+._formInput_1u9hb_36 {
   display: block;
   width: 100%;
   padding: 0.6rem 1rem;
@@ -49,24 +49,24 @@
   height: 3.2rem;
 }
 
-._formInput_p76jo_36:-moz-placeholder-shown {
+._formInput_1u9hb_36:-moz-placeholder-shown {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-._formInput_p76jo_36:placeholder-shown {
+._formInput_1u9hb_36:placeholder-shown {
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-._formInput_p76jo_36._isFocused_p76jo_56,
-._formInput_p76jo_36:focus {
+._formInput_1u9hb_36._isFocused_1u9hb_56,
+._formInput_1u9hb_36:focus {
   outline: 0;
   border-color: var(--lp-color-border-field-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-select._formInput_p76jo_36 {
+select._formInput_1u9hb_36 {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -78,49 +78,49 @@ select._formInput_p76jo_36 {
   padding-right: 2rem;
 }
 
-._iconField_p76jo_73 ._formInput_p76jo_36 {
+._iconField_1u9hb_73 ._formInput_1u9hb_36 {
   padding-left: 3rem;
 }
 
-._suffixContainer_p76jo_77 ._formInput_p76jo_36 {
+._suffixContainer_1u9hb_77 ._formInput_1u9hb_36 {
   border: none;
   border-radius: var(--lp-border-radius-regular) 0 0 var(--lp-border-radius-regular);
 }
 
-._isInvalid_p76jo_82 ._formInput_p76jo_36,
-._form_p76jo_10 ._isInvalid_p76jo_82 .Select-control,
-._form_p76jo_10 ._isInvalid_p76jo_82 .CustomSelect > div,
-._form_p76jo_10 ._isInvalid_p76jo_82 ._formInput_p76jo_36 {
+._isInvalid_1u9hb_82 ._formInput_1u9hb_36,
+._form_1u9hb_10 ._isInvalid_1u9hb_82 .Select-control,
+._form_1u9hb_10 ._isInvalid_1u9hb_82 .CustomSelect > div,
+._form_1u9hb_10 ._isInvalid_1u9hb_82 ._formInput_1u9hb_36 {
   border-color: var(--lp-color-border-field-error);
 }
 
-._suffixContainer_p76jo_77 ._formInput_p76jo_36:focus {
+._suffixContainer_1u9hb_77 ._formInput_1u9hb_36:focus {
   box-shadow: none;
 }
 
-._inlineForm_p76jo_93 ._formGroup_p76jo_10 + ._formGroup_p76jo_10,
-._inlineForm_p76jo_93 ._formGroup_p76jo_10 + .Button {
+._inlineForm_1u9hb_93 ._formGroup_1u9hb_10 + ._formGroup_1u9hb_10,
+._inlineForm_1u9hb_93 ._formGroup_1u9hb_10 + .Button {
   margin-left: 1rem;
 }
 
-._label_p76jo_98 {
+._label_1u9hb_98 {
   font-size: 1.3rem;
   font-family: var(--lp-font-family-base);
   word-break: break-word;
 }
 
-._labelDisabled_p76jo_104 {
+._labelDisabled_1u9hb_104 {
   color: var(--lp-color-gray-800);
   color: var(--lp-component-form-color-text-label-disabled);
 }
 
-._labelOptional_p76jo_108 {
+._labelOptional_1u9hb_108 {
   margin-left: 0.4em;
   color: var(--lp-color-text-ui-secondary);
   fill: var(--lp-color-text-ui-secondary);
 }
 
-._compactTextField_p76jo_114 ._label_p76jo_98 {
+._compactTextField_1u9hb_114 ._label_1u9hb_98 {
   position: absolute;
   top: -2px;
   left: 10px;
@@ -134,68 +134,68 @@ select._formInput_p76jo_36 {
   z-index: 1; /* Fixes layout issue in Firefox */
 }
 
-._formGroup_p76jo_10 ._label_p76jo_98 {
+._formGroup_1u9hb_10 ._label_1u9hb_98 {
   display: flex;
   align-items: center;
   margin-bottom: 0.2rem;
 }
 
-._formGroup_p76jo_10 ._label_p76jo_98 + ._label_p76jo_98 {
+._formGroup_1u9hb_10 ._label_1u9hb_98 + ._label_1u9hb_98 {
   margin-top: 0.5rem;
 }
 
-._fieldError_p76jo_138 {
+._fieldError_1u9hb_138 {
   color: var(--lp-color-text-feedback-error);
   font-size: 1.3rem;
 }
 
-._fieldError_p76jo_138 svg {
+._fieldError_1u9hb_138 svg {
     transform: translateY(-1px);
   }
 
 /* The margin for .formGroup and the min-height of .form-fieldError
   should be equal to avoid content shift when errors are shown */
 
-._formIncreasedErrorMargin_p76jo_18 ._fieldError_p76jo_138 {
+._formIncreasedErrorMargin_1u9hb_18 ._fieldError_1u9hb_138 {
   min-height: 2.8rem;
 }
 
-._label_p76jo_98 ._fieldError_p76jo_138 {
+._label_1u9hb_98 ._fieldError_1u9hb_138 {
   float: right;
 }
 
-._form_p76jo_10:not(._inlineForm_p76jo_93) ._fieldError_p76jo_138 {
+._form_1u9hb_10:not(._inlineForm_1u9hb_93) ._fieldError_1u9hb_138 {
   display: block;
   padding-top: 0.5rem;
   text-align: left;
 }
 
-._formIncreasedErrorMargin_p76jo_18:not(._inlineForm_p76jo_93) ._fieldError_p76jo_138 {
+._formIncreasedErrorMargin_1u9hb_18:not(._inlineForm_1u9hb_93) ._fieldError_1u9hb_138 {
   padding-top: 0.1rem;
   padding-bottom: 0.5rem;
 }
 
-._form_p76jo_10 ._isInvalid_p76jo_82 ._label_p76jo_98 {
+._form_1u9hb_10 ._isInvalid_1u9hb_82 ._label_1u9hb_98 {
   color: var(--lp-color-text-feedback-error);
 }
 
-._formInput_p76jo_36::-moz-placeholder {
+._formInput_1u9hb_36::-moz-placeholder {
   color: var(--lp-color-text-field-placeholder);
 }
 
-._formInput_p76jo_36::placeholder {
+._formInput_1u9hb_36::placeholder {
   color: var(--lp-color-text-field-placeholder);
 }
 
-._formIncreasedErrorMargin_p76jo_18 ._formGroup_p76jo_10._isInvalid_p76jo_82 {
+._formIncreasedErrorMargin_1u9hb_18 ._formGroup_1u9hb_10._isInvalid_1u9hb_82 {
   margin-bottom: 0;
 }
 
-._formIncreasedErrorMargin_p76jo_18 ._formGroup_p76jo_10._isInvalid_p76jo_82 + ._formGroup_p76jo_10 {
+._formIncreasedErrorMargin_1u9hb_18 ._formGroup_1u9hb_10._isInvalid_1u9hb_82 + ._formGroup_1u9hb_10 {
   margin-top: 0;
 }
 
-._hint_p76jo_184 {
+._hint_1u9hb_184 {
   display: block;
   margin-top: 0.3rem;
   font-size: 1.3rem;
@@ -203,75 +203,75 @@ select._formInput_p76jo_36 {
   color: var(--lp-color-text-ui-secondary);
 }
 
-._field_p76jo_138 ._hint_p76jo_184 {
+._field_1u9hb_138 ._hint_1u9hb_184 {
   margin: 0;
   font-size: 1.3rem;
   color: var(--lp-color-text-ui-secondary);
   fill: var(--lp-color-text-ui-secondary);
 }
 
-._form_p76jo_10 ._field_p76jo_138 label,
-._form_p76jo_10 ._field_p76jo_138 ._isInvalid_p76jo_82 label {
+._form_1u9hb_10 ._field_1u9hb_138 label,
+._form_1u9hb_10 ._field_1u9hb_138 ._isInvalid_1u9hb_82 label {
   color: var(--lp-color-text-ui-primary);
 }
 
-._fieldErrorMessage_p76jo_204 {
+._fieldErrorMessage_1u9hb_204 {
   color: var(--lp-color-text-feedback-error);
   font-size: 1.3rem;
 }
 
-._field_p76jo_138._formGroup_p76jo_10 {
+._field_1u9hb_138._formGroup_1u9hb_10 {
   margin: 1rem 0;
 }
 
-._field_p76jo_138._formGroup_p76jo_10:first-child {
+._field_1u9hb_138._formGroup_1u9hb_10:first-child {
   margin-top: 0;
 }
 
-input._formInput_p76jo_36:-moz-read-only {
+input._formInput_1u9hb_36:-moz-read-only {
   opacity: 1;
   background-color: var(--lp-color-bg-field-disabled);
   color: var(--lp-color-text-field-disabled);
   border-color: var(--lp-color-border-field-disabled);
 }
 
-._formInput_p76jo_36._isDisabled_p76jo_217,
-input._formInput_p76jo_36:disabled,
-select._formInput_p76jo_36:disabled,
-input._formInput_p76jo_36:read-only {
+._formInput_1u9hb_36._isDisabled_1u9hb_217,
+input._formInput_1u9hb_36:disabled,
+select._formInput_1u9hb_36:disabled,
+input._formInput_1u9hb_36:read-only {
   opacity: 1;
   background-color: var(--lp-color-bg-field-disabled);
   color: var(--lp-color-text-field-disabled);
   border-color: var(--lp-color-border-field-disabled);
 }
 
-._formInput_p76jo_36._isDisabled_p76jo_217:hover,
-._formInput_p76jo_36:disabled:hover {
+._formInput_1u9hb_36._isDisabled_1u9hb_217:hover,
+._formInput_1u9hb_36:disabled:hover {
   cursor: not-allowed;
 }
 
-textarea._formInput_p76jo_36 {
+textarea._formInput_1u9hb_36 {
   min-height: 2.5em;
   height: auto;
   resize: none;
 }
 
-textarea._formInput_p76jo_36:-moz-read-only {
+textarea._formInput_1u9hb_36:-moz-read-only {
   opacity: 1;
   color: var(--lp-color-text-field-disabled);
   background-color: var(--lp-color-bg-field-disabled);
   border-color: var(--lp-color-border-field-disabled);
 }
 
-textarea._formInput_p76jo_36:disabled,
-textarea._formInput_p76jo_36:read-only {
+textarea._formInput_1u9hb_36:disabled,
+textarea._formInput_1u9hb_36:read-only {
   opacity: 1;
   color: var(--lp-color-text-field-disabled);
   background-color: var(--lp-color-bg-field-disabled);
   border-color: var(--lp-color-border-field-disabled);
 }
 
-input._formInput_p76jo_36::-webkit-autofill {
+input._formInput_1u9hb_36::-webkit-autofill {
   box-shadow: 0 0 0 50px var(--lp-color-bg-field) inset;
 }
 
@@ -304,29 +304,29 @@ input[type='checkbox']:disabled {
   pointer-events: none;
 }
 
-._formInput_p76jo_36[readonly],
-._formInput_p76jo_36[readonly]:focus {
+._formInput_1u9hb_36[readonly],
+._formInput_1u9hb_36[readonly]:focus {
   color: var(--lp-color-text-ui-secondary);
   border-color: var(--lp-color-gray-500);
   box-shadow: none;
 }
 
-._checkbox_p76jo_284 {
+._checkbox_1u9hb_284 {
   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;
 }
 
-._radio_p76jo_291 {
+._radio_1u9hb_291 {
   margin-right: 0.5rem;
 }
 
-._number_p76jo_295 {
+._number_1u9hb_295 {
   min-width: 4.5rem;
 }
 
-._suffixContainer_p76jo_77 {
+._suffixContainer_1u9hb_77 {
   display: inline-flex;
   border: 1px solid var(--lp-color-border-field);
   border-radius: var(--lp-border-radius-regular);
@@ -334,12 +334,12 @@ input[type='checkbox']:disabled {
   transition: all 0.1s linear;
 }
 
-._suffixContainer_p76jo_77:focus-within {
+._suffixContainer_1u9hb_77:focus-within {
   border-color: var(--lp-color-border-field-focus);
   box-shadow: 0 0 0 3px hsla(231.5, 100%, 62.5%, 0.1);
 }
 
-._suffixContainer_p76jo_77 ._suffix_p76jo_77 {
+._suffixContainer_1u9hb_77 ._suffix_1u9hb_77 {
   padding: 0 2px;
   background-color: var(--lp-color-bg-field-aside);
   color: var(--lp-color-text-ui-secondary);
@@ -350,8 +350,8 @@ input[type='checkbox']:disabled {
   position: initial;
 }
 
-._suffix_p76jo_77::-webkit-outer-spin-button,
-._suffix_p76jo_77::-webkit-inner-spin-button {
+._suffix_1u9hb_77::-webkit-outer-spin-button,
+._suffix_1u9hb_77::-webkit-inner-spin-button {
   -webkit-appearance: none;
           appearance: none;
   margin: 0;
@@ -359,13 +359,13 @@ input[type='checkbox']:disabled {
 
 /* Firefox */
 
-._suffix_p76jo_77[type='number'] {
+._suffix_1u9hb_77[type='number'] {
   -webkit-appearance: textfield;
      -moz-appearance: textfield;
           appearance: textfield;
 }
 
-._iconFieldIcon_p76jo_333 {
+._iconFieldIcon_1u9hb_333 {
   position: absolute;
   fill: var(--lp-color-fill-field);
   top: 50%;
@@ -373,33 +373,99 @@ input[type='checkbox']:disabled {
   left: 1rem;
 }
 
-._formInputTiny_p76jo_341 {
+._formInputTiny_1u9hb_341 {
   padding: 0.1rem 0.6rem;
   height: 2.4rem;
 }
 
-._iconField_p76jo_73 {
+._iconField_1u9hb_73 {
   position: relative;
 }
 
-._requiredAsterisk_p76jo_350 {
+._requiredAsterisk_1u9hb_350 {
   color: var(--lp-color-text-feedback-error);
 }
 
-._fieldSet_p76jo_354 {
+._fieldSet_1u9hb_354 {
   border: none;
   margin: 2rem 0;
   padding: 0;
 }
 
-._compactTextField_p76jo_114 {
+._compactTextField_1u9hb_114 {
   position: relative;
   width: 100%;
 }
 
-._compactTextField_p76jo_114._isActive_p76jo_365 ._label_p76jo_98 {
+._compactTextField_1u9hb_114._isActive_1u9hb_365 ._label_1u9hb_98 {
   border-radius: var(--lp-border-radius-regular);
   opacity: 1;
   pointer-events: auto;
   transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */
 }
+
+._numberField_1u9hb_372 {
+  display: flex;
+  position: relative;
+}
+
+._numberField_1u9hb_372 ._numberField-input_1u9hb_376 {
+    padding-right: 2.4rem;
+  }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 {
+    display: flex;
+    opacity: 0;
+    flex-direction: column;
+    position: absolute;
+    width: 2.4rem;
+    top: 1px;
+    bottom: 1px;
+    right: 1px;
+    transition: all var(--lp-duration-100) linear;
+  }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380 {
+      --numberField-stepper-padding: 0.4rem;
+      --numberField-stepper-border-radius: calc(var(--lp-border-radius-regular) - 0.1rem);
+
+      background-color: var(--lp-color-bg-field);
+      flex: auto;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding: 0 0.4rem;
+      padding: 0 var(--numberField-stepper-padding);
+      border: none;
+      border-radius: 0;
+      min-height: 1px;
+      overflow: hidden;
+    }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380:first-child {
+        border-top-right-radius: var(--numberField-stepper-border-radius);
+        padding-top: var(--numberField-stepper-padding);
+      }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380:last-child {
+        border-bottom-right-radius: var(--numberField-stepper-border-radius);
+        padding-bottom: var(--numberField-stepper-padding);
+      }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380:hover {
+        background-color: var(--lp-color-bg-interactive-secondary-hover);
+      }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380:active {
+        background-color: var(--lp-color-bg-interactive-secondary-active);
+      }
+
+._numberField_1u9hb_372 ._numberField-stepperContainer_1u9hb_380 ._numberField-stepper_1u9hb_380 span:has(svg) {
+        width: 100%;
+        color: var(--lp-color-text-ui-primary);
+      }
+
+._numberField_1u9hb_372:hover ._numberField-stepperContainer_1u9hb_380, ._numberField_1u9hb_372:has(input:focus) ._numberField-stepperContainer_1u9hb_380 {
+      opacity: 1;
+    }