@salt-ds/lab 1.0.0-alpha.3 → 1.0.0-alpha.31

package/dist-cjs/dropdown-next/DropdownNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownNext.js","sources":["../src/dropdown-next/DropdownNext.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  MouseEvent,\n  KeyboardEvent,\n  useEffect,\n  FocusEvent,\n  useRef,\n  ForwardedRef,\n  Ref,\n} from \"react\";\nimport {\n  ListControlProps,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport {\n  makePrefixer,\n  StatusAdornment,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n  useFormFieldProps,\n  useId,\n  ValidationStatus,\n} from \"@salt-ds/core\";\nimport { flip, size } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dropdownCss from \"./DropdownNext.css\";\nimport { ListControlContext } from \"../list-control/ListControlContext\";\nimport { OptionList } from \"../option/OptionList\";\n\nexport interface DropdownNextProps<Item = string>\n  extends Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\">,\n    ListControlProps<Item> {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n}\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownNext\");\n\nexport const DropdownNext = forwardRef(function DropdownNext<Item>(\n  props: DropdownNextProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>\n) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    className,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    defaultValue: defaultValueProp,\n    value,\n    onOpenChange,\n    open,\n    placeholder,\n    startAdornment,\n    required: requiredProp,\n    variant = \"primary\",\n    validationStatus: validationStatusProp,\n    onClick,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-DropdownNext\",\n    css: dropdownCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : undefined ?? requiredProp;\n\n  const isEmptyReadOnly = readOnly && !defaultValueProp && !value;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    defaultValue,\n    value,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getOptionAtIndex,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    options,\n    selectedState,\n    select,\n    valueState,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { x, y, strategy, elements, floating, reference } = useFloatingUI({\n    open,\n    placement: \"bottom-start\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n  const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!readOnly) {\n      setFocusVisibleState(false);\n      setOpen(event, !openState);\n    }\n    onClick?.(event);\n  };\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    if (!openState) {\n      setOpen(event, true);\n    }\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const currentIndex = activeState ? getIndexOfOption(activeState) : -1;\n    const count = options.length - 1;\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(event, true);\n        return;\n      }\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    let newActive;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 1));\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 1));\n        break;\n      case \"Home\":\n        newActive = getOptionAtIndex(0);\n        break;\n      case \"End\":\n        newActive = getOptionAtIndex(count);\n        break;\n      case \"PageUp\":\n        newActive = getOptionAtIndex(Math.max(0, currentIndex - 10));\n        break;\n      case \"PageDown\":\n        newActive = getOptionAtIndex(Math.min(count, currentIndex + 10));\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          (openState && Boolean(activeState?.disabled)) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        if (!multiselect) {\n          setOpen(event, false);\n        }\n\n        break;\n      case \"Escape\":\n        setOpen(event, false);\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive?.id != activeState?.id) {\n      event.preventDefault();\n      setActive(newActive);\n      setFocusVisibleState(true);\n    }\n\n    onKeyDown?.(event);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(true);\n\n    onFocus?.(event);\n  };\n\n  const ignoreBlur = useRef(false);\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    if (!ignoreBlur.current) {\n      setOpen(event, false);\n    }\n    ignoreBlur.current = false;\n\n    setFocusedState(false);\n    onBlur?.(event);\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleListMouseDown = () => {\n    ignoreBlur.current = true;\n  };\n\n  const handleListFocus = () => {\n    buttonRef.current?.focus();\n  };\n  const handleListClick = () => {\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    if (openState && activeIndex < 0) {\n      if (openKey.current.key === \"ArrowDown\") {\n        setActive(getOptionAtIndex(0));\n      } else if (openKey.current.key === \"ArrowUp\") {\n        setActive(getOptionAtIndex(options.length - 1));\n      } else {\n        if (selectedState.length > 0) {\n          const selected = getOptionsMatching(\n            (option) => option.value === selectedState[0]\n          ).pop();\n          if (selected) {\n            setActive(selected);\n          }\n        } else {\n          setActive(getOptionAtIndex(0));\n        }\n      }\n    } else if (!openState) {\n      setActive(undefined);\n    }\n  }, [openState, children]);\n\n  const listId = useId();\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <button\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          className\n        )}\n        ref={handleButtonRef}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        role=\"combobox\"\n        type=\"button\"\n        disabled={disabled}\n        aria-readonly={readOnly ? \"true\" : undefined}\n        aria-required={required ? \"true\" : undefined}\n        aria-expanded={openState}\n        aria-activedescendant={activeState?.id}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        aria-multiselectable={multiselect}\n        aria-controls={openState ? listId : undefined}\n        {...rest}\n      >\n        {startAdornment}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueState,\n          })}\n        >\n          {valueState ?? placeholder}\n        </span>\n        {validationStatus && <StatusAdornment status={validationStatus} />}\n        {!readOnly && <ExpandIcon open={openState} />}\n      </button>\n      <FloatingComponent\n        open={(openState || focusedState) && !readOnly && children != undefined}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={floating}\n      >\n        <OptionList\n          id={listId}\n          collapsed={!openState}\n          onMouseOver={handleListMouseOver}\n          onMouseDown={handleListMouseDown}\n          onFocus={handleListFocus}\n          onClick={handleListClick}\n          ref={listRef}\n        >\n          {children}\n        </OptionList>\n      </FloatingComponent>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: DropdownNextProps<Item> & { ref?: Ref<HTMLButtonElement> }\n) => JSX.Element;\n"],"names":["jsx","ChevronUpIcon","ChevronDownIcon","makePrefixer","forwardRef","DropdownNext","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingComponent","useFloatingUI","size","elements","flip","useRef","useForkRef","_a","useEffect","selected","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}

package/dist-cjs/editable-label/EditableLabel.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltEditableLabel {\n  --saltInputLegacy-minWidth: 14px;\n  --saltInputLegacy-position: absolute;\n  --editableLabel-padding: var(--saltEditableLabel-padding, 6px);\n  --editableLabel-height: var(--saltEditableLabel-height, 26px);\n  color: inherit;\n  display: flex;\n  flex-direction: column;\n  font-size: var(--salt-text-fontSize);\n  height: var(--editableLabel-height);\n  justify-content: center;\n  padding: 0 var(--editableLabel-padding);\n  position: relative;\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltEditableLabel:before {\n  content: attr(data-text);\n  display: block;\n  height: 0px;\n  visibility: hidden;\n  white-space: pre-wrap;\n}\n\n.saltEditableLabel .saltInputLegacy {\n  font-weight: var(--salt-text-fontWeight);\n  left: var(--editableLabel-padding, 0);\n  padding: 0;\n  outline-style: none;\n  right: var(--editableLabel-padding, 0);\n}\n\n.saltEditableLabel-input {\n  outline: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=EditableLabel.css.js.map

package/dist-cjs/editable-label/EditableLabel.css.js.map

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  ChangeEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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, inputRef]);\n\n  const enterEditMode = useCallback(() => {\n    setEditing(true);\n    // ignoreBlur.current = false;\n    onEnterEditMode && onEnterEditMode();\n  }, [onEnterEditMode, setEditing]);\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 && onExitEditMode(originalValue, value, allowDeactivation);\n  };\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && 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":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useIsomorphicLayoutEffect","useCallback","value","clsx","jsx","Input"],"mappings":"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"}

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

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+
+const FormFieldLegacyContext = core.createContext(
+  "FormFieldContext",
+  {}
+);
+
+exports.FormFieldLegacyContext = FormFieldLegacyContext;
+//# sourceMappingURL=FormFieldLegacyContext.js.map

package/dist-cjs/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 { Dispatch, FocusEventHandler, RefObject, SetStateAction } from \"react\";\nimport { createContext } from \"@salt-ds/core\";\nimport { 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":["createContext"],"mappings":";;;;;;AAaO,MAAM,sBAAyB,GAAAA,kBAAA;AAAA,EACpC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@salt-ds/core');
+var FormFieldLegacyContext = require('./FormFieldLegacyContext.js');
+
+function useFormFieldLegacyProps({
+  focusVisible
+} = {}) {
+  const { setFocused, ...formFieldProps } = React.useContext(FormFieldLegacyContext.FormFieldLegacyContext) || {};
+  core.useIsomorphicLayoutEffect(() => {
+    if (focusVisible !== void 0 && setFocused) {
+      setFocused(focusVisible);
+    }
+  }, [focusVisible, setFocused]);
+  return {
+    setFocused,
+    ...formFieldProps
+  };
+}
+
+exports.useFormFieldLegacyProps = useFormFieldLegacyProps;
+//# sourceMappingURL=useFormFieldLegacyProps.js.map

package/dist-cjs/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 { useContext } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  FormFieldLegacyContext,\n  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":["useContext","FormFieldLegacyContext","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAWO,SAAS,uBAAwB,CAAA;AAAA,EACtC,YAAA;AACF,CAAA,GAAkC,EAA0C,EAAA;AAE1E,EAAA,MAAM,EAAE,UAAe,EAAA,GAAA,cAAA,KACrBA,gBAAW,CAAAC,6CAAsB,KAAK,EAAC,CAAA;AAEzC,EAAAC,8BAAA,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-cjs/form-field-legacy/FormActivationIndicator.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+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";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormActivationIndicator.css.js.map

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormActivationIndicator.js","sources":["../src/form-field-legacy/FormActivationIndicator.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldLegacyProps as FormFieldProps } from \"./FormFieldLegacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formActivationIndicatorCss from \"./FormActivationIndicator.css\";\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  } else if (validationStatus === \"warning\") {\n    return <WarningIndicatorIcon {...restSvgProps} />;\n  } else {\n    return null;\n  }\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":["jsx","makePrefixer","useWindow","useComponentCssInjection","formActivationIndicatorCss"],"mappings":";;;;;;;;;;AASA,MAAM,kBAAA,GAAqB,CAAC,KAAwC,KAAA;AAClE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,oBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,QAAA,EAAA;AAAA,MAAO,EAAI,EAAA,CAAA;AAAA,MAAG,EAAI,EAAA,CAAA;AAAA,MAAG,CAAG,EAAA,CAAA;AAAA,KAAG,CAAA;AAAA,GAC9B,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAAC,KAAwC,KAAA;AACpE,EAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,SAAW,EAAA,KAAA;AAAA,IACX,aAAY,EAAA,sBAAA;AAAA,IACX,GAAG,KAAA;AAAA,IAEJ,QAAC,kBAAAA,cAAA,CAAA,SAAA,EAAA;AAAA,MAAQ,MAAO,EAAA,oBAAA;AAAA,KAAqB,CAAA;AAAA,GACvC,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEA,MAAM,YAAA,GAAeC,kBAAa,6BAA6B,CAAA,CAAA;AAE/D,MAAM,0BAA0B,CAAC;AAAA,EAC/B,gBAAA;AAAA,EACG,GAAA,YAAA;AACL,CAA+E,KAAA;AAC7E,EAAA,IAAI,qBAAqB,OAAS,EAAA;AAChC,IAAA,uBAAQD,cAAA,CAAA,kBAAA,EAAA;AAAA,MAAoB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC/C,MAAA,IAAW,qBAAqB,SAAW,EAAA;AACzC,IAAA,uBAAQA,cAAA,CAAA,oBAAA,EAAA;AAAA,MAAsB,GAAG,YAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC1C,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAQO,MAAM,0BAA0B,CAAC;AAAA,EACtC,OAAA;AAAA,EACA,gBAAA;AACF,CAAoC,KAAA;AAClC,EAAA,MAAM,eAAeE,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gCAAA;AAAA,IACR,GAAK,EAAAC,yBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,6BAAA,CAAA;AAElB,EAAA,uBACGJ,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAC3B,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,MAC/B,QAAA,EAAA,OAAA,IAAW,oCACTA,cAAA,CAAA,uBAAA,EAAA;AAAA,QACC,WAAW,CAAG,EAAA,SAAA,CAAA,KAAA,CAAA;AAAA,QACd,gBAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);\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-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInputLegacy-cursor: var(--salt-editable-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-editable-borderWidth-active);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInputLegacy-cursor: var(--salt-editable-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) + 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-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-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-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-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-editable-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-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-editable-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";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormFieldLegacy.css.js.map

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

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

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

@@ -0,0 +1,187 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var FormFieldLegacyContext = require('../form-field-context-legacy/FormFieldLegacyContext.js');
+var constant = require('./constant.js');
+var FormActivationIndicator = require('./FormActivationIndicator.js');
+var FormHelperText = require('./FormHelperText.js');
+var FormLabel = require('./FormLabel.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var FormFieldLegacy$1 = require('./FormFieldLegacy.css.js');
+
+const useA11yValue = ({
+  required,
+  disabled,
+  readOnly,
+  labelId,
+  helperTextId,
+  renderHelperText
+}) => {
+  return React.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] = React.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 = core.makePrefixer(constant.classBase);
+const FormFieldLegacy = React.forwardRef(
+  ({
+    ActivationIndicatorComponent = FormActivationIndicator.FormActivationIndicator,
+    children,
+    className,
+    disabled,
+    disableFocusRing = false,
+    fullWidth = true,
+    hasStatusIndicator,
+    HelperTextComponent = FormHelperText.FormHelperText,
+    HelperTextProps,
+    helperText,
+    helperTextPlacement = "bottom",
+    label,
+    LabelComponent = FormLabel.FormLabel,
+    labelPlacement = "top",
+    LabelProps = { displayedNecessity: "required" },
+    onBlur,
+    onFocus,
+    readOnly,
+    required,
+    StatusIndicatorProps: StatusIndicatorProps2,
+    validationStatus,
+    variant = "primary",
+    ...restProps
+  }, ref) => {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-form-field-legacy",
+      css: FormFieldLegacy$1,
+      window: targetWindow
+    });
+    const labelId = core.useId(LabelProps == null ? void 0 : LabelProps.id);
+    const helperTextId = core.useId(HelperTextProps == null ? void 0 : HelperTextProps.id);
+    const rootRef = React.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 = core.useForkRef(rootRef, ref);
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
+      disabled: !tooltipHelperText,
+      content: helperText,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+        ref: handleTriggerRef,
+        className: clsx.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__ */ jsxRuntime.jsxs(FormFieldLegacyContext.FormFieldLegacyContext.Provider, {
+          value: {
+            ...states,
+            ...dispatchers,
+            ...eventHandlers,
+            a11yProps: a11yValue,
+            inFormField: true,
+            ref: rootRef
+          },
+          children: [
+            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(LabelComponent, {
+              ...LabelProps,
+              validationStatus,
+              hasStatusIndicator,
+              StatusIndicatorProps: StatusIndicatorProps2,
+              className: LabelProps.className,
+              label,
+              disabled,
+              readOnly,
+              required,
+              tooltipText: helperText,
+              id: labelId
+            }),
+            children,
+            /* @__PURE__ */ jsxRuntime.jsx(ActivationIndicatorComponent, {
+              hasIcon: !hasStatusIndicator,
+              validationStatus
+            }),
+            renderHelperText && /* @__PURE__ */ jsxRuntime.jsx(HelperTextComponent, {
+              helperText,
+              helperTextPlacement,
+              ...HelperTextProps,
+              id: helperTextId
+            })
+          ]
+        })
+      })
+    });
+  }
+);
+
+exports.FormFieldLegacy = FormFieldLegacy;
+exports.useFormFieldLegacy = useFormFieldLegacy;
+//# sourceMappingURL=FormFieldLegacy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegacy.js","sources":["../src/form-field-legacy/FormFieldLegacy.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  Dispatch,\n  ElementType,\n  FocusEventHandler,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  SetStateAction,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldLegacyContext } from \"../form-field-context-legacy\";\nimport { classBase } from \"./constant\";\nimport {\n  FormActivationIndicator,\n  FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldLegacyCss from \"./FormFieldLegacy.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" | \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" | \"warning\";\n\nexport interface A11yValueProps\n  extends Pick<NecessityIndicatorOptions, \"required\"> {\n  /**\n   * If `true`, the FormField will be disabled.\n   */\n  disabled?: boolean;\n  /** id of the helper text node */\n  helperTextId?: string;\n  /** id of the label node */\n  labelId?: string;\n  /**\n   * The FormField value is Readonly\n   */\n  readOnly?: boolean;\n\n  /**\n   * Whether the form field needs to render helper text\n   */\n  renderHelperText?: boolean;\n}\n\nexport interface 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":["useMemo","useState","makePrefixer","classBase","forwardRef","FormActivationIndicator","FormHelperText","FormLabel","StatusIndicatorProps","useWindow","useComponentCssInjection","formFieldLegacyCss","useId","useRef","useForkRef","jsx","Tooltip","clsx","jsxs","FormFieldLegacyContext"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+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-editable-help-fontStyle));\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";
+
+module.exports = css_248z;
+//# sourceMappingURL=FormHelperText.css.js.map

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

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