@salt-ds/lab 1.0.0-alpha.14 → 1.0.0-alpha.15

package/dist-cjs/switch/Switch.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --switch-width: 44px;\n  --switch-thumb-margin: 3px 0 0 3px;\n  --switch-thumb-size: 18px;\n  --switch-thumb-translate: 20px;\n  --switch-height: 24px;\n}\n\n.salt-density-low {\n  --switch-width: 38px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 16px;\n  --switch-thumb-translate: 18px;\n  --switch-height: 20px;\n}\n\n.salt-density-medium {\n  --switch-width: 34px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 14px;\n  --switch-thumb-translate: 16px;\n  --switch-height: 18px;\n}\n\n.salt-density-high {\n  --switch-width: 30px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 12px;\n  --switch-thumb-translate: 14px;\n  --switch-height: 16px;\n}\n\n.saltSwitch {\n  --switch-label-color: var(--salt-text-secondary-foreground);\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selected);\n  --switch-track-color: var(--salt-selectable-borderColor);\n  --switch-track-color-hover: var(--salt-selectable-borderColor-hover);\n  --switch-track-color-disabled: var(--salt-selectable-borderColor-disabled);\n  --switch-track-color-checked: var(--salt-selectable-borderColor-selected);\n  --switch-track-color-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n  --switch-tick-color: var(--salt-selectable-borderColor-selected);\n  --switch-tick-color-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n}\n\n.saltSwitch {\n  box-sizing: content-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--saltSwitch-height, var(--switch-height));\n  margin-left: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  vertical-align: middle;\n  width: var(--saltSwitch-width, var(--switch-width));\n  z-index: 0;\n}\n\n/* Styles applied to outer ControlLabel component */\n.saltSwitch-label {\n  position: relative;\n  margin-left: 0;\n  margin-right: 0;\n  vertical-align: middle;\n}\n\n/* Styles applied to outer ControlLabel component's text */\n.saltSwitch-label .saltControlLabel-text {\n  color: var(--saltSwitch-label-color, var(--switch-label-color));\n  line-height: var(--saltSwitch-label-lineHeight, var(--salt-text-lineHeight));\n  text-align: right;\n}\n\n/* Styles applied to track on hover  */\n.saltSwitch-label:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track on hover if `disabled={true}` */\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-disabled, var(--switch-track-color-disabled));\n}\n\n/* Styles applied to track on hover when checked  */\n.saltSwitch-label:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-hover, var(--switch-track-color-checked));\n}\n\n/* Styles applied to base */\n.saltSwitch-base {\n  background: transparent;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--saltSwitch-base-height, var(--switch-thumb-size));\n  justify-content: flex-start;\n  margin: var(--saltSwitch-base-margin, var(--switch-thumb-margin));\n  overflow: visible;\n  padding: 0;\n  position: absolute;\n  text-align: center;\n  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: var(--saltSwitch-base-width, var(--switch-thumb-size));\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to track */\n.saltSwitch-track {\n  background: var(--saltSwitch-track-color, var(--switch-track-color));\n  border-radius: var(--saltSwitch-track-borderRadius, 0);\n  height: var(--saltSwitch-track-height, var(--switch-height));\n  min-height: var(--saltSwitch-track-minHeight, 16px);\n  margin-top: 0;\n  margin-left: 0;\n  opacity: 1;\n  position: absolute;\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  transform: var(--saltSwitch-track-transform, none);\n  width: var(--saltSwitch-track-width, var(--switch-width));\n  z-index: -1;\n}\n\n/* Styles applied to input element and icon container */\n.saltSwitch-inputContainer {\n  align-items: inherit;\n  display: flex;\n  justify-content: inherit;\n  transform: translateX(var(--saltSwitch-inputContainer-translate-x, 0px));\n  transition: transform 0.15s;\n  width: 100%;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  height: 100%;\n  left: -100%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to thumb, and icon if `checked={true}` */\n.saltSwitch-thumb,\n.saltSwitch-checked .saltSwitch-icon {\n  background: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  border-radius: var(--saltSwitch-thumb-borderRadius, 0);\n  border: var(--saltSwitch-thumb-border, none);\n  box-shadow: none;\n  width: var(--saltSwitch-thumb-width, var(--switch-thumb-size));\n  height: var(--saltSwitch-thumb-height, var(--switch-thumb-size));\n  fill: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  outline: 1px solid transparent;\n}\n\n/* Styles applied to base if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked {\n  transform: none;\n}\n\n/* Styles applied to input container if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked .saltSwitch-inputContainer {\n  transform: translateX(var(--saltSwitch-thumb-translate, var(--switch-thumb-translate)));\n}\n\n/* Styles applied to tracks where `checked={true}` */\n.saltSwitch-base.saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked, var(--switch-track-color-checked));\n  border: var(--saltSwitch-track-border-checked, 1px solid var(--switch-track-color-checked));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` */\n.saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked, var(--switch-tick-color));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` and `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked-disabled, var(--switch-tick-color-disabled));\n}\n\n/* Styles applied when `focusVisible={true}` */\n.saltSwitch-focusVisible:before {\n  background: transparent;\n  content: \"\";\n  display: block;\n  height: var(--saltSwitch-focused-height, var(--switch-height));\n  left: var(--saltSwitch-focused-left, -2px);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  position: absolute;\n  top: var(--saltSwitch-focused-top, -2px);\n  width: var(--saltSwitch-focused-width, var(--switch-width));\n}\n\n/* Styles applied to tracks when `focusVisible={true}` */\n.saltSwitch-focusVisible + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track if `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-base + .saltSwitch-track {\n  background: var(--switch-track-color-disabled);\n  border: transparent;\n}\n\n/* Styles applied to track if `disabled={true}` and `checked={true}` */\n.saltSwitch-disabled .saltSwitch-base.saltSwitch-checked + .saltSwitch-track,\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-disabled, var(--switch-track-color-checked-disabled));\n  border: transparent;\n}\n\n/* Styles applied to thumb and icon if `disabled={true}`  */\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb,\n.saltSwitch-disabled .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled:hover .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled,\n.saltSwitch-disabled:hover {\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Switch.css.js.map

package/dist-cjs/switch/Switch.js

@@ -6,28 +6,34 @@ var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
-var ControlLabel = require('../control-label/ControlLabel.js');
-require('../form-field-context-legacy/FormFieldLegacyContext.js');
-var useFormFieldLegacyProps = require('../form-field-context-legacy/useFormFieldLegacyProps.js');
-var CheckedIcon = require('./assets/CheckedIcon.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var Switch$1 = require('./Switch.css.js');
+var icons = require('@salt-ds/icons');
 
 const withBaseName = core.makePrefixer("saltSwitch");
+function CheckedIcon(props) {
+  const density = core.useDensity();
+  return density === "high" ? /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSmallSolidIcon, {
+    ...props
+  }) : /* @__PURE__ */ jsxRuntime.jsx(icons.SuccessSolidIcon, {
+    ...props
+  });
+}
 const Switch = React.forwardRef(function Switch2(props, ref) {
-  const { a11yProps } = useFormFieldLegacyProps.useFormFieldLegacyProps();
   const {
     checked: checkedProp,
     className,
     color,
     defaultChecked,
-    disabled,
+    disabled: disabledProp,
+    inputProps = {},
     label,
-    LabelProps,
+    name,
     onBlur,
     onChange,
     onFocus,
+    value,
     ...rest
   } = props;
   const targetWindow = window.useWindow();
@@ -36,85 +42,74 @@ const Switch = React.forwardRef(function Switch2(props, ref) {
     css: Switch$1,
     window: targetWindow
   });
-  const inputRef = React.useRef(null);
+  const {
+    "aria-describedby": inputDescribedBy,
+    "aria-labelledby": inputLabelledBy,
+    className: inputClassName,
+    onChange: inputOnChange,
+    ...restInputProps
+  } = inputProps;
   const [checked, setChecked] = core.useControlled({
     controlled: checkedProp,
     default: Boolean(defaultChecked),
     name: "Switch",
     state: "checked"
   });
-  const [focusVisible, setFocusVisible] = React.useState(false);
+  const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } = core.useFormFieldProps();
+  const disabled = formFieldDisabled != null ? formFieldDisabled : disabledProp;
   const handleChange = (event) => {
-    const value = event.target.checked;
-    setChecked(value);
-    onChange == null ? void 0 : onChange(event, value);
+    if (event.nativeEvent.defaultPrevented) {
+      return;
+    }
+    const value2 = event.target.checked;
+    setChecked(value2);
+    onChange == null ? void 0 : onChange(event);
+    inputOnChange == null ? void 0 : inputOnChange(event);
   };
-  const handleFocus = React.useCallback(
-    (event) => {
-      var _a;
-      if (!inputRef.current) {
-        inputRef.current = event.currentTarget;
-      }
-      if ((_a = inputRef.current) == null ? void 0 : _a.matches(":focus-visible")) {
-        setFocusVisible(true);
-      }
-      onFocus == null ? void 0 : onFocus(event);
-    },
-    [onFocus]
-  );
-  const handleBlur = React.useCallback(
-    (event) => {
-      setFocusVisible(false);
-      onBlur == null ? void 0 : onBlur(event);
-    },
-    [onBlur]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(ControlLabel.ControlLabel, {
-    ...LabelProps,
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", {
     className: clsx.clsx(
-      withBaseName("label"),
-      { [withBaseName("disabled")]: disabled },
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("checked")]: checked
+      },
       className
     ),
-    disabled,
-    label,
     ref,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
-      className: clsx.clsx(withBaseName(), className),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: clsx.clsx(withBaseName("base"), {
-            [withBaseName("checked")]: checked,
-            [withBaseName("focusVisible")]: focusVisible
-          }),
-          children: /* @__PURE__ */ jsxRuntime.jsxs("span", {
-            className: withBaseName("inputContainer"),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("input", {
-                className: withBaseName("input"),
-                checked,
-                disabled,
-                onBlur: handleBlur,
-                onChange: handleChange,
-                onFocus: handleFocus,
-                ref: inputRef,
-                type: "checkbox",
-                ...a11yProps,
-                ...rest
-              }),
-              checked ? /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon.CheckedIcon, {
-                className: withBaseName("icon")
-              }) : /* @__PURE__ */ jsxRuntime.jsx("span", {
-                className: withBaseName("thumb")
-              })
-            ]
+    ...rest,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", {
+        "aria-describedby": clsx.clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-describedby"],
+          inputDescribedBy
+        ),
+        "aria-labelledby": clsx.clsx(
+          formFieldA11yProps == null ? void 0 : formFieldA11yProps["aria-labelledby"],
+          inputLabelledBy
+        ),
+        name,
+        value,
+        checked,
+        className: clsx.clsx(withBaseName("input"), inputClassName),
+        defaultChecked,
+        disabled,
+        onBlur,
+        onChange: handleChange,
+        onFocus,
+        type: "checkbox",
+        ...restInputProps
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", {
+        className: withBaseName("track"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", {
+          className: withBaseName("thumb"),
+          children: checked && /* @__PURE__ */ jsxRuntime.jsx(CheckedIcon, {
+            className: withBaseName("icon")
           })
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", {
-          className: withBaseName("track")
         })
-      ]
-    })
+      }),
+      label
+    ]
   });
 });
 

package/dist-cjs/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  InputHTMLAttributes,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\nimport { CheckedIcon } from \"./assets/CheckedIcon\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  label?: ControlLabelProps[\"label\"];\n  LabelProps?: Partial<ControlLabelProps>;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n  props,\n  ref\n) {\n  const { a11yProps } = useFormFieldLegacyProps();\n\n  const {\n    checked: checkedProp,\n    className,\n    color,\n    defaultChecked,\n    disabled,\n    label,\n    LabelProps,\n    onBlur,\n    onChange,\n    onFocus,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-switch\",\n    css: switchCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: Boolean(defaultChecked),\n    name: \"Switch\",\n    state: \"checked\",\n  });\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.checked;\n    setChecked(value);\n    onChange?.(event, value);\n  };\n\n  const handleFocus = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      // Fix for https://github.com/facebook/react/issues/7769\n      if (!inputRef.current) {\n        inputRef.current = event.currentTarget;\n      }\n\n      // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n      // useIsFocusVisible polyfill\n      if (inputRef.current?.matches(\":focus-visible\")) {\n        setFocusVisible(true);\n      }\n\n      onFocus?.(event);\n    },\n    [onFocus]\n  );\n\n  const handleBlur = useCallback(\n    (event: FocusEvent<HTMLInputElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  return (\n    <ControlLabel\n      {...LabelProps}\n      className={clsx(\n        withBaseName(\"label\"),\n        { [withBaseName(\"disabled\")]: disabled },\n        className\n      )}\n      disabled={disabled}\n      label={label}\n      ref={ref}\n    >\n      <span className={clsx(withBaseName(), className)}>\n        <span\n          className={clsx(withBaseName(\"base\"), {\n            [withBaseName(\"checked\")]: checked,\n            [withBaseName(\"focusVisible\")]: focusVisible,\n          })}\n        >\n          <span className={withBaseName(\"inputContainer\")}>\n            <input\n              className={withBaseName(\"input\")}\n              checked={checked}\n              disabled={disabled}\n              onBlur={handleBlur}\n              onChange={handleChange}\n              onFocus={handleFocus}\n              ref={inputRef}\n              type=\"checkbox\"\n              {...a11yProps}\n              {...rest}\n            />\n            {checked ? (\n              <CheckedIcon className={withBaseName(\"icon\")} />\n            ) : (\n              <span className={withBaseName(\"thumb\")} />\n            )}\n          </span>\n        </span>\n        <span className={withBaseName(\"track\")} />\n      </span>\n    </ControlLabel>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Switch","useFormFieldLegacyProps","useWindow","useComponentCssInjection","switchCss","useRef","useControlled","useState","useCallback","jsx","ControlLabel","clsx","jsxs","CheckedIcon"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentPropsWithoutRef,\n  FocusEventHandler,\n  forwardRef,\n  ReactNode,\n} from \"react\";\nimport {\n  makePrefixer,\n  useControlled,\n  useDensity,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport switchCss from \"./Switch.css\";\nimport {\n  IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\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   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">>;\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\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nfunction CheckedIcon(props: IconProps) {\n  const density = useDensity();\n  return density === \"high\" ? (\n    <SuccessSmallSolidIcon {...props} />\n  ) : (\n    <SuccessSolidIcon {...props} />\n  );\n}\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n  props,\n  ref\n) {\n  const {\n    checked: checkedProp,\n    className,\n    color,\n    defaultChecked,\n    disabled: disabledProp,\n    inputProps = {},\n    label,\n    name,\n    onBlur,\n    onChange,\n    onFocus,\n    value,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-switch\",\n    css: switchCss,\n    window: targetWindow,\n  });\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    className: inputClassName,\n    onChange: inputOnChange,\n    ...restInputProps\n  } = inputProps;\n\n  const [checked, setChecked] = useControlled({\n    controlled: checkedProp,\n    default: Boolean(defaultChecked),\n    name: \"Switch\",\n    state: \"checked\",\n  });\n\n  const { a11yProps: formFieldA11yProps, disabled: formFieldDisabled } =\n    useFormFieldProps();\n\n  const disabled = formFieldDisabled ?? disabledProp;\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    inputOnChange?.(event);\n  };\n\n  return (\n    <label\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"checked\")]: checked,\n        },\n        className\n      )}\n      ref={ref}\n      {...rest}\n    >\n      <input\n        aria-describedby={clsx(\n          formFieldA11yProps?.[\"aria-describedby\"],\n          inputDescribedBy\n        )}\n        aria-labelledby={clsx(\n          formFieldA11yProps?.[\"aria-labelledby\"],\n          inputLabelledBy\n        )}\n        name={name}\n        value={value}\n        checked={checked}\n        className={clsx(withBaseName(\"input\"), inputClassName)}\n        defaultChecked={defaultChecked}\n        disabled={disabled}\n        onBlur={onBlur}\n        onChange={handleChange}\n        onFocus={onFocus}\n        type=\"checkbox\"\n        {...restInputProps}\n      />\n      <span className={withBaseName(\"track\")}>\n        <span className={withBaseName(\"thumb\")}>\n          {checked && <CheckedIcon className={withBaseName(\"icon\")} />}\n        </span>\n      </span>\n      {label}\n    </label>\n  );\n});\n"],"names":["makePrefixer","useDensity","jsx","SuccessSmallSolidIcon","SuccessSolidIcon","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx"],"mappings":"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"}

package/dist-cjs/toast-group/ToastGroup.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltToastGroup {\n  width: var(--toastGroup-width);\n  max-height: calc(100% - var(--salt-spacing-300) * 2);\n  margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200);\n  overflow: auto;\n  display: flex-inline;\n  flex-direction: column;\n  position: fixed;\n  z-index: var(--salt-zIndex-flyover);\n}\n\n.saltToastGroup-bottom-right {\n  bottom: 0;\n  right: 0;\n  justify-content: flex-end;\n}\n\n.saltToastGroup-top-right {\n  top: 0;\n  right: 0;\n  justify-content: flex-start;\n}\n\n.salt-density-high {\n  --toastGroup-width: 210px;\n}\n\n.salt-density-medium {\n  --toastGroup-width: 260px;\n}\n\n.salt-density-low {\n  --toastGroup-width: 310px;\n}\n\n.salt-density-touch {\n  --toastGroup-width: 360px;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ToastGroup.css.js.map

package/dist-cjs/toast-group/ToastGroup.css.js.map

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

package/dist-cjs/toast-group/ToastGroup.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ToastGroup$1 = require('./ToastGroup.css.js');
+
+const withBaseName = core.makePrefixer("saltToastGroup");
+const ToastGroup = React.forwardRef(
+  function ToastGroup2(props, ref) {
+    const { children, className, placement = "bottom-right", ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-toast",
+      css: ToastGroup$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(withBaseName(), withBaseName(placement), className),
+      ...rest,
+      children
+    });
+  }
+);
+
+exports.ToastGroup = ToastGroup;
+//# sourceMappingURL=ToastGroup.js.map

package/dist-cjs/toast-group/ToastGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastGroup.js","sources":["../src/toast-group/ToastGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toastGroupCss from \"./ToastGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToastGroup\");\n\nexport interface ToastGroupProps extends ComponentPropsWithoutRef<\"div\"> {\n  placement?: \"top-right\" | \"bottom-right\";\n}\n\nexport const ToastGroup = forwardRef<HTMLDivElement, ToastGroupProps>(\n  function ToastGroup(props, ref) {\n    const { children, className, placement = \"bottom-right\", ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toast\",\n      css: toastGroupCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(withBaseName(), withBaseName(placement), className)}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","ToastGroup","useWindow","useComponentCssInjection","toastGroupCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAM3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WAAW,CAAA,KAAA,EAAO,GAAK,EAAA;AAC9B,IAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,SAAY,GAAA,cAAA,EAAA,GAAmB,MAAS,GAAA,KAAA,CAAA;AAErE,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,YAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,SAAS,GAAG,SAAS,CAAA;AAAA,MACjE,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/badge/Badge.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltBadge {\n  /* Colors */\n  --badge-content-text-color: var(--saltBadge-content-text-color, var(--salt-accent-foreground));\n  --badge-content-icon-color: var(--saltBadge-content-icon-color, var(--salt-accent-background));\n  /* Font, Typography */\n  --badge-content-borderRadius: 16px;\n  --badge-content-lineHeight: 15px;\n  --badge-content-padding: 0px 4px;\n  --badge-fontSize: var(--saltBadge-fontSize, var(--salt-text-label-fontSize));\n\n  /* Derived */\n  /* Same as content padding in x */\n  --badge-offset-inline: -4px;\n\n  --badge-sequence-gap: var(--salt-size-unit);\n}\n\n/* Style applied to the root element */\n.saltBadge {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n/* Give automatic margin when they sit next to each other */\n.saltBadge + .saltBadge {\n  margin-left: var(--badge-sequence-gap);\n}\n\n/* Style applied to the badge in the corner of the node */\n.saltBadge-badge {\n  color: var(--badge-content-text-color);\n  display: inline-block;\n  font-weight: 700; /* TODO: Use characteristic once aligned */\n  font-size: var(--badge-fontSize);\n  /* default small type */\n  width: auto;\n  min-width: 15px;\n  line-height: var(--badge-content-lineHeight);\n  border-radius: var(--badge-content-borderRadius);\n  text-align: center;\n\n  transform: translate(var(--badge-offset-inline), -50%);\n  transform-origin: 100% 0%;\n  /*\n    We want offset the next inline element to be strictly next to the badge.\n    This negative margin makes sure this node \"appears\" to be narrower.\n   */\n  margin-right: var(--badge-offset-inline);\n\n  padding: var(--badge-content-padding);\n  background: var(--badge-content-icon-color);\n\n  position: relative;\n\n  flex-wrap: wrap;\n  align-items: center;\n  align-content: center;\n  flex-direction: row;\n  justify-content: center;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-inline: var(--salt-spacing-50);\n  line-height: var(--salt-accent-lineHeight);\n  height: var(--salt-accent-lineHeight);\n  min-width: var(--salt-accent-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-notification);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-accent-fontSize);\n  font-weight: var(--salt-accent-fontWeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: relative;\n  top: calc(-1 * var(--salt-spacing-100));\n  right: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Badge.css.js.map

package/dist-es/badge/Badge.js

@@ -1,47 +1,31 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, useId } from '@salt-ds/core';
-import { MessageIcon } from '@salt-ds/icons';
+import { makePrefixer } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef, isValidElement, cloneElement } from 'react';
+import { forwardRef } from 'react';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Badge.css.js';
 
 const withBaseName = makePrefixer("saltBadge");
-const Badge = forwardRef(function Badge2({
-  badgeContent = 0,
-  max = 1e3,
-  className,
-  children = /* @__PURE__ */ jsx(MessageIcon, {}),
-  ...rest
-}, ref) {
-  var _a;
+const Badge = forwardRef(function Badge2({ value, max = 999, className, children, ...rest }, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-badge",
     css: css_248z,
     window: targetWindow
   });
-  const badgeId = useId();
-  const childId = useId(
-    isValidElement(children) ? (_a = children.props) == null ? void 0 : _a.id : void 0
-  );
-  let badgeContentValue = badgeContent;
-  if (badgeContentValue > max) {
-    badgeContentValue = `${max}+`;
-  }
+  const valueText = typeof value === "number" && value > max ? `${max}+` : value;
   return /* @__PURE__ */ jsxs("span", {
     className: clsx(withBaseName(), className),
     ref,
-    role: "img",
-    "aria-labelledby": clsx(childId, badgeId),
     ...rest,
     children: [
-      children && isValidElement(children) ? cloneElement(children, { id: childId }) : children,
+      children,
       /* @__PURE__ */ jsx("span", {
-        id: badgeId,
-        className: clsx(withBaseName("badge")),
-        children: badgeContentValue
+        className: clsx(withBaseName("badge"), {
+          [withBaseName("topRight")]: children
+        }),
+        children: valueText
       })
     ]
   });

package/dist-es/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { MessageIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactText,\n} from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport badgeCss from \"./Badge.css\";\n\n/**\n * @example overriding density prop to fit a smaller denser space otherwise handled through context provider\n * <Badge density={'high'} />\n *\n * NOTE: Badge component no longer has AccessibleText prop\n *\n */\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge.\n   */\n  badgeContent?: string | number;\n  /**\n   * The badge will be added relative to this node. Renders the \"message\" icon by default.\n   */\n  children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\n\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    badgeContent = 0,\n    max = 1000,\n    className,\n    children = <MessageIcon />,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-badge\",\n    css: badgeCss,\n    window: targetWindow,\n  });\n\n  const badgeId = useId();\n  const childId = useId(\n    isValidElement<HTMLAttributes<HTMLElement>>(children)\n      ? children.props?.id\n      : undefined\n  );\n\n  let badgeContentValue = badgeContent;\n  if (badgeContentValue > max) {\n    badgeContentValue = `${max}+`;\n  }\n\n  return (\n    <span\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      role=\"img\"\n      aria-labelledby={clsx(childId, badgeId)}\n      {...rest}\n    >\n      {children && isValidElement<HTMLAttributes<HTMLElement>>(children)\n        ? cloneElement(children, { id: childId })\n        : children}\n      <span id={badgeId} className={clsx(withBaseName(\"badge\"))}>\n        {badgeContentValue}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge","badgeCss"],"mappings":";;;;;;;;;AA2CA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAwC,CAAA,SAASA,MACpE,CAAA;AAAA,EACE,YAAe,GAAA,CAAA;AAAA,EACf,GAAM,GAAA,GAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAA,uBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,EACrB,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AAtDF,EAAA,IAAA,EAAA,CAAA;AAuDE,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,UAAU,KAAM,EAAA,CAAA;AACtB,EAAA,MAAM,OAAU,GAAA,KAAA;AAAA,IACd,eAA4C,QAAQ,CAAA,GAAA,CAChD,EAAS,GAAA,QAAA,CAAA,KAAA,KAAT,mBAAgB,EAChB,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,iBAAoB,GAAA,YAAA,CAAA;AACxB,EAAA,IAAI,oBAAoB,GAAK,EAAA;AAC3B,IAAA,iBAAA,GAAoB,CAAG,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACL,iBAAA,EAAiB,IAAK,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IACrC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAY,QAAA,IAAA,cAAA,CAA4C,QAAQ,CAC7D,GAAA,YAAA,CAAa,UAAU,EAAE,EAAA,EAAI,OAAQ,EAAC,CACtC,GAAA,QAAA;AAAA,sBACH,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,EAAI,EAAA,OAAA;AAAA,QAAS,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrD,QAAA,EAAA,iBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport badgeCss from \"./Badge.css\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge\n   */\n  value: number | string;\n  /**\n   * If a child is provided the Badge will render top right. By defualt renders inline.\n   */\n  children?: ReactNode;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  { value, max = 999, className, children, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-badge\",\n    css: badgeCss,\n    window: targetWindow,\n  });\n\n  const valueText =\n    typeof value === \"number\" && value > max ? `${max}+` : value;\n\n  return (\n    <span className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {children}\n      <span\n        className={clsx(withBaseName(\"badge\"), {\n          [withBaseName(\"topRight\")]: children,\n        })}\n      >\n        {valueText}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge","badgeCss"],"mappings":";;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEtC,MAAM,KAAQ,GAAA,UAAA,CAAwC,SAASA,MAAAA,CACpE,EAAE,KAAA,EAAO,GAAM,GAAA,GAAA,EAAK,SAAW,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACjD,GACA,EAAA;AACA,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,YACJ,OAAO,KAAA,KAAU,YAAY,KAAQ,GAAA,GAAA,GAAM,GAAG,GAAS,CAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAEzD,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7D,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,sBACA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,UACrC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC7B,CAAA;AAAA,QAEA,QAAA,EAAA,SAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/content-status/ContentStatus.js

@@ -21,7 +21,6 @@ const ContentStatus = forwardRef(
     onActionClick,
     status = "info",
     title,
-    unit = "%",
     value,
     ...rest
   }, ref) {
@@ -66,7 +65,6 @@ const ContentStatus = forwardRef(
           message,
           status,
           title,
-          unit,
           value,
           ...rest
         }),

package/dist-es/content-status/ContentStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  Text,\n  useAriaAnnouncer,\n  useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEvent, Ref, useEffect } from \"react\";\n\nimport {\n  StatusIndicator,\n  StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport contentStatusCss from \"./ContentStatus.css\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<any>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      unit = \"%\",\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-content-status\",\n      css: contentStatusCss,\n      window: targetWindow,\n    });\n\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          unit={unit}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={clsx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={clsx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={clsx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={clsx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["ContentStatus","contentStatusCss"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAU9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,qBAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,gBAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACT,KAAA;AAAA,IACA,IAAO,GAAA,GAAA;AAAA,IACP,KAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AAEjB,IAAA,MAAM,0BAA0B,WAAe,IAAA,aAAA,CAAA;AAC/C,IAAA,MAAM,aAAa,QAAY,IAAA,uBAAA,CAAA;AAC/B,IAAM,MAAA,UAAA,GAAa,SAAS,OAAW,IAAA,UAAA,CAAA;AAEvC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AAEtC,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,MAAM,gBAAgB,EAAC,CAAA;AACvB,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,aAAA,CAAc,KAAK,KAAK,CAAA,CAAA;AAAA,OAC1B;AACA,MAAA,IAAI,OAAS,EAAA;AACX,QAAA,aAAA,CAAc,KAAK,OAAO,CAAA,CAAA;AAAA,OAC5B;AAEA,MAAA,IAAI,WAAW,SAAW,EAAA;AACxB,QAAA,aAAA,CAAc,KAAK,MAAM,CAAA,CAAA;AAAA,OAC3B;AACA,MAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,QAAS,QAAA,CAAA,aAAA,CAAc,IAAK,CAAA,GAAG,CAAC,CAAA,CAAA;AAAA,OAClC;AAAA,OACC,CAAC,QAAA,EAAU,kBAAkB,OAAS,EAAA,MAAA,EAAQ,KAAK,CAAC,CAAA,CAAA;AAEvD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC7D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,qBAAA;AAAA,UACA,YAAA;AAAA,UACA,gBAAA;AAAA,UACA,EAAA;AAAA,UACA,OAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA;AAAA,UACA,KAAA;AAAA,UACC,GAAG,IAAA;AAAA,SACN,CAAA;AAAA,QACC,8BACE,IAAA,CAAA,KAAA,EAAA;AAAA,UAEC,iBAAiB,EAAA,EAAA;AAAA,UACjB,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,EAAA;AAAA,UACA,IAAK,EAAA,QAAA;AAAA,UAEJ,QAAA,EAAA;AAAA,YAAA,KAAA,oBACE,GAAA,CAAA,IAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,cAAI,QAAA,EAAA,KAAA;AAAA,aAAM,CAAA;AAAA,YAEtD,2BACE,GAAA,CAAA,IAAA,EAAA;AAAA,cAAK,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,cAAI,QAAA,EAAA,OAAA;AAAA,aAAQ,CAAA;AAAA,YAE1D,8BACE,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,cACzC,sCACE,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAO,OAAS,EAAA,aAAA;AAAA,gBAAe,GAAK,EAAA,SAAA;AAAA,gBAClC,QAAA,EAAA,WAAA;AAAA,eACH,CAAA;AAAA,aAEJ,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  Text,\n  useAriaAnnouncer,\n  useId,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEvent, Ref, useEffect } from \"react\";\n\nimport {\n  StatusIndicator,\n  StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport contentStatusCss from \"./ContentStatus.css\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<any>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-content-status\",\n      css: contentStatusCss,\n      window: targetWindow,\n    });\n\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={clsx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={clsx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={clsx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={clsx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["ContentStatus","contentStatusCss"],"mappings":"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"}

package/dist-es/content-status/internal/StatusIndicator.js

@@ -8,7 +8,6 @@ const withBaseName = makePrefixer("saltContentStatus");
 function StatusIndicator({
   status = "info",
   disableAnnouncer,
-  unit,
   value,
   title,
   message,
@@ -27,7 +26,6 @@ function StatusIndicator({
           withBaseName("determinateLoading"),
           circularProgressClassName
         ),
-        unit,
         value,
         ...restCircularProgressProps
       });

package/dist-es/content-status/internal/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"unit\" | \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  unit,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          unit={unit}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/content-status/internal/StatusIndicator.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  StatusIndicator as BaseStatusIndicator,\n  StatusIndicatorProps as BaseStatusIndicatorProps,\n  Spinner,\n  SpinnerProps,\n} from \"@salt-ds/core\";\nimport { ReactElement } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { CircularProgress, CircularProgressProps } from \"../../progress\";\n\nexport interface StatusIndicatorProps\n  extends Pick<SpinnerProps, \"disableAnnouncer\">,\n    Pick<CircularProgressProps, \"value\"> {\n  title?: string;\n  message?: string;\n  CircularProgressProps?: Partial<CircularProgressProps>;\n  SpinnerProps?: Partial<SpinnerProps>;\n  id?: string;\n  status?: BaseStatusIndicatorProps[\"status\"] | \"loading\";\n}\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport function StatusIndicator({\n  status = \"info\",\n  disableAnnouncer,\n  value,\n  title,\n  message,\n  CircularProgressProps: {\n    className: circularProgressClassName,\n    ...restCircularProgressProps\n  } = {},\n  SpinnerProps: { className: spinnerClassName, ...restSpinnerProps } = {},\n  id,\n}: StatusIndicatorProps): ReactElement {\n  if (status === \"loading\") {\n    if (value !== undefined) {\n      return (\n        <CircularProgress\n          aria-label={title || message}\n          className={clsx(\n            withBaseName(\"determinateLoading\"),\n            circularProgressClassName\n          )}\n          value={value}\n          {...restCircularProgressProps}\n        />\n      );\n    }\n    return (\n      <Spinner\n        className={clsx(withBaseName(\"indeterminateLoading\"), spinnerClassName)}\n        // Announcement of the content status is more useful than completion announcement from spinner\n        completionAnnouncement={null}\n        data-testid={`spinner-${id!}`}\n        disableAnnouncer={disableAnnouncer}\n        {...restSpinnerProps}\n      />\n    );\n  }\n\n  return (\n    <BaseStatusIndicator\n      status={status}\n      data-jpmui-test={`icon-${status}-${id!}`}\n      size={2}\n    />\n  );\n}\n"],"names":["BaseStatusIndicator"],"mappings":";;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,SAAS,eAAgB,CAAA;AAAA,EAC9B,MAAS,GAAA,MAAA;AAAA,EACT,gBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,qBAAuB,EAAA;AAAA,IACrB,SAAW,EAAA,yBAAA;AAAA,IACR,GAAA,yBAAA;AAAA,MACD,EAAC;AAAA,EACL,cAAc,EAAE,SAAA,EAAW,gBAAqB,EAAA,GAAA,gBAAA,KAAqB,EAAC;AAAA,EACtE,EAAA;AACF,CAAuC,EAAA;AACrC,EAAA,IAAI,WAAW,SAAW,EAAA;AACxB,IAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,MAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,QACC,cAAY,KAAS,IAAA,OAAA;AAAA,QACrB,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,oBAAoB,CAAA;AAAA,UACjC,yBAAA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG,yBAAA;AAAA,OACN,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,sBAAsB,GAAG,gBAAgB,CAAA;AAAA,MAEtE,sBAAwB,EAAA,IAAA;AAAA,MACxB,eAAa,CAAW,QAAA,EAAA,EAAA,CAAA,CAAA;AAAA,MACxB,gBAAA;AAAA,MACC,GAAG,gBAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AAEA,EAAA,uBACG,GAAA,CAAAA,iBAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,iBAAA,EAAiB,QAAQ,MAAU,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA;AAAA,IACnC,IAAM,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAEJ;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Drawer component (root component if Scrim is disabled) */\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/* 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/* Animation styles applied when the Scrim mounts */\n.saltScrim.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Animation styles applied when the Scrim unmounts */\n.saltScrim.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\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";
+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";
 
 export { css_248z as default };
 //# sourceMappingURL=Drawer.css.js.map