@salt-ds/lab 1.0.0-alpha.9 → 1.0.0-alpha.90

package/dist-es/editable-label/EditableLabel.js

@@ -0,0 +1,118 @@
+import { jsx } from 'react/jsx-runtime';
+import { useControlled, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useCallback } from 'react';
+import { InputLegacy } from '../input-legacy/InputLegacy.js';
+import '../input-legacy/StaticInputAdornment.js';
+import css_248z from './EditableLabel.css.js';
+
+const classBase = "saltEditableLabel";
+const EditableLabel = forwardRef(function EditableLabel2({
+  className: classNameProp,
+  defaultEditing,
+  defaultValue,
+  editing: editingProp,
+  onChange,
+  onEnterEditMode,
+  onExitEditMode,
+  value: valueProp
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-editable-label",
+    css: css_248z,
+    window: targetWindow
+  });
+  const inputRef = useRef(null);
+  const [value, setValue] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? "",
+    name: "EditableLabel",
+    state: "value"
+  });
+  const [editing, setEditing] = useControlled({
+    controlled: editingProp,
+    default: defaultEditing || false,
+    name: "EditableLabel",
+    state: "editing"
+  });
+  const initialValue = useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    if (editing) {
+      if (inputRef.current !== null) {
+        inputRef.current.select();
+        inputRef.current.focus();
+      }
+    }
+  }, [editing]);
+  const enterEditMode = useCallback(() => {
+    setEditing(true);
+    onEnterEditMode == null ? void 0 : onEnterEditMode();
+  }, [onEnterEditMode]);
+  const exitEditMode = ({
+    cancelEdit = false,
+    allowDeactivation = false
+  } = {}) => {
+    setEditing(false);
+    const originalValue = initialValue.current;
+    if (originalValue !== value) {
+      if (cancelEdit) {
+        setValue(originalValue);
+      } else {
+        initialValue.current = value;
+      }
+    }
+    onExitEditMode == null ? void 0 : onExitEditMode(originalValue, value, allowDeactivation);
+  };
+  const handleChange = (evt) => {
+    const { value: value2 } = evt.target;
+    setValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  const handleDoubleClick = () => {
+    enterEditMode();
+  };
+  const handleBlur = () => {
+    exitEditMode({ allowDeactivation: true });
+  };
+  const handleKeyDown = (evt) => {
+    if (editing && evt.key === "Enter") {
+      evt.stopPropagation();
+      exitEditMode();
+    } else if (evt.key === "ArrowRight" || evt.key === "ArrowLeft") {
+      evt.stopPropagation();
+    } else if (evt.key === "Escape") {
+      exitEditMode({ cancelEdit: true });
+    }
+  };
+  const className = clsx(classBase, classNameProp, {
+    [`${classBase}-editing`]: editing
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      onDoubleClick: handleDoubleClick,
+      "data-text": value,
+      ref: forwardedRef,
+      children: editing ? /* @__PURE__ */ jsx(
+        InputLegacy,
+        {
+          inputProps: { className: `${classBase}-input` },
+          value,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          ref: inputRef,
+          style: { padding: 0 },
+          textAlign: "left"
+        }
+      ) : value
+    }
+  );
+});
+
+export { EditableLabel };
+//# sourceMappingURL=EditableLabel.js.map

package/dist-es/editable-label/EditableLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ForwardedRef,\n  forwardRef,\n  type KeyboardEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editing?: boolean;\n  onEnterEditMode: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: (\n    originalLabel: string | undefined,\n    editedLabel: string | undefined,\n    allowDeactivation?: boolean,\n  ) => void;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing || false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const initialValue = useRef(value);\n\n  useIsomorphicLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode?.();\n  }, [onEnterEditMode]);\n\n  const exitEditMode = ({\n    cancelEdit = false,\n    allowDeactivation = false,\n  } = {}) => {\n    setEditing(false);\n    const originalValue = initialValue.current;\n    if (originalValue !== value) {\n      if (cancelEdit) {\n        setValue(originalValue);\n      } else {\n        initialValue.current = value;\n      }\n    }\n    onExitEditMode?.(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange?.(value);\n  };\n\n  const handleDoubleClick = () => {\n    enterEditMode();\n  };\n\n  const handleBlur = () => {\n    exitEditMode({ allowDeactivation: true });\n  };\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = clsx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      className={className}\n      onDoubleClick={handleDoubleClick}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input` }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          ref={inputRef}\n          style={{ padding: 0 }}\n          textAlign=\"left\"\n        />\n      ) : (\n        value\n      )}\n    </div>\n  );\n});\n"],"names":["EditableLabel","editableLabelCss","value","Input"],"mappings":";;;;;;;;;;AAiBA,MAAM,SAAA,GAAY,mBAAA;AAkBX,MAAM,aAAA,GAAgB,UAAA,CAAW,SAASA,cAAAA,CAC/C;AAAA,EACE,SAAA,EAAW,aAAA;AAAA,EACX,cAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA,EAAS,WAAA;AAAA,EACT,QAAA;AAAA,EACA,eAAA;AAAA,EACA,cAAA;AAAA,EACA,KAAA,EAAO;AACT,CAAA,EACA,YAAA,EACkC;AAClC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,QAAA,GAAW,OAAgC,IAAI,CAAA;AAErD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,aAAA,CAAc;AAAA,IACtC,UAAA,EAAY,SAAA;AAAA,IACZ,SAAS,YAAA,IAAgB,EAAA;AAAA,IACzB,IAAA,EAAM,eAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAA,CAAc;AAAA,IAC1C,UAAA,EAAY,WAAA;AAAA,IACZ,SAAS,cAAA,IAAkB,KAAA;AAAA,IAC3B,IAAA,EAAM,eAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,YAAA,GAAe,OAAO,KAAK,CAAA;AAEjC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,OAAA,EAAS;AACX,MAAA,IAAI,QAAA,CAAS,YAAY,IAAA,EAAM;AAC7B,QAAA,QAAA,CAAS,QAAQ,MAAA,EAAO;AACxB,QAAA,QAAA,CAAS,QAAQ,KAAA,EAAM;AAAA,MACzB;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAA,UAAA,CAAW,IAAI,CAAA;AAEf,IAAA,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,EAAA;AAAA,EACF,CAAA,EAAG,CAAC,eAAe,CAAC,CAAA;AAEpB,EAAA,MAAM,eAAe,CAAC;AAAA,IACpB,UAAA,GAAa,KAAA;AAAA,IACb,iBAAA,GAAoB;AAAA,GACtB,GAAI,EAAC,KAAM;AACT,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAM,gBAAgB,YAAA,CAAa,OAAA;AACnC,IAAA,IAAI,kBAAkB,KAAA,EAAO;AAC3B,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,QAAA,CAAS,aAAa,CAAA;AAAA,MACxB,CAAA,MAAO;AACL,QAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AAAA,MACzB;AAAA,IACF;AACA,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAiB,eAAe,KAAA,EAAO,iBAAA,CAAA;AAAA,EACzC,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,KAAuC;AAC3D,IAAA,MAAM,EAAE,KAAA,EAAAC,MAAAA,EAAM,GAAI,GAAA,CAAI,MAAA;AACtB,IAAA,QAAA,CAASA,MAAK,CAAA;AACd,IAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAWA,MAAAA,CAAAA;AAAA,EACb,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,aAAA,EAAc;AAAA,EAChB,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,YAAA,CAAa,EAAE,iBAAA,EAAmB,IAAA,EAAM,CAAA;AAAA,EAC1C,CAAA;AAEA,EAAA,MAAM,aAAA,GAAgB,CAAC,GAAA,KAAyC;AAC9D,IAAA,IAAI,OAAA,IAAW,GAAA,CAAI,GAAA,KAAQ,OAAA,EAAS;AAClC,MAAA,GAAA,CAAI,eAAA,EAAgB;AAIpB,MAAA,YAAA,EAAa;AAAA,IACf,WAAW,GAAA,CAAI,GAAA,KAAQ,YAAA,IAAgB,GAAA,CAAI,QAAQ,WAAA,EAAa;AAC9D,MAAA,GAAA,CAAI,eAAA,EAAgB;AAAA,IACtB,CAAA,MAAA,IAAW,GAAA,CAAI,GAAA,KAAQ,QAAA,EAAU;AAC/B,MAAA,YAAA,CAAa,EAAE,UAAA,EAAY,IAAA,EAAM,CAAA;AAAA,IACnC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,SAAA,GAAY,IAAA,CAAK,SAAA,EAAW,aAAA,EAAe;AAAA,IAC/C,CAAC,CAAA,EAAG,SAAS,CAAA,QAAA,CAAU,GAAG;AAAA,GAC3B,CAAA;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,aAAA,EAAe,iBAAA;AAAA,MACf,WAAA,EAAW,KAAA;AAAA,MACX,GAAA,EAAK,YAAA;AAAA,MAEJ,QAAA,EAAA,OAAA,mBACC,GAAA;AAAA,QAACC,WAAA;AAAA,QAAA;AAAA,UACC,UAAA,EAAY,EAAE,SAAA,EAAW,CAAA,EAAG,SAAS,CAAA,MAAA,CAAA,EAAS;AAAA,UAC9C,KAAA;AAAA,UACA,MAAA,EAAQ,UAAA;AAAA,UACR,QAAA,EAAU,YAAA;AAAA,UACV,SAAA,EAAW,aAAA;AAAA,UACX,GAAA,EAAK,QAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,UACpB,SAAA,EAAU;AAAA;AAAA,OACZ,GAEA;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-es/form-field-context-legacy/FormFieldLegacyContext.js

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

package/dist-es/form-field-context-legacy/FormFieldLegacyContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegacyContext.js","sources":["../src/form-field-context-legacy/FormFieldLegacyContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport type {\n  Dispatch,\n  FocusEventHandler,\n  RefObject,\n  SetStateAction,\n} from \"react\";\nimport type { useA11yValueValue } from \"../form-field-legacy\";\nexport interface FormFieldLegacyContextValue {\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 FormFieldLegacyContext = createContext(\n  \"FormFieldContext\",\n  {} as FormFieldLegacyContextValue,\n);\n"],"names":[],"mappings":";;AAkBO,MAAM,sBAAA,GAAyB,aAAA;AAAA,EACpC,kBAAA;AAAA,EACA;AACF;;;;"}

package/dist-es/form-field-context-legacy/useFormFieldLegacyProps.js

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

package/dist-es/form-field-context-legacy/useFormFieldLegacyProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormFieldLegacyProps.js","sources":["../src/form-field-context-legacy/useFormFieldLegacyProps.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useContext } from \"react\";\nimport {\n  FormFieldLegacyContext,\n  type FormFieldLegacyContextValue,\n} from \"./FormFieldLegacyContext\";\n\ninterface useFormFieldLegacyPropsProps {\n  focusVisible?: boolean;\n}\n\nexport function useFormFieldLegacyProps({\n  focusVisible,\n}: useFormFieldLegacyPropsProps = {}): Partial<FormFieldLegacyContextValue> {\n  // TODO should this be a separate value for FocusVisible\n  const { setFocused, ...formFieldProps } =\n    useContext(FormFieldLegacyContext) || {};\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":";;;;AAWO,SAAS,uBAAA,CAAwB;AAAA,EACtC;AACF,CAAA,GAAkC,EAAC,EAAyC;AAE1E,EAAA,MAAM,EAAE,YAAY,GAAG,cAAA,KACrB,UAAA,CAAW,sBAAsB,KAAK,EAAC;AAEzC,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,YAAA,KAAiB,UAAa,UAAA,EAAY;AAC5C,MAAA,UAAA,CAAW,YAAY,CAAA;AAAA,IACzB;AAAA,EACF,CAAA,EAAG,CAAC,YAAA,EAAc,UAAU,CAAC,CAAA;AAE7B,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,GAAG;AAAA,GACL;AACF;;;;"}

package/dist-es/form-field-legacy/FormActivationIndicator.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --formFieldLegacy-activationIndicator-icon-size: 7px;\n}\n.salt-density-low {\n  --formFieldLegacy-activationIndicator-icon-size: 5px;\n}\n.salt-density-medium {\n  --formFieldLegacy-activationIndicator-icon-size: 5px;\n}\n.salt-density-high {\n  --formFieldLegacy-activationIndicator-icon-size: 3px;\n}\n\n.saltFormActivationIndicator {\n  height: 0px;\n  width: 100%;\n  position: relative;\n}\n\n/* Styles applied to the indication bar */\n.saltFormActivationIndicator-bar {\n  bottom: 0px;\n  border-color: var(--saltFormFieldLegacy-activationIndicator-borderColor, var(--formFieldLegacy-activationIndicator-color));\n  border-bottom-width: var(--saltFormFieldLegacy-activationIndicator-borderWidth, var(--formFieldLegacy-activationIndicator-size));\n  border-bottom-style: var(--saltFormFieldLegacy-activationIndicator-borderStyle, var(--formFieldLegacy-activationIndicator-style));\n  height: 0;\n  opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);\n  position: absolute;\n  width: 100%;\n}\n\n/* Styles applied to the indication icon */\n.saltFormActivationIndicator-icon {\n  width: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));\n  height: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size));\n  fill: var(--saltFormFieldLegacy-activationIndicator-icon-color, var(--formFieldLegacy-activationIndicator-color));\n  /**\n   * It's only a solid icon showing different color for validation states.\n   * Applying opacity instead of re-defining all colors.\n   */\n  opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1);\n  position: absolute;\n  bottom: 3px;\n  right: 2px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=FormActivationIndicator.css.js.map

package/dist-es/form-field-legacy/FormActivationIndicator.css.js.map

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

package/dist-es/form-field-legacy/FormActivationIndicator.js

@@ -0,0 +1,65 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './FormActivationIndicator.css.js';
+
+const ErrorIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      focusable: false,
+      "data-testid": "ErrorIndicatorIcon",
+      ...props,
+      children: /* @__PURE__ */ jsx("circle", { cx: 8, cy: 8, r: 8 })
+    }
+  );
+};
+const WarningIndicatorIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      focusable: false,
+      "data-testid": "WarningIndicatorIcon",
+      ...props,
+      children: /* @__PURE__ */ jsx("polygon", { points: "0, 16 16, 16 16, 0" })
+    }
+  );
+};
+const withBaseName = makePrefixer("saltFormActivationIndicator");
+const ActivationIndicatorIcon = ({
+  validationStatus,
+  ...restSvgProps
+}) => {
+  if (validationStatus === "error") {
+    return /* @__PURE__ */ jsx(ErrorIndicatorIcon, { ...restSvgProps });
+  }
+  if (validationStatus === "warning") {
+    return /* @__PURE__ */ jsx(WarningIndicatorIcon, { ...restSvgProps });
+  }
+  return null;
+};
+const FormActivationIndicator = ({
+  hasIcon,
+  validationStatus
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-form-activation-indicator",
+    css: css_248z,
+    window: targetWindow
+  });
+  const rootClass = "saltFormActivationIndicator";
+  return /* @__PURE__ */ jsx("div", { className: withBaseName(), children: /* @__PURE__ */ jsx("div", { className: withBaseName("bar"), children: hasIcon && validationStatus && /* @__PURE__ */ jsx(
+    ActivationIndicatorIcon,
+    {
+      className: `${rootClass}-icon`,
+      validationStatus
+    }
+  ) }) });
+};
+
+export { FormActivationIndicator };
+//# sourceMappingURL=FormActivationIndicator.js.map

package/dist-es/form-field-legacy/FormActivationIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormActivationIndicator.js","sources":["../src/form-field-legacy/FormActivationIndicator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { SVGAttributes } from \"react\";\nimport formActivationIndicatorCss from \"./FormActivationIndicator.css\";\nimport type { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nconst ErrorIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"ErrorIndicatorIcon\"\n      {...props}\n    >\n      <circle cx={8} cy={8} r={8} />\n    </svg>\n  );\n};\n\nconst WarningIndicatorIcon = (props: SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      focusable={false}\n      data-testid=\"WarningIndicatorIcon\"\n      {...props}\n    >\n      <polygon points=\"0, 16 16, 16 16, 0\" />\n    </svg>\n  );\n};\n\nconst withBaseName = makePrefixer(\"saltFormActivationIndicator\");\n\nconst ActivationIndicatorIcon = ({\n  validationStatus,\n  ...restSvgProps\n}: Pick<FormFieldProps, \"validationStatus\"> & SVGAttributes<SVGSVGElement>) => {\n  if (validationStatus === \"error\") {\n    return <ErrorIndicatorIcon {...restSvgProps} />;\n  }\n  if (validationStatus === \"warning\") {\n    return <WarningIndicatorIcon {...restSvgProps} />;\n  }\n  return null;\n};\n\n// Removed `enabled` prop, it's better to let parent to control render\nexport interface FormActivationIndicatorProps\n  extends Pick<FormFieldProps, \"validationStatus\"> {\n  hasIcon?: boolean;\n}\n\nexport const FormActivationIndicator = ({\n  hasIcon,\n  validationStatus,\n}: FormActivationIndicatorProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-activation-indicator\",\n    css: formActivationIndicatorCss,\n    window: targetWindow,\n  });\n\n  const rootClass = \"saltFormActivationIndicator\";\n\n  return (\n    <div className={withBaseName()}>\n      <div className={withBaseName(\"bar\")}>\n        {hasIcon && validationStatus && (\n          <ActivationIndicatorIcon\n            className={`${rootClass}-icon`}\n            validationStatus={validationStatus}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["formActivationIndicatorCss"],"mappings":";;;;;;AAOA,MAAM,kBAAA,GAAqB,CAAC,KAAA,KAAwC;AAClE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,WAAA;AAAA,MACR,SAAA,EAAW,KAAA;AAAA,MACX,aAAA,EAAY,oBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,8BAAC,QAAA,EAAA,EAAO,EAAA,EAAI,GAAG,EAAA,EAAI,CAAA,EAAG,GAAG,CAAA,EAAG;AAAA;AAAA,GAC9B;AAEJ,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAAC,KAAA,KAAwC;AACpE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,WAAA;AAAA,MACR,SAAA,EAAW,KAAA;AAAA,MACX,aAAA,EAAY,sBAAA;AAAA,MACX,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAQ,MAAA,EAAO,oBAAA,EAAqB;AAAA;AAAA,GACvC;AAEJ,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA;AAE/D,MAAM,0BAA0B,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA+E;AAC7E,EAAA,IAAI,qBAAqB,OAAA,EAAS;AAChC,IAAA,uBAAO,GAAA,CAAC,kBAAA,EAAA,EAAoB,GAAG,YAAA,EAAc,CAAA;AAAA,EAC/C;AACA,EAAA,IAAI,qBAAqB,SAAA,EAAW;AAClC,IAAA,uBAAO,GAAA,CAAC,oBAAA,EAAA,EAAsB,GAAG,YAAA,EAAc,CAAA;AAAA,EACjD;AACA,EAAA,OAAO,IAAA;AACT,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA;AACF,CAAA,KAAoC;AAClC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,gCAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAA,GAAY,6BAAA;AAElB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,EAAa,EAC3B,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,KAAK,CAAA,EAC/B,QAAA,EAAA,OAAA,IAAW,gBAAA,oBACV,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,MACvB;AAAA;AAAA,KAGN,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist-es/form-field-legacy/FormFieldLegacy.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".salt-density-high {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-background: var(--salt-editable-primary-background);\n  --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n  border: 0;\n  display: inline-grid;\n  margin: var(--saltFormFieldLegacy-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormFieldLegacy-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-200);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(\n    var(--formFieldLegacy-helperText-marginTop-fullWidth) +\n    var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n  );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n  --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n  --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n  --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n  --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n  --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n  --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingLeft: 0px;\n  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n  --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n  --formFieldLegacy-label-marginTop: 0;\n  --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n  background: linear-gradient(\n    to top,\n    transparent var(--formFieldLegacy-background-offset-height),\n    var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n  );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-fixed-100);\n  --formFieldLegacy-activationIndicator-style: var(--salt-borderStyle-solid);\n\n  --saltInputLegacy-cursor: var(--salt-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formFieldLegacy-helperText-height, 0px);\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n  outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=FormFieldLegacy.css.js.map

package/dist-es/form-field-legacy/FormFieldLegacy.css.js.map

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

package/dist-es/form-field-legacy/FormFieldLegacy.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef, Tooltip } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useMemo, useState } from 'react';
+import { FormFieldLegacyContext } from '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { classBase } from './constant.js';
+import { FormActivationIndicator } from './FormActivationIndicator.js';
+import css_248z from './FormFieldLegacy.css.js';
+import { FormHelperText } from './FormHelperText.js';
+import { FormLabel } from './FormLabel.js';
+
+const useA11yValue = ({
+  required,
+  disabled,
+  readOnly,
+  labelId,
+  helperTextId,
+  renderHelperText
+}) => {
+  return useMemo(
+    () => ({
+      "aria-labelledby": labelId,
+      "aria-required": required,
+      "aria-describedby": renderHelperText ? helperTextId : void 0,
+      disabled,
+      readOnly
+    }),
+    [labelId, disabled, readOnly, required, renderHelperText, helperTextId]
+  );
+};
+const useFormFieldLegacy = ({
+  onBlur,
+  onFocus
+}) => {
+  const [focused, setFocused] = useState(false);
+  const handleBlur = (event) => {
+    setFocused(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleFocus = (event) => {
+    setFocused(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  return [
+    {
+      focused
+    },
+    {
+      setFocused
+    },
+    {
+      onBlur: handleBlur,
+      onFocus: handleFocus
+    }
+  ];
+};
+const withBaseName = makePrefixer(classBase);
+const FormFieldLegacy = forwardRef(
+  ({
+    ActivationIndicatorComponent = FormActivationIndicator,
+    children,
+    className,
+    disabled,
+    disableFocusRing = false,
+    fullWidth = true,
+    hasStatusIndicator,
+    HelperTextComponent = FormHelperText,
+    HelperTextProps,
+    helperText,
+    helperTextPlacement = "bottom",
+    label,
+    LabelComponent = FormLabel,
+    labelPlacement = "top",
+    LabelProps = { displayedNecessity: "required" },
+    onBlur,
+    onFocus,
+    readOnly,
+    required,
+    StatusIndicatorProps,
+    validationStatus,
+    variant = "primary",
+    ...restProps
+  }, ref) => {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-form-field-legacy",
+      css: css_248z,
+      window: targetWindow
+    });
+    const labelId = useId(LabelProps == null ? void 0 : LabelProps.id);
+    const helperTextId = useId(HelperTextProps == null ? void 0 : HelperTextProps.id);
+    const rootRef = useRef(null);
+    const renderHelperText = !!helperText;
+    const a11yValue = useA11yValue({
+      required,
+      disabled,
+      readOnly,
+      labelId,
+      helperTextId,
+      renderHelperText
+    });
+    const [states, dispatchers, eventHandlers] = useFormFieldLegacy({
+      onBlur,
+      onFocus
+    });
+    const hasLabel = label !== void 0;
+    const labelTop = hasLabel && labelPlacement === "top";
+    const labelLeft = hasLabel && labelPlacement === "left";
+    const isWarning = validationStatus === "warning";
+    const isError = validationStatus === "error";
+    const focusClass = disableFocusRing ? "lowFocused" : "focused";
+    const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
+    const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
+    const handleTriggerRef = useForkRef(rootRef, ref);
+    return /* @__PURE__ */ jsx(Tooltip, { disabled: !tooltipHelperText, content: helperText, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: handleTriggerRef,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName("warning")]: isWarning,
+            [withBaseName("error")]: isError,
+            [withBaseName("fullWidth")]: fullWidth,
+            [withBaseName(focusClass)]: states.focused,
+            [withBaseName("labelTop")]: labelTop,
+            [withBaseName("labelLeft")]: labelLeft,
+            [withBaseName("withHelperText")]: inlineHelperText,
+            [withBaseName(variant)]: variant
+          },
+          className
+        ),
+        ...eventHandlers,
+        ...restProps,
+        children: /* @__PURE__ */ jsxs(
+          FormFieldLegacyContext.Provider,
+          {
+            value: {
+              ...states,
+              ...dispatchers,
+              ...eventHandlers,
+              a11yProps: a11yValue,
+              inFormField: true,
+              ref: rootRef
+            },
+            children: [
+              hasLabel && /* @__PURE__ */ jsx(
+                LabelComponent,
+                {
+                  ...LabelProps,
+                  validationStatus,
+                  hasStatusIndicator,
+                  StatusIndicatorProps,
+                  className: LabelProps.className,
+                  label,
+                  disabled,
+                  readOnly,
+                  required,
+                  tooltipText: helperText,
+                  id: labelId
+                }
+              ),
+              children,
+              /* @__PURE__ */ jsx(
+                ActivationIndicatorComponent,
+                {
+                  hasIcon: !hasStatusIndicator,
+                  validationStatus
+                }
+              ),
+              renderHelperText && /* @__PURE__ */ jsx(
+                HelperTextComponent,
+                {
+                  helperText,
+                  helperTextPlacement,
+                  ...HelperTextProps,
+                  id: helperTextId
+                }
+              )
+            ]
+          }
+        )
+      }
+    ) });
+  }
+);
+
+export { FormFieldLegacy, useFormFieldLegacy };
+//# sourceMappingURL=FormFieldLegacy.js.map

package/dist-es/form-field-legacy/FormFieldLegacy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegacy.js","sources":["../src/form-field-legacy/FormFieldLegacy.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type Dispatch,\n  type ElementType,\n  type FocusEventHandler,\n  type ForwardedRef,\n  forwardRef,\n  type HTMLAttributes,\n  type SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FormFieldLegacyContext } from \"../form-field-context-legacy\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  type FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport formFieldLegacyCss from \"./FormFieldLegacy.css\";\nimport { FormHelperText, type FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, type FormLabelProps } from \"./FormLabel\";\nimport type { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport type { StatusIndicatorProps } from \"./StatusIndicator\";\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 FormFieldLegacyProps\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 useFormFieldLegacy = ({\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 FormFieldLegacy = 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    }: FormFieldLegacyProps,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field-legacy\",\n      css: formFieldLegacyCss,\n      window: targetWindow,\n    });\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] = useFormFieldLegacy({\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          <FormFieldLegacyContext.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          </FormFieldLegacyContext.Provider>\n        </div>\n      </Tooltip>\n    );\n  },\n);\n"],"names":["formFieldLegacyCss"],"mappings":";;;;;;;;;;;;;AAoIA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAAsB;AACpB,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,iBAAA,EAAmB,OAAA;AAAA,MACnB,eAAA,EAAiB,QAAA;AAAA,MACjB,kBAAA,EAAoB,mBAAmB,YAAA,GAAe,MAAA;AAAA,MACtD,QAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,OAAA,EAAS,QAAA,EAAU,QAAA,EAAU,QAAA,EAAU,kBAAkB,YAAY;AAAA,GACxE;AACF,CAAA;AAGO,MAAM,qBAAqB,CAAC;AAAA,EACjC,MAAA;AAAA,EACA;AACF,CAAA,KAUK;AACH,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,UAAA,GAAgD,CAAC,KAAA,KAAU;AAC/D,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA;AAAA,EACX,CAAA;AACA,EAAA,MAAM,WAAA,GAAiD,CAAC,KAAA,KAAU;AAChE,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,EACZ,CAAA;AACA,EAAA,OAAO;AAAA,IACL;AAAA,MACE;AAAA,KACF;AAAA,IACA;AAAA,MACE;AAAA,KACF;AAAA,IACA;AAAA,MACE,MAAA,EAAQ,UAAA;AAAA,MACR,OAAA,EAAS;AAAA;AACX,GACF;AACF;AAEA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA;AAEpC,MAAM,eAAA,GAAkB,UAAA;AAAA,EAC7B,CACE;AAAA,IACE,4BAAA,GAA+B,uBAAA;AAAA,IAC/B,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA,GAAmB,KAAA;AAAA,IACnB,SAAA,GAAY,IAAA;AAAA,IACZ,kBAAA;AAAA,IACA,mBAAA,GAAsB,cAAA;AAAA,IACtB,eAAA;AAAA,IACA,UAAA;AAAA,IACA,mBAAA,GAAsB,QAAA;AAAA,IACtB,KAAA;AAAA,IACA,cAAA,GAAiB,SAAA;AAAA,IACjB,cAAA,GAAiB,KAAA;AAAA,IACjB,UAAA,GAAa,EAAE,kBAAA,EAAoB,UAAA,EAAW;AAAA,IAC9C,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,oBAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA,GAAU,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,wBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,KAAA,CAAM,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,CAAY,EAAE,CAAA;AACpC,IAAA,MAAM,YAAA,GAAe,KAAA,CAAM,eAAA,IAAA,IAAA,GAAA,MAAA,GAAA,eAAA,CAAiB,EAAE,CAAA;AAC9C,IAAA,MAAM,OAAA,GAAU,OAAuB,IAAI,CAAA;AAE3C,IAAA,MAAM,gBAAA,GAAmB,CAAC,CAAC,UAAA;AAE3B,IAAA,MAAM,YAAY,YAAA,CAAa;AAAA,MAC7B,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,CAAC,MAAA,EAAQ,WAAA,EAAa,aAAa,IAAI,kBAAA,CAAmB;AAAA,MAC9D,MAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,WAAW,KAAA,KAAU,MAAA;AAC3B,IAAA,MAAM,QAAA,GAAW,YAAY,cAAA,KAAmB,KAAA;AAChD,IAAA,MAAM,SAAA,GAAY,YAAY,cAAA,KAAmB,MAAA;AACjD,IAAA,MAAM,YAAY,gBAAA,KAAqB,SAAA;AACvC,IAAA,MAAM,UAAU,gBAAA,KAAqB,OAAA;AACrC,IAAA,MAAM,UAAA,GAAa,mBACf,YAAA,GACA,SAAA;AACJ,IAAA,MAAM,gBAAA,GACJ,oBAAoB,mBAAA,KAAwB,QAAA;AAC9C,IAAA,MAAM,iBAAA,GACJ,gBAAA,IACA,mBAAA,KAAwB,SAAA,IACxB,CAAC,kBAAA;AAEH,IAAA,MAAM,gBAAA,GAAmB,UAAA,CAAW,OAAA,EAAS,GAAG,CAAA;AAEhD,IAAA,2BACG,OAAA,EAAA,EAAQ,QAAA,EAAU,CAAC,iBAAA,EAAmB,SAAS,UAAA,EAC9C,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,gBAAA;AAAA,QACL,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,SAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG,OAAA;AAAA,YACzB,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,MAAA,CAAO,OAAA;AAAA,YACnC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,YAC7B,CAAC,YAAA,CAAa,gBAAgB,CAAC,GAAG,gBAAA;AAAA,YAClC,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,aAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,sBAAA,CAAuB,QAAA;AAAA,UAAvB;AAAA,YACC,KAAA,EAAO;AAAA,cACL,GAAG,MAAA;AAAA,cACH,GAAG,WAAA;AAAA,cACH,GAAG,aAAA;AAAA,cACH,SAAA,EAAW,SAAA;AAAA,cACX,WAAA,EAAa,IAAA;AAAA,cACb,GAAA,EAAK;AAAA,aACP;AAAA,YAEC,QAAA,EAAA;AAAA,cAAA,QAAA,oBACC,GAAA;AAAA,gBAAC,cAAA;AAAA,gBAAA;AAAA,kBACE,GAAG,UAAA;AAAA,kBACJ,gBAAA;AAAA,kBACA,kBAAA;AAAA,kBACA,oBAAA;AAAA,kBACA,WAAW,UAAA,CAAW,SAAA;AAAA,kBACtB,KAAA;AAAA,kBACA,QAAA;AAAA,kBACA,QAAA;AAAA,kBACA,QAAA;AAAA,kBACA,WAAA,EAAa,UAAA;AAAA,kBACb,EAAA,EAAI;AAAA;AAAA,eACN;AAAA,cAED,QAAA;AAAA,8BACD,GAAA;AAAA,gBAAC,4BAAA;AAAA,gBAAA;AAAA,kBACC,SAAS,CAAC,kBAAA;AAAA,kBACV;AAAA;AAAA,eACF;AAAA,cACC,gBAAA,oBACC,GAAA;AAAA,gBAAC,mBAAA;AAAA,gBAAA;AAAA,kBACC,UAAA;AAAA,kBACA,mBAAA;AAAA,kBACC,GAAG,eAAA;AAAA,kBACJ,EAAA,EAAI;AAAA;AAAA;AACN;AAAA;AAAA;AAEJ;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-es/form-field-legacy/FormHelperText.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=FormHelperText.css.js.map

package/dist-es/form-field-legacy/FormHelperText.css.js.map

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

package/dist-es/form-field-legacy/FormHelperText.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './FormHelperText.css.js';
+
+const FormHelperText = ({
+  helperText,
+  helperTextPlacement,
+  ...restProps
+}) => {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-form-helper-text",
+    css: css_248z,
+    window: targetWindow
+  });
+  if (helperText) {
+    if (helperTextPlacement === "bottom") {
+      return /* @__PURE__ */ jsx("p", { className: "saltFormHelperText", ...restProps, children: helperText });
+    }
+    if (helperTextPlacement === "tooltip") {
+      console.warn("helperTextPlacement tooltip has not yet implemented");
+      return null;
+    }
+    return null;
+  }
+  return null;
+};
+
+export { FormHelperText };
+//# sourceMappingURL=FormHelperText.js.map

package/dist-es/form-field-legacy/FormHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHelperText.js","sources":["../src/form-field-legacy/FormHelperText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ComponentPropsWithoutRef } from \"react\";\nimport type { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nimport formHelperTextCss from \"./FormHelperText.css\";\n\nexport interface FormHelperTextProps extends ComponentPropsWithoutRef<\"p\"> {\n  helperText: FormFieldProps[\"helperText\"];\n  helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n}\n\nexport const FormHelperText = ({\n  helperText,\n  helperTextPlacement,\n  ...restProps\n}: FormHelperTextProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-helper-text\",\n    css: formHelperTextCss,\n    window: targetWindow,\n  });\n\n  if (helperText) {\n    if (helperTextPlacement === \"bottom\") {\n      return (\n        <p className=\"saltFormHelperText\" {...restProps}>\n          {helperText}\n        </p>\n      );\n    }\n    if (helperTextPlacement === \"tooltip\") {\n      console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n      return null;\n    }\n    return null;\n  }\n  return null;\n};\n"],"names":["formHelperTextCss"],"mappings":";;;;;AAYO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA2B;AACzB,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,uBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,IAAI,wBAAwB,QAAA,EAAU;AACpC,MAAA,2BACG,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EAAsB,GAAG,WACnC,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,IAEJ;AACA,IAAA,IAAI,wBAAwB,SAAA,EAAW;AACrC,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA;AAClE,MAAA,OAAO,IAAA;AAAA,IACT;AACA,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,OAAO,IAAA;AACT;;;;"}

package/dist-es/form-field-legacy/FormLabel.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n  box-sizing: border-box;\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-typography-textDecoration-italic));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator.saltIcon {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=FormLabel.css.js.map

package/dist-es/form-field-legacy/FormLabel.css.js.map

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