@salt-ds/core 1.47.0 → 1.47.2

package/dist-cjs/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { makePrefixer, useId } from \"../utils\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useDensity } from \"../salt-provider\";\nimport spinnerCss from \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useDensity","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAkBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AAEtC,IAAA,MAAM,UAAUC,uBAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAA,qBAAQ,IAAK,EAAA,EAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useDensity","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AAEtC,IAAA,MAAM,UAAUC,uBAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAA,qBAAQ,IAAK,EAAA,EAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;;"}

package/dist-cjs/split-layout/SplitLayout.js

@@ -15,7 +15,7 @@ var SplitLayout$1 = require('./SplitLayout.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltSplitLayout");
 const SplitLayout = React.forwardRef(
-  ({ endItem, startItem, className, ...rest }, ref) => {
+  function SplitLayout2({ as, endItem, startItem, className, ...rest }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-split-layout",
@@ -26,6 +26,7 @@ const SplitLayout = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FlexLayout.FlexLayout,
       {
+        as,
         className: clsx.clsx(withBaseName(), className),
         ref,
         justify,

package/dist-cjs/split-layout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,GAAG,IAAA,IACpC,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { makePrefixer, type PolymorphicComponentPropWithRef } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  function SplitLayout<T extends ElementType = \"div\">(\n    { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SplitLayout","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,SAASC,YACP,CAAA,EAAE,EAAI,EAAA,OAAA,EAAS,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/stack-layout/StackLayout.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltStackLayout {\n  --stackLayout-separator-weight: var(--salt-size-border, 1);\n}\n\n.saltStackLayout-separator > * {\n  position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/*\n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n  --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n  height: 100%;\n  width: var(--stackLayout-separator-weight);\n  right: var(--stackLayout-seperator-offset);\n  top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n  width: 100%;\n  height: var(--stackLayout-separator-weight);\n  bottom: var(--stackLayout-seperator-offset);\n  left: 0;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltStackLayout {\n  --stackLayout-separator-weight: var(--salt-size-fixed-100, 1);\n}\n\n.saltStackLayout-separator > * {\n  position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/*\n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n  --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n  height: 100%;\n  width: var(--stackLayout-separator-weight);\n  right: var(--stackLayout-seperator-offset);\n  top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n  width: 100%;\n  height: var(--stackLayout-separator-weight);\n  bottom: var(--stackLayout-seperator-offset);\n  left: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StackLayout.css.js.map

package/dist-cjs/stack-layout/StackLayout.js

@@ -21,7 +21,8 @@ function parseSpacing(value) {
   return `calc(var(--salt-spacing-100) * ${value})`;
 }
 const StackLayout = React.forwardRef(
-  ({
+  function StackLayout2({
+    as,
     children,
     className,
     direction = "column",
@@ -29,7 +30,7 @@ const StackLayout = React.forwardRef(
     separators,
     style,
     ...rest
-  }, ref) => {
+  }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-stack-layout",
@@ -47,6 +48,7 @@ const StackLayout = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       FlexLayout.FlexLayout,
       {
+        as,
         className: clsx.clsx(
           withBaseName(),
           {

package/dist-cjs/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  makePrefixer,\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  function StackLayout<T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StackLayout","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,SAASC,YACP,CAAA;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/status-adornment/StatusAdornment.js

@@ -11,9 +11,9 @@ require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
 var ErrorAdornment = require('./ErrorAdornment.js');
+var StatusAdornment$1 = require('./StatusAdornment.css.js');
 var SuccessAdornment = require('./SuccessAdornment.js');
 var WarningAdornment = require('./WarningAdornment.js');
-var StatusAdornment$1 = require('./StatusAdornment.css.js');
 
 const icons = {
   error: ErrorAdornment.ErrorAdornmentIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { 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":["ErrorAdornmentIcon","WarningAdornmentIcon","SuccessAdornmentIcon","makePrefixer","forwardRef","StatusAdornment","useWindow","useComponentCssInjection","statusAdornmentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAaA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAAA,iCAAA;AAAA,EACP,OAAS,EAAAC,qCAAA;AAAA,EACT,OAAS,EAAAC;AACX,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX,CAAA;AAEA,MAAM,YAAA,GAAeC,0BAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,iBAAgB,EAAE,SAAA,EAAW,QAAQ,GAAG,SAAA,IAAa,GAAK,EAAA;AACjE,IAAM,MAAA,kBAAA,GAAqB,MAAM,MAAM,CAAA;AACvC,IAAM,MAAA,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,YAAY,EAAA,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"StatusAdornment.js","sources":["../src/status-adornment/StatusAdornment.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport { makePrefixer } from \"../utils\";\nimport { ErrorAdornmentIcon } from \"./ErrorAdornment\";\nimport statusAdornmentCss from \"./StatusAdornment.css\";\nimport { SuccessAdornmentIcon } from \"./SuccessAdornment\";\nimport { WarningAdornmentIcon } from \"./WarningAdornment\";\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":["ErrorAdornmentIcon","WarningAdornmentIcon","SuccessAdornmentIcon","makePrefixer","forwardRef","StatusAdornment","useWindow","useComponentCssInjection","statusAdornmentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;AAYA,MAAM,KAAQ,GAAA;AAAA,EACZ,KAAO,EAAAA,iCAAA;AAAA,EACP,OAAS,EAAAC,qCAAA;AAAA,EACT,OAAS,EAAAC;AACX,CAAA;AAWA,MAAM,oBAAkE,GAAA;AAAA,EACtE,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA;AACX,CAAA;AAEA,MAAM,YAAA,GAAeC,0BAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,iBAAgB,EAAE,SAAA,EAAW,QAAQ,GAAG,SAAA,IAAa,GAAK,EAAA;AACjE,IAAM,MAAA,kBAAA,GAAqB,MAAM,MAAM,CAAA;AACvC,IAAM,MAAA,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,YAAY,EAAA,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/status-indicator/StatusIndicator.js

@@ -2,16 +2,16 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
 var React = require('react');
+var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var SemanticIconProvider = require('../semantic-icon-provider/SemanticIconProvider.js');
 var StatusIndicator$1 = require('./StatusIndicator.css.js');
 
 const statusToAriaLabelMap = {

package/dist-cjs/status-indicator/StatusIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport type { ValidationStatus } from \"./ValidationStatus\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport statusIndicatorCss from \"./StatusIndicator.css\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  /**\n   * Status indicator to be displayed.\n   */\n  status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n  error: \"error\",\n  success: \"success\",\n  warning: \"warning\",\n  info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n  function StatusIndicator(\n    { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-indicator\",\n      css: statusIndicatorCss,\n      window: targetWindow,\n    });\n\n    const { ErrorIcon, WarningIcon, SuccessIcon, InfoIcon } = useIcon();\n\n    const iconMap = {\n      error: ErrorIcon,\n      success: SuccessIcon,\n      warning: WarningIcon,\n      info: InfoIcon,\n    };\n\n    const IconComponent = iconMap[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    return (\n      <IconComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        size={size}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StatusIndicator","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","statusIndicatorCss","useIcon","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA;AACR,CAAA;AAEA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA,EAAE,SAAW,EAAA,MAAA,EAAQ,OAAOC,uBAAmB,EAAA,GAAG,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,WAAa,EAAA,QAAA,KAAaC,4BAAQ,EAAA;AAElE,IAAA,MAAM,OAAU,GAAA;AAAA,MACd,KAAO,EAAA,SAAA;AAAA,MACP,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA;AAAA,KACR;AAEA,IAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM,CAAA;AACpC,IAAM,MAAA,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IACE,uBAAAC,cAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,IAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}
+{"version":3,"file":"StatusIndicator.js","sources":["../src/status-indicator/StatusIndicator.tsx"],"sourcesContent":["import { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport statusIndicatorCss from \"./StatusIndicator.css\";\nimport type { ValidationStatus } from \"./ValidationStatus\";\n\nexport interface StatusIndicatorProps extends IconProps {\n  /**\n   * Status indicator to be displayed.\n   */\n  status: ValidationStatus;\n}\n\nconst statusToAriaLabelMap: Record<ValidationStatus, string> = {\n  error: \"error\",\n  success: \"success\",\n  warning: \"warning\",\n  info: \"info\",\n};\n\nconst withBaseName = makePrefixer(\"saltStatusIndicator\");\n\nexport const StatusIndicator = forwardRef<SVGSVGElement, StatusIndicatorProps>(\n  function StatusIndicator(\n    { className, status, size = DEFAULT_ICON_SIZE, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-status-indicator\",\n      css: statusIndicatorCss,\n      window: targetWindow,\n    });\n\n    const { ErrorIcon, WarningIcon, SuccessIcon, InfoIcon } = useIcon();\n\n    const iconMap = {\n      error: ErrorIcon,\n      success: SuccessIcon,\n      warning: WarningIcon,\n      info: InfoIcon,\n    };\n\n    const IconComponent = iconMap[status];\n    const ariaLabel = statusToAriaLabelMap[status];\n\n    return (\n      <IconComponent\n        className={clsx(withBaseName(), withBaseName(status), className)}\n        size={size}\n        aria-label={ariaLabel}\n        {...restProps}\n        ref={ref}\n      />\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StatusIndicator","DEFAULT_ICON_SIZE","useWindow","useComponentCssInjection","statusIndicatorCss","useIcon","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,oBAAyD,GAAA;AAAA,EAC7D,KAAO,EAAA,OAAA;AAAA,EACP,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA;AACR,CAAA;AAEA,MAAM,YAAA,GAAeA,0BAAa,qBAAqB,CAAA;AAEhD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA,EAAE,SAAW,EAAA,MAAA,EAAQ,OAAOC,uBAAmB,EAAA,GAAG,SAAU,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,uBAAA;AAAA,MACR,GAAK,EAAAC,iBAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,SAAW,EAAA,WAAA,EAAa,WAAa,EAAA,QAAA,KAAaC,4BAAQ,EAAA;AAElE,IAAA,MAAM,OAAU,GAAA;AAAA,MACd,KAAO,EAAA,SAAA;AAAA,MACP,OAAS,EAAA,WAAA;AAAA,MACT,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA;AAAA,KACR;AAEA,IAAM,MAAA,aAAA,GAAgB,QAAQ,MAAM,CAAA;AACpC,IAAM,MAAA,SAAA,GAAY,qBAAqB,MAAM,CAAA;AAE7C,IACE,uBAAAC,cAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,QAC/D,IAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACX,GAAG,SAAA;AAAA,QACJ;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/dist-cjs/stepper/Step.js

@@ -11,14 +11,14 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 var useId = require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var Step$1 = require('./Step.css.js');
-var Stepper = require('./Stepper.js');
 var StepConnector = require('./internal/StepConnector.js');
 var StepExpandTrigger = require('./internal/StepExpandTrigger.js');
 var StepIcon = require('./internal/StepIcon.js');
+var StepperProvider = require('./internal/StepperProvider.js');
 var StepScreenReaderOnly = require('./internal/StepScreenReaderOnly.js');
 var StepText = require('./internal/StepText.js');
-var StepperProvider = require('./internal/StepperProvider.js');
+var Step$1 = require('./Step.css.js');
+var Stepper = require('./Stepper.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltStep");
 const Step = React.forwardRef(function Step2({
@@ -87,7 +87,7 @@ const Step = React.forwardRef(function Step2({
     {
       id,
       "aria-current": ariaCurrent,
-      className: clsx(
+      className: clsx.clsx(
         withBaseName(),
         withBaseName(`stage-${stage}`),
         withBaseName(`depth-${depth}`),

package/dist-cjs/stepper/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type CSSProperties,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n  useContext,\n  useEffect,\n} from \"react\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\n\nimport type { ButtonProps } from \"../button\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n  {\n    id: idProp,\n    label,\n    description,\n    status,\n    stage = \"pending\",\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n      ref={ref}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}
+{"version":3,"file":"Step.js","sources":["../src/stepper/Step.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n  type ReactNode,\n  useContext,\n  useEffect,\n} from \"react\";\nimport type { ButtonProps } from \"../button\";\nimport { makePrefixer, useControlled, useId } from \"../utils\";\nimport { StepConnector } from \"./internal/StepConnector\";\nimport { StepExpandTrigger } from \"./internal/StepExpandTrigger\";\nimport { StepIcon } from \"./internal/StepIcon\";\nimport {\n  StepDepthContext,\n  StepperOrientationContext,\n} from \"./internal/StepperProvider\";\nimport { StepScreenReaderOnly } from \"./internal/StepScreenReaderOnly\";\nimport { StepText } from \"./internal/StepText\";\nimport stepCSS from \"./Step.css\";\nimport { Stepper } from \"./Stepper\";\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  /**\n   * The label of the step\n   */\n  label?: ReactNode;\n  /**\n   * Description text is displayed just below the label\n   **/\n  description?: ReactNode;\n  /**\n   * Optional string to determine the status of the step.\n   */\n  status?: StepStatus;\n  /**\n   * The stage of the step\n   */\n  stage?: StepStage;\n  /**\n   * Whether the step item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * Initial expanded state of the step.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * Callback fired when the step is toggled.\n   */\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nexport type StepId = string;\n\nexport type StepStatus = \"warning\" | \"error\";\n\nexport type StepStage =\n  | \"pending\"\n  | \"locked\"\n  | \"completed\"\n  | \"inprogress\"\n  | \"active\";\n\nexport type StepDepth = number;\n\nexport interface StepProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"onToggle\"> {\n  label?: ReactNode;\n  description?: ReactNode;\n  status?: StepStatus;\n  stage?: StepStage;\n  expanded?: boolean;\n  defaultExpanded?: boolean;\n  onToggle?: ButtonProps[\"onClick\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStep\");\n\nexport const Step = forwardRef<HTMLLIElement, StepProps>(function Step(\n  {\n    id: idProp,\n    label,\n    description,\n    status,\n    stage = \"pending\",\n    expanded: expandedProp,\n    defaultExpanded,\n    onToggle,\n    className,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const id = useId(idProp);\n  const targetWindow = useWindow();\n  const depth = useContext(StepDepthContext);\n  const orientation = useContext(StepperOrientationContext);\n\n  const hasNestedSteps = !!children;\n\n  const [expanded, setExpanded] = useControlled({\n    name: \"Step\",\n    state: \"expanded\",\n    controlled: expandedProp,\n    default: Boolean(defaultExpanded),\n  });\n\n  useComponentCssInjection({\n    testId: \"salt-step\",\n    css: stepCSS,\n    window: targetWindow,\n  });\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (depth === -1) {\n        console.warn(\"<Step /> should be used within a <Stepper /> component!\");\n      }\n      if (depth > 2) {\n        console.warn(\"<Step /> should not be nested more than 2 levels deep!\");\n      }\n      if (orientation === \"horizontal\" && hasNestedSteps) {\n        console.warn(\n          \"<Stepper /> does not support nested steps in horizontal orientation!\",\n        );\n      }\n    }\n  }, [depth, orientation]);\n\n  const ariaCurrent = stage === \"active\" ? \"step\" : undefined;\n  const iconSizeMultiplier = depth === 0 ? 1.5 : 1;\n  const stageText = stage === \"inprogress\" ? \"in progress\" : stage;\n  const state = status || stageText;\n\n  const labelId = `${id}-label`;\n  const descriptionId = `${id}-description`;\n  const expandTriggerId = `${id}-expand-trigger`;\n  const nestedStepperId = `${id}-nested-stepper`;\n\n  const screenReaderOnly = {\n    stateId: `${id}-sr-only-state`,\n    stateText: state !== \"active\" ? state : \"\",\n    substepsId: `${id}-sr-only-substeps`,\n    substepsText: \"substeps\",\n    toggleSubstepsId: `${id}-sr-only-toggle-substeps`,\n    toggleSubstepsText: \"toggle substeps\",\n  };\n\n  return (\n    <li\n      id={id}\n      aria-current={ariaCurrent}\n      className={clsx(\n        withBaseName(),\n        withBaseName(`stage-${stage}`),\n        withBaseName(`depth-${depth}`),\n        status && withBaseName(`status-${status}`),\n        !hasNestedSteps && withBaseName(\"terminal\"),\n        hasNestedSteps && expanded && withBaseName(\"expanded\"),\n        hasNestedSteps && !expanded && withBaseName(\"collapsed\"),\n        className,\n      )}\n      style={\n        {\n          \"--saltStep-depth\": depth,\n          ...style,\n        } as CSSProperties\n      }\n      {...rest}\n      ref={ref}\n    >\n      <StepScreenReaderOnly>\n        {`${label} ${description !== undefined ? description : \"\"} ${screenReaderOnly.stateText}`}\n      </StepScreenReaderOnly>\n      {hasNestedSteps && (\n        <>\n          <StepScreenReaderOnly\n            id={screenReaderOnly.toggleSubstepsId}\n            aria-hidden\n          >\n            {screenReaderOnly.toggleSubstepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.substepsId} aria-hidden>\n            {screenReaderOnly.substepsText}\n          </StepScreenReaderOnly>\n          <StepScreenReaderOnly id={screenReaderOnly.stateId} aria-hidden>\n            {screenReaderOnly.stateText}\n          </StepScreenReaderOnly>\n        </>\n      )}\n      <StepConnector />\n      <StepIcon\n        stage={stage}\n        status={status}\n        sizeMultiplier={iconSizeMultiplier}\n        aria-hidden\n      />\n      {label && (\n        <StepText id={labelId} purpose=\"label\" aria-hidden>\n          {label}\n        </StepText>\n      )}\n      {description && (\n        <StepText id={descriptionId} purpose=\"description\" aria-hidden>\n          {description}\n        </StepText>\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <StepExpandTrigger\n          id={expandTriggerId}\n          aria-expanded={expanded}\n          aria-controls={nestedStepperId}\n          aria-labelledby={[\n            labelId,\n            descriptionId,\n            screenReaderOnly.stateId,\n            screenReaderOnly.toggleSubstepsId,\n          ].join(\" \")}\n          expanded={expanded}\n          onClick={(event) => {\n            onToggle?.(event);\n            setExpanded(!expanded);\n          }}\n        />\n      )}\n      {hasNestedSteps && orientation === \"vertical\" && (\n        <Stepper\n          id={nestedStepperId}\n          aria-labelledby={[labelId, screenReaderOnly.substepsId].join(\" \")}\n          aria-hidden={!expanded}\n          hidden={!expanded}\n        >\n          {children}\n        </Stepper>\n      )}\n    </li>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Step","useId","useWindow","useContext","StepDepthContext","StepperOrientationContext","useControlled","useComponentCssInjection","stepCSS","useEffect","jsxs","clsx","jsx","StepScreenReaderOnly","Fragment","StepConnector","StepIcon","StepText","StepExpandTrigger","Stepper"],"mappings":"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"}

package/dist-cjs/stepper/Stepper.js

@@ -10,8 +10,8 @@ require('../utils/useFloatingUI/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
-var Stepper$1 = require('./Stepper.css.js');
 var StepperProvider = require('./internal/StepperProvider.js');
+var Stepper$1 = require('./Stepper.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltStepper");
 const Stepper = React.forwardRef(

package/dist-cjs/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport StepperCSS from \"./Stepper.css\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-Stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA,EAAE,WAAa,EAAA,eAAA,EAAiB,UAAU,SAAW,EAAA,GAAG,KAAM,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAmB,IAAA,kBAAA;AAEvC,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAACC,mCAAgB,WACf,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Stepper.js","sources":["../src/stepper/Stepper.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useContext } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport {\n  StepperOrientationContext,\n  StepperProvider,\n} from \"./internal/StepperProvider\";\nimport StepperCSS from \"./Stepper.css\";\n\nconst withBaseName = makePrefixer(\"saltStepper\");\n\nexport type StepperOrientation = \"horizontal\" | \"vertical\";\n\nexport interface StepperProps extends ComponentPropsWithoutRef<\"ol\"> {\n  /**\n   * The orientation of the stepper: defaults to horizontal.\n   */\n  orientation?: StepperOrientation;\n}\n\nexport const Stepper = forwardRef<HTMLOListElement, StepperProps>(\n  function Stepper(\n    { orientation: orientationProp, children, className, ...props },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    const orientationContext = useContext(StepperOrientationContext);\n    const orientation = orientationProp || orientationContext;\n\n    useComponentCssInjection({\n      testId: \"salt-Stepper\",\n      css: StepperCSS,\n      window: targetWindow,\n    });\n\n    return (\n      <StepperProvider orientation={orientation}>\n        <ol\n          className={clsx(withBaseName(), withBaseName(orientation), className)}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </ol>\n      </StepperProvider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Stepper","useWindow","useContext","StepperOrientationContext","useComponentCssInjection","StepperCSS","jsx","StepperProvider","clsx"],"mappings":";;;;;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAWxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA,EAAE,WAAa,EAAA,eAAA,EAAiB,UAAU,SAAW,EAAA,GAAG,KAAM,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAM,MAAA,kBAAA,GAAqBC,iBAAWC,yCAAyB,CAAA;AAC/D,IAAA,MAAM,cAAc,eAAmB,IAAA,kBAAA;AAEvC,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAAC,cAAA,CAACC,mCAAgB,WACf,EAAA,QAAA,kBAAAD,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,WAAWE,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,WAAW,GAAG,SAAS,CAAA;AAAA,QACpE,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KAEL,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-cjs/stepper/internal/StepConnector.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
+var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-fixed-200);\n  border-top-style: var(--salt-borderStyle-dotted);\n  border-top-color: var(--salt-sentiment-neutral-track);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-borderStyle-solid);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-fixed-200);\n  border-left-style: var(--salt-borderStyle-dotted);\n  border-left-color: var(--salt-sentiment-neutral-track);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-borderStyle-solid);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepConnector.css.js.map

package/dist-cjs/stepper/internal/StepExpandTrigger.js

@@ -34,7 +34,7 @@ function StepExpandTrigger({
       id,
       sentiment: "neutral",
       appearance: "transparent",
-      className: clsx(withBaseName(), className),
+      className: clsx.clsx(withBaseName(), className),
       ...props,
       children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, { "aria-hidden": true }) : /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { "aria-hidden": true })
     }

package/dist-cjs/stepper/internal/StepExpandTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepExpandTrigger.js","sources":["../src/stepper/internal/StepExpandTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepExpandTriggerCSS from \"./StepExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n  expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n  id,\n  expanded,\n  className,\n  ...props\n}: StepExpandTriggerProps) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-expand-trigger\",\n    css: stepExpandTriggerCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Button\n      id={id}\n      sentiment=\"neutral\"\n      appearance=\"transparent\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAkB,CAAA;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA2B,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAU,EAAA,SAAA;AAAA,MACV,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,kCAAY,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAAK,mBAAAD,cAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACrE;AAEJ;;;;"}
+{"version":3,"file":"StepExpandTrigger.js","sources":["../src/stepper/internal/StepExpandTrigger.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Button, type ButtonProps } from \"../../button\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepExpandTriggerCSS from \"./StepExpandTrigger.css\";\n\nexport interface StepExpandTriggerProps extends ButtonProps {\n  expanded: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltStepExpandTrigger\");\n\nexport function StepExpandTrigger({\n  id,\n  expanded,\n  className,\n  ...props\n}: StepExpandTriggerProps) {\n  const { CollapseIcon, ExpandIcon } = useIcon();\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-expand-trigger\",\n    css: stepExpandTriggerCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Button\n      id={id}\n      sentiment=\"neutral\"\n      appearance=\"transparent\"\n      className={clsx(withBaseName(), className)}\n      {...props}\n    >\n      {expanded ? <CollapseIcon aria-hidden /> : <ExpandIcon aria-hidden />}\n    </Button>\n  );\n}\n"],"names":["makePrefixer","useIcon","useWindow","useComponentCssInjection","stepExpandTriggerCSS","jsx","Button","clsx"],"mappings":";;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,uBAAuB,CAAA;AAElD,SAAS,iBAAkB,CAAA;AAAA,EAChC,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAA2B,EAAA;AACzB,EAAA,MAAM,EAAE,YAAA,EAAc,UAAW,EAAA,GAAIC,4BAAQ,EAAA;AAC7C,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,aAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAU,EAAA,SAAA;AAAA,MACV,UAAW,EAAA,aAAA;AAAA,MACX,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,QAAA,kCAAY,YAAa,EAAA,EAAA,aAAA,EAAW,MAAC,CAAK,mBAAAF,cAAA,CAAC,UAAW,EAAA,EAAA,aAAA,EAAW,IAAC,EAAA;AAAA;AAAA,GACrE;AAEJ;;;;"}

package/dist-cjs/stepper/internal/StepIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepIcon {\n  grid-area: icon;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  justify-self: center;\n}\n\n.saltStepper-vertical .saltStepIcon {\n  height: var(--salt-size-base);\n}\n\n.saltStep-stage-pending > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-locked > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-static-foreground);\n}\n\n.saltStep-stage-inprogress > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-active > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-completed > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-success-foreground-decorative);\n}\n\n.saltStep-status-warning > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStep-status-error > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-error-foreground-decorative);\n}\n";
+var css_248z = ".saltStepIcon {\n  grid-area: icon;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  justify-self: center;\n}\n\n.saltStepper-vertical .saltStepIcon {\n  height: var(--salt-size-base);\n}\n\n.saltStep-stage-pending > .saltStepIcon {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n}\n\n.saltStep-stage-locked > .saltStepIcon {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n}\n\n.saltStep-stage-inprogress > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-active > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-info-foreground-decorative);\n}\n\n.saltStep-stage-completed > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-success-foreground-decorative);\n}\n\n.saltStep-status-warning > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStep-status-error > .saltStepIcon {\n  --saltIcon-color: var(--salt-status-error-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepIcon.css.js.map

package/dist-cjs/stepper/internal/StepIcon.js

@@ -33,7 +33,7 @@ function StepIcon({
     IconComponent,
     {
       size: sizeMultiplier,
-      className: clsx(withBaseName(), className),
+      className: clsx.clsx(withBaseName(), className),
       ...props
     }
   );

package/dist-cjs/stepper/internal/StepIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\n\nimport stepIconCSS from \"./StepIcon.css\";\n\nimport type { StepStage, StepStatus } from \"../Step\";\n\nexport interface StepIconProps extends IconProps {\n  stage: StepStage;\n  status?: StepStatus;\n  sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n  status,\n  stage,\n  size,\n  sizeMultiplier = size || 1.5,\n  className,\n  ...props\n}: StepIconProps) {\n  const targetWindow = useWindow();\n  const IconComponent = useStepIcon({ stage, status });\n\n  useComponentCssInjection({\n    testId: \"salt-step-icon\",\n    css: stepIconCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <IconComponent\n      size={sizeMultiplier}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction useStepIcon({\n  stage,\n  status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n  const icons = useIcon();\n\n  const stateToIcon = useMemo(\n    () => ({\n      error: icons.ErrorIcon,\n      warning: icons.WarningIcon,\n      active: icons.ActiveIcon,\n      completed: icons.CompletedIcon,\n      pending: icons.PendingIcon,\n      inprogress: icons.InProgressIcon,\n      locked: icons.LockedIcon,\n    }),\n    [icons],\n  );\n\n  return stateToIcon[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","useIcon","useMemo"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQC,4BAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAAC,aAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}
+{"version":3,"file":"StepIcon.js","sources":["../src/stepper/internal/StepIcon.tsx"],"sourcesContent":["import type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useIcon } from \"../../semantic-icon-provider\";\nimport { makePrefixer } from \"../../utils\";\nimport type { StepStage, StepStatus } from \"../Step\";\nimport stepIconCSS from \"./StepIcon.css\";\n\nexport interface StepIconProps extends IconProps {\n  stage: StepStage;\n  status?: StepStatus;\n  sizeMultiplier?: IconProps[\"size\"];\n}\n\nconst withBaseName = makePrefixer(\"saltStepIcon\");\n\nexport function StepIcon({\n  status,\n  stage,\n  size,\n  sizeMultiplier = size || 1.5,\n  className,\n  ...props\n}: StepIconProps) {\n  const targetWindow = useWindow();\n  const IconComponent = useStepIcon({ stage, status });\n\n  useComponentCssInjection({\n    testId: \"salt-step-icon\",\n    css: stepIconCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <IconComponent\n      size={sizeMultiplier}\n      className={clsx(withBaseName(), className)}\n      {...props}\n    />\n  );\n}\n\nfunction useStepIcon({\n  stage,\n  status,\n}: Pick<StepIconProps, \"stage\" | \"status\">) {\n  const icons = useIcon();\n\n  const stateToIcon = useMemo(\n    () => ({\n      error: icons.ErrorIcon,\n      warning: icons.WarningIcon,\n      active: icons.ActiveIcon,\n      completed: icons.CompletedIcon,\n      pending: icons.PendingIcon,\n      inprogress: icons.InProgressIcon,\n      locked: icons.LockedIcon,\n    }),\n    [icons],\n  );\n\n  return stateToIcon[status || stage];\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepIconCSS","jsx","clsx","useIcon","useMemo"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,iBAAiB,IAAQ,IAAA,GAAA;AAAA,EACzB,SAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAA,MAAM,aAAgB,GAAA,WAAA,CAAY,EAAE,KAAA,EAAO,QAAQ,CAAA;AAEnD,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,IAAM,EAAA,cAAA;AAAA,MACN,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,WAAY,CAAA;AAAA,EACnB,KAAA;AAAA,EACA;AACF,CAA4C,EAAA;AAC1C,EAAA,MAAM,QAAQC,4BAAQ,EAAA;AAEtB,EAAA,MAAM,WAAc,GAAAC,aAAA;AAAA,IAClB,OAAO;AAAA,MACL,OAAO,KAAM,CAAA,SAAA;AAAA,MACb,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,QAAQ,KAAM,CAAA,UAAA;AAAA,MACd,WAAW,KAAM,CAAA,aAAA;AAAA,MACjB,SAAS,KAAM,CAAA,WAAA;AAAA,MACf,YAAY,KAAM,CAAA,cAAA;AAAA,MAClB,QAAQ,KAAM,CAAA;AAAA,KAChB,CAAA;AAAA,IACA,CAAC,KAAK;AAAA,GACR;AAEA,EAAO,OAAA,WAAA,CAAY,UAAU,KAAK,CAAA;AACpC;;;;"}

package/dist-cjs/stepper/internal/StepText.js

@@ -4,11 +4,11 @@ var jsxRuntime = require('react/jsx-runtime');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var Text = require('../../text/Text.js');
 require('../../text/Code.js');
 require('../../text/Display.js');
 require('../../text/Headings.js');
 require('../../text/Label.js');
+var Text = require('../../text/Text.js');
 require('../../text/TextAction.js');
 require('../../text/TextNotation.js');
 require('react');
@@ -39,7 +39,7 @@ function StepText({
     {
       id,
       styleAs: "label",
-      className: clsx(withBaseName(), withBaseName(purpose), className),
+      className: clsx.clsx(withBaseName(), withBaseName(purpose), className),
       ...props,
       children
     }

package/dist-cjs/stepper/internal/StepText.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"StepText.js","sources":["../src/stepper/internal/StepText.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport { Text, type TextProps } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport stepTextCSS from \"./StepText.css\";\n\nexport interface StepTextProps extends TextProps<\"div\"> {\n  purpose: \"label\" | \"description\";\n}\n\nconst withBaseName = makePrefixer(\"saltStepText\");\n\nexport function StepText({\n  id,\n  purpose,\n  className,\n  styleAs = \"label\",\n  children,\n  ...props\n}: StepTextProps) {\n  const targetWindow = useWindow();\n\n  useComponentCssInjection({\n    testId: \"salt-step-text\",\n    css: stepTextCSS,\n    window: targetWindow,\n  });\n\n  return (\n    <Text\n      id={id}\n      styleAs=\"label\"\n      className={clsx(withBaseName(), withBaseName(purpose), className)}\n      {...props}\n    >\n      {children}\n    </Text>\n  );\n}\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","stepTextCSS","jsx","Text","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,0BAAa,cAAc,CAAA;AAEzC,SAAS,QAAS,CAAA;AAAA,EACvB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAU,GAAA,OAAA;AAAA,EACV,QAAA;AAAA,EACA,GAAG;AACL,CAAkB,EAAA;AAChB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MACR,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist-cjs/stepper/internal/StepperProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { type ReactNode, createContext, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n  createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n  orientation: StepperOrientation;\n  children: ReactNode;\n}\n\nexport function StepperProvider({\n  orientation: orientationProp,\n  children,\n}: StepperProviderProps) {\n  const depth = useContext(StepDepthContext);\n\n  return (\n    <StepperOrientationContext.Provider value={orientationProp}>\n      <StepDepthContext.Provider value={depth + 1}>\n        {children}\n      </StepDepthContext.Provider>\n    </StepperOrientationContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKa,MAAA,yBAAA,GACXA,oBAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmBA,oBAAyB,EAAE;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQC,iBAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAAA,cAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;;;"}
+{"version":3,"file":"StepperProvider.js","sources":["../src/stepper/internal/StepperProvider.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from \"react\";\n\nimport type { StepDepth } from \"../Step\";\nimport type { StepperOrientation } from \"../Stepper\";\n\nexport const StepperOrientationContext =\n  createContext<StepperOrientation>(\"horizontal\");\nexport const StepDepthContext = createContext<StepDepth>(-1);\n\nexport interface StepperProviderProps {\n  orientation: StepperOrientation;\n  children: ReactNode;\n}\n\nexport function StepperProvider({\n  orientation: orientationProp,\n  children,\n}: StepperProviderProps) {\n  const depth = useContext(StepDepthContext);\n\n  return (\n    <StepperOrientationContext.Provider value={orientationProp}>\n      <StepDepthContext.Provider value={depth + 1}>\n        {children}\n      </StepDepthContext.Provider>\n    </StepperOrientationContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","jsx"],"mappings":";;;;;AAKa,MAAA,yBAAA,GACXA,oBAAkC,YAAY;AACnC,MAAA,gBAAA,GAAmBA,oBAAyB,EAAE;AAOpD,SAAS,eAAgB,CAAA;AAAA,EAC9B,WAAa,EAAA,eAAA;AAAA,EACb;AACF,CAAyB,EAAA;AACvB,EAAM,MAAA,KAAA,GAAQC,iBAAW,gBAAgB,CAAA;AAEzC,EAAA,uBACGC,cAAA,CAAA,yBAAA,CAA0B,QAA1B,EAAA,EAAmC,OAAO,eACzC,EAAA,QAAA,kBAAAA,cAAA,CAAC,gBAAiB,CAAA,QAAA,EAAjB,EAA0B,KAAA,EAAO,KAAQ,GAAA,CAAA,EACvC,UACH,CACF,EAAA,CAAA;AAEJ;;;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-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-size: 100%;\n  border-radius: var(--salt-palette-corner-weak, 0);\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  box-sizing: border-box;\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\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  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weaker, 0);\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  transition: transform var(--salt-duration-perceptible) ease-in-out;\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-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  --saltIcon-size: 100%;\n  border-radius: var(--salt-palette-corner-weak, 0);\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-fixed-100)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  box-sizing: border-box;\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\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-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weaker, 0);\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  transition: transform var(--salt-duration-perceptible) ease-in-out;\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-fixed-100)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Switch.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n  type IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n  > {\n  /**\n   * If `true`, the switch will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the switch component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the switch will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n  /**\n   * The label to be shown next to the switch.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when switch loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when switch gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the switch.\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>(\n  function Switch(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\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          role=\"switch\"\n          {...restInputProps}\n        />\n        <span className={withBaseName(\"track\")}>\n          <span className={withBaseName(\"thumb\")}>\n            {checked && (\n              <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n            )}\n          </span>\n        </span>\n        {label && <span className={withBaseName(\"label\")}>{label}</span>}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","useDensity","jsx","SuccessSmallSolidIcon","SuccessSolidIcon","forwardRef","Switch","useWindow","useComponentCssInjection","switchCss","useControlled","useFormFieldProps","value","jsxs","clsx"],"mappings":";;;;;;;;;;;;;;;;;;AAsEA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA;AAE9C,SAAS,YAAY,KAAkB,EAAA;AACrC,EAAA,MAAM,UAAUC,uBAAW,EAAA;AAC3B,EAAO,OAAA,OAAA,KAAY,MACjB,mBAAAC,cAAA,CAACC,2BAAuB,EAAA,EAAA,GAAG,OAAO,CAElC,mBAAAD,cAAA,CAACE,sBAAkB,EAAA,EAAA,GAAG,KAAO,EAAA,CAAA;AAEjC;AAEO,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,cAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,aAAa,EAAC;AAAA,MACd,KAAA;AAAA,MACA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,kBAAoB,EAAA,gBAAA;AAAA,MACpB,iBAAmB,EAAA,eAAA;AAAA,MACnB,SAAW,EAAA,cAAA;AAAA,MACX,QAAU,EAAA,aAAA;AAAA,MACV,GAAG;AAAA,KACD,GAAA,UAAA;AAEJ,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,2BAAc,CAAA;AAAA,MAC1C,UAAY,EAAA,WAAA;AAAA,MACZ,OAAA,EAAS,QAAQ,cAAc,CAAA;AAAA,MAC/B,IAAM,EAAA,QAAA;AAAA,MACN,KAAO,EAAA;AAAA,KACR,CAAA;AAED,IAAA,MAAM,EAAE,SAAW,EAAA,kBAAA,EAAoB,QAAU,EAAA,iBAAA,KAC/CC,mCAAkB,EAAA;AAEpB,IAAA,MAAM,WAAW,iBAAqB,IAAA,YAAA;AAEtC,IAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AAEpE,MAAI,IAAA,KAAA,CAAM,YAAY,gBAAkB,EAAA;AACtC,QAAA;AAAA;AAGF,MAAMC,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,OAAA;AAC3B,MAAA,UAAA,CAAWA,MAAK,CAAA;AAChB,MAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AACX,MAAgB,aAAA,IAAA,IAAA,GAAA,MAAA,GAAA,aAAA,CAAA,KAAA,CAAA;AAAA,KAClB;AAEA,IACE,uBAAAC,eAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAZ,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,kBAAkB,EAAAY,SAAA;AAAA,gBAChB,kBAAqB,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAA,kBAAA,CAAA;AAAA,gBACrB;AAAA,eACF;AAAA,cACA,iBAAiB,EAAAA,SAAA;AAAA,gBACf,kBAAqB,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA,CAAA,iBAAA,CAAA;AAAA,gBACrB;AAAA,eACF;AAAA,cACA,IAAA;AAAA,cACA,KAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAW,EAAAA,SAAA,CAAK,YAAa,CAAA,OAAO,GAAG,cAAc,CAAA;AAAA,cACrD,cAAA;AAAA,cACA,QAAA;AAAA,cACA,MAAA;AAAA,cACA,QAAU,EAAA,YAAA;AAAA,cACV,OAAA;AAAA,cACA,IAAK,EAAA,UAAA;AAAA,cACL,IAAK,EAAA,QAAA;AAAA,cACJ,GAAG;AAAA;AAAA,WACN;AAAA,0BACAZ,cAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,OAAO,CACnC,EAAA,QAAA,kBAAAA,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAClC,QACC,EAAA,OAAA,oBAAAA,cAAA,CAAC,eAAY,aAAW,EAAA,IAAA,EAAC,WAAW,YAAa,CAAA,MAAM,CAAG,EAAA,CAAA,EAE9D,CACF,EAAA,CAAA;AAAA,UACC,yBAAUA,cAAA,CAAA,MAAA,EAAA,EAAK,WAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,KAC3D;AAAA;AAGN;;;;"}
+{"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import {\n  type IconProps,\n  SuccessSmallSolidIcon,\n  SuccessSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type ComponentPropsWithoutRef,\n  type FocusEventHandler,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useDensity } from \"../salt-provider\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport switchCss from \"./Switch.css\";\n\nexport interface SwitchProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"label\">,\n    \"children\" | \"onFocus\" | \"onBlur\" | \"onChange\"\n  > {\n  /**\n   * If `true`, the switch will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the switch component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the switch will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<ComponentPropsWithoutRef<\"input\">> & DataAttributes;\n  /**\n   * The label to be shown next to the switch.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when switch loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when switch gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the switch.\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>(\n  function Switch(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\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          role=\"switch\"\n          {...restInputProps}\n        />\n        <span className={withBaseName(\"track\")}>\n          <span className={withBaseName(\"thumb\")}>\n            {checked && (\n              <CheckedIcon aria-hidden className={withBaseName(\"icon\")} />\n            )}\n          </span>\n        </span>\n        {label && <span className={withBaseName(\"label\")}>{label}</span>}\n      </label>\n    );\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/tag/Tag.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
+var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tag.css.js.map