@salt-ds/lab 1.0.0-alpha.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ElementType } from \"react\";\nimport {\n  StatusIndicator as BaseStatusIndicator,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" | \"info\" | \"warning\" | \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  hasTooltip?: boolean;\n  IconProps?: Partial<IconProps>;\n  status?: StatusIndicatorStatus;\n  TooltipComponent?: ElementType<TooltipProps>;\n  TooltipProps?: Partial<TooltipProps>;\n  tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n  const {\n    TooltipComponent = Tooltip,\n    hasTooltip = false,\n    TooltipProps,\n    tooltipText,\n    IconProps,\n    className,\n    status = \"info\",\n    ...restProps\n  } = props;\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({\n    placement: \"top\",\n    disabled: !hasTooltip,\n  });\n\n  return (\n    <>\n      <TooltipComponent\n        {...getTooltipProps({\n          hideIcon: true,\n          status,\n          title: tooltipText,\n          ...TooltipProps,\n        })}\n      />\n      <BaseStatusIndicator\n        {...getTriggerProps<typeof BaseStatusIndicator>({\n          status,\n          ...restProps,\n          ...IconProps,\n          className: cx(\n            withBaseName(\"statusIndicator\"),\n            className,\n            IconProps?.className\n          ),\n        })}\n      />\n    </>\n  );\n};\n"],"names":["TooltipProps","IconProps","BaseStatusIndicator"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAA,OAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAA,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,IACtD,SAAW,EAAA,KAAA;AAAA,IACX,UAAU,CAAC,UAAA;AAAA,GACZ,CAAA,CAAA;AAED,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,gBAAA,EAAA;AAAA,QACE,GAAG,eAAgB,CAAA;AAAA,UAClB,QAAU,EAAA,IAAA;AAAA,UACV,MAAA;AAAA,UACA,KAAO,EAAA,WAAA;AAAA,UACP,GAAGD,aAAAA;AAAA,SACJ,CAAA;AAAA,OACH,CAAA;AAAA,sBACC,GAAA,CAAAE,iBAAA,EAAA;AAAA,QACE,GAAG,eAA4C,CAAA;AAAA,UAC9C,MAAA;AAAA,UACA,GAAG,SAAA;AAAA,UACH,GAAGD,UAAAA;AAAA,UACH,SAAW,EAAA,EAAA;AAAA,YACT,aAAa,iBAAiB,CAAA;AAAA,YAC9B,SAAA;AAAA,YACAA,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,WACb;AAAA,SACD,CAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,4 @@
+const classBase = "saltFormField";
+
+export { classBase };
+//# sourceMappingURL=constant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constant.js","sources":["../src/form-field/constant.ts"],"sourcesContent":["export const classBase = \"saltFormField\";\n"],"names":[],"mappings":"AAAO,MAAM,SAAY,GAAA;;;;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldContext.js","sources":["../src/form-field-context/FormFieldContext.ts"],"sourcesContent":["import { Dispatch, FocusEventHandler, RefObject, SetStateAction } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { useA11yValueValue } from \"../form-field\";\nexport interface FormFieldContextValue {\n  inFormField: true;\n  ref: RefObject<HTMLDivElement>;\n  a11yProps: useA11yValueValue;\n  focused: boolean;\n  setFocused: Dispatch<SetStateAction<boolean>>;\n  onBlur: FocusEventHandler<HTMLElement>;\n  onFocus: FocusEventHandler<HTMLElement>;\n}\n\nexport const FormFieldContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldContextValue\n);\n"],"names":[],"mappings":";;AAaO,MAAM,gBAAmB,GAAA,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

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

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { FormFieldContext } from './FormFieldContext.js';
+
+function useFormFieldProps({
+  focusVisible
+} = {}) {
+  const { setFocused, ...formFieldProps } = useContext(FormFieldContext) || {};
+  useIsomorphicLayoutEffect(() => {
+    if (focusVisible !== void 0 && setFocused) {
+      setFocused(focusVisible);
+    }
+  }, [focusVisible, setFocused]);
+  return {
+    setFocused,
+    ...formFieldProps
+  };
+}
+
+export { useFormFieldProps };
+//# sourceMappingURL=useFormFieldProps.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldProps.js","sources":["../src/form-field-context/useFormFieldProps.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { FormFieldContext, FormFieldContextValue } from \"./FormFieldContext\";\n\ninterface useFormFieldPropsProps {\n  focusVisible?: boolean;\n}\n\nexport function useFormFieldProps({\n  focusVisible,\n}: useFormFieldPropsProps = {}): Partial<FormFieldContextValue> {\n  // TODO should this be a separate value for FocusVisible\n  const { setFocused, ...formFieldProps } = useContext(FormFieldContext) || {};\n\n  useIsomorphicLayoutEffect(() => {\n    if (focusVisible !== undefined && setFocused) {\n      setFocused(focusVisible);\n    }\n  }, [focusVisible, setFocused]);\n\n  return {\n    setFocused,\n    ...formFieldProps,\n  };\n}\n"],"names":[],"mappings":";;;;AAQO,SAAS,iBAAkB,CAAA;AAAA,EAChC,YAAA;AACF,CAAA,GAA4B,EAAoC,EAAA;AAE9D,EAAA,MAAM,EAAE,UAAe,EAAA,GAAA,cAAA,KAAmB,UAAW,CAAA,gBAAgB,KAAK,EAAC,CAAA;AAE3E,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,YAAA,KAAiB,UAAa,UAAY,EAAA;AAC5C,MAAA,UAAA,CAAW,YAAY,CAAA,CAAA;AAAA,KACzB;AAAA,GACC,EAAA,CAAC,YAAc,EAAA,UAAU,CAAC,CAAA,CAAA;AAE7B,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,GAAG,cAAA;AAAA,GACL,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/form-group/FormGroup.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltFormGroup {\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  justify-content: space-between;\n}\n\n.saltFormGroup-row {\n  flex-direction: row;\n  float: left;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormGroup.css.js.map

package/dist-es/packages/lab/src/form-group/FormGroup.css.js.map

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

package/dist-es/packages/lab/src/form-group/FormGroup.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import './FormGroup.css.js';
+
+const baseName = "saltFormGroup";
+const FormGroup = forwardRef(
+  function FormGroup2({ className, row, ...other }, ref) {
+    return /* @__PURE__ */ jsx("div", {
+      className: cx(baseName, { [`${baseName}-row`]: row }, className),
+      ref,
+      ...other
+    });
+  }
+);
+
+export { FormGroup };
+//# sourceMappingURL=FormGroup.js.map

package/dist-es/packages/lab/src/form-group/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\n\nimport \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Display group of elements in a compact row.\n   */\n  row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n  function FormGroup({ className, row, ...other }, ref) {\n    return (\n      <div\n        className={cx(baseName, { [`${baseName}-row`]: row }, className)}\n        ref={ref}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["FormGroup"],"mappings":";;;;;AAYA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,GAAG,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/D,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/formatted-input/FormattedInput.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* TODO check multiline styles */\n\n.saltFormattedInput {\n  --formattedInput-mask-color: var(--salt-text-secondary-foreground);\n}\n\n.saltFormattedInput-inputWrapper {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n}\n\n.saltFormattedInput-mask {\n  position: absolute;\n  color: var(--formattedInput-mask-color);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  top: 0;\n  left: 0;\n}\n\n.saltFormattedInput-mask i {\n  color: transparent;\n  opacity: 0;\n  visibility: hidden;\n  font: inherit;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=FormattedInput.css.js.map

package/dist-es/packages/lab/src/formatted-input/FormattedInput.css.js.map

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

package/dist-es/packages/lab/src/formatted-input/FormattedInput.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef } from 'react';
+import { useRifm } from 'rifm';
+import { useControlled } from '@salt-ds/core';
+import { Input } from '../input/Input.js';
+import '../input/StaticInputAdornment.js';
+import { baseName, InputWithMask } from './internal/InputWithMask.js';
+import './FormattedInput.css.js';
+
+const defaultFormatter = (string) => string;
+const defaultRifmOptions = {};
+const FormattedInput = forwardRef(
+  function FormattedInput2({
+    defaultValue = "",
+    className,
+    inputProps,
+    mask,
+    onChange,
+    rifmOptions = defaultRifmOptions,
+    value: valueProp,
+    textAlign,
+    ...other
+  }, ref) {
+    const [valueState, setValueState] = useControlled({
+      default: defaultValue,
+      controlled: valueProp,
+      name: "FormattedInput",
+      state: "value"
+    });
+    const handleChange = (value) => {
+      setValueState(value);
+      onChange == null ? void 0 : onChange(value);
+    };
+    let rifmMask = false;
+    if (rifmOptions.mask) {
+      rifmMask = typeof rifmOptions.mask === "function" ? rifmOptions.mask(valueState) : rifmOptions.mask;
+    }
+    const rifm = useRifm({
+      format: defaultFormatter,
+      accept: /.*/,
+      ...rifmOptions,
+      mask: rifmMask,
+      value: valueState || "",
+      onChange: handleChange
+    });
+    return /* @__PURE__ */ jsx(Input, {
+      className: cx(baseName, className),
+      inputComponent: InputWithMask,
+      inputProps: { mask, textAlign, ...inputProps },
+      onChange: rifm.onChange,
+      textAlign,
+      value: rifm.value,
+      ...other,
+      ref
+    });
+  }
+);
+
+export { FormattedInput };
+//# sourceMappingURL=FormattedInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { Input, InputProps } from \"../input\";\nimport {\n  baseName,\n  InputWithMask,\n  InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string | undefined) => boolean;\n\nexport interface RifmOptions {\n  format?: (str: string) => string;\n  replace?: (str: string) => string;\n  append?: (str: string) => string;\n  mask?: boolean | MaskFunction;\n  accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n  mask?: string;\n  onChange?: (value: string) => void;\n  rifmOptions?: RifmOptions;\n  value?: string;\n  defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n  function FormattedInput(\n    {\n      defaultValue = \"\",\n      className,\n      inputProps,\n      mask,\n      onChange,\n      rifmOptions = defaultRifmOptions,\n      value: valueProp,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const [valueState, setValueState] = useControlled<string | undefined>({\n      default: defaultValue,\n      controlled: valueProp,\n      name: \"FormattedInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (value: string) => {\n      setValueState(value);\n      onChange?.(value);\n    };\n\n    let rifmMask = false;\n\n    if (rifmOptions.mask) {\n      rifmMask =\n        typeof rifmOptions.mask === \"function\"\n          ? rifmOptions.mask(valueState)\n          : rifmOptions.mask;\n    }\n\n    const rifm = useRifm({\n      format: defaultFormatter,\n      accept: /.*/,\n      ...rifmOptions,\n      mask: rifmMask,\n      value: valueState || \"\",\n      onChange: handleChange,\n    });\n\n    return (\n      <Input\n        className={cx(baseName, className)}\n        inputComponent={InputWithMask}\n        inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n        onChange={rifm.onChange}\n        textAlign={textAlign}\n        value={rifm.value}\n        {...other}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["FormattedInput"],"mappings":";;;;;;;;;;AA+BA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAM,OAAO,OAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MACjC,cAAgB,EAAA,aAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAO,IAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/formatted-input/internal/InputWithMask.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef } from 'react';
+
+const baseName = "saltFormattedInput";
+function getClippedMask(mask, value, textAlign) {
+  if (mask) {
+    if (textAlign === "right") {
+      return mask.substring(
+        0,
+        value ? mask.length - value.length : mask.length
+      );
+    }
+    return mask.substring(value ? value.length : 0);
+  }
+  return "";
+}
+const InputWithMask = forwardRef(
+  function InputWithMask2({
+    "aria-labelledby": ariaLabelledBy,
+    className,
+    mask = "",
+    value,
+    id: idProp,
+    style,
+    textAlign,
+    ...other
+  }, ref) {
+    const id = useId(idProp);
+    const spacerAndMask = [
+      /* @__PURE__ */ jsx("i", {
+        children: value
+      }, value),
+      getClippedMask(mask, value, textAlign)
+    ];
+    return /* @__PURE__ */ jsxs("div", {
+      className: `${baseName}-inputWrapper`,
+      children: [
+        /* @__PURE__ */ jsx("input", {
+          className,
+          ...other,
+          "aria-label": mask,
+          "aria-labelledby": [ariaLabelledBy, id].filter((label) => label != null).join(" "),
+          id,
+          ref,
+          style,
+          value
+        }),
+        /* @__PURE__ */ jsx("span", {
+          "aria-hidden": "true",
+          className: cx(`${baseName}-mask`, className),
+          style,
+          children: textAlign !== "right" ? spacerAndMask : spacerAndMask.reverse()
+        })
+      ]
+    });
+  }
+);
+
+export { InputWithMask, baseName };
+//# sourceMappingURL=InputWithMask.js.map

package/dist-es/packages/lab/src/formatted-input/internal/InputWithMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, InputHTMLAttributes } from \"react\";\nimport { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n  mask: FormattedInputProps[\"mask\"],\n  value: FormattedInputProps[\"value\"],\n  textAlign: FormattedInputProps[\"textAlign\"]\n) {\n  if (mask) {\n    if (textAlign === \"right\") {\n      return mask.substring(\n        0,\n        value ? mask.length - value.length : mask.length\n      );\n    }\n\n    return mask.substring(value ? value.length : 0);\n  }\n  return \"\";\n}\n\nexport interface InputWithMaskProps\n  extends InputHTMLAttributes<HTMLInputElement> {\n  mask?: FormattedInputProps[\"mask\"];\n  textAlign?: FormattedInputProps[\"textAlign\"];\n  value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n  function InputWithMask(\n    {\n      \"aria-labelledby\": ariaLabelledBy,\n      className,\n      mask = \"\",\n      value,\n      id: idProp,\n      style,\n      textAlign,\n      ...other\n    },\n    ref\n  ) {\n    const id = useId(idProp);\n\n    const spacerAndMask = [\n      <i key={value}>{value}</i>,\n      getClippedMask(mask, value, textAlign),\n    ];\n\n    return (\n      <div className={`${baseName}-inputWrapper`}>\n        <input\n          className={className}\n          {...other}\n          aria-label={mask}\n          aria-labelledby={[ariaLabelledBy, id]\n            .filter((label) => label != null)\n            .join(\" \")}\n          id={id}\n          ref={ref}\n          style={style}\n          value={value}\n        />\n        <span\n          aria-hidden=\"true\"\n          className={cx(`${baseName}-mask`, className)}\n          style={style}\n        >\n          {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["InputWithMask"],"mappings":";;;;;AAKO,MAAM,QAAW,GAAA,qBAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA,MAAA;AAAA,OAC5C,CAAA;AAAA,KACF;AAEA,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,GAChD;AACA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AASO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACnB,GAAA,CAAA,GAAA,EAAA;AAAA,QAAe,QAAA,EAAA,KAAA;AAAA,OAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,WAAW,CAAG,EAAA,QAAA,CAAA,aAAA,CAAA;AAAA,MACjB,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA,EAAiB,SAAS,CAAA;AAAA,UAC3C,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ,EAAA;AAAA,SACjE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +1,171 @@
+import './list-deprecated/List.js';
+import './list-deprecated/ListBase.js';
+export { ListItemBase as ListItemBaseDeprecated } from './list-deprecated/ListItemBase.js';
+import './list-deprecated/ListItem.js';
+import './list-deprecated/ListItemContext.js';
+import './list-deprecated/ListStateContext.js';
+import '@salt-ds/core';
+import 'react';
+export { useListItem as useListItemDeprecated } from './list-deprecated/useListItem.js';
+export { capitalize } from './utils/capitalize.js';
+export { escapeRegExp } from './utils/escapeRegExp.js';
+export { isEmail } from './utils/isEmail.js';
+export { forwardCallbackProps } from './utils/forwardCallbackProps.js';
+export { isPlainObject } from './utils/isPlainObject.js';
+export { partition } from './utils/partition.js';
+export { useClickOutside } from './utils/useClickOutside.js';
+export { useEventCallback } from './utils/useEventCallback.js';
+export { useIsViewportLargerThanBreakpoint } from './utils/useIsViewportLargerThanBreakpoint.js';
+export { useLayoutEffectOnce } from './utils/useLayoutEffectOnce.js';
+export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
+export { useOverflowDetection } from './utils/useOverflowDetection.js';
+export { useSlideSelection } from './utils/useSlideSelection.js';
+export { AccordionSection } from './accordion/AccordionSection.js';
+export { AccordionSectionContext, useAccordionSectionContext } from './accordion/AccordionSectionContext.js';
+export { Accordion } from './accordion/Accordion.js';
+export { AccordionSummary } from './accordion/AccordionSummary.js';
+export { AccordionDetails } from './accordion/AccordionDetails.js';
+export { AppHeader } from './app-header/AppHeader.js';
+export { Avatar } from './avatar/Avatar.js';
+export { Badge } from './badge/Badge.js';
+export { Banner } from './banner/Banner.js';
+export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
+export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
+export { ButtonBar, DefaultButtonsOrderByVariant } from './button-bar/ButtonBar.js';
+export { OrderedButton } from './button-bar/OrderedButton.js';
+export { Calendar } from './calendar/Calendar.js';
+export { useCalendarDay } from './calendar/useCalendarDay.js';
+export { useCalendar } from './calendar/useCalendar.js';
+export { useSelectionCalendar, useSelectionDay } from './calendar/useSelection.js';
+export { Card } from './card/Card.js';
+export { Carousel } from './carousel/Carousel.js';
+export { CarouselSlide } from './carousel/CarouselSlide.js';
+export { CascadingMenu } from './cascading-menu/CascadingMenu.js';
+export { Checkbox } from './checkbox/Checkbox.js';
+export { CheckboxBase } from './checkbox/CheckboxBase.js';
+export { CheckboxGroup } from './checkbox/CheckboxGroup.js';
+export { CheckboxIcon } from './checkbox/CheckboxIcon.js';
+export { CheckboxUncheckedIcon } from './checkbox/assets/CheckboxUncheckedIcon.js';
+export { CheckboxCheckedIcon } from './checkbox/assets/CheckboxCheckedIcon.js';
+export { CheckboxIndeterminateIcon } from './checkbox/assets/CheckboxIndeterminateIcon.js';
+export { ColorChooser } from './color-chooser/ColorChooser.js';
+export { Color } from './color-chooser/Color.js';
+export { ColorPicker } from './color-chooser/ColorPicker.js';
+export { getColorPalettes, makePalette } from './color-chooser/GetColorPalettes.js';
+export { convertColorMapValueToHex, getColorNameByHexValue, getHexValue, hexValueWithoutAlpha, isValidHex } from './color-chooser/ColorHelpers.js';
+export { SwatchesPicker } from './color-chooser/SwatchesPicker.js';
+export { Swatch } from './color-chooser/Swatch.js';
+export { saltColorMap, saltlight } from './color-chooser/colorMap.js';
+export { ComboBox } from './combo-box/ComboBox.js';
+export { ComboBoxDeprecated } from './combo-box-deprecated/ComboBoxDeprecated.js';
+export { getDefaultFilter, getDefaultFilterRegex } from './combo-box-deprecated/filterHelpers.js';
+export { ContactAction } from './contact-details/ContactAction.js';
+export { ContactActions } from './contact-details/ContactActions.js';
+export { ContactAvatar } from './contact-details/ContactAvatar.js';
+export { ContactDetails } from './contact-details/ContactDetails.js';
+export { ContactMetadata } from './contact-details/ContactMetadata.js';
+export { ContactMetadataItem } from './contact-details/ContactMetadataItem.js';
+export { ContactPrimaryInfo } from './contact-details/ContactPrimaryInfo.js';
+export { ContactSecondaryInfo } from './contact-details/ContactSecondaryInfo.js';
+export { ContactTertiaryInfo } from './contact-details/ContactTertiaryInfo.js';
+export { ContactFavoriteToggle } from './contact-details/ContactFavoriteToggle.js';
+export { MailLinkComponent } from './contact-details/MailLinkComponent.js';
+export { ContentStatus } from './content-status/ContentStatus.js';
+export { ControlLabel, baseName } from './control-label/ControlLabel.js';
+export { DeckItem } from './deck-item/DeckItem.js';
+export { DeckLayout } from './deck-layout/DeckLayout.js';
+export { DialogActions } from './dialog/DialogActions.js';
+export { DialogContent } from './dialog/DialogContent.js';
+export { DialogTitle } from './dialog/DialogTitle.js';
+export { Dialog } from './dialog/Dialog.js';
+export { DropdownBase } from './dropdown/DropdownBase.js';
+export { DropdownButton } from './dropdown/DropdownButton.js';
+export { Dropdown } from './dropdown/Dropdown.js';
+export { useDropdownBase } from './dropdown/useDropdownBase.js';
+export { EditableLabel } from './editable-label/EditableLabel.js';
+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 { FormFieldContext } from './form-field-context/FormFieldContext.js';
+export { useFormFieldProps } from './form-field-context/useFormFieldProps.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 { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
+export { Highlighter } from './list/Highlighter.js';
+export { ListItem, ListItemProxy } from './list/ListItem.js';
+export { List } from './list/List.js';
+export { ListItemHeader } from './list/ListItemHeader.js';
+export { ListItemGroup } from './list/ListItemGroup.js';
+export { useList } from './list/useList.js';
+export { VirtualizedList } from './list/VirtualizedList.js';
+export { Logo } from './logo/Logo.js';
+export { MenuButton } from './menu-button/MenuButton.js';
+export { Metric } from './metric/Metric.js';
+export { MetricHeader } from './metric/MetricHeader.js';
+export { MetricContent } from './metric/MetricContent.js';
+export { Overlay } from './overlay/Overlay.js';
+export { useOverlay } from './overlay/useOverlay.js';
+export { Pagination } from './pagination/Pagination.js';
+export { Paginator } from './pagination/Paginator.js';
+export { GoToInput } from './pagination/GoToInput.js';
+export { Panel } from './panel/Panel.js';
+export { ParentChildItem } from './parent-child-item/ParentChildItem.js';
+export { ParentChildLayout } from './parent-child-layout/ParentChildLayout.js';
+export { Pill } from './pill/Pill.js';
+export { ClosablePill } from './pill/ClosablePill.js';
+export { SelectablePill } from './pill/SelectablePill.js';
+export { DEFAULT_FLOATING_UI_MIDDLEWARE, useFloatingUI } from './popper/useFloatingUI.js';
+export { Portal } from './portal/Portal.js';
+export { CircularProgress, SIZE_OPTIONS } from './progress/CircularProgress/CircularProgress.js';
+export { LinearProgress } from './progress/LinearProgress/LinearProgress.js';
+export { QueryInput } from './query-input/QueryInput.js';
+export { useQueryInput } from './query-input/useQueryInput.js';
+export { RadioButton } from './radio-button/RadioButton.js';
+export { RadioButtonGroup } from './radio-button/RadioButtonGroup.js';
+export { RadioButtonBase } from './radio-button/RadioButtonBase.js';
+export { RadioButtonIcon, makeRadioIcon } from './radio-button/RadioButtonIcon.js';
+export { useInstantCollapse } from './responsive/useInstantCollapse.js';
+export { useDynamicCollapse } from './responsive/useDynamicCollapse.js';
+export { addAllVisible, useReclaimSpace } from './responsive/useReclaimSpace.js';
+export { HeightOnly, WidthHeight, WidthOnly, useResizeObserver } from './responsive/useResizeObserver.js';
+export { useOverflow } from './responsive/useOverflow.js';
+export { useOverflowCollectionItems } from './responsive/useOverflowCollectionItems.js';
+export { useOverflowLayout } from './responsive/useOverflowLayout.js';
+export { useWidth } from './responsive/useWidth.js';
+export { DropdownPlaceholder, NO_DATA, addAll, allExceptOverflowIndicator, byDescendingPriority, getDropdownPlaceholder, getElementForItem, getIsOverflowed, getOverflowIndicator, getRuntimePadding, isCollapsed, isCollapsedOrCollapsing, isCollapsible, isCollapsing, isOverflowed, measureContainer, measureContainerOverflow, measureElementSize, measureOverflowItems, notOverflowed, popNextItemByPriority } from './responsive/overflowUtils.js';
+export { isResponsiveAttribute, liftResponsivePropsToFormField } from './responsive/utils.js';
+export { Scrim } from './scrim/Scrim.js';
+export { ScrimContext } from './scrim/ScrimContext.js';
+export { SearchInput } from './search-input/SearchInput.js';
+export { SkipLink } from './skip-link/SkipLink.js';
+export { SkipLinks } from './skip-link/SkipLinks.js';
+export { Slider } from './slider/Slider.js';
+export { Spinner, SpinnerSizeValues } from './spinner/Spinner.js';
+export { SplitLayout } from './split-layout/SplitLayout.js';
+export { useStepperInput } from './stepper-input/useStepperInput.js';
+export { StepperInput } from './stepper-input/StepperInput.js';
+export { Switch } from './switch/Switch.js';
+export { TabActivationIndicator } from './tabs/TabActivationIndicator.js';
+export { Tabstrip } from './tabs/Tabstrip.js';
+export { Tab } from './tabs/Tab.js';
+export { TabPanel } from './tabs/TabPanel.js';
+export { Tabs } from './tabs/Tabs.js';
+export { ToggleButton } from './toggle-button/ToggleButton.js';
+export { ToggleButtonGroup } from './toggle-button/ToggleButtonGroup.js';
+export { TokenizedInput } from './tokenized-input/TokenizedInput.js';
+export { TokenizedInputBase } from './tokenized-input/TokenizedInputBase.js';
+export { useTokenizedInput } from './tokenized-input/useTokenizedInput.js';
+export { Toolbar } from './toolbar/Toolbar.js';
+export { Tooltray } from './toolbar/Tooltray.js';
+export { ToolbarButton } from './toolbar/ToolbarButton.js';
+export { ToolbarField } from './toolbar/toolbar-field/ToolbarField.js';
+export { Tooltip } from './tooltip/Tooltip.js';
+export { TooltipContext, useTooltipContext } from './tooltip/TooltipContext.js';
+export { useTooltip } from './tooltip/useTooltip.js';
+export { Tree } from './tree/Tree.js';
+export { Window, WindowContext, isDesktop, useWindow } from './window/WindowContext.js';
+export { ElectronWindow } from './window/ElectronWindow.js';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,7 @@
+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-touch {\n  --input-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --input-button-inset: 4px;\n}\n.salt-density-low {\n  --input-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n  --input-button-inset: 4px;\n}\n.salt-density-medium {\n  --input-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --input-button-inset: 2px;\n}\n.salt-density-high {\n  --input-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n  --input-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, none);\n  border: var(--saltInput-border, none);\n  border-radius: var(--saltInput-borderRadius, 0);\n  color: var(--saltInput-text-color, var(--salt-text-primary-foreground));\n  cursor: var(--saltInput-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInput-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 8em);\n  padding: var(--saltInput-padding, 0 var(--salt-size-unit));\n  position: var(--saltInput-position, relative);\n  width: 100%;\n}\n\n/* Reset in the next class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInput-focused {\n  outline-style: var(--saltInput-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInput-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInput-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInput-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background-color: var(--saltInput-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: var(--saltInput-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput-disabled .saltInput-input {\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInput-suffixContainer,\n.saltInput-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--input-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInput-inputAdornedStart {\n  padding-left: var(--saltInput-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInput-inputAdornedStart .saltInput-input {\n  padding-left: var(--saltInput-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInput-inputAdornedEnd {\n  padding-right: var(--saltInput-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInput-inputAdornedEnd .saltInput-input {\n  padding-right: var(--saltInput-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInput .saltInput-suffixContainer > .saltButton,\n.saltInput .saltInput-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--input-button-inset) * 2));\n  margin: var(--input-button-inset);\n  padding: 0 calc(var(--salt-size-unit) - var(--input-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInput-leftTextAlign .saltInput-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInput-centerTextAlign .saltInput-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInput-rightTextAlign .saltInput-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInput-formField {\n  min-width: var(--saltFormField-input-minWidth, 0px);\n  width: 100%;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Input.css.js.map

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

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

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

@@ -0,0 +1,167 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import cx from 'classnames';
+import { forwardRef, useState, useRef } from 'react';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
+import { useCursorOnFocus } from './useCursorOnFocus.js';
+import './Input.css.js';
+
+const withBaseName = makePrefixer("saltInput");
+function mergeA11yProps(a11yProps = {}, inputProps = {}, misplacedAriaProps) {
+  const ariaLabelledBy = cx(
+    a11yProps["aria-labelledby"],
+    inputProps["aria-labelledby"]
+  );
+  return {
+    ...misplacedAriaProps,
+    ...a11yProps,
+    ...inputProps,
+    "aria-labelledby": ariaLabelledBy ? Array.from(new Set(ariaLabelledBy.split(" "))).join(" ") : null
+  };
+}
+const Input = forwardRef(function Input2({
+  "aria-activedescendant": ariaActiveDescendant,
+  "aria-expanded": ariaExpanded,
+  "aria-owns": ariaOwns,
+  className: classNameProp,
+  cursorPositionOnFocus,
+  disabled,
+  emptyReadOnlyMarker = "\u2014",
+  endAdornment,
+  highlightOnFocus,
+  id,
+  inputComponent: InputComponent = "input",
+  inputProps: inputPropsProp,
+  role,
+  style,
+  value: valueProp,
+  defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+  onBlur,
+  onChange,
+  onFocus,
+  onKeyDown,
+  onKeyUp,
+  onMouseUp,
+  onMouseMove,
+  onMouseDown,
+  readOnly: readOnlyProp,
+  renderSuffix,
+  startAdornment,
+  textAlign = "left",
+  type = "text",
+  ...other
+}, ref) {
+  const {
+    a11yProps: {
+      readOnly: a11yReadOnly,
+      disabled: a11yDisabled,
+      ...restA11y
+    } = {},
+    setFocused: setFormFieldFocused,
+    inFormField
+  } = useFormFieldProps();
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  const handleRef = useForkRef(inputRef, ref);
+  const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {
+    cursorPositionOnFocus,
+    highlightOnFocus
+  });
+  const isDisabled = disabled || a11yDisabled;
+  const isReadOnly = readOnlyProp || a11yReadOnly;
+  const misplacedAriaProps = {
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns,
+    role
+  };
+  const inputProps = mergeA11yProps(
+    restA11y,
+    inputPropsProp,
+    misplacedAriaProps
+  );
+  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;
+  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: "Input",
+    state: "value"
+  });
+  const handleChange = (event) => {
+    const value2 = event.target.value;
+    setValue(value2);
+    onChange == null ? void 0 : onChange(event, value2);
+  };
+  const handleFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+    setFormFieldFocused == null ? void 0 : setFormFieldFocused(true);
+    setFocused(true);
+  };
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    setFormFieldFocused == null ? void 0 : setFormFieldFocused(false);
+    setFocused(false);
+  };
+  const handleMouseMove = (event) => {
+    cursorOnFocusHelpers.handleMouseMove(event);
+    onMouseMove == null ? void 0 : onMouseMove(event);
+  };
+  const handleMouseUp = (event) => {
+    cursorOnFocusHelpers.handleMouseUp();
+    onMouseUp == null ? void 0 : onMouseUp(event);
+  };
+  const handleMouseDown = (event) => {
+    cursorOnFocusHelpers.handleMouseDown();
+    onMouseDown == null ? void 0 : onMouseDown(event);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(
+      withBaseName(),
+      {
+        [withBaseName(`${textAlign}TextAlign`)]: textAlign,
+        [withBaseName("formField")]: inFormField,
+        [withBaseName("focused")]: focused && !inFormField,
+        [withBaseName("disabled")]: isDisabled,
+        [withBaseName("inputAdornedStart")]: startAdornment,
+        [withBaseName("inputAdornedEnd")]: endAdornment
+      },
+      classNameProp
+    ),
+    style,
+    ...other,
+    children: [
+      startAdornment && /* @__PURE__ */ jsx("div", {
+        className: withBaseName("prefixContainer"),
+        children: startAdornment
+      }),
+      /* @__PURE__ */ jsx(InputComponent, {
+        type,
+        id,
+        ...inputProps,
+        className: cx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
+        disabled: isDisabled,
+        ref: handleRef,
+        value,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onKeyDown,
+        onKeyUp,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onMouseMove: handleMouseMove,
+        readOnly: isReadOnly
+      }),
+      endAdornment && /* @__PURE__ */ jsx("div", {
+        className: withBaseName("suffixContainer"),
+        children: endAdornment
+      }),
+      renderSuffix == null ? void 0 : renderSuffix({ disabled, focused })
+    ]
+  });
+});
+
+export { Input };
+//# sourceMappingURL=Input.js.map