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

package/dist-es/radio-button/RadioButton.js

@@ -12,11 +12,13 @@ import { RadioButtonIcon } from './RadioButtonIcon.js';
 import css_248z from './RadioButton.css.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import '../form-field-context/FormFieldContext.js';
+import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 
 const withBaseName = makePrefixer("saltRadioButton");
 const RadioButton = forwardRef(
   function RadioButton2(props, ref) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const {
       checked: checkedProp,
       className,
@@ -28,6 +30,7 @@ const RadioButton = forwardRef(
       onFocus,
       onBlur,
       onChange,
+      readOnly: readOnlyProp,
       value,
       validationStatus: validationStatusProp,
       ...rest
@@ -38,14 +41,23 @@ const RadioButton = forwardRef(
       css: css_248z,
       window: targetWindow
     });
+    const {
+      a11yProps: formFieldA11yProps,
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
     const radioGroup = useRadioGroup();
     const {
       "aria-describedby": inputDescribedBy,
       "aria-labelledby": inputLabelledBy,
+      className: inputClassName,
+      onChange: inputOnChange,
       ...restInputProps
     } = inputProps;
-    const disabled = (_a = radioGroup.disabled) != null ? _a : disabledProp;
-    const validationStatus = !disabled ? (_b = radioGroup.validationStatus) != null ? _b : validationStatusProp : void 0;
+    const disabled = (_b = (_a = radioGroup.disabled) != null ? _a : formFieldDisabled) != null ? _b : disabledProp;
+    const readOnly = (_d = (_c = radioGroup.readOnly) != null ? _c : formFieldReadOnly) != null ? _d : readOnlyProp;
+    const validationStatus = !disabled ? (_f = (_e = radioGroup.validationStatus) != null ? _e : formFieldValidationStatus) != null ? _f : validationStatusProp : void 0;
     const radioGroupChecked = radioGroup.value != null && value != null ? radioGroup.value === value : checkedProp;
     const name = nameProp != null ? nameProp : radioGroup.name;
     const [checked, setCheckedState] = useControlled({
@@ -56,9 +68,12 @@ const RadioButton = forwardRef(
     });
     const handleChange = (event) => {
       var _a2;
+      if (readOnly)
+        return;
       const newChecked = event.target.checked;
       setCheckedState(newChecked);
       onChange == null ? void 0 : onChange(event);
+      inputOnChange == null ? void 0 : inputOnChange(event);
       (_a2 = radioGroup.onChange) == null ? void 0 : _a2.call(radioGroup, event);
     };
     return /* @__PURE__ */ jsxs("label", {
@@ -66,9 +81,9 @@ const RadioButton = forwardRef(
         withBaseName(),
         {
           [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly,
           [withBaseName("error")]: error,
-          [withBaseName(validationStatus || "")]: validationStatus,
-          [withBaseName("error")]: error
+          [withBaseName(validationStatus || "")]: validationStatus
         },
         className
       ),
@@ -77,27 +92,30 @@ const RadioButton = forwardRef(
       children: [
         /* @__PURE__ */ jsx("input", {
           "aria-describedby": clsx(
-            (_c = radioGroup.a11yProps) == null ? void 0 : _c["aria-describedby"],
+            (_h = (_g = radioGroup.a11yProps) == null ? void 0 : _g["aria-describedby"]) != null ? _h : formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"],
             inputDescribedBy
           ),
           "aria-labelledby": clsx(
-            (_d = radioGroup.a11yProps) == null ? void 0 : _d["aria-labelledby"],
+            (_j = (_i = radioGroup.a11yProps) == null ? void 0 : _i["aria-labelledby"]) != null ? _j : formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
             inputLabelledBy
           ),
-          className: withBaseName("input"),
-          ...restInputProps,
+          className: clsx(withBaseName("input"), inputClassName),
+          tabIndex: readOnly ? -1 : void 0,
           checked,
           disabled,
+          readOnly,
           name,
           value,
           onBlur,
           onChange: handleChange,
           onFocus,
-          type: "radio"
+          type: "radio",
+          ...restInputProps
         }),
         /* @__PURE__ */ jsx(RadioButtonIcon, {
           checked,
           disabled,
+          readOnly,
           validationStatus,
           error
         }),

package/dist-es/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<\n    HTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * Set the default selected radio button in the group\n   */\n  checked?: boolean;\n  /**\n   * Set the disabled state\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * Set the error state\n   */\n  error?: boolean;\n  /**\n   * Props to be passed to the radio input\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the radio icon\n   */\n  label?: ReactNode;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n  /**\n   * Callback for blur event\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Value of radio button\n   */\n  value?: string;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      disabled: disabledProp,\n      error,\n      inputProps = {},\n      label,\n      name: nameProp,\n      onFocus,\n      onBlur,\n      onChange,\n      value,\n      validationStatus: validationStatusProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-radio-button\",\n      css: radioButtonCss,\n      window: targetWindow,\n    });\n\n    const radioGroup = useRadioGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      ...restInputProps\n    } = inputProps;\n\n    const disabled = radioGroup.disabled ?? disabledProp;\n    const validationStatus = !disabled\n      ? radioGroup.validationStatus ?? validationStatusProp\n      : undefined;\n\n    const radioGroupChecked =\n      radioGroup.value != null && value != null\n        ? radioGroup.value === value\n        : checkedProp;\n    const name = nameProp ?? radioGroup.name;\n\n    const [checked, setCheckedState] = useControlled({\n      controlled: radioGroupChecked,\n      default: Boolean(checkedProp),\n      name: \"RadioBase\",\n      state: \"checked\",\n    });\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      const newChecked = event.target.checked;\n      setCheckedState(newChecked);\n\n      onChange?.(event);\n      radioGroup.onChange?.(event);\n    };\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            [withBaseName(\"error\")]: error,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-describedby={clsx(\n            radioGroup.a11yProps?.[\"aria-describedby\"],\n            inputDescribedBy\n          )}\n          aria-labelledby={clsx(\n            radioGroup.a11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy\n          )}\n          className={withBaseName(\"input\")}\n          {...restInputProps}\n          checked={checked}\n          disabled={disabled}\n          name={name}\n          value={value}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"radio\"\n        />\n        <RadioButtonIcon\n          checked={checked}\n          disabled={disabled}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  ReactNode,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"../utils\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport { RadioButtonIcon } from \"./RadioButtonIcon\";\n\nimport radioButtonCss from \"./RadioButton.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * Set the default selected radio button in the group\n   */\n  checked?: boolean;\n  /**\n   * Set the disabled state\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * Set the error state\n   */\n  error?: boolean;\n  /**\n   * Props to be passed to the radio input\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the radio icon\n   */\n  label?: ReactNode;\n  /**\n   * Name of the radio group\n   */\n  name?: string;\n  /**\n   * Callback for blur event\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback for change event\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback for focus event\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Set the read only state.\n   */\n  readOnly?: boolean;\n  /**\n   * Value of radio button\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * RadioButton 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 RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      disabled: disabledProp,\n      error,\n      inputProps = {},\n      label,\n      name: nameProp,\n      onFocus,\n      onBlur,\n      onChange,\n      readOnly: readOnlyProp,\n      value,\n      validationStatus: validationStatusProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-radio-button\",\n      css: radioButtonCss,\n      window: targetWindow,\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const radioGroup = useRadioGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const disabled = radioGroup.disabled ?? formFieldDisabled ?? disabledProp;\n    const readOnly = radioGroup.readOnly ?? formFieldReadOnly ?? readOnlyProp;\n    const validationStatus = !disabled\n      ? radioGroup.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp\n      : undefined;\n\n    const radioGroupChecked =\n      radioGroup.value != null && value != null\n        ? radioGroup.value === value\n        : checkedProp;\n    const name = nameProp ?? radioGroup.name;\n\n    const [checked, setCheckedState] = useControlled({\n      controlled: radioGroupChecked,\n      default: Boolean(checkedProp),\n      name: \"RadioBase\",\n      state: \"checked\",\n    });\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      if (readOnly) return;\n\n      const newChecked = event.target.checked;\n      setCheckedState(newChecked);\n\n      onChange?.(event);\n      inputOnChange?.(event);\n      radioGroup.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-describedby={clsx(\n            radioGroup.a11yProps?.[\"aria-describedby\"] ??\n              formFieldA11yProps?.[\"aria-describedby\"],\n            inputDescribedBy\n          )}\n          aria-labelledby={clsx(\n            radioGroup.a11yProps?.[\"aria-labelledby\"] ??\n              formFieldA11yProps?.[\"aria-labelledby\"],\n            inputLabelledBy\n          )}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\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          disabled={disabled}\n          readOnly={readOnly}\n          name={name}\n          value={value}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"radio\"\n          {...restInputProps}\n        />\n        <RadioButtonIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  }\n);\n"],"names":["RadioButton","radioButtonCss","_a"],"mappings":"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"}

package/dist-es/radio-button/RadioButtonGroup.js

@@ -25,6 +25,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     wrap = true,
     name: nameProp,
     onChange,
+    readOnly: readOnlyProp,
     value: valueProp,
     validationStatus: validationStatusProp,
     ...rest
@@ -38,10 +39,12 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
   const {
     a11yProps,
     disabled: formFieldDisabled,
+    readOnly: formFieldReadOnly,
     validationStatus: formFieldValidationStatus
   } = useFormFieldProps();
   const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
-  const validationStatus = formFieldValidationStatus ? formFieldValidationStatus !== "success" ? formFieldValidationStatus : void 0 : validationStatusProp;
+  const readOnly = formFieldReadOnly != null ? formFieldReadOnly : readOnlyProp;
+  const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
   const [value, setStateValue] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -71,6 +74,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
         disabled,
         name,
         onChange: handleChange,
+        readOnly,
         validationStatus,
         value
       },

package/dist-es/radio-button/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * Set the selected value when initialized.\n   */\n  defaultValue?: string;\n  /**\n   * Set the group direction.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the RadioButton group\n   */\n  disabled?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n  /**\n   * Callback for change event.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * The value of the radio group, required for a controlled component.\n   */\n  value?: string;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n  HTMLFieldSetElement,\n  RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    defaultValue,\n    direction = \"vertical\",\n    disabled: disabledProp,\n    wrap = true,\n    name: nameProp,\n    onChange,\n    value: valueProp,\n    validationStatus: validationStatusProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-group\",\n    css: radioButtonGroupCss,\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\n    ? formFieldValidationStatus !== \"success\"\n      ? formFieldValidationStatus\n      : undefined\n    : validationStatusProp;\n\n  const [value, setStateValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    state: \"value\",\n    name: \"RadioButtonGroup\",\n  });\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setStateValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const name = useId(nameProp);\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      data-testid=\"radio-button-group\"\n      ref={ref}\n      {...rest}\n    >\n      <RadioGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          validationStatus,\n          value,\n        }}\n      >\n        {children}\n      </RadioGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAsCjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,QAAU,EAAA,YAAA;AAAA,IACV,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;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,MAChB,iBAAkB,EAAA,CAAA;AAEtB,EAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,EAAA,MAAM,gBAAmB,GAAA,yBAAA,GACrB,yBAA8B,KAAA,SAAA,GAC5B,4BACA,KACF,CAAA,GAAA,oBAAA,CAAA;AAEJ,EAAA,MAAM,CAAC,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;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,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,gBAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\n\nimport radioButtonGroupCss from \"./RadioButtonGroup.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useFormFieldProps } from \"../form-field-context\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"onChange\"> {\n  /**\n   * Set the selected value when initialized.\n   */\n  defaultValue?: string;\n  /**\n   * Set the group direction.\n   */\n  direction?: \"horizontal\" | \"vertical\";\n  /**\n   * Disable the RadioButton group\n   */\n  disabled?: boolean;\n  /**\n   * Only for horizontal direction. When `true` the text in radio button label will wrap to fit within the container. Otherwise the radio buttons will wrap onto the next line.\n   */\n  wrap?: boolean;\n  /**\n   * The name to be set on each radio button within the group. If not set, then one will be generated for you.\n   */\n  name?: string;\n  /**\n   * Callback for change event.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Set the RadioButton group to read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The value of the radio group, required for a controlled component.\n   */\n  value?: string;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioButtonGroup = forwardRef<\n  HTMLFieldSetElement,\n  RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    defaultValue,\n    direction = \"vertical\",\n    disabled: disabledProp,\n    wrap = true,\n    name: nameProp,\n    onChange,\n    readOnly: readOnlyProp,\n    value: valueProp,\n    validationStatus: validationStatusProp,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-group\",\n    css: radioButtonGroupCss,\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 [value, setStateValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    state: \"value\",\n    name: \"RadioButtonGroup\",\n  });\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    setStateValue(event.target.value);\n    onChange?.(event);\n  };\n\n  const name = useId(nameProp);\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        withBaseName(direction),\n        {\n          [withBaseName(\"noWrap\")]: !wrap,\n        },\n        className\n      )}\n      data-testid=\"radio-button-group\"\n      ref={ref}\n      {...rest}\n    >\n      <RadioGroupContext.Provider\n        value={{\n          a11yProps,\n          disabled,\n          name,\n          onChange: handleChange,\n          readOnly,\n          validationStatus,\n          value,\n        }}\n      >\n        {children}\n      </RadioGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["RadioButtonGroup","radioButtonGroupCss"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AA0CjD,MAAM,gBAAmB,GAAA,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAY,GAAA,UAAA;AAAA,IACZ,QAAU,EAAA,YAAA;AAAA,IACV,IAAO,GAAA,IAAA;AAAA,IACP,IAAM,EAAA,QAAA;AAAA,IACN,QAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,gBAAkB,EAAA,oBAAA;AAAA,IACf,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;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,MAChB,iBAAkB,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,KAAA,EAAO,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAC3C,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,KAAO,EAAA,OAAA;AAAA,IACP,IAAM,EAAA,kBAAA;AAAA,GACP,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAChC,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAM,MAAA,IAAA,GAAO,MAAM,QAAQ,CAAA,CAAA;AAE3B,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;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,aAAY,EAAA,oBAAA;AAAA,IACZ,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,kBAAA,GAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,MACC,KAAO,EAAA;AAAA,QACL,SAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,QAAU,EAAA,YAAA;AAAA,QACV,QAAA;AAAA,QACA,gBAAA;AAAA,QACA,KAAA;AAAA,OACF;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/radio-button/RadioButtonIcon.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with `validationStatus=\"error\"` */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background));\n}\n\n/* Styles applied to radio button icon when checked and with `validationStatus=\"error\"` */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon with `validationStatus=\"warning\"` */\n.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-warning-stroke, var(--salt-status-warning-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-warning-hover-fill, var(--salt-status-warning-background));\n}\n\n/* Styles applied to radio button icon when checked and with `validationStatus=\"warning\"` */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-warning .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-warning-fill, var(--salt-status-warning-foreground));\n  stroke: var(--saltRadioButton-icon-warning-stroke, var(--salt-status-warning-foreground));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n\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  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\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.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-text-primary-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-es/radio-button/RadioButtonIcon.js

@@ -6,16 +6,19 @@ import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
 import { clsx } from 'clsx';
-import css_248z from './RadioButtonIcon.css.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import css_248z from './RadioButtonIcon.css.js';
 
 const withBaseName = makePrefixer("saltRadioButtonIcon");
 const RadioButtonIcon = ({
   checked,
+  className,
   error,
   disabled,
-  validationStatus
+  validationStatus,
+  readOnly,
+  ...rest
 }) => {
   const targetWindow = useWindow();
   useComponentCssInjection({
@@ -23,28 +26,39 @@ const RadioButtonIcon = ({
     css: css_248z,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxs("svg", {
-    className: clsx(withBaseName(), {
-      [withBaseName("checked")]: checked,
-      [withBaseName("error")]: error,
-      [withBaseName("disabled")]: disabled,
-      [withBaseName(validationStatus || "")]: validationStatus
-    }),
-    height: "14",
-    viewBox: "0 0 14 14",
-    width: "14",
+  return /* @__PURE__ */ jsxs("div", {
+    "aria-hidden": "true",
+    className: clsx(
+      withBaseName(),
+      {
+        [withBaseName("checked")]: checked,
+        [withBaseName("error")]: error,
+        [withBaseName("disabled")]: disabled,
+        [withBaseName(validationStatus || "")]: validationStatus,
+        [withBaseName("readOnly")]: readOnly
+      },
+      className
+    ),
+    ...rest,
     children: [
-      /* @__PURE__ */ jsx("circle", {
-        className: withBaseName("circle"),
-        cx: "7",
-        cy: "7",
-        r: "6.5"
+      checked && !readOnly && /* @__PURE__ */ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 12 12",
+        fill: "currentColor",
+        children: /* @__PURE__ */ jsx("path", {
+          fillRule: "evenodd",
+          d: "M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z",
+          clipRule: "evenodd"
+        })
       }),
-      checked && /* @__PURE__ */ jsx("circle", {
-        className: withBaseName("checked-circle"),
-        cx: "7",
-        cy: "7",
-        r: "3.2"
+      checked && readOnly && /* @__PURE__ */ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "currentColor",
+        viewBox: "0 0 12 12",
+        children: /* @__PURE__ */ jsx("path", {
+          fill: "#161616",
+          d: "M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+        })
       })
     ]
   });

package/dist-es/radio-button/RadioButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n  checked?: boolean;\n  error?: boolean;\n  disabled?: boolean;\n  validationStatus?: \"error\" | \"warning\";\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n  checked,\n  error,\n  disabled,\n  validationStatus,\n}: RadioButtonIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-icon\",\n    css: radioButtonIconCss,\n    window: targetWindow,\n  });\n  return (\n    <svg\n      className={clsx(withBaseName(), {\n        [withBaseName(\"checked\")]: checked,\n        [withBaseName(\"error\")]: error,\n        [withBaseName(\"disabled\")]: disabled,\n        [withBaseName(validationStatus || \"\")]: validationStatus,\n      })}\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n    >\n      <circle className={withBaseName(\"circle\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n      {checked && (\n        <circle\n          className={withBaseName(\"checked-circle\")}\n          cx=\"7\"\n          cy=\"7\"\n          r=\"3.2\"\n        />\n      )}\n    </svg>\n  );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAYhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AACF,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,MAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,MACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,MAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,KACzC,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,QACxC,EAAG,EAAA,GAAA;AAAA,QACH,EAAG,EAAA,GAAA;AAAA,QACH,CAAE,EAAA,KAAA;AAAA,OACJ,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { makePrefixer } from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { AdornmentValidationStatus } from \"../status-adornment\";\nimport radioButtonIconCss from \"./RadioButtonIcon.css\";\nimport { ComponentPropsWithoutRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps extends ComponentPropsWithoutRef<\"div\"> {\n  checked?: boolean;\n  disabled?: boolean;\n  /**\n   * @deprecated Use validationStatus instead\n   */\n  error?: boolean;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({\n  checked,\n  className,\n  error,\n  disabled,\n  validationStatus,\n  readOnly,\n  ...rest\n}: RadioButtonIconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-radio-button-icon\",\n    css: radioButtonIconCss,\n    window: targetWindow,\n  });\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"error\")]: error,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"readOnly\")]: readOnly,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {checked && !readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 12 12\"\n          fill=\"currentColor\"\n        >\n          <path\n            fillRule=\"evenodd\"\n            d=\"M0 6a6 6 0 1 1 12 0A6 6 0 0 1 0 6Zm6 3a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z\"\n            clipRule=\"evenodd\"\n          />\n        </svg>\n      )}\n      {checked && readOnly && (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          fill=\"currentColor\"\n          viewBox=\"0 0 12 12\"\n        >\n          <path\n            fill=\"#161616\"\n            d=\"M9.5 6a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z\"\n          />\n        </svg>\n      )}\n    </div>\n  );\n};\n"],"names":["radioButtonIconCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAgBhD,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,IAAA;AACL,CAA4B,KAAA;AAC1B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,aAAY,EAAA,MAAA;AAAA,IACZ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,QAC3B,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,QACzB,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,QACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAW,OAAA,IAAA,CAAC,4BACV,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,OAAQ,EAAA,WAAA;AAAA,QACR,IAAK,EAAA,cAAA;AAAA,QAEL,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,QAAS,EAAA,SAAA;AAAA,UACT,CAAE,EAAA,qEAAA;AAAA,UACF,QAAS,EAAA,SAAA;AAAA,SACX,CAAA;AAAA,OACF,CAAA;AAAA,MAED,OAAA,IAAW,4BACT,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,KAAM,EAAA,4BAAA;AAAA,QACN,IAAK,EAAA,cAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,IAAK,EAAA,SAAA;AAAA,UACL,CAAE,EAAA,6CAAA;AAAA,SACJ,CAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/radio-button/internal/RadioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { a11yValueAriaProps } from \"../../form-field-context\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n  a11yProps?: a11yValueAriaProps;\n  disabled?: boolean;\n  name?: string;\n  value?: string;\n  onChange?: ChangeEventHandler<HTMLElement>;\n  validationStatus?: \"error\" | \"warning\";\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n  \"RadioGroupContext\",\n  {}\n);\n"],"names":[],"mappings":";;;;;;;;AAaO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
+{"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { a11yValueAriaProps } from \"../../form-field-context\";\nimport { AdornmentValidationStatus } from \"../../status-adornment\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n  a11yProps?: a11yValueAriaProps;\n  disabled?: boolean;\n  name?: string;\n  value?: string;\n  onChange?: ChangeEventHandler<HTMLElement>;\n  readOnly?: boolean;\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n  \"RadioGroupContext\",\n  {}\n);\n"],"names":[],"mappings":";;;;;;;;AAeO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/status-adornment/StatusAdornment.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStatusAdornment {\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  display: inline-block;\n  position: relative;\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n";
+var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StatusAdornment.css.js.map

package/dist-es/status-adornment/StatusAdornment.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n  error: ErrorAdornmentIcon,\n  warning: WarningAdornmentIcon,\n  success: SuccessAdornmentIcon,\n};\n\ntype AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n  /**\n   * Status adornment to be displayed.\n   */\n  status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n  error: \"error\",\n  warning: \"warning\",\n  success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n  function StatusAdornment({ className, status, ...restProps }, ref) {\n    const AdornmentComponent = icons[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-adornment\",\n      css: statusAdornmentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <AdornmentComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\n\nimport statusAdornmentCss from \"./StatusAdornment.css\";\n\nconst icons = {\n  error: ErrorAdornmentIcon,\n  warning: WarningAdornmentIcon,\n  success: SuccessAdornmentIcon,\n};\n\nexport type AdornmentValidationStatus = Exclude<ValidationStatus, \"info\">;\n\nexport interface StatusAdornmentProps extends IconProps {\n  /**\n   * Status adornment to be displayed.\n   */\n  status: AdornmentValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<AdornmentValidationStatus, string> = {\n  error: \"error\",\n  warning: \"warning\",\n  success: \"success\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusAdornment\");\n\nexport const StatusAdornment = forwardRef<SVGSVGElement, StatusAdornmentProps>(\n  function StatusAdornment({ className, status, ...restProps }, ref) {\n    const AdornmentComponent = icons[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-adornment\",\n      css: statusAdornmentCss,\n      window: targetWindow,\n    });\n\n    return (\n      <AdornmentComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["StatusAdornment","statusAdornmentCss"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAA,kBAAA;AAAA,EACP,OAAS,EAAA,oBAAA;AAAA,EACT,OAAS,EAAA,oBAAA;AACX,CAAA,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAEhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,EAAE,WAAW,MAAW,EAAA,GAAA,SAAA,IAAa,GAAK,EAAA;AACjE,IAAA,MAAM,qBAAqB,KAAM,CAAA,MAAA,CAAA,CAAA;AACjC,IAAA,MAAM,YAAY,oBAAqB,CAAA,MAAA,CAAA,CAAA;AAEvC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,kBAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,MAC/D,YAAY,EAAA,SAAA;AAAA,MACX,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/text/Text.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Text.css.js.map

package/dist-es/toast/Toast.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Toast.css.js.map

package/dist-es/toast/Toast.css.js.map

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

package/dist-es/toast/Toast.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useLayoutEffect } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
+import css_248z from './Toast.css.js';
+
+const withBaseName = makePrefixer("saltToast");
+const Toast = forwardRef(function Toast2(props, ref) {
+  const { children, className, status = "info", ...rest } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toast",
+    css: css_248z,
+    window: targetWindow
+  });
+  const toastRef = useRef();
+  const handleRef = useForkRef(toastRef, ref);
+  useLayoutEffect(() => {
+    var _a;
+    (_a = toastRef.current) == null ? void 0 : _a.scrollIntoView();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(withBaseName(), withBaseName(status), className),
+    role: "alert",
+    ...rest,
+    ref: handleRef,
+    children: [
+      /* @__PURE__ */ jsx(StatusIndicator, {
+        status,
+        className: withBaseName("icon")
+      }),
+      children
+    ]
+  });
+});
+
+export { Toast };
+//# sourceMappingURL=Toast.js.map

package/dist-es/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../src/toast/Toast.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  RefObject,\n  forwardRef,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\n\nimport toastCss from \"./Toast.css\";\n\nconst withBaseName = makePrefixer(\"saltToast\");\n\nexport interface ToastProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   *  A string to determine the current state of the Toast.\n   */\n  status?: ValidationStatus;\n}\n\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(\n  props,\n  ref\n) {\n  const { children, className, status = \"info\", ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast\",\n    css: toastCss,\n    window: targetWindow,\n  });\n\n  const toastRef = useRef<HTMLDivElement>();\n  const handleRef = useForkRef(toastRef, ref);\n  useLayoutEffect(() => {\n    toastRef.current?.scrollIntoView();\n  }, []);\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(status), className)}\n      role=\"alert\"\n      {...rest}\n      ref={handleRef as RefObject<HTMLDivElement>}\n    >\n      <StatusIndicator status={status} className={withBaseName(\"icon\")} />\n      {children}\n    </div>\n  );\n});\n"],"names":["Toast","toastCss"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAStC,MAAM,KAAQ,GAAA,UAAA,CAAuC,SAASA,MAAAA,CACnE,OACA,GACA,EAAA;AACA,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,MAAS,GAAA,MAAA,EAAA,GAAW,MAAS,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,WAAW,MAAuB,EAAA,CAAA;AACxC,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAC1C,EAAA,eAAA,CAAgB,MAAM;AAtCxB,IAAA,IAAA,EAAA,CAAA;AAuCI,IAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,cAAA,EAAA,CAAA;AAAA,GACpB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,IAC/D,IAAK,EAAA,OAAA;AAAA,IACJ,GAAG,IAAA;AAAA,IACJ,GAAK,EAAA,SAAA;AAAA,IAEL,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAA;AAAA,MACjE,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/toast/ToastContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles applied to ToastContent */\n.saltToastContent {\n  flex: 1 0;\n  margin: var(--salt-spacing-75) 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToastContent.css.js.map

package/dist-es/toast/ToastContent.css.js.map

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

package/dist-es/toast/ToastContent.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './ToastContent.css.js';
+
+const withBaseName = makePrefixer("saltToastContent");
+const ToastContent = forwardRef(function ToastContent2({ children, className, ...restProps }, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toast-content",
+    css: css_248z,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(withBaseName(), className),
+    ...restProps,
+    ref,
+    children
+  });
+});
+
+export { ToastContent };
+//# sourceMappingURL=ToastContent.js.map

package/dist-es/toast/ToastContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContent.js","sources":["../src/toast/ToastContent.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { makePrefixer } from \"../utils\";\n\nimport toastContentCss from \"./ToastContent.css\";\n\nconst withBaseName = makePrefixer(\"saltToastContent\");\n\nexport const ToastContent = forwardRef(function ToastContent(\n  { children, className, ...restProps }: ComponentPropsWithoutRef<\"div\">,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toast-content\",\n    css: toastContentCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      {children}\n    </div>\n  );\n});\n"],"names":["ToastContent","toastContentCss"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAEvC,MAAA,YAAA,GAAe,WAAW,SAASA,aAAAA,CAC9C,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EACpC,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC7D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/toggle-button/ToggleButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-inline: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/toggle-button/ToggleButton.css.js.map

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

package/dist-es/toggle-button/ToggleButton.js

@@ -0,0 +1,77 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { clsx } from 'clsx';
+import '../toggle-button-group/ToggleButtonGroup.js';
+import { useToggleButtonGroup } from '../toggle-button-group/ToggleButtonGroupContext.js';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import { useControlled } from '../utils/useControlled.js';
+import '../utils/useFloatingUI.js';
+import { useForkRef } from '../utils/useForkRef.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './ToggleButton.css.js';
+
+const withBaseName = makePrefixer("saltToggleButton");
+const ToggleButton = forwardRef(
+  function ToggleButton2(props, ref) {
+    const {
+      children,
+      className,
+      disabled: disabledProp,
+      value,
+      onClick,
+      onFocus,
+      onChange,
+      selected: selectedProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toggle-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const buttonRef = useRef(null);
+    const handleRef = useForkRef(ref, buttonRef);
+    const toggleButtonGroup = useToggleButtonGroup();
+    const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
+    const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const [selected, setSelected] = useControlled({
+      controlled: toggleButtonGroupSelected,
+      default: Boolean(selectedProp),
+      name: "ToggleButton",
+      state: "selected"
+    });
+    const handleClick = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      setSelected(!selected);
+      onChange == null ? void 0 : onChange(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleFocus = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const ariaChecked = selected && !disabled;
+    return /* @__PURE__ */ jsx("button", {
+      "aria-checked": ariaChecked,
+      className: clsx(withBaseName(), className),
+      disabled,
+      role: toggleButtonGroup ? "radio" : "checkbox",
+      ref: handleRef,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable && !disabled ? 0 : -1,
+      value,
+      ...rest,
+      children
+    });
+  }
+);
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.js.map