@salt-ds/lab 1.0.0-alpha.5 → 1.0.0-alpha.6

package/dist-es/packages/lab/src/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const handleTriggerRef = useForkRef(rootRef, ref);\n\n    return (\n      <Tooltip disabled={!tooltipHelperText} content={helperText}>\n        <div\n          ref={handleTriggerRef}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"readOnly\")]: readOnly,\n              [withBaseName(\"warning\")]: isWarning,\n              [withBaseName(\"error\")]: isError,\n              [withBaseName(\"fullWidth\")]: fullWidth,\n              [withBaseName(focusClass)]: states.focused,\n              [withBaseName(\"labelTop\")]: labelTop,\n              [withBaseName(\"labelLeft\")]: labelLeft,\n              [withBaseName(`withHelperText`)]: inlineHelperText,\n              [withBaseName(variant)]: variant,\n            },\n            className\n          )}\n          {...eventHandlers}\n          {...restProps}\n        >\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["StatusIndicatorProps"],"mappings":";;;;;;;;;;;AAiIA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,gBAAA;AACF,CAAsB,KAAA;AACpB,EAAO,OAAA,OAAA;AAAA,IACL,OAAO;AAAA,MACL,iBAAmB,EAAA,OAAA;AAAA,MACnB,eAAiB,EAAA,QAAA;AAAA,MACjB,kBAAA,EAAoB,mBAAmB,YAAe,GAAA,KAAA,CAAA;AAAA,MACtD,QAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAS,EAAA,QAAA,EAAU,QAAU,EAAA,QAAA,EAAU,kBAAkB,YAAY,CAAA;AAAA,GACxE,CAAA;AACF,CAAA,CAAA;AAGO,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,OAAA;AACF,CAUK,KAAA;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,UAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACX,CAAA;AACA,EAAM,MAAA,WAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AACA,EAAO,OAAA;AAAA,IACL;AAAA,MACE,OAAA;AAAA,KACF;AAAA,IACA;AAAA,MACE,UAAA;AAAA,KACF;AAAA,IACA;AAAA,MACE,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,KACX;AAAA,GACF,CAAA;AACF,EAAA;AAEA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAEpC,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,4BAA+B,GAAA,uBAAA;AAAA,IAC/B,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAmB,GAAA,KAAA;AAAA,IACnB,SAAY,GAAA,IAAA;AAAA,IACZ,kBAAA;AAAA,IACA,mBAAsB,GAAA,cAAA;AAAA,IACtB,eAAA;AAAA,IACA,UAAA;AAAA,IACA,mBAAsB,GAAA,QAAA;AAAA,IACtB,KAAA;AAAA,IACA,cAAiB,GAAA,SAAA;AAAA,IACjB,cAAiB,GAAA,KAAA;AAAA,IACjB,UAAA,GAAa,EAAE,kBAAA,EAAoB,UAAW,EAAA;AAAA,IAC9C,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAAA,EAAAA,qBAAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAM,MAAA,OAAA,GAAU,KAAM,CAAA,UAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAY,EAAE,CAAA,CAAA;AACpC,IAAM,MAAA,YAAA,GAAe,KAAM,CAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,EAAE,CAAA,CAAA;AAC9C,IAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAE3C,IAAM,MAAA,gBAAA,GAAmB,CAAC,CAAC,UAAA,CAAA;AAE3B,IAAA,MAAM,YAAY,YAAa,CAAA;AAAA,MAC7B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,MAAA,EAAQ,WAAa,EAAA,aAAa,IAAI,YAAa,CAAA;AAAA,MACxD,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,WAAW,KAAU,KAAA,KAAA,CAAA,CAAA;AAC3B,IAAM,MAAA,QAAA,GAAW,YAAY,cAAmB,KAAA,KAAA,CAAA;AAChD,IAAM,MAAA,SAAA,GAAY,YAAY,cAAmB,KAAA,MAAA,CAAA;AACjD,IAAA,MAAM,YAAY,gBAAqB,KAAA,SAAA,CAAA;AACvC,IAAA,MAAM,UAAU,gBAAqB,KAAA,OAAA,CAAA;AACrC,IAAM,MAAA,UAAA,GAAa,mBACf,YACA,GAAA,SAAA,CAAA;AACJ,IAAM,MAAA,gBAAA,GACJ,oBAAoB,mBAAwB,KAAA,QAAA,CAAA;AAC9C,IAAA,MAAM,iBACJ,GAAA,gBAAA,IACA,mBAAwB,KAAA,SAAA,IACxB,CAAC,kBAAA,CAAA;AAEH,IAAM,MAAA,gBAAA,GAAmB,UAAW,CAAA,OAAA,EAAS,GAAG,CAAA,CAAA;AAEhD,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MAAQ,UAAU,CAAC,iBAAA;AAAA,MAAmB,OAAS,EAAA,UAAA;AAAA,MAC9C,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,GAAK,EAAA,gBAAA;AAAA,QACL,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,YAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,YACzB,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,MAAO,CAAA,OAAA;AAAA,YACnC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,SAAA;AAAA,YAC7B,CAAC,YAAa,CAAA,CAAA,cAAA,CAAgB,CAAI,GAAA,gBAAA;AAAA,YAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,WAC3B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACC,GAAG,aAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA,CAAC,iBAAiB,QAAjB,EAAA;AAAA,UACC,KAAO,EAAA;AAAA,YACL,GAAG,MAAA;AAAA,YACH,GAAG,WAAA;AAAA,YACH,GAAG,aAAA;AAAA,YACH,SAAW,EAAA,SAAA;AAAA,YACX,WAAa,EAAA,IAAA;AAAA,YACb,GAAK,EAAA,OAAA;AAAA,WACP;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA,oBACE,GAAA,CAAA,cAAA,EAAA;AAAA,cACE,GAAG,UAAA;AAAA,cACJ,gBAAA;AAAA,cACA,kBAAA;AAAA,cACA,oBAAsBA,EAAAA,qBAAAA;AAAA,cACtB,WAAW,UAAW,CAAA,SAAA;AAAA,cACtB,KAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,WAAa,EAAA,UAAA;AAAA,cACb,EAAI,EAAA,OAAA;AAAA,aACN,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,CAAA,4BAAA,EAAA;AAAA,cACC,SAAS,CAAC,kBAAA;AAAA,cACV,gBAAA;AAAA,aACF,CAAA;AAAA,YACC,oCACE,GAAA,CAAA,mBAAA,EAAA;AAAA,cACC,UAAA;AAAA,cACA,mBAAA;AAAA,cACC,GAAG,eAAA;AAAA,cACJ,EAAI,EAAA,YAAA;AAAA,aACN,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * The component used for activation indicator. Default to `FormActivationIndicator`.\n   */\n  ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n  /**\n   * Outer focus ring focus will not be applied. Defaults to false.\n   */\n  disableFocusRing?: boolean;\n  // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n  // we should also support 'auto' or explicit numeric values\n  /**\n   * Whether the form field is occupying full width.\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether to show the StatusIndicator component for validation states.\n   */\n  hasStatusIndicator?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The component used for the helper text. Default to `FormHelperText`.\n   */\n  HelperTextComponent?: ElementType<FormHelperTextProps>;\n  /**\n   * Location the helperText, values: 'bottom' (default) or 'tooltip'.\n   */\n  helperTextPlacement?: FormFieldHelperTextPlacement;\n  /**\n   * Props to be applied to the `HelperTextComponent`.\n   *\n   * Generic on `FormHelperTextProps` is omitted.\n   */\n  HelperTextProps?: Partial<FormHelperTextProps>;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * The component used for the label. Default to `FormLabel`.\n   */\n  LabelComponent?: ElementType;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Props to be applied to the `LabelComponent`\n   */\n  LabelProps?: Partial<FormLabelProps>;\n  /**\n   * Override props to be used with the StatusIndicator component\n   */\n  StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n  /**\n   * The state for the FormField: Must be one of: 'error'|'warning'|undefined\n   */\n  validationStatus?: FormFieldValidationStatus;\n  /**\n   * FormField variants; defaults to primary.\n   *\n   * **Deprecated:** The 'tertiary' variant has been deprecated\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-required\": A11yValueProps[\"required\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  required,\n  disabled,\n  readOnly,\n  labelId,\n  helperTextId,\n  renderHelperText,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-required\": required,\n      \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n  );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n  onBlur,\n  onFocus,\n}: {\n  onBlur?: FocusEventHandler<HTMLDivElement>;\n  onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n  { focused: boolean },\n  { setFocused: Dispatch<SetStateAction<boolean>> },\n  {\n    onBlur: FocusEventHandler<HTMLDivElement>;\n    onFocus: FocusEventHandler<HTMLDivElement>;\n  }\n] => {\n  const [focused, setFocused] = useState(false);\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(false);\n    onBlur?.(event);\n  };\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setFocused(true);\n    onFocus?.(event);\n  };\n  return [\n    {\n      focused,\n    },\n    {\n      setFocused,\n    },\n    {\n      onBlur: handleBlur,\n      onFocus: handleFocus,\n    },\n  ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n  (\n    {\n      ActivationIndicatorComponent = FormActivationIndicator,\n      children,\n      className,\n      disabled,\n      disableFocusRing = false,\n      fullWidth = true,\n      hasStatusIndicator,\n      HelperTextComponent = FormHelperText,\n      HelperTextProps,\n      helperText,\n      helperTextPlacement = \"bottom\",\n      label,\n      LabelComponent = FormLabel,\n      labelPlacement = \"top\",\n      LabelProps = { displayedNecessity: \"required\" },\n      onBlur,\n      onFocus,\n      readOnly,\n      required,\n      StatusIndicatorProps,\n      validationStatus,\n      variant = \"primary\",\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId(LabelProps?.id);\n    const helperTextId = useId(HelperTextProps?.id);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const renderHelperText = !!helperText;\n\n    const a11yValue = useA11yValue({\n      required,\n      disabled,\n      readOnly,\n      labelId,\n      helperTextId,\n      renderHelperText,\n    });\n\n    const [states, dispatchers, eventHandlers] = useFormField({\n      onBlur,\n      onFocus,\n    });\n\n    const hasLabel = label !== undefined;\n    const labelTop = hasLabel && labelPlacement === \"top\";\n    const labelLeft = hasLabel && labelPlacement === \"left\";\n    const isWarning = validationStatus === \"warning\";\n    const isError = validationStatus === \"error\";\n    const focusClass = disableFocusRing\n      ? \"lowFocused\"\n      : \"focused\"; /* NOTE: need to look at */\n    const inlineHelperText =\n      renderHelperText && helperTextPlacement === \"bottom\";\n    const tooltipHelperText =\n      renderHelperText &&\n      helperTextPlacement === \"tooltip\" &&\n      !hasStatusIndicator;\n\n    const handleTriggerRef = useForkRef(rootRef, ref);\n\n    return (\n      <Tooltip disabled={!tooltipHelperText} content={helperText}>\n        <div\n          ref={handleTriggerRef}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"readOnly\")]: readOnly,\n              [withBaseName(\"warning\")]: isWarning,\n              [withBaseName(\"error\")]: isError,\n              [withBaseName(\"fullWidth\")]: fullWidth,\n              [withBaseName(focusClass)]: states.focused,\n              [withBaseName(\"labelTop\")]: labelTop,\n              [withBaseName(\"labelLeft\")]: labelLeft,\n              [withBaseName(`withHelperText`)]: inlineHelperText,\n              [withBaseName(variant)]: variant,\n            },\n            className\n          )}\n          {...eventHandlers}\n          {...restProps}\n        >\n          <FormFieldContext.Provider\n            value={{\n              ...states,\n              ...dispatchers,\n              ...eventHandlers,\n              a11yProps: a11yValue,\n              inFormField: true,\n              ref: rootRef,\n            }}\n          >\n            {hasLabel && (\n              <LabelComponent\n                {...LabelProps}\n                validationStatus={validationStatus}\n                hasStatusIndicator={hasStatusIndicator}\n                StatusIndicatorProps={StatusIndicatorProps}\n                className={LabelProps.className}\n                label={label}\n                disabled={disabled}\n                readOnly={readOnly}\n                required={required}\n                tooltipText={helperText}\n                id={labelId}\n              />\n            )}\n            {children}\n            <ActivationIndicatorComponent\n              hasIcon={!hasStatusIndicator}\n              validationStatus={validationStatus}\n            />\n            {renderHelperText && (\n              <HelperTextComponent\n                helperText={helperText}\n                helperTextPlacement={helperTextPlacement}\n                {...HelperTextProps}\n                id={helperTextId}\n              />\n            )}\n          </FormFieldContext.Provider>\n        </div>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}

package/dist-es/packages/lab/src/form-field/FormHelperText.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n\n  --formField-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n  --formField-helperText-transform: translate(0, 2px);\n\n  --formField-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formField-helperText-marginTop-default: 8px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, -3px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formField-helperText-marginTop-default: 4px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, 1px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormField-fullWidth {\n  --formField-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormFieldHelperText {\n  --formField-helperText-opacity: 1;\n\n  color: var(--saltFormField-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formField-helperText-fontSize);\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormField-helperText-letterSpacing, 0);\n  line-height: var(--saltFormField-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormField-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormField-helperText-marginBottom, 0);\n  margin-top: var(--saltFormField-helperText-marginTop, var(--formField-helperText-marginTop));\n  opacity: var(--saltFormField-helperText-opacity, var(--formField-helperText-opacity));\n  padding-left: var(--saltFormField-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormField-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormField-helperText-transform, var(--formField-helperText-transform, none));\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n\n  --formField-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n  --formField-helperText-transform: translate(0, 2px);\n\n  --formField-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formField-helperText-marginTop-default: 8px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, -3px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formField-helperText-marginTop-default: 4px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, 1px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormField-fullWidth {\n  --formField-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formField-helperText-opacity: 1;\n\n  color: var(--saltFormField-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formField-helperText-fontSize);\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormField-helperText-letterSpacing, 0);\n  line-height: var(--saltFormField-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormField-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormField-helperText-marginBottom, 0);\n  margin-top: var(--saltFormField-helperText-marginTop, var(--formField-helperText-marginTop));\n  opacity: var(--saltFormField-helperText-opacity, var(--formField-helperText-opacity));\n  padding-left: var(--saltFormField-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormField-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormField-helperText-transform, var(--formField-helperText-transform, none));\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/lab/src/form-field/FormHelperText.js

@@ -9,7 +9,7 @@ const FormHelperText = ({
   if (helperText) {
     if (helperTextPlacement === "bottom") {
       return /* @__PURE__ */ jsx("p", {
-        className: `saltFormFieldHelperText`,
+        className: "saltFormHelperText",
         ...restProps,
         children: helperText
       });

package/dist-es/packages/lab/src/form-field/FormHelperText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHelperText.js","sources":["../src/form-field/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n  ComponentPropsWithoutRef<E> & {\n    helperText: FormFieldProps[\"helperText\"];\n    helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n  };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n  helperText,\n  helperTextPlacement,\n  ...restProps\n}: FormHelperTextProps<E>) => {\n  if (helperText) {\n    if (helperTextPlacement === \"bottom\") {\n      return (\n        <p className={`saltFormFieldHelperText`} {...restProps}>\n          {helperText}\n        </p>\n      );\n    } else if (helperTextPlacement === \"tooltip\") {\n      console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n      return null;\n    } else {\n      return null;\n    }\n  } else {\n    return null;\n  }\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,QAAE,SAAW,EAAA,CAAA,uBAAA,CAAA;AAAA,QAA4B,GAAG,SAAA;AAAA,QAC1C,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}
+{"version":3,"file":"FormHelperText.js","sources":["../src/form-field/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n  ComponentPropsWithoutRef<E> & {\n    helperText: FormFieldProps[\"helperText\"];\n    helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n  };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n  helperText,\n  helperTextPlacement,\n  ...restProps\n}: FormHelperTextProps<E>) => {\n  if (helperText) {\n    if (helperTextPlacement === \"bottom\") {\n      return (\n        <p className=\"saltFormHelperText\" {...restProps}>\n          {helperText}\n        </p>\n      );\n    } else if (helperTextPlacement === \"tooltip\") {\n      console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n      return null;\n    } else {\n      return null;\n    }\n  } else {\n    return null;\n  }\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,QAAE,SAAU,EAAA,oBAAA;AAAA,QAAsB,GAAG,SAAA;AAAA,QACnC,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js

@@ -0,0 +1,9 @@
+import { createContext } from '@salt-ds/core';
+
+const FormFieldContextNext = createContext(
+  "FormFieldContext",
+  {}
+);
+
+export { FormFieldContextNext };
+//# sourceMappingURL=FormFieldContextNext.js.map

package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { useA11yValueValue } from \"../form-field-next\";\n\nexport interface FormFieldContextNextValue {\n  a11yProps: useA11yValueValue;\n}\n\nexport const FormFieldContextNext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextNextValue\n);\n"],"names":[],"mappings":";;AAOO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/lab/src/form-field-context/useFormFieldPropsNext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FormFieldContextNext } from './FormFieldContextNext.js';
+
+function useFormFieldPropsNext() {
+  return useContext(FormFieldContextNext) || {};
+}
+
+export { useFormFieldPropsNext };
+//# sourceMappingURL=useFormFieldPropsNext.js.map

package/dist-es/packages/lab/src/form-field-context/useFormFieldPropsNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldPropsNext.js","sources":["../src/form-field-context/useFormFieldPropsNext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n  FormFieldContextNext,\n  FormFieldContextNextValue,\n} from \"./FormFieldContextNext\";\n\nexport function useFormFieldPropsNext(): Partial<FormFieldContextNextValue> {\n  return useContext(FormFieldContextNext) || {};\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,qBAA4D,GAAA;AAC1E,EAAO,OAAA,UAAA,CAAW,oBAAoB,CAAA,IAAK,EAAC,CAAA;AAC9C;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltFormFieldHelperText.saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormFieldHelperText.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldHelperText.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { makePrefixer, Text } from '@salt-ds/core';
+import './FormFieldHelperText.css.js';
+
+const withBaseName = makePrefixer("saltFormFieldHelperText");
+const FormFieldHelperText = ({
+  className,
+  disabled,
+  helperText,
+  ...restProps
+}) => {
+  return /* @__PURE__ */ jsx(Text, {
+    className: clsx(withBaseName(), className),
+    disabled,
+    variant: "secondary",
+    styleAs: "label",
+    ...restProps,
+    children: helperText
+  });
+};
+
+export { FormFieldHelperText };
+//# sourceMappingURL=FormFieldHelperText.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, Text, TextProps } from \"@salt-ds/core\";\nimport { FormFieldProps } from \"./FormFieldNext\";\n\nimport \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport interface FormFieldHelperTextProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  helperText: FormFieldProps[\"helperText\"];\n  disabled?: boolean;\n}\n\nexport const FormFieldHelperText = ({\n  className,\n  disabled,\n  helperText,\n  ...restProps\n}: FormFieldHelperTextProps) => {\n  return (\n    <Text\n      className={clsx(withBaseName(), className)}\n      disabled={disabled}\n      variant=\"secondary\"\n      styleAs=\"label\"\n      {...restProps}\n    >\n      {helperText}\n    </Text>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAQpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAgC,KAAA;AAC9B,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACR,OAAQ,EAAA,OAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA,UAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltFormFieldLabel.saltText {\n  align-self: center;\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n  --inputNext-borderColor: var(--salt-editable-borderColor-hover);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormFieldLabel.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { makePrefixer, Label } from '@salt-ds/core';
+import './FormFieldLabel.css.js';
+
+const withBaseName = makePrefixer("saltFormFieldLabel");
+const FormFieldLabel = ({
+  className,
+  disabled,
+  label,
+  ...restProps
+}) => /* @__PURE__ */ jsx(Label, {
+  as: "label",
+  className: clsx(withBaseName(), className),
+  disabled,
+  variant: "secondary",
+  ...restProps,
+  children: label
+});
+
+export { FormFieldLabel };
+//# sourceMappingURL=FormFieldLabel.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Whether the Form Field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The label value for the FormFieldLabel\n   */\n  label?: string;\n}\n\nexport const FormFieldLabel = ({\n  className,\n  disabled,\n  label,\n  ...restProps\n}: FormFieldLabelProps) => (\n  <Label\n    as=\"label\"\n    className={clsx(withBaseName(), className)}\n    disabled={disabled}\n    variant=\"secondary\"\n    {...restProps}\n  >\n    {label}\n  </Label>\n);\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACG,GAAA,CAAA,KAAA,EAAA;AAAA,EACC,EAAG,EAAA,OAAA;AAAA,EACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,EACzC,QAAA;AAAA,EACA,OAAQ,EAAA,WAAA;AAAA,EACP,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA,KAAA;AAAA,CACH;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltFormFieldNext {\n  display: inline-grid;\n  position: relative;\n  column-gap: var(--salt-size-adornmentGap);\n  row-gap: var(--salt-size-adornmentGap);\n  vertical-align: top;\n  width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n  align-self: center;\n  grid-template-columns: auto 1fr;\n}\n\n.saltFormFieldNext-labelTop {\n}\n\n.saltFormFieldNext-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-adornmentGap);\n}\n\n.saltFormFieldNext > * {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext > .saltFormFieldLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext > .saltFormFieldHelperText {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldNext.saltFormFieldNext-labelLeft > .saltFormFieldHelperText {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext-labelLeft > .saltFormFieldLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n.saltFormFieldNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormFieldNext.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js

@@ -0,0 +1,86 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { makePrefixer, useId, capitalize } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import { FormFieldContextNext } from '../form-field-context/FormFieldContextNext.js';
+import { FormFieldLabel } from './FormFieldLabel.js';
+import { FormFieldHelperText } from './FormFieldHelperText.js';
+import './FormFieldNext.css.js';
+
+const useA11yValue = ({
+  disabled,
+  labelId,
+  helperTextId,
+  readOnly
+}) => {
+  return useMemo(
+    () => ({
+      "aria-labelledby": labelId,
+      "aria-describedby": helperTextId,
+      disabled,
+      readOnly
+    }),
+    [labelId, disabled, helperTextId, readOnly]
+  );
+};
+const withBaseName = makePrefixer("saltFormFieldNext");
+const FormField = forwardRef(
+  ({
+    children,
+    className,
+    disabled = false,
+    helperText,
+    label,
+    labelPlacement = "top",
+    onBlur,
+    onFocus,
+    readOnly = false,
+    id: idProp,
+    ...restProps
+  }, ref) => {
+    const labelId = useId();
+    const helperTextId = useId();
+    const a11yValue = useA11yValue({
+      labelId,
+      helperTextId,
+      disabled,
+      readOnly
+    });
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly,
+          [withBaseName(`label${capitalize(labelPlacement)}`)]: labelPlacement
+        },
+        className
+      ),
+      ...restProps,
+      children: /* @__PURE__ */ jsxs(FormFieldContextNext.Provider, {
+        value: { a11yProps: a11yValue },
+        children: [
+          label && /* @__PURE__ */ jsx(FormFieldLabel, {
+            id: labelId,
+            disabled,
+            label
+          }),
+          /* @__PURE__ */ jsx("div", {
+            className: withBaseName("controls"),
+            children
+          }),
+          helperText && /* @__PURE__ */ jsx(FormFieldHelperText, {
+            id: helperTextId,
+            disabled,
+            helperText
+          })
+        ]
+      })
+    });
+  }
+);
+
+export { FormField };
+//# sourceMappingURL=FormFieldNext.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\nimport { FormFieldLabel } from \"./FormFieldLabel\";\nimport { FormFieldHelperText } from \"./FormFieldHelperText\";\n\nimport \"./FormFieldNext.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * The helper text content\n   */\n  helperText?: string;\n  /**\n   * The label value for the FormField\n   */\n  label?: string;\n  /**\n   * Location the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   */\n  id?: string;\n}\n\nexport interface A11yValueProps {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** Helper Text */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * If `true`, the FormField will be readonly.\n   */\n  readOnly?: boolean;\n}\nexport interface useA11yValueValue {\n  \"aria-labelledby\": A11yValueProps[\"labelId\"];\n  \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n  disabled: A11yValueProps[\"disabled\"];\n  readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n  disabled,\n  labelId,\n  helperTextId,\n  readOnly,\n}: A11yValueProps) => {\n  return useMemo(\n    () => ({\n      \"aria-labelledby\": labelId,\n      \"aria-describedby\": helperTextId,\n      disabled,\n      readOnly,\n    }),\n    [labelId, disabled, helperTextId, readOnly]\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormFieldNext\");\n\nexport const FormField = forwardRef(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      helperText,\n      label,\n      labelPlacement = \"top\",\n      onBlur,\n      onFocus,\n      readOnly = false,\n      id: idProp,\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const labelId = useId();\n    const helperTextId = useId();\n\n    const a11yValue = useA11yValue({\n      labelId,\n      helperTextId,\n      disabled,\n      readOnly,\n    });\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContextNext.Provider value={{ a11yProps: a11yValue }}>\n          {label && (\n            <FormFieldLabel id={labelId} disabled={disabled} label={label} />\n          )}\n          <div className={withBaseName(\"controls\")}>{children}</div>\n          {helperText && (\n            <FormFieldHelperText\n              id={helperTextId}\n              disabled={disabled}\n              helperText={helperText}\n            />\n          )}\n        </FormFieldContextNext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA6DA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AACF,CAAsB,KAAA;AACpB,EAAO,OAAA,OAAA;AAAA,IACL,OAAO;AAAA,MACL,iBAAmB,EAAA,OAAA;AAAA,MACnB,kBAAoB,EAAA,YAAA;AAAA,MACpB,QAAA;AAAA,MACA,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAA,EAAS,QAAU,EAAA,YAAA,EAAc,QAAQ,CAAA;AAAA,GAC5C,CAAA;AACF,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,UAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACD,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,IAAA,MAAM,eAAe,KAAM,EAAA,CAAA;AAE3B,IAAA,MAAM,YAAY,YAAa,CAAA;AAAA,MAC7B,OAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,UAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,QAA8B,KAAA,EAAO,EAAE,SAAA,EAAW,SAAU,EAAA;AAAA,QAC1D,QAAA,EAAA;AAAA,UAAA,KAAA,oBACE,GAAA,CAAA,cAAA,EAAA;AAAA,YAAe,EAAI,EAAA,OAAA;AAAA,YAAS,QAAA;AAAA,YAAoB,KAAA;AAAA,WAAc,CAAA;AAAA,0BAEhE,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACnD,8BACE,GAAA,CAAA,mBAAA,EAAA;AAAA,YACC,EAAI,EAAA,YAAA;AAAA,YACJ,QAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/index.js

@@ -78,12 +78,18 @@ export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { createFileTypeValidator, createTotalSizeValidator } from './file-drop-zone/validators.js';
 export { FormField, useFormField } from './form-field/FormField.js';
 export { FormLabel } from './form-field/FormLabel.js';
+export { FormField as FormFieldNext } from './form-field-next/FormFieldNext.js';
+import './form-field-next/FormFieldHelperText.js';
+import './form-field-next/FormFieldLabel.js';
 export { FormFieldContext } from './form-field-context/FormFieldContext.js';
+export { FormFieldContextNext } from './form-field-context/FormFieldContextNext.js';
 export { useFormFieldProps } from './form-field-context/useFormFieldProps.js';
+export { useFormFieldPropsNext } from './form-field-context/useFormFieldPropsNext.js';
 export { FormGroup } from './form-group/FormGroup.js';
 export { FormattedInput } from './formatted-input/FormattedInput.js';
 export { Input } from './input/Input.js';
 export { StaticInputAdornment } from './input/StaticInputAdornment.js';
+export { Input as InputNext } from './input-next/InputNext.js';
 export { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
 export { Highlighter } from './list/Highlighter.js';
 export { ListItem, ListItemProxy } from './list/ListItem.js';

package/dist-es/packages/lab/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-es/packages/lab/src/input/Input.js

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import { forwardRef, useState, useRef } from 'react';
 import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
 import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 import { useCursorOnFocus } from './useCursorOnFocus.js';
 import './Input.css.js';

package/dist-es/packages/lab/src/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  ElementType,\n  FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning<br>\n   * end = place cursor at the end<br>\n   * \\# = index to place the cursor<br>\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * Determines what gets highlighted on focus of the input.\n   *\n   * If `true` all text will be highlighted.\n   * If an array text between those indices will be highlighted\n   * e.g. [0,1] will highlight the first character.\n   */\n  highlightOnFocus?: boolean | number[];\n  /**\n   * The HTML element to render the Input, e.g. 'input', a custom React component.\n   */\n  inputComponent?: ElementType;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  onMouseUp?: MouseEventHandler<HTMLInputElement>;\n  onMouseMove?: MouseEventHandler<HTMLInputElement>;\n  onMouseDown?: MouseEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   *\n   * Determines the alignment of the input text.\n   */\n  textAlign?: \"left\" | \"right\" | \"center\";\n  type?: HTMLInputElement[\"type\"];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  renderSuffix?: (state: {\n    disabled?: boolean;\n    error?: boolean;\n    focused?: boolean;\n    margin?: \"dense\" | \"none\" | \"normal\";\n    required?: boolean;\n    startAdornment?: ReactNode;\n  }) => ReactNode;\n  endAdornment?: ReactNode;\n  startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<ReturnType<typeof useFormFieldProps>[\"a11yProps\"]> = {},\n  inputProps: InputProps[\"inputProps\"] = {},\n  misplacedAriaProps: AriaAttributes\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps[\"aria-labelledby\"],\n    inputProps[\"aria-labelledby\"]\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // The weird filtering is due to TokenizedInputBase\n    \"aria-labelledby\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : null,\n  };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    cursorPositionOnFocus,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    highlightOnFocus,\n    id,\n    inputComponent: InputComponent = \"input\",\n    inputProps: inputPropsProp,\n    role,\n    style,\n    value: valueProp,\n    // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n    // (uncontrolled to controlled warning) from the React input\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    onBlur,\n    onChange,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    onMouseUp,\n    onMouseMove,\n    onMouseDown,\n    readOnly: readOnlyProp,\n    renderSuffix,\n    startAdornment,\n    textAlign = \"left\",\n    type = \"text\",\n    ...other\n  },\n  ref\n) {\n  const {\n    a11yProps: {\n      readOnly: a11yReadOnly,\n      disabled: a11yDisabled,\n      ...restA11y\n    } = {},\n    setFocused: setFormFieldFocused,\n    inFormField,\n  } = useFormFieldProps();\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef(null);\n  const handleRef = useForkRef(inputRef, ref);\n  const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n    cursorPositionOnFocus,\n    highlightOnFocus,\n  });\n\n  const isDisabled = disabled || a11yDisabled;\n  const isReadOnly = readOnlyProp || a11yReadOnly;\n  const misplacedAriaProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    role,\n  };\n  const inputProps = mergeA11yProps(\n    restA11y,\n    inputPropsProp,\n    misplacedAriaProps\n  );\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event, value);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFormFieldFocused?.(true);\n    setFocused(true);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFormFieldFocused?.(false);\n    setFocused(false);\n  };\n\n  const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseMove(event);\n\n    onMouseMove?.(event);\n  };\n\n  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseUp();\n\n    onMouseUp?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseDown();\n\n    onMouseDown?.(event);\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n          [withBaseName(\"formField\")]: inFormField,\n          [withBaseName(\"focused\")]: focused && !inFormField,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"inputAdornedStart\")]: startAdornment,\n          [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n        },\n        classNameProp\n      )}\n      style={style}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"prefixContainer\")}>{startAdornment}</div>\n      )}\n      <InputComponent\n        type={type}\n        id={id}\n        {...inputProps}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        ref={handleRef}\n        value={value}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        onMouseUp={handleMouseUp}\n        onMouseMove={handleMouseMove}\n        readOnly={isReadOnly}\n      />\n      {endAdornment && (\n        <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n      )}\n      {/* TODO: Confirm implementation of suffix */}\n      {renderSuffix?.({ disabled, focused })}\n    </div>\n  );\n});\n"],"names":["Input","value"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  ElementType,\n  FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  KeyboardEventHandler,\n  MouseEvent,\n  MouseEventHandler,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning<br>\n   * end = place cursor at the end<br>\n   * \\# = index to place the cursor<br>\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * Determines what gets highlighted on focus of the input.\n   *\n   * If `true` all text will be highlighted.\n   * If an array text between those indices will be highlighted\n   * e.g. [0,1] will highlight the first character.\n   */\n  highlightOnFocus?: boolean | number[];\n  /**\n   * The HTML element to render the Input, e.g. 'input', a custom React component.\n   */\n  inputComponent?: ElementType;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  onMouseUp?: MouseEventHandler<HTMLInputElement>;\n  onMouseMove?: MouseEventHandler<HTMLInputElement>;\n  onMouseDown?: MouseEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   *\n   * Determines the alignment of the input text.\n   */\n  textAlign?: \"left\" | \"right\" | \"center\";\n  type?: HTMLInputElement[\"type\"];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  renderSuffix?: (state: {\n    disabled?: boolean;\n    error?: boolean;\n    focused?: boolean;\n    margin?: \"dense\" | \"none\" | \"normal\";\n    required?: boolean;\n    startAdornment?: ReactNode;\n  }) => ReactNode;\n  endAdornment?: ReactNode;\n  startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<ReturnType<typeof useFormFieldProps>[\"a11yProps\"]> = {},\n  inputProps: InputProps[\"inputProps\"] = {},\n  misplacedAriaProps: AriaAttributes\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps[\"aria-labelledby\"],\n    inputProps[\"aria-labelledby\"]\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // The weird filtering is due to TokenizedInputBase\n    \"aria-labelledby\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : null,\n  };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    cursorPositionOnFocus,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    highlightOnFocus,\n    id,\n    inputComponent: InputComponent = \"input\",\n    inputProps: inputPropsProp,\n    role,\n    style,\n    value: valueProp,\n    // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n    // (uncontrolled to controlled warning) from the React input\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    onBlur,\n    onChange,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    onMouseUp,\n    onMouseMove,\n    onMouseDown,\n    readOnly: readOnlyProp,\n    renderSuffix,\n    startAdornment,\n    textAlign = \"left\",\n    type = \"text\",\n    ...other\n  },\n  ref\n) {\n  const {\n    a11yProps: {\n      readOnly: a11yReadOnly,\n      disabled: a11yDisabled,\n      ...restA11y\n    } = {},\n    setFocused: setFormFieldFocused,\n    inFormField,\n  } = useFormFieldProps();\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef(null);\n  const handleRef = useForkRef(inputRef, ref);\n  const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n    cursorPositionOnFocus,\n    highlightOnFocus,\n  });\n\n  const isDisabled = disabled || a11yDisabled;\n  const isReadOnly = readOnlyProp || a11yReadOnly;\n  const misplacedAriaProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    role,\n  };\n  const inputProps = mergeA11yProps(\n    restA11y,\n    inputPropsProp,\n    misplacedAriaProps\n  );\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event, value);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFormFieldFocused?.(true);\n    setFocused(true);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFormFieldFocused?.(false);\n    setFocused(false);\n  };\n\n  const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseMove(event);\n\n    onMouseMove?.(event);\n  };\n\n  const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseUp();\n\n    onMouseUp?.(event);\n  };\n\n  const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n    cursorOnFocusHelpers.handleMouseDown();\n\n    onMouseDown?.(event);\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n          [withBaseName(\"formField\")]: inFormField,\n          [withBaseName(\"focused\")]: focused && !inFormField,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"inputAdornedStart\")]: startAdornment,\n          [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n        },\n        classNameProp\n      )}\n      style={style}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"prefixContainer\")}>{startAdornment}</div>\n      )}\n      <InputComponent\n        type={type}\n        id={id}\n        {...inputProps}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        ref={handleRef}\n        value={value}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onKeyDown={onKeyDown}\n        onKeyUp={onKeyUp}\n        onFocus={handleFocus}\n        onMouseDown={handleMouseDown}\n        onMouseUp={handleMouseUp}\n        onMouseMove={handleMouseMove}\n        readOnly={isReadOnly}\n      />\n      {endAdornment && (\n        <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n      )}\n      {/* TODO: Confirm implementation of suffix */}\n      {renderSuffix?.({ disabled, focused })}\n    </div>\n  );\n});\n"],"names":["Input","value"],"mappings":"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"}

package/dist-es/packages/lab/src/input-next/InputNext.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n  --inputNext-borderColor: var(--salt-editable-borderColor);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n  align-items: center;\n  background: var(--saltInputNext-background, var(--inputNext-background));\n  border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n  border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n  border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n  border-radius: var(--saltInputNext-borderRadius, 0);\n  color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputNext-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputNext-minWidth, 8em);\n  padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputNext-position, relative);\n  width: 100%;\n}\n\n.saltInputNext:hover {\n  --inputNext-background: var(--inputNext-background-hover);\n  --inputNext-borderColor: var(--salt-editable-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n}\n\n.saltInputNext:active {\n  --inputNext-background: var(--inputNext-background-active);\n  --inputNext-borderColor: var(--salt-editable-borderColor-active);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInputNext-primary {\n  --inputNext-background: var(--salt-editable-primary-background);\n  --inputNext-background-active: var(--salt-editable-primary-background-active);\n  --inputNext-background-hover: var(--salt-editable-primary-background-hover);\n  --inputNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInputNext-secondary {\n  --inputNext-background: var(--salt-editable-secondary-background);\n  --inputNext-background-active: var(--salt-editable-secondary-background-active);\n  --inputNext-background-hover: var(--salt-editable-secondary-background-active);\n  --inputNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to inner input component */\n.saltInputNext-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: var(--saltInputNext-cursor, default);\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInputNext-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--saltInputNext-textAlign, left);\n  width: 100%;\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInputNext.saltInputNext-readOnly {\n  --inputNext-background: var(--inputNext-background-readonly);\n  --inputNext-background-hover: var(--inputNext-background-readonly);\n  --inputNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n}\n\n/* Reset in the next class */\n.saltInputNext-input:focus {\n  outline: none;\n}\n\n/* Styling when focused */\n.saltInputNext-focused {\n  outline-style: var(--saltInputNext-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputNext-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputNext-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInputNext-focused.saltInputNext-readOnly,\n.saltInputNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInputNext-input::selection {\n  background: var(--saltInputNext-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input,\n.saltInputNext.saltInputNext-disabled,\n.saltInputNext.saltInputNext-disabled:hover,\n.saltInputNext.saltInputNext-disabled:active {\n  --inputNext-background: var(--inputNext-background-disabled);\n  --inputNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputNext-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=InputNext.css.js.map

package/dist-es/packages/lab/src/input-next/InputNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/input-next/InputNext.js

@@ -0,0 +1,122 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useState } from 'react';
+import { makePrefixer, useControlled } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
+import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
+import './InputNext.css.js';
+
+const withBaseName = makePrefixer("saltInputNext");
+function mergeA11yProps(a11yProps = {}, inputProps = {}, misplacedAriaProps) {
+  const ariaLabelledBy = clsx(
+    a11yProps["aria-labelledby"],
+    inputProps["aria-labelledby"]
+  );
+  return {
+    ...misplacedAriaProps,
+    ...a11yProps,
+    ...inputProps,
+    "aria-label": ariaLabelledBy ? Array.from(new Set(ariaLabelledBy.split(" "))).join(" ") : void 0
+  };
+}
+const Input = forwardRef(function Input2({
+  "aria-activedescendant": ariaActiveDescendant,
+  "aria-expanded": ariaExpanded,
+  "aria-owns": ariaOwns,
+  className: classNameProp,
+  disabled,
+  id,
+  inputProps: inputPropsProp,
+  onChange,
+  readOnly: readOnlyProp,
+  role,
+  style,
+  type = "text",
+  value: valueProp,
+  defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+  variant = "primary",
+  ...other
+}, ref) {
+  const {
+    a11yProps: {
+      disabled: a11yDisabled,
+      readOnly: a11yReadOnly,
+      ...restA11y
+    } = {}
+  } = useFormFieldPropsNext();
+  const isDisabled = disabled || a11yDisabled;
+  const isReadOnly = readOnlyProp || a11yReadOnly;
+  const [focused, setFocused] = useState(false);
+  const misplacedAriaProps = {
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns,
+    role
+  };
+  const inputProps = mergeA11yProps(
+    restA11y,
+    inputPropsProp,
+    misplacedAriaProps
+  );
+  const {
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseUp,
+    onMouseMove,
+    onMouseDown,
+    ...restInputProps
+  } = inputProps;
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: "Input",
+    state: "value"
+  });
+  const handleChange = (event) => {
+    const value2 = event.target.value;
+    setValue(value2);
+    onChange == null ? void 0 : onChange(event, value2);
+  };
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    setFocused(false);
+  };
+  const handleFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+    setFocused(true);
+  };
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("focused")]: !isDisabled && focused,
+        [withBaseName("disabled")]: isDisabled,
+        [withBaseName("readOnly")]: isReadOnly,
+        [withBaseName(variant)]: variant
+      },
+      classNameProp
+    ),
+    style,
+    ...other,
+    children: /* @__PURE__ */ jsx("input", {
+      type,
+      id,
+      className: clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      ref,
+      value,
+      tabIndex: isReadOnly || isDisabled ? -1 : 0,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onFocus: !isDisabled ? handleFocus : void 0,
+      ...restInputProps
+    })
+  });
+});
+
+export { Input };
+//# sourceMappingURL=InputNext.js.map

package/dist-es/packages/lab/src/input-next/InputNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  AriaAttributes,\n  ChangeEvent,\n  ElementType,\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./InputNext.css\";\n\nconst withBaseName = makePrefixer(\"saltInputNext\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  /**\n   * The value of the `input` element, required for an uncontrolled component.\n   */\n  defaultValue?: HTMLInputElement[\"defaultValue\"];\n  /**\n   * If `true`, the component is disabled.\n   */\n  disabled?: HTMLInputElement[\"disabled\"];\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback for change event.\n   */\n  onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  type?: HTMLInputElement[\"type\"];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: HTMLInputElement[\"value\"];\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nfunction mergeA11yProps(\n  a11yProps: Partial<\n    ReturnType<typeof useFormFieldPropsNext>[\"a11yProps\"]\n  > = {},\n  inputProps: InputProps[\"inputProps\"] = {},\n  misplacedAriaProps: AriaAttributes\n) {\n  const ariaLabelledBy = clsx(\n    a11yProps[\"aria-labelledby\"],\n    inputProps[\"aria-labelledby\"]\n  );\n\n  return {\n    ...misplacedAriaProps,\n    ...a11yProps,\n    ...inputProps,\n    // TODO: look at this - The weird filtering is due to TokenizedInputBase\n    \"aria-label\": ariaLabelledBy\n      ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n      : undefined,\n  };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    id,\n    inputProps: inputPropsProp,\n    onChange,\n    readOnly: readOnlyProp,\n    role,\n    style,\n    type = \"text\",\n    value: valueProp,\n    // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n    // (uncontrolled to controlled warning) from the React input\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    variant = \"primary\",\n    ...other\n  },\n  ref\n) {\n  const {\n    a11yProps: {\n      disabled: a11yDisabled,\n      readOnly: a11yReadOnly,\n      ...restA11y\n    } = {},\n  } = useFormFieldPropsNext();\n\n  const isDisabled = disabled || a11yDisabled;\n  const isReadOnly = readOnlyProp || a11yReadOnly;\n\n  const [focused, setFocused] = useState(false);\n\n  const misplacedAriaProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    role,\n  };\n  const inputProps = mergeA11yProps(\n    restA11y,\n    inputPropsProp,\n    misplacedAriaProps\n  );\n\n  const {\n    onBlur,\n    onFocus,\n    onKeyDown,\n    onKeyUp,\n    onMouseUp,\n    onMouseMove,\n    onMouseDown,\n    ...restInputProps\n  } = inputProps;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValueProp,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event, value);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(variant)]: variant,\n        },\n        classNameProp\n      )}\n      style={style}\n      {...other}\n    >\n      <input\n        type={type}\n        id={id}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        readOnly={isReadOnly}\n        ref={ref}\n        value={value}\n        tabIndex={isReadOnly || isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        {...restInputProps}\n      />\n    </div>\n  );\n});\n"],"names":["Input","value"],"mappings":"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"}