@salt-ds/core 0.0.0-snapshot-20230705144029 → 0.0.0-snapshot-20230802143610

package/dist-cjs/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. This does not set the native\n   * input element to indeterminate due to the inconsistent behaviour across browsers\n   * However, a data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      ...restInputProps\n    } = inputProps;\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      checkboxGroup.onChange?.(event);\n    };\n\n    const checkboxGroupChecked =\n      checkedProp == null && value != null\n        ? checkboxGroup.checkedValues?.includes(value)\n        : checkedProp;\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup.disabled ?? formFieldDisabled ?? disabledProp;\n    const validationStatus = !disabled\n      ? checkboxGroup.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp\n      : undefined;\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          // aria-checked only needed when indeterminate since native indeterminate behaviour is not used\n          aria-checked={indeterminate ? \"mixed\" : undefined}\n          aria-describedby={clsx(\n            checkboxGroup.a11yProps?.[\"aria-describedby\"] ??\n              formFieldA11yProps?.[\"aria-describedby\"],\n            inputDescribedBy\n          )}\n          aria-labelledby={clsx(\n            checkboxGroup.a11yProps?.[\"aria-labelledby\"] ??\n              formFieldA11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy\n          )}\n          name={name}\n          value={value}\n          {...restInputProps}\n          checked={checked}\n          className={withBaseName(\"input\")}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","_a","value","useControlled","useFormFieldProps","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. This does not set the native\n   * input element to indeterminate due to the inconsistent behaviour across browsers\n   * However, a data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      readOnly: readOnlyProp,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const checkboxGroupChecked =\n      checkedProp == null && value != null\n        ? checkboxGroup.checkedValues?.includes(value)\n        : checkedProp;\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup.disabled ?? formFieldDisabled ?? disabledProp;\n    const readOnly =\n      checkboxGroup.readOnly ?? formFieldReadOnly ?? readOnlyProp;\n    const validationStatus = !disabled\n      ? checkboxGroup.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp\n      : undefined;\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented || readOnly) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n      checkboxGroup.onChange?.(event);\n    };\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          // aria-checked only needed when indeterminate since native indeterminate behaviour is not used\n          aria-checked={indeterminate ? \"mixed\" : undefined}\n          aria-describedby={clsx(\n            checkboxGroup.a11yProps?.[\"aria-describedby\"] ??\n              formFieldA11yProps?.[\"aria-describedby\"],\n            inputDescribedBy\n          )}\n          aria-labelledby={clsx(\n            checkboxGroup.a11yProps?.[\"aria-labelledby\"] ??\n              formFieldA11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy\n          )}\n          name={name}\n          value={value}\n          // From ADA: read-only field doesn't need to be focusable since it's not a field but text\n          tabIndex={readOnly ? -1 : undefined}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          {...restInputProps}\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","_a","value","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}

package/dist-cjs/checkbox/CheckboxGroup.js

@@ -28,6 +28,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
   direction = "vertical",
   name,
   onChange,
+  readOnly: readOnlyProp,
   wrap,
   validationStatus: validationStatusProp,
   ...other
@@ -41,9 +42,11 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
   const {
     a11yProps,
     disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
     validationStatus: formFieldValidationStatus
   } = useFormFieldProps.useFormFieldProps();
   const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
+  const readOnly = formFieldReadOnly != null ? formFieldReadOnly : readOnlyProp;
   const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
   const [checkedValues, setCheckedValues] = useControlled.useControlled({
     controlled: checkedValuesProp,
@@ -52,8 +55,8 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
     state: "checkedValues"
   });
   const handleChange = (event) => {
+    const name2 = event.target.value;
     setCheckedValues((oldValues = []) => {
-      const name2 = event.target.value;
       const isSelected = oldValues.includes(name2);
       return isSelected ? oldValues.filter((value) => value !== name2) : oldValues.concat(name2);
     });
@@ -77,6 +80,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup2({
         name,
         onChange: handleChange,
         checkedValues,
+        readOnly,
         validationStatus
       },
       children

package/dist-cjs/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setCheckedValues((oldValues: string[] = []) => {\n      const name = event.target.value;\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoDA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgBC,gBAG3B,CAAA,SAASC,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAD,cAAA,CAACE,0CAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CheckboxGroup.js","sources":["../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\nimport checkboxGroupCss from \"./CheckboxGroup.css\";\n\nexport interface CheckboxGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * The current checked options.\n   */\n  checkedValues?: string[];\n  /**\n   * The default selected options for un-controlled component.\n   */\n  defaultCheckedValues?: string[];\n  /**\n   * Display group of elements in a compact row.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the Checkbox group\n   */\n  disabled?: boolean;\n  /**\n   * The name used to reference the value of the control.\n   */\n  name?: string;\n  /**\n   * Callback fired when a checkbox is clicked.\n   * `event.target.value` returns the value of the checkbox that was clicked.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise, the checkboxes will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * Validation status.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxGroup\");\n\nexport const CheckboxGroup = forwardRef<\n  HTMLFieldSetElement,\n  CheckboxGroupProps\n>(function CheckboxGroup(\n  {\n    checkedValues: checkedValuesProp,\n    defaultCheckedValues = [],\n    children,\n    className,\n    disabled: disabledProp,\n    direction = \"vertical\",\n    name,\n    onChange,\n    readOnly: readOnlyProp,\n    wrap,\n    validationStatus: validationStatusProp,\n    ...other\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-group\",\n    css: checkboxGroupCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps,\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\n  const readOnly = formFieldReadOnly ?? readOnlyProp;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [checkedValues, setCheckedValues] = useControlled({\n    controlled: checkedValuesProp,\n    default: defaultCheckedValues,\n    name: \"CheckboxGroup\",\n    state: \"checkedValues\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const name = event.target.value;\n    setCheckedValues((oldValues: string[] = []) => {\n      const isSelected = oldValues.includes(name);\n\n      return isSelected\n        ? oldValues.filter((value) => value !== name)\n        : oldValues.concat(name);\n    });\n\n    onChange?.(event);\n  };\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      ref={ref}\n      {...other}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          checkedValues,\n          readOnly,\n          validationStatus,\n        }}\n      >\n        {children}\n      </CheckboxGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CheckboxGroup","useWindow","useComponentCssInjection","checkboxGroupCss","useFormFieldProps","useControlled","name","jsx","clsx","CheckboxGroupContext"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,mBAAmB,CAAA,CAAA;AAExC,MAAA,aAAA,GAAgBC,gBAG3B,CAAA,SAASC,cACT,CAAA;AAAA,EACE,aAAe,EAAA,iBAAA;AAAA,EACf,uBAAuB,EAAC;AAAA,EACxB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,SAAY,GAAA,UAAA;AAAA,EACZ,IAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,IAAA;AAAA,EACA,gBAAkB,EAAA,oBAAA;AAAA,EACf,GAAA,KAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,qBAAA;AAAA,IACR,GAAK,EAAAC,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,mBAAmB,yBAA6B,IAAA,IAAA,GAAA,yBAAA,GAAA,oBAAA,CAAA;AAEtD,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACtD,UAAY,EAAA,iBAAA;AAAA,IACZ,OAAS,EAAA,oBAAA;AAAA,IACT,IAAM,EAAA,eAAA;AAAA,IACN,KAAO,EAAA,eAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAMC,MAAAA,KAAAA,GAAO,MAAM,MAAO,CAAA,KAAA,CAAA;AAC1B,IAAiB,gBAAA,CAAA,CAAC,SAAsB,GAAA,EAAO,KAAA;AAC7C,MAAM,MAAA,UAAA,GAAa,SAAU,CAAA,QAAA,CAASA,KAAI,CAAA,CAAA;AAE1C,MAAO,OAAA,UAAA,GACH,SAAU,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,UAAUA,KAAI,CAAA,GAC1C,SAAU,CAAA,MAAA,CAAOA,KAAI,CAAA,CAAA;AAAA,KAC1B,CAAA,CAAA;AAED,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,aAAa,SAAS,CAAA;AAAA,MACtB;AAAA,QACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,CAAC,IAAA;AAAA,OAC7B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAD,cAAA,CAACE,0CAAqB,QAArB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,aAAA;AAAA,QACA,QAAA;AAAA,QACA,gBAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if validationStatus=\"error\"` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if validationStatus=\"error\"` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background);\n}\n\n/* Styles applied if `validationStatus=\"warning\"` */\n.saltCheckbox-warning .saltCheckboxIcon,\n.saltCheckbox-warning:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-warning, var(--salt-status-warning-foreground));\n}\n\n/* Styles applied if validationStatus=\"warning\"` on hover */\n.saltCheckbox-warning:hover .saltCheckboxIcon {\n  background: var(--salt-status-warning-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `validationStatus=\"error\"` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}` and `validationStatus=\"warning\"` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-warning {\n  fill: var(--saltCheckbox-icon-stroke-warning, var(--salt-status-warning-foreground));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `validationStatus=\"error\"` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}` and `validationStatus=\"warning\"` */\n.saltCheckboxIcon-warning.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-warning.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-erwarningror, var(--salt-status-warning-foreground));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/checkbox/CheckboxIcon.js

@@ -12,20 +12,34 @@ var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 require('../viewport/ViewportProvider.js');
-var CheckboxUncheckedIcon = require('./assets/CheckboxUncheckedIcon.js');
-var CheckboxCheckedIcon = require('./assets/CheckboxCheckedIcon.js');
-var CheckboxCheckedIconHD = require('./assets/CheckboxCheckedIconHD.js');
-var CheckboxIndeterminateIcon = require('./assets/CheckboxIndeterminateIcon.js');
 var CheckboxIcon$1 = require('./CheckboxIcon.css.js');
+var icons = require('@salt-ds/icons');
 
 const withBaseName = makePrefixer.makePrefixer("saltCheckboxIcon");
+function CheckedIcon(props) {
+  const density = SaltProvider.useDensity();
+  return density === "high" ? /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSmallSolidIcon, {
+    ...props
+  }) : /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSolidIcon, {
+    ...props
+  });
+}
+function CheckedReadOnlyIcon(props) {
+  const density = SaltProvider.useDensity();
+  return density === "high" ? /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSmallIcon, {
+    ...props
+  }) : /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessIcon, {
+    ...props
+  });
+}
 const CheckboxIcon = ({
   checked = false,
-  className: classNameProp,
+  className,
   disabled,
   error,
   indeterminate,
-  validationStatus
+  validationStatus,
+  readOnly
 }) => {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -33,24 +47,28 @@ const CheckboxIcon = ({
     css: CheckboxIcon$1,
     window: targetWindow
   });
-  const className = clsx.clsx(
-    withBaseName(),
-    {
-      [withBaseName("disabled")]: disabled,
-      [withBaseName("error")]: error,
-      [withBaseName(validationStatus || "")]: validationStatus
-    },
-    classNameProp
-  );
-  const density = SaltProvider.useDensity();
-  return indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndeterminateIcon.CheckboxIndeterminateIcon, {
-    className: clsx.clsx(className, withBaseName("indeterminate"))
-  }) : checked ? density === "high" ? /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckedIconHD.CheckboxCheckedIconHD, {
-    className: clsx.clsx(className, withBaseName("checked"))
-  }) : /* @__PURE__ */ jsxRuntime.jsx(CheckboxCheckedIcon.CheckboxCheckedIcon, {
-    className: clsx.clsx(className, withBaseName("checked"))
-  }) : /* @__PURE__ */ jsxRuntime.jsx(CheckboxUncheckedIcon.CheckboxUncheckedIcon, {
-    className
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    "aria-hidden": "true",
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("checked")]: checked,
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("error")]: error,
+        [withBaseName(validationStatus || "")]: validationStatus,
+        [withBaseName("indeterminate")]: indeterminate,
+        [withBaseName("readOnly")]: readOnly
+      },
+      className
+    ),
+    children: [
+      checked && !indeterminate && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {
+        className: withBaseName("icon")
+      }),
+      checked && !indeterminate && readOnly && /* @__PURE__ */ jsxRuntime.jsx(CheckedReadOnlyIcon, {
+        className: withBaseName("icon")
+      })
+    ]
   });
 };
 

package/dist-cjs/checkbox/CheckboxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport {\n  CheckboxCheckedIcon,\n  CheckboxCheckedIconHD,\n  CheckboxIndeterminateIcon,\n  CheckboxUncheckedIcon,\n} from \"./assets\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  error?: boolean /* **Deprecated**: replaced with validationStatus */;\n  indeterminate?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className: classNameProp,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n  const className = clsx(\n    withBaseName(),\n    {\n      [withBaseName(\"disabled\")]: disabled,\n      [withBaseName(\"error\")]: error,\n      [withBaseName(validationStatus || \"\")]: validationStatus,\n    },\n    classNameProp\n  );\n\n  // A different CheckboxCheckedIcon is rendered if the density is set to high\n  const density = useDensity();\n\n  return indeterminate ? (\n    <CheckboxIndeterminateIcon\n      className={clsx(className, withBaseName(\"indeterminate\"))}\n    />\n  ) : checked ? (\n    density === \"high\" ? (\n      <CheckboxCheckedIconHD\n        className={clsx(className, withBaseName(\"checked\"))}\n      />\n    ) : (\n      <CheckboxCheckedIcon\n        className={clsx(className, withBaseName(\"checked\"))}\n      />\n    )\n  ) : (\n    <CheckboxUncheckedIcon className={className} />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","checkboxIconCss","clsx","useDensity","jsx","CheckboxIndeterminateIcon","CheckboxCheckedIconHD","CheckboxCheckedIcon","CheckboxUncheckedIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAW,EAAA,aAAA;AAAA,EACX,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,MAAM,SAAY,GAAAC,SAAA;AAAA,IAChB,YAAa,EAAA;AAAA,IACb;AAAA,MACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,MAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,KAC1C;AAAA,IACA,aAAA;AAAA,GACF,CAAA;AAGA,EAAA,MAAM,UAAUC,uBAAW,EAAA,CAAA;AAE3B,EAAA,OAAO,gCACJC,cAAA,CAAAC,mDAAA,EAAA;AAAA,IACC,SAAW,EAAAH,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,eAAe,CAAC,CAAA;AAAA,GAC1D,CACE,GAAA,OAAA,GACF,OAAY,KAAA,MAAA,mBACTE,cAAA,CAAAE,2CAAA,EAAA;AAAA,IACC,SAAW,EAAAJ,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GACpD,oBAECE,cAAA,CAAAG,uCAAA,EAAA;AAAA,IACC,SAAW,EAAAL,SAAA,CAAK,SAAW,EAAA,YAAA,CAAa,SAAS,CAAC,CAAA;AAAA,GACpD,oBAGDE,cAAA,CAAAI,2CAAA,EAAA;AAAA,IAAsB,SAAA;AAAA,GAAsB,CAAA,CAAA;AAEjD;;;;"}
+{"version":3,"file":"CheckboxIcon.js","sources":["../src/checkbox/CheckboxIcon.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport { makePrefixer } from \"../utils\";\nimport checkboxIconCss from \"./CheckboxIcon.css\";\nimport {\n  IconProps,\n  SuccessIcon,\n  SuccessSmallIcon,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface CheckboxIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  indeterminate?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltCheckboxIcon\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nfunction CheckedReadOnlyIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallIcon {...props} />\n  ) : (\n    <SuccessIcon {...props} />\n  );\n}\n\nexport const CheckboxIcon = ({\n  checked = false,\n  className,\n  disabled,\n  error,\n  indeterminate,\n  validationStatus,\n  readOnly,\n}: CheckboxIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-checkbox-icon\",\n    css: checkboxIconCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"indeterminate\")]: indeterminate,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className\n      )}\n    >\n      {checked && !indeterminate && !readOnly && (\n        <CheckedIcon className={withBaseName(\"icon\")} />\n      )}\n      {checked && !indeterminate && readOnly && (\n        <CheckedReadOnlyIcon className={withBaseName(\"icon\")} />\n      )}\n    </div>\n  );\n};\n"],"names":["makePrefixer","useDensity","jsx","SuccessSmallSolidIcon","SuccessSolidIcon","SuccessSmallIcon","SuccessIcon","useWindow","useComponentCssInjection","checkboxIconCss","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;AA4BA,MAAM,YAAA,GAAeA,0BAAa,kBAAkB,CAAA,CAAA;AAEpD,SAAS,YAAY,KAAkB,EAAA;AACrC,EAAA,MAAM,UAAUC,uBAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChBC,cAAA,CAAAC,2BAAA,EAAA;AAAA,IAAuB,GAAG,KAAA;AAAA,GAAO,oBAEjCD,cAAA,CAAAE,sBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAEjC,CAAA;AAEA,SAAS,oBAAoB,KAAkB,EAAA;AAC7C,EAAA,MAAM,UAAUH,uBAAW,EAAA,CAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,yBAChBC,cAAA,CAAAG,sBAAA,EAAA;AAAA,IAAkB,GAAG,KAAA;AAAA,GAAO,oBAE5BH,cAAA,CAAAI,iBAAA,EAAA;AAAA,IAAa,GAAG,KAAA;AAAA,GAAO,CAAA,CAAA;AAE5B,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,OAAU,GAAA,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AACF,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,eAAe,CAAI,GAAA,aAAA;AAAA,QACjC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,OAAA,IAAW,CAAC,aAAA,IAAiB,CAAC,QAAA,oBAC5BT,cAAA,CAAA,WAAA,EAAA;AAAA,QAAY,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MAE/C,OAAW,IAAA,CAAC,aAAiB,IAAA,QAAA,oBAC3BA,cAAA,CAAA,mBAAA,EAAA;AAAA,QAAoB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,KAAA;AAAA,GAE1D,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/checkbox/internal/CheckboxGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { a11yValueAriaProps } from \"../../form-field-context\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\n\nexport interface CheckboxGroupState {\n  a11yProps?: a11yValueAriaProps;\n  disabled?: boolean;\n  name?: CheckboxGroupProps[\"name\"];\n  onChange?: CheckboxGroupProps[\"onChange\"];\n  checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState>({});\n\nif (process.env.NODE_ENV !== \"production\") {\n  CheckboxGroupContext.displayName = \"CheckboxGroupContext\";\n}\n\nexport { CheckboxGroupContext };\n"],"names":["createContext"],"mappings":";;;;;;AAcM,MAAA,oBAAA,GAAuBA,mBAAkC,CAAA,EAAE,EAAA;AAEjE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,oBAAA,CAAqB,WAAc,GAAA,sBAAA,CAAA;AACrC;;;;"}
+{"version":3,"file":"CheckboxGroupContext.js","sources":["../src/checkbox/internal/CheckboxGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { a11yValueAriaProps } from \"../../form-field-context\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { CheckboxGroupProps } from \"../CheckboxGroup\";\n\nexport interface CheckboxGroupState {\n  a11yProps?: a11yValueAriaProps;\n  disabled?: boolean;\n  name?: CheckboxGroupProps[\"name\"];\n  onChange?: CheckboxGroupProps[\"onChange\"];\n  checkedValues?: CheckboxGroupProps[\"checkedValues\"];\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupState>({});\n\nif (process.env.NODE_ENV !== \"production\") {\n  CheckboxGroupContext.displayName = \"CheckboxGroupContext\";\n}\n\nexport { CheckboxGroupContext };\n"],"names":["createContext"],"mappings":";;;;;;AAeM,MAAA,oBAAA,GAAuBA,mBAAkC,CAAA,EAAE,EAAA;AAEjE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,oBAAA,CAAqB,WAAc,GAAA,sBAAA,CAAA;AACrC;;;;"}

package/dist-cjs/drawer/Drawer.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  position: fixed;\n  top: 0;\n}\n\n.saltDrawer-overlay {\n  background: var(--salt-overlayable-background);\n  z-index: var(--salt-zIndex-drawer);\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" or position = \"left\" */\n.saltDrawer-right,\n.saltDrawer-left {\n  width: calc(10 * var(--salt-size-base));\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Drawer.css.js.map

package/dist-cjs/drawer/Drawer.css.js.map

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

package/dist-cjs/drawer/Drawer.js

@@ -0,0 +1,82 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var react = require('@floating-ui/react');
+var makePrefixer = require('../utils/makePrefixer.js');
+require('../utils/useFloatingUI.js');
+var useForkRef = require('../utils/useForkRef.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var useDrawer = require('./useDrawer.js');
+var Drawer$1 = require('./Drawer.css.js');
+
+const DRAWER_POSITIONS = ["left", "top", "right", "bottom"];
+const withBaseName = makePrefixer.makePrefixer("saltDrawer");
+const Drawer = React.forwardRef(function Drawer2(props, ref) {
+  const {
+    children,
+    className,
+    position = "left",
+    open = true,
+    onOpenChange,
+    variant = "primary",
+    ...rest
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-drawer",
+    css: Drawer$1,
+    window: targetWindow
+  });
+  const [showComponent, setShowComponent] = React.useState(false);
+  const { floating, context } = useDrawer.useDrawer({
+    open,
+    onOpenChange
+  });
+  const floatingRef = useForkRef.useForkRef(floating, ref);
+  React.useEffect(() => {
+    if (open && !showComponent) {
+      setShowComponent(true);
+    }
+  }, [open, showComponent]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
+    children: showComponent && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingOverlay, {
+      className: withBaseName("overlay"),
+      lockScroll: true,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, {
+        context,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", {
+          ref: floatingRef,
+          className: clsx.clsx(
+            withBaseName(),
+            withBaseName(position),
+            {
+              [withBaseName("enterAnimation")]: open,
+              [withBaseName("exitAnimation")]: !open,
+              [withBaseName(variant)]: variant
+            },
+            className
+          ),
+          onAnimationEnd: () => {
+            if (!open && showComponent) {
+              setShowComponent(false);
+            }
+          },
+          ...rest,
+          children
+        })
+      })
+    })
+  });
+});
+
+exports.DRAWER_POSITIONS = DRAWER_POSITIONS;
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/dist-cjs/drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Defines the drawer position within the screen.\n   */\n  position?: DrawerPositions;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = true,\n    onOpenChange,\n    variant = \"primary\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n\n  const { floating, context } = useDrawer({\n    open,\n    onOpenChange,\n  });\n\n  const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n  }, [open, showComponent]);\n\n  return (\n    <FloatingPortal>\n      {showComponent && (\n        <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n          <FloatingFocusManager context={context}>\n            <div\n              ref={floatingRef}\n              className={clsx(\n                withBaseName(),\n                withBaseName(position),\n                {\n                  [withBaseName(\"enterAnimation\")]: open,\n                  [withBaseName(\"exitAnimation\")]: !open,\n                  [withBaseName(variant)]: variant,\n                },\n                className\n              )}\n              onAnimationEnd={() => {\n                if (!open && showComponent) {\n                  setShowComponent(false);\n                }\n              }}\n              {...rest}\n            >\n              {children}\n            </div>\n          </FloatingFocusManager>\n        </FloatingOverlay>\n      )}\n    </FloatingPortal>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IACE,2CACED,cAAA,CAAAE,qBAAA,EAAA;AAAA,MAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,MAAG,UAAU,EAAA,IAAA;AAAA,MAC7D,QAAC,kBAAAF,cAAA,CAAAG,0BAAA,EAAA;AAAA,QAAqB,OAAA;AAAA,QACpB,QAAC,kBAAAH,cAAA,CAAA,KAAA,EAAA;AAAA,UACC,GAAK,EAAA,WAAA;AAAA,UACL,SAAW,EAAAI,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,aAAa,QAAQ,CAAA;AAAA,YACrB;AAAA,cACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,cAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,cAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,aAC3B;AAAA,YACA,SAAA;AAAA,WACF;AAAA,UACA,gBAAgB,MAAM;AACpB,YAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,cAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,aACxB;AAAA,WACF;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA;AAAA,SACH,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;;"}

package/dist-cjs/drawer/useDrawer.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@floating-ui/react');
+require('react');
+var useFloatingUI = require('../utils/useFloatingUI.js');
+require('../utils/useId.js');
+require('../salt-provider/SaltProvider.js');
+require('../viewport/ViewportProvider.js');
+require('clsx');
+
+function useDrawer(props) {
+  const { open, onOpenChange } = props;
+  const { context, floating } = useFloatingUI.useFloatingUI({
+    open,
+    onOpenChange
+  });
+  const click = react.useClick(context);
+  const role = react.useRole(context);
+  const dismiss = react.useDismiss(context);
+  const { getFloatingProps, getReferenceProps } = react.useInteractions([
+    role,
+    dismiss,
+    click
+  ]);
+  return {
+    getFloatingProps,
+    getReferenceProps,
+    floating,
+    context
+  };
+}
+
+exports.useDrawer = useDrawer;
+//# sourceMappingURL=useDrawer.js.map

package/dist-cjs/drawer/useDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawer.js","sources":["../src/drawer/useDrawer.ts"],"sourcesContent":["import {\n  useClick,\n  useDismiss,\n  useInteractions,\n  useRole,\n} from \"@floating-ui/react\";\nimport { useFloatingUI, UseFloatingUIProps } from \"../utils\";\n\nexport type UseDrawerProps = Partial<\n  Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">\n>;\n\nexport function useDrawer(props: UseDrawerProps) {\n  const { open, onOpenChange } = props;\n\n  const { context, floating } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const click = useClick(context);\n  const role = useRole(context);\n  const dismiss = useDismiss(context);\n\n  const { getFloatingProps, getReferenceProps } = useInteractions([\n    role,\n    dismiss,\n    click,\n  ]);\n\n  return {\n    getFloatingProps,\n    getReferenceProps,\n    floating,\n    context,\n  };\n}\n"],"names":["useFloatingUI","useClick","useRole","useDismiss","useInteractions"],"mappings":";;;;;;;;;;;;AAYO,SAAS,UAAU,KAAuB,EAAA;AAC/C,EAAM,MAAA,EAAE,IAAM,EAAA,YAAA,EAAiB,GAAA,KAAA,CAAA;AAE/B,EAAA,MAAM,EAAE,OAAA,EAAS,QAAS,EAAA,GAAIA,2BAAc,CAAA;AAAA,IAC1C,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,KAAA,GAAQC,eAAS,OAAO,CAAA,CAAA;AAC9B,EAAM,MAAA,IAAA,GAAOC,cAAQ,OAAO,CAAA,CAAA;AAC5B,EAAM,MAAA,OAAA,GAAUC,iBAAW,OAAO,CAAA,CAAA;AAElC,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9D,IAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-cjs/form-field/FormField.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n}\n\n.saltFormField-labelTop {\n  grid-template-areas:\n    \"label\"\n    \"controls\"\n    \"helperText\";\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: 40% 1fr;\n  grid-template-areas:\n    \"label controls\"\n    \"auto helperText\";\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormField > *,\n.saltFormFieldControlWrapper {\n  grid-area: controls;\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
+var css_248z = ".saltFormField {\n  display: inline-grid;\n  position: relative;\n  gap: var(--salt-spacing-100);\n  text-align: left;\n  width: var(--saltFormField-width, 100%);\n}\n\n.saltFormField-labelTop {\n  grid-template-areas:\n    \"label\"\n    \"controls\"\n    \"helperText\";\n}\n\n.saltFormField-labelLeft {\n  align-self: center;\n  grid-template-columns: var(--formField-label-width, 40%) 1fr;\n  grid-template-areas:\n    \"label controls\"\n    \"auto helperText\";\n}\n\n.saltFormField-labelRight {\n  align-self: center;\n  grid-template-columns: var(--formField-label-width, 40%) 1fr;\n  grid-template-areas:\n    \"label controls\"\n    \"auto helperText\";\n}\n\n.saltFormField-labelRight .saltFormFieldLabel,\n.saltFormField-labelLeft .saltFormFieldLabel {\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelRight .saltFormFieldLabel {\n  text-align: right;\n}\n\n.saltFormField-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel {\n  grid-area: label;\n}\n\n.saltFormFieldHelperText {\n  grid-area: helperText;\n}\n\n.saltFormField-disabled {\n  --saltInput-outline: none;\n  --saltCheckbox-outline: none;\n  --saltRadioButton-outline: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormField.css.js.map

package/dist-cjs/form-field/FormField.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var FormFieldContext = require('../form-field-context/FormFieldContext.js');
 var capitalize = require('../utils/capitalize.js');
 var makePrefixer = require('../utils/makePrefixer.js');
@@ -12,8 +14,6 @@ require('../utils/useFloatingUI.js');
 var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var FormField$1 = require('./FormField.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltFormField");
@@ -58,9 +58,9 @@ const FormField = React.forwardRef(
             "aria-describedby": helperTextId
           },
           disabled,
+          necessity,
           readOnly,
-          validationStatus,
-          necessity
+          validationStatus
         },
         children
       })

package/dist-cjs/form-field/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { makePrefixer, useId, capitalize } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      onBlur,\n      onFocus,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            readOnly,\n            validationStatus,\n            necessity,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;AA4CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { A11yValueProps, FormFieldContext } from \"../form-field-context\";\nimport { makePrefixer, useId, capitalize } from \"../utils\";\n\nimport formFieldCss from \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\" | \"right\";\n\nexport interface FormFieldProps\n  extends HTMLAttributes<HTMLDivElement>,\n    A11yValueProps {\n  /**\n   * Disabled prop\n   */\n  disabled?: boolean;\n  /**\n   * Location of the label, values: 'top' (default) or 'left'\n   */\n  labelPlacement?: FormFieldLabelPlacement;\n  /**\n   * Readonly prop\n   */\n  readOnly?: boolean;\n  /**\n   * Optional id prop\n   *\n   * Used as suffix of FormFieldLabel id: `label-{id}`\n   * Used as suffix of FormFieldHelperText id: `helperText-{id}`\n   */\n  id?: string;\n  /**\n   * Displays necessity on label\n   */\n  necessity?: \"required\" | \"optional\" | \"asterisk\";\n  /**\n   * Validation status\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport const FormField = forwardRef(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      id: idProp,\n      labelPlacement = \"top\",\n      necessity,\n      onBlur,\n      onFocus,\n      readOnly = false,\n      validationStatus,\n      ...restProps\n    }: FormFieldProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-form-field\",\n      css: formFieldCss,\n      window: targetWindow,\n    });\n\n    const formId = useId(idProp);\n\n    const labelId = formId ? `label-${formId}` : undefined;\n    const helperTextId = formId ? `helperText-${formId}` : undefined;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(`label${capitalize(labelPlacement)}`)]:\n              labelPlacement,\n          },\n          className\n        )}\n        {...restProps}\n      >\n        <FormFieldContext.Provider\n          value={{\n            a11yProps: {\n              \"aria-labelledby\": labelId,\n              \"aria-describedby\": helperTextId,\n            },\n            disabled,\n            necessity,\n            readOnly,\n            validationStatus,\n          }}\n        >\n          {children}\n        </FormFieldContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","formFieldCss","useId","jsx","clsx","capitalize","FormFieldContext"],"mappings":";;;;;;;;;;;;;;;;;;AA2CA,MAAM,YAAA,GAAeA,0BAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,cAAiB,GAAA,KAAA;AAAA,IACjB,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,YAAM,MAAM,CAAA,CAAA;AAE3B,IAAM,MAAA,OAAA,GAAU,MAAS,GAAA,CAAA,MAAA,EAAS,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAC7C,IAAM,MAAA,YAAA,GAAe,MAAS,GAAA,CAAA,WAAA,EAAc,MAAW,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEvD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQC,qBAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA,CAACG,kCAAiB,QAAjB,EAAA;AAAA,QACC,KAAO,EAAA;AAAA,UACL,SAAW,EAAA;AAAA,YACT,iBAAmB,EAAA,OAAA;AAAA,YACnB,kBAAoB,EAAA,YAAA;AAAA,WACtB;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,QAAA;AAAA,UACA,gBAAA;AAAA,SACF;AAAA,QAEC,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/form-field/FormFieldHelperText.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltFormFieldHelperText {\n  cursor: default;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-spacing-75);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldHelperText.css.js.map

package/dist-cjs/form-field/FormFieldLabel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n";
+var css_248z = ".saltFormFieldLabel.saltText {\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n  --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n  align-self: baseline;\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltFormFieldLabel-necessityLabel {\n  font-weight: var(--salt-text-fontWeight);\n  font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-fontSize);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=FormFieldLabel.css.js.map

package/dist-cjs/form-field/FormFieldLabel.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 require('../form-field-context/FormFieldContext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 require('../text/Text.js');
@@ -17,14 +19,13 @@ require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var FormFieldLabel$1 = require('./FormFieldLabel.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltFormFieldLabel");
 const FormFieldLabel = ({
   className,
   children,
+  intent = "label",
   ...restProps
 }) => {
   const { a11yProps, disabled, necessity } = useFormFieldProps.useFormFieldProps();
@@ -34,10 +35,10 @@ const FormFieldLabel = ({
     css: FormFieldLabel$1,
     window: targetWindow
   });
-  const necessityLabel = necessity ? necessity === "asterisk" ? "*" : ` (${capitalize.capitalize(necessity)})` : void 0;
+  const necessityLabel = necessity ? necessity === "asterisk" ? " *" : ` (${capitalize.capitalize(necessity)})` : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(Label.Label, {
     as: "label",
-    className: clsx.clsx(withBaseName(), className),
+    className: clsx.clsx(withBaseName(), withBaseName(intent), className),
     id: a11yProps == null ? void 0 : a11yProps["aria-labelledby"],
     disabled,
     variant: "secondary",

package/dist-cjs/form-field/FormFieldLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \"*\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,MACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { Label, TextProps } from \"../text\";\nimport { capitalize, makePrefixer } from \"../utils\";\n\nimport formFieldLabelCss from \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport interface FormFieldLabelProps\n  extends Omit<TextProps<\"label\">, \"variant\" | \"styleAs\"> {\n  /**\n   * Intent for the label.\n   *\n   * Defaults to \"label\"\n   * Using \"sentence\" gives more prominent styling\n   */\n  intent?: \"label\" | \"sentence\";\n}\n\nexport const FormFieldLabel = ({\n  className,\n  children,\n  intent = \"label\",\n  ...restProps\n}: FormFieldLabelProps) => {\n  const { a11yProps, disabled, necessity } = useFormFieldProps();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-form-field-label\",\n    css: formFieldLabelCss,\n    window: targetWindow,\n  });\n\n  const necessityLabel = necessity\n    ? necessity === \"asterisk\"\n      ? \" *\"\n      : ` (${capitalize(necessity)})`\n    : undefined;\n\n  return (\n    <Label\n      as=\"label\"\n      className={clsx(withBaseName(), withBaseName(intent), className)}\n      id={a11yProps?.[\"aria-labelledby\"]}\n      disabled={disabled}\n      variant=\"secondary\"\n      {...restProps}\n    >\n      {children}\n      {necessityLabel && (\n        <span className={withBaseName(\"necessityLabel\")}>{necessityLabel}</span>\n      )}\n    </Label>\n  );\n};\n"],"names":["makePrefixer","useFormFieldProps","useWindow","useComponentCssInjection","formFieldLabelCss","capitalize","jsxs","Label","clsx","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,0BAAa,oBAAoB,CAAA,CAAA;AAa/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAS,GAAA,OAAA;AAAA,EACN,GAAA,SAAA;AACL,CAA2B,KAAA;AACzB,EAAA,MAAM,EAAE,SAAA,EAAW,QAAU,EAAA,SAAA,KAAcC,mCAAkB,EAAA,CAAA;AAC7D,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,uBAAA;AAAA,IACR,GAAK,EAAAC,gBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,cAAA,GAAiB,YACnB,SAAc,KAAA,UAAA,GACZ,OACA,CAAK,EAAA,EAAAC,qBAAA,CAAW,SAAS,CAC3B,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACGC,eAAA,CAAAC,WAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAI,SAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,iBAAA,CAAA;AAAA,IAChB,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,kCACEC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QAAI,QAAA,EAAA,cAAA;AAAA,OAAe,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}