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

package/dist-es/progress/CircularProgress/CircularProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info as DefaultInfo } from \"../Info\";\nimport { InfoRendererProps } from \"../LinearProgress/LinearProgress\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A label for accessibility\n   */\n  \"aria-label\"?: string;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * Render props callback to render info panel.\n   * @param function({ value, unit, getValueProps })\n   */\n  renderInfo?: (\n    props: Pick<InfoRendererProps<any, any>, \"value\" | \"unit\" | \"getValueProps\">\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Circular progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    \"aria-label\": ariaLabel,\n    className,\n    disabled,\n    max = 100,\n    showInfo = true,\n    renderInfo,\n    value = 0,\n    unit = \"%\",\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const circleStyle: CSSProperties = {};\n  const railCircleStyle: CSSProperties = {};\n  const rootStyle: CSSProperties = {};\n  const rootProps: HTMLAttributes<any> = {};\n\n  const progress = (value / max) * 100;\n\n  rootProps[\"aria-valuenow\"] = Math.round(value);\n\n  const progressStrokeLength = `calc(${progress} * var(--circularProgress-progressCircle-circumference) / 100)`;\n  const progressGapLength = `calc((100 - ${progress}) * var(--circularProgress-progressCircle-circumference) / 100)`;\n  const railStrokeLength = `calc((100 - ${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;\n  const railGapLength = `calc((${progress}) * var(--circularProgress-railCircle-circumference) / 100)`;\n\n  circleStyle.strokeDasharray = `${progressStrokeLength} ${progressGapLength}`;\n  railCircleStyle.strokeDashoffset = `${railStrokeLength}`;\n  railCircleStyle.strokeDasharray = `${railStrokeLength} ${railGapLength}`;\n\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\" && !ariaLabel) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Salt: aria-label value not supplied to CircularProgress. This may affect the ADA compliance level of the component and owning application, and may generate errors in automated accessibility testing software\"\n      );\n    }\n  }, [ariaLabel]);\n\n  const getValueProps = () => ({\n    unit,\n    value,\n    getValueProps: (valueProps = {}) => ({\n      className: withBaseName(\"progressValue\"),\n      ...valueProps,\n    }),\n  });\n\n  let progressInfo: ReactNode = null;\n  if (showInfo) {\n    progressInfo = renderInfo ? (\n      renderInfo(getValueProps())\n    ) : (\n      <DefaultInfo\n        className={withBaseName(\"progressValue\")}\n        unit={unit}\n        value={Math.round(progress)}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        { [withBaseName(\"disabled\")]: disabled },\n        className\n      )}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={value}\n      {...rest}\n    >\n      <svg className={withBaseName(\"svg\")}>\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          style={railCircleStyle}\n          className={withBaseName(\"railCircle\")}\n        />\n\n        <circle\n          cx=\"50%\"\n          cy=\"50%\"\n          fill=\"none\"\n          style={circleStyle}\n          className={withBaseName(\"circle\")}\n        />\n      </svg>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS","DefaultInfo"],"mappings":"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"}
+{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info } from \"../Info\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport interface CircularProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * A label for accessibility\n   */\n  \"aria-label\"?: string;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Circular progress bar with an optional Info element, showing the current value\n */\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    \"aria-label\": ariaLabel,\n    className,\n    max = 100,\n    showInfo = true,\n    value = 0,\n    ...rest\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const subOverlayRightStyle: CSSProperties = {};\n  const subOverlayLeftStyle: CSSProperties = {};\n\n  const getRotationAngle = (progress: number, shift = 0) => {\n    return -180 + ((progress - shift) / 50) * 180;\n  };\n\n  const progress = (value / max) * 100;\n\n  if (progress <= 50) {\n    const rotationAngle = getRotationAngle(progress);\n    subOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    subOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(progress, 50);\n    subOverlayRightStyle.transform = \"rotate(0deg)\";\n    subOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n\n  let progressInfo: ReactNode = null;\n  if (showInfo) {\n    progressInfo = (\n      <Info\n        className={withBaseName(\"progressValue\")}\n        unit=\"%\"\n        value={Math.round(progress)}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={max}\n      aria-valuemin={0}\n      aria-valuenow={Math.round(value)}\n      {...rest}\n    >\n      <div className={withBaseName(\"track\")} />\n      <div className={withBaseName(\"bars\")}>\n        <div className={withBaseName(\"barOverlayRight\")}>\n          <div\n            className={withBaseName(\"barSubOverlayRight\")}\n            data-testid=\"barSubOverlayRight\"\n            style={subOverlayRightStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n        <div className={withBaseName(\"barOverlayLeft\")}>\n          <div\n            className={withBaseName(\"barSubOverlayLeft\")}\n            data-testid=\"barSubOverlayLeft\"\n            style={subOverlayLeftStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n      </div>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS","progress"],"mappings":"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"}

package/dist-es/progress/LinearProgress/LinearProgress.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-bar {\n  background: var(--salt-accent-background-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-track {\n  background: var(--salt-track-borderColor-disabled);\n}\n\n.saltLinearProgress-disabled .saltLinearProgress-progressValue {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: calc(100% - 10px);\n  overflow: hidden;\n  height: var(--salt-size-adornment);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  height: var(--salt-track-borderWidth);\n  position: absolute;\n  top: calc((var(--salt-size-adornment) - var(--salt-track-borderWidth)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground);\n  display: flex;\n  min-width: 200px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: var(--salt-size-adornment);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-track-borderColor);\n  width: 100%;\n  height: var(--salt-track-borderWidth);\n  position: absolute;\n  top: calc((var(--salt-size-adornment) - var(--salt-track-borderWidth)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LinearProgress.css.js.map

package/dist-es/progress/LinearProgress/LinearProgress.js

@@ -8,29 +8,8 @@ import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './LinearProgress.css.js';
 
 const withBaseName = makePrefixer("saltLinearProgress");
-const getUnitAndValueProps = ({ unit, value }, { progressUnit, progressValue }) => ({
-  unit,
-  value,
-  getUnitProps: (props = {}) => ({
-    className: progressUnit,
-    ...props
-  }),
-  getValueProps: (props = {}) => ({
-    className: progressValue,
-    ...props
-  })
-});
 const LinearProgress = forwardRef(
-  function LinearProgress2({
-    className,
-    disabled,
-    max = 100,
-    renderInfo,
-    showInfo = true,
-    unit = "%",
-    value = 0,
-    ...rest
-  }, ref) {
+  function LinearProgress2({ className, max = 100, showInfo = true, value = 0, ...rest }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-linear-progress",
@@ -38,51 +17,32 @@ const LinearProgress = forwardRef(
       window: targetWindow
     });
     let progressInfo = null;
-    const progressUnit = withBaseName("progressUnit");
-    const progressValue = withBaseName("progressValue");
     const progress = value / max * 100;
     if (showInfo) {
-      progressInfo = renderInfo ? renderInfo(
-        getUnitAndValueProps(
-          {
-            unit,
-            value
-          },
-          {
-            progressUnit,
-            progressValue
-          }
-        )
-      ) : /* @__PURE__ */ jsx(Info, {
-        unit,
+      progressInfo = /* @__PURE__ */ jsx(Info, {
+        unit: "%",
         value: Math.round(progress),
-        className: progressValue
+        className: withBaseName("progressValue")
       });
     }
-    const rootProps = {};
     const barStyle = {};
     const trackStyle = {};
-    rootProps["aria-valuenow"] = Math.round(value);
-    rootProps["aria-valuemin"] = 0;
-    rootProps["aria-valuemax"] = 100;
     barStyle.transform = `translateX(${progress - 100}%)`;
     trackStyle.transform = `translateX(${progress}%)`;
     return /* @__PURE__ */ jsxs("div", {
-      className: clsx(
-        withBaseName(),
-        { [withBaseName("disabled")]: disabled },
-        className
-      ),
+      className: clsx(withBaseName(), className),
       ref,
       "data-testid": "linear-progress",
       role: "progressbar",
-      ...rootProps,
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": Math.round(value),
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", {
           className: withBaseName("barContainer"),
           children: [
-            progress !== 0 && /* @__PURE__ */ jsx("div", {
+            /* @__PURE__ */ jsx("div", {
               className: withBaseName("bar"),
               style: barStyle
             }),

package/dist-es/progress/LinearProgress/LinearProgress.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info as DefaultInfo } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface InfoRendererProps<T, U> {\n  unit: string;\n  value: number;\n  getUnitProps?: (props: T) => { className: string } & T;\n  getValueProps: (props: U) => { className: string } & U;\n}\n\ntype UnitAndValuePropsGetter<T, U> = (\n  a: {\n    unit: string;\n    value: number;\n  },\n  b: {\n    progressUnit: string;\n    progressValue: string;\n  }\n) => InfoRendererProps<T, U>;\n\nconst getUnitAndValueProps: UnitAndValuePropsGetter<any, any> = (\n  { unit, value },\n  { progressUnit, progressValue }\n) => ({\n  unit,\n  value,\n  getUnitProps: (props = {}) => ({\n    className: progressUnit,\n    ...props,\n  }),\n  getValueProps: (props = {}) => ({\n    className: progressValue,\n    ...props,\n  }),\n});\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * Disabled flag, true when the component is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * render props callback to render info panel.\n   */\n  renderInfo?: (\n    props: Pick<\n      InfoRendererProps<any, any>,\n      \"value\" | \"unit\" | \"getValueProps\" | \"getUnitProps\"\n    >\n  ) => ReactElement<InfoRendererProps<any, any>>;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Linear progress bar with an optional Info element, showing the current value\n * The default Info element can be rendered by setting `unit` and `value` props.\n * A custom Info element can be rendered using the `renderInfo` callback.\n * The render props callback is of the form\n * @param {string} unit the unit of the progress info\n * @param {number} value the value of the progress info\n * @param {function} getUnitProps function callback that returns the unit props\n * @param {function} getValueProps function callback that returns the value props\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    {\n      className,\n      disabled,\n      max = 100,\n      renderInfo,\n      showInfo = true,\n      unit = \"%\",\n      value = 0,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    let progressInfo: ReactNode = null;\n\n    const progressUnit = withBaseName(\"progressUnit\");\n    const progressValue = withBaseName(\"progressValue\");\n\n    const progress = (value / max) * 100;\n\n    if (showInfo) {\n      progressInfo = renderInfo ? (\n        renderInfo(\n          getUnitAndValueProps(\n            {\n              unit,\n              value,\n            },\n            {\n              progressUnit,\n              progressValue,\n            }\n          )\n        )\n      ) : (\n        <DefaultInfo\n          unit={unit}\n          value={Math.round(progress)}\n          className={progressValue}\n        />\n      );\n    }\n\n    const rootProps: HTMLAttributes<HTMLDivElement> = {};\n    const barStyle: CSSProperties = {};\n    const trackStyle: CSSProperties = {};\n\n    rootProps[\"aria-valuenow\"] = Math.round(value);\n    rootProps[\"aria-valuemin\"] = 0;\n    rootProps[\"aria-valuemax\"] = 100;\n    barStyle.transform = `translateX(${progress - 100}%)`;\n    trackStyle.transform = `translateX(${progress}%)`;\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"disabled\")]: disabled },\n          className\n        )}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        {...rootProps}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          {progress !== 0 && (\n            <div className={withBaseName(\"bar\")} style={barStyle} />\n          )}\n          <div className={withBaseName(\"track\")} style={trackStyle} />\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","linearProgressCss","DefaultInfo"],"mappings":"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"}
+{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { Info } from \"../Info\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * If `true`, the info panel will be displayed.\n   */\n  showInfo?: boolean;\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\n/**\n * Linear progress bar with an optional Info element, showing the current value\n */\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    { className, max = 100, showInfo = true, value = 0, ...rest },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    let progressInfo: ReactNode = null;\n\n    const progress = (value / max) * 100;\n\n    if (showInfo) {\n      progressInfo = (\n        <Info\n          unit=\"%\"\n          value={Math.round(progress)}\n          className={withBaseName(\"progressValue\")}\n        />\n      );\n    }\n\n    const barStyle: CSSProperties = {};\n    const trackStyle: CSSProperties = {};\n\n    barStyle.transform = `translateX(${progress - 100}%)`;\n    trackStyle.transform = `translateX(${progress}%)`;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        aria-valuemax={max}\n        aria-valuemin={0}\n        aria-valuenow={Math.round(value)}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          <div className={withBaseName(\"bar\")} style={barStyle} />\n          <div className={withBaseName(\"track\")} style={trackStyle} />\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AA8B/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAAA,CACP,EAAE,SAAA,EAAW,GAAM,GAAA,GAAA,EAAK,QAAW,GAAA,IAAA,EAAM,KAAQ,GAAA,CAAA,EAAA,GAAM,IAAK,EAAA,EAC5D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,IAAI,YAA0B,GAAA,IAAA,CAAA;AAE9B,IAAM,MAAA,QAAA,GAAY,QAAQ,GAAO,GAAA,GAAA,CAAA;AAEjC,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,YAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,IAAK,EAAA,GAAA;AAAA,QACL,KAAA,EAAO,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAA;AAAA,QAC1B,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,OACzC,CAAA,CAAA;AAAA,KAEJ;AAEA,IAAA,MAAM,WAA0B,EAAC,CAAA;AACjC,IAAA,MAAM,aAA4B,EAAC,CAAA;AAEnC,IAAS,QAAA,CAAA,SAAA,GAAY,cAAc,QAAW,GAAA,GAAA,CAAA,EAAA,CAAA,CAAA;AAC9C,IAAA,UAAA,CAAW,YAAY,CAAc,WAAA,EAAA,QAAA,CAAA,EAAA,CAAA,CAAA;AAErC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,IAAK,EAAA,aAAA;AAAA,MACL,eAAe,EAAA,GAAA;AAAA,MACf,eAAe,EAAA,CAAA;AAAA,MACf,eAAA,EAAe,IAAK,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC9B,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,UACzC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,KAAK,CAAA;AAAA,cAAG,KAAO,EAAA,QAAA;AAAA,aAAU,CAAA;AAAA,4BACrD,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAG,KAAO,EAAA,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SAC5D,CAAA;AAAA,QACC,YAAA;AAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/StepLabel/StepLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStepLabel {\n  width: 100%;\n  text-align: center;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n";
+var css_248z = ".saltStepLabel {\n  width: 100%;\n  text-align: center;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StepLabel.css.js.map

package/dist-es/stepped-tracker/StepLabel/StepLabel.js

@@ -1,35 +1,27 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useMemo } from 'react';
+import { forwardRef } from 'react';
 import { clsx } from 'clsx';
-import { makePrefixer, useIdMemo, useForkRef, Label } from '@salt-ds/core';
+import { makePrefixer, Label } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import css_248z from './StepLabel.css.js';
-import { useSteppedTrackerContext } from '../SteppedTrackerContext.js';
-import '../TrackerStep/TrackerStep.js';
-import { useTrackerStepTooltipContext } from '../TrackerStep/TrackerStepTooltipContext.js';
 
 const withBaseName = makePrefixer("saltStepLabel");
 const StepLabel = forwardRef(
   function StepLabel2({ children, className, ...rest }, ref) {
-    const id = useIdMemo();
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-step-label",
       css: css_248z,
       window: targetWindow
     });
-    const { getOverflowRef } = useSteppedTrackerContext();
-    const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);
-    const isInTooltip = useTrackerStepTooltipContext();
-    const combinedRef = useForkRef(overflowRef, ref);
-    return isInTooltip ? /* @__PURE__ */ jsx("span", {
-      children
-    }) : /* @__PURE__ */ jsx(Label, {
+    return /* @__PURE__ */ jsx(Label, {
       className: clsx(withBaseName(), className),
-      ref: combinedRef,
+      ref,
       ...rest,
-      children
+      children: /* @__PURE__ */ jsx("strong", {
+        children
+      })
     });
   }
 );

package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import {\n  forwardRef,\n  ReactNode,\n  useMemo,\n  ComponentPropsWithoutRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useForkRef, makePrefixer, useIdMemo, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nimport { useSteppedTrackerContext } from \"../SteppedTrackerContext\";\nimport { useTrackerStepTooltipContext } from \"../TrackerStep\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  children: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref?) {\n    const id = useIdMemo();\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    const { getOverflowRef } = useSteppedTrackerContext();\n    const overflowRef = useMemo(() => getOverflowRef(id), [id, getOverflowRef]);\n\n    const isInTooltip = useTrackerStepTooltipContext();\n\n    const combinedRef = useForkRef<HTMLLabelElement>(overflowRef, ref);\n\n    return isInTooltip ? (\n      <span>{children}</span>\n    ) : (\n      <Label\n        className={clsx(withBaseName(), className)}\n        ref={combinedRef}\n        {...rest}\n      >\n        {children}\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAM1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAM,EAAA;AACzD,IAAA,MAAM,KAAK,SAAU,EAAA,CAAA;AAErB,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,EAAE,cAAe,EAAA,GAAI,wBAAyB,EAAA,CAAA;AACpD,IAAM,MAAA,WAAA,GAAc,QAAQ,MAAM,cAAA,CAAe,EAAE,CAAG,EAAA,CAAC,EAAI,EAAA,cAAc,CAAC,CAAA,CAAA;AAE1E,IAAA,MAAM,cAAc,4BAA6B,EAAA,CAAA;AAEjD,IAAM,MAAA,WAAA,GAAc,UAA6B,CAAA,WAAA,EAAa,GAAG,CAAA,CAAA;AAEjE,IAAA,OAAO,8BACJ,GAAA,CAAA,MAAA,EAAA;AAAA,MAAM,QAAA;AAAA,KAAS,oBAEf,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAK,EAAA,WAAA;AAAA,MACJ,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport type StepLabelProps = ComponentPropsWithoutRef<\"label\">;\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <strong>{children}</strong>\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/SteppedTracker.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSteppedTracker {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  width: 100%;\n  position: relative;\n}\n";
+var css_248z = ".saltSteppedTracker {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  position: relative;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=SteppedTracker.css.js.map

package/dist-es/stepped-tracker/SteppedTracker.js

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
+import { forwardRef, Children, useEffect, isValidElement } from 'react';
 import { clsx } from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { makePrefixer } from '@salt-ds/core';
-import useDetectTruncatedText from './useDetectTruncatedText.js';
 import { SteppedTrackerProvider, TrackerStepProvider } from './SteppedTrackerContext.js';
 import css_248z from './SteppedTracker.css.js';
 
@@ -35,12 +34,8 @@ const SteppedTracker = forwardRef(
       window: targetWindow
     });
     useCheckInvalidChildren(children);
-    const [hasTooltips, setHasTooltips] = useState(false);
-    const getOverflowRef = useDetectTruncatedText(setHasTooltips);
     const totalSteps = Children.count(children);
     return /* @__PURE__ */ jsx(SteppedTrackerProvider, {
-      hasTooltips,
-      getOverflowRef,
       totalSteps,
       activeStep,
       children: /* @__PURE__ */ jsx("ul", {

package/dist-es/stepped-tracker/SteppedTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Children,\n  useState,\n  isValidElement,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport useDetectTruncatedText from \"./useDetectTruncatedText\";\nimport {\n  SteppedTrackerProvider,\n  TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The index of the current activeStep\n   */\n  activeStep: number;\n  /**\n   * Should be one or more TrackerStep components\n   */\n  children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      let hasInvalidChild = false;\n      Children.forEach(children, (child) => {\n        if (!isValidElement(child)) {\n          hasInvalidChild = true;\n        }\n      });\n\n      if (hasInvalidChild) {\n        console.error(\n          \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n        );\n      }\n    }\n  }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n  function SteppedTracker(\n    { children, className, activeStep, ...restProps },\n    ref?\n  ): ReactElement<SteppedTrackerProps> {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepped-tracker\",\n      css: steppedTrackerCss,\n      window: targetWindow,\n    });\n\n    useCheckInvalidChildren(children);\n    const [hasTooltips, setHasTooltips] = useState(false);\n    // A factory function used to get a callback ref for checking truncation.\n    const getOverflowRef = useDetectTruncatedText(setHasTooltips);\n    const totalSteps = Children.count(children);\n\n    return (\n      <SteppedTrackerProvider\n        hasTooltips={hasTooltips}\n        getOverflowRef={getOverflowRef}\n        totalSteps={totalSteps}\n        activeStep={activeStep}\n      >\n        <ul\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {Children.map(children, (child, i) => (\n            <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n          ))}\n        </ul>\n      </SteppedTrackerProvider>\n    );\n  }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAatD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,UAAe,EAAA,GAAA,SAAA,IACtC,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAChC,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEpD,IAAM,MAAA,cAAA,GAAiB,uBAAuB,cAAc,CAAA,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MACC,WAAA;AAAA,MACA,cAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MAEA,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"SteppedTracker.js","sources":["../src/stepped-tracker/SteppedTracker.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Children,\n  isValidElement,\n  useEffect,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport {\n  SteppedTrackerProvider,\n  TrackerStepProvider,\n} from \"./SteppedTrackerContext\";\n\nimport steppedTrackerCss from \"./SteppedTracker.css\";\n\nconst withBaseName = makePrefixer(\"saltSteppedTracker\");\n\nexport interface SteppedTrackerProps extends ComponentPropsWithoutRef<\"ul\"> {\n  /**\n   * The index of the current activeStep\n   */\n  activeStep: number;\n  /**\n   * Should be one or more TrackerStep components\n   */\n  children: ReactNode;\n}\n\nconst useCheckInvalidChildren = (children: ReactNode) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      let hasInvalidChild = false;\n      Children.forEach(children, (child) => {\n        if (!isValidElement(child)) {\n          hasInvalidChild = true;\n        }\n      });\n\n      if (hasInvalidChild) {\n        console.error(\n          \"Invalid child: children of SteppedTracker must be a TrackerStep component\"\n        );\n      }\n    }\n  }, [children]);\n};\n\nexport const SteppedTracker = forwardRef<HTMLUListElement, SteppedTrackerProps>(\n  function SteppedTracker(\n    { children, className, activeStep, ...restProps },\n    ref\n  ): ReactElement<SteppedTrackerProps> {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepped-tracker\",\n      css: steppedTrackerCss,\n      window: targetWindow,\n    });\n    useCheckInvalidChildren(children);\n\n    const totalSteps = Children.count(children);\n\n    return (\n      <SteppedTrackerProvider totalSteps={totalSteps} activeStep={activeStep}>\n        <ul\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n          {...restProps}\n        >\n          {Children.map(children, (child, i) => (\n            <TrackerStepProvider stepNumber={i}>{child}</TrackerStepProvider>\n          ))}\n        </ul>\n      </SteppedTrackerProvider>\n    );\n  }\n);\n"],"names":["SteppedTracker","steppedTrackerCss"],"mappings":";;;;;;;;;AAqBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAatD,MAAM,uBAAA,GAA0B,CAAC,QAAwB,KAAA;AACvD,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,eAAkB,GAAA,KAAA,CAAA;AACtB,MAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,KAAU,KAAA;AACpC,QAAI,IAAA,CAAC,cAAe,CAAA,KAAK,CAAG,EAAA;AAC1B,UAAkB,eAAA,GAAA,IAAA,CAAA;AAAA,SACpB;AAAA,OACD,CAAA,CAAA;AAED,MAAA,IAAI,eAAiB,EAAA;AACnB,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,2EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AACf,CAAA,CAAA;AAEO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,gBACP,EAAE,QAAA,EAAU,WAAW,UAAe,EAAA,GAAA,SAAA,IACtC,GACmC,EAAA;AACnC,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AACD,IAAA,uBAAA,CAAwB,QAAQ,CAAA,CAAA;AAEhC,IAAM,MAAA,UAAA,GAAa,QAAS,CAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AAE1C,IAAA,uBACG,GAAA,CAAA,sBAAA,EAAA;AAAA,MAAuB,UAAA;AAAA,MAAwB,UAAA;AAAA,MAC9C,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,mBAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAA,EAAO,sBAC7B,GAAA,CAAA,mBAAA,EAAA;AAAA,UAAoB,UAAY,EAAA,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAC5C,CAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepped-tracker/SteppedTrackerContext.js

@@ -3,9 +3,7 @@ import { createContext, useMemo, useContext } from 'react';
 
 const defaultSteppedTrackerContext = {
   activeStep: 0,
-  hasTooltips: false,
   totalSteps: 1,
-  getOverflowRef: () => void 0,
   isWithinSteppedTracker: false
 };
 const SteppedTrackerContext = createContext(
@@ -13,20 +11,16 @@ const SteppedTrackerContext = createContext(
 );
 const SteppedTrackerProvider = ({
   activeStep,
-  getOverflowRef,
-  hasTooltips,
   totalSteps,
   children
 }) => {
   const steppedTrackerContextValue = useMemo(
     () => ({
       activeStep,
-      getOverflowRef,
-      hasTooltips,
       totalSteps,
       isWithinSteppedTracker: true
     }),
-    [activeStep, getOverflowRef, hasTooltips, totalSteps]
+    [activeStep, totalSteps]
   );
   return /* @__PURE__ */ jsx(SteppedTrackerContext.Provider, {
     value: steppedTrackerContextValue,

package/dist-es/stepped-tracker/SteppedTrackerContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nimport { GetOverflowRef } from \"./useDetectTruncatedText\";\n\nexport type SteppedTrackerContextType = {\n  activeStep: number;\n  getOverflowRef: GetOverflowRef;\n  hasTooltips: boolean;\n  totalSteps: number;\n  isWithinSteppedTracker: boolean;\n};\n\nconst defaultSteppedTrackerContext = {\n  activeStep: 0,\n  hasTooltips: false,\n  totalSteps: 1,\n  getOverflowRef: () => undefined,\n  isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n  defaultSteppedTrackerContext as unknown as SteppedTrackerContextType\n);\n\ntype SteppedTrackerProviderProps = Omit<\n  SteppedTrackerContextType,\n  \"isWithinSteppedTracker\"\n> & {\n  children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n  activeStep,\n  getOverflowRef,\n  hasTooltips,\n  totalSteps,\n  children,\n}: SteppedTrackerProviderProps) => {\n  const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n    () => ({\n      activeStep,\n      getOverflowRef,\n      hasTooltips,\n      totalSteps,\n      isWithinSteppedTracker: true,\n    }),\n    [activeStep, getOverflowRef, hasTooltips, totalSteps]\n  );\n\n  return (\n    <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n      {children}\n    </SteppedTrackerContext.Provider>\n  );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ntype TrackerStepProivderProps = {\n  stepNumber: number;\n  children: ReactNode;\n};\n\nexport const TrackerStepProvider = ({\n  children,\n  stepNumber,\n}: TrackerStepProivderProps) => {\n  return (\n    <TrackerStepContext.Provider value={stepNumber}>\n      {children}\n    </TrackerStepContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAYA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,WAAa,EAAA,KAAA;AAAA,EACb,UAAY,EAAA,CAAA;AAAA,EACZ,gBAAgB,MAAM,KAAA,CAAA;AAAA,EACtB,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,UAAA,EAAY,cAAgB,EAAA,WAAA,EAAa,UAAU,CAAA;AAAA,GACtD,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SteppedTrackerContext.js","sources":["../src/stepped-tracker/SteppedTrackerContext.tsx"],"sourcesContent":["import { createContext, useContext, ReactNode, useMemo } from \"react\";\n\nexport type SteppedTrackerContextType = {\n  activeStep: number;\n  totalSteps: number;\n  isWithinSteppedTracker: boolean;\n};\n\nconst defaultSteppedTrackerContext = {\n  activeStep: 0,\n  totalSteps: 1,\n  isWithinSteppedTracker: false,\n};\n\nconst SteppedTrackerContext = createContext(\n  defaultSteppedTrackerContext as unknown as SteppedTrackerContextType\n);\n\ntype SteppedTrackerProviderProps = Omit<\n  SteppedTrackerContextType,\n  \"isWithinSteppedTracker\"\n> & {\n  children: ReactNode;\n};\n\nexport const SteppedTrackerProvider = ({\n  activeStep,\n  totalSteps,\n  children,\n}: SteppedTrackerProviderProps) => {\n  const steppedTrackerContextValue: SteppedTrackerContextType = useMemo(\n    () => ({\n      activeStep,\n      totalSteps,\n      isWithinSteppedTracker: true,\n    }),\n    [activeStep, totalSteps]\n  );\n\n  return (\n    <SteppedTrackerContext.Provider value={steppedTrackerContextValue}>\n      {children}\n    </SteppedTrackerContext.Provider>\n  );\n};\n\nexport const useSteppedTrackerContext = () => useContext(SteppedTrackerContext);\n\ntype TrackerStepNumberContextType = number;\n\nconst TrackerStepContext = createContext<TrackerStepNumberContextType>(0);\n\nexport const useTrackerStepContext = () => useContext(TrackerStepContext);\n\ntype TrackerStepProivderProps = {\n  stepNumber: number;\n  children: ReactNode;\n};\n\nexport const TrackerStepProvider = ({\n  children,\n  stepNumber,\n}: TrackerStepProivderProps) => {\n  return (\n    <TrackerStepContext.Provider value={stepNumber}>\n      {children}\n    </TrackerStepContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAQA,MAAM,4BAA+B,GAAA;AAAA,EACnC,UAAY,EAAA,CAAA;AAAA,EACZ,UAAY,EAAA,CAAA;AAAA,EACZ,sBAAwB,EAAA,KAAA;AAC1B,CAAA,CAAA;AAEA,MAAM,qBAAwB,GAAA,aAAA;AAAA,EAC5B,4BAAA;AACF,CAAA,CAAA;AASO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,0BAAwD,GAAA,OAAA;AAAA,IAC5D,OAAO;AAAA,MACL,UAAA;AAAA,MACA,UAAA;AAAA,MACA,sBAAwB,EAAA,IAAA;AAAA,KAC1B,CAAA;AAAA,IACA,CAAC,YAAY,UAAU,CAAA;AAAA,GACzB,CAAA;AAEA,EACE,uBAAA,GAAA,CAAC,sBAAsB,QAAtB,EAAA;AAAA,IAA+B,KAAO,EAAA,0BAAA;AAAA,IACpC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEa,MAAA,wBAAA,GAA2B,MAAM,UAAA,CAAW,qBAAqB,EAAA;AAI9E,MAAM,kBAAA,GAAqB,cAA4C,CAAC,CAAA,CAAA;AAE3D,MAAA,qBAAA,GAAwB,MAAM,UAAA,CAAW,kBAAkB,EAAA;AAOjE,MAAM,sBAAsB,CAAC;AAAA,EAClC,QAAA;AAAA,EACA,UAAA;AACF,CAAgC,KAAA;AAC9B,EACE,uBAAA,GAAA,CAAC,mBAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,UAAA;AAAA,IACjC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/stepped-tracker/TrackerConnector/TrackerConnector.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n  height: 0;\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-default);\n  border-top-color: var(--trackerConnector-color);\n  position: absolute;\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2);\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  border-top-style: var(--trackerConnector-style-active);\n}\n";
+var css_248z = ".saltTrackerConnector {\n  --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete));\n  --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active));\n  --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor));\n  --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth));\n  --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100));\n}\n\n.saltTrackerConnector {\n  height: 0;\n  border-top-width: var(--trackerConnector-thickness);\n  border-top-style: var(--trackerConnector-style-default);\n  border-top-color: var(--trackerConnector-color);\n  position: absolute;\n  width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2));\n  left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin));\n  top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2));\n}\n\n.saltTrackerConnector.saltTrackerConnector-active {\n  border-top-style: var(--trackerConnector-style-active);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TrackerConnector.css.js.map

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
+var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  padding: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-text-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  padding: 0 var(--salt-spacing-25);\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TrackerStep.css.js.map

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js

@@ -3,12 +3,11 @@ import { forwardRef, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { makePrefixer, Tooltip } from '@salt-ds/core';
+import { makePrefixer } from '@salt-ds/core';
 import { StepActiveIcon, StepDefaultIcon, StepSuccessIcon } from '@salt-ds/icons';
 import { TrackerConnector } from '../TrackerConnector/TrackerConnector.js';
 import { useSteppedTrackerContext, useTrackerStepContext } from '../SteppedTrackerContext.js';
 import css_248z from './TrackerStep.css.js';
-import { TrackStepTooltipProvider } from './TrackerStepTooltipContext.js';
 
 const withBaseName = makePrefixer("saltTrackerStep");
 const iconMap = {
@@ -59,7 +58,7 @@ const TrackerStep = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const { activeStep, totalSteps, hasTooltips, isWithinSteppedTracker } = useSteppedTrackerContext();
+    const { activeStep, totalSteps, isWithinSteppedTracker } = useSteppedTrackerContext();
     const stepNumber = useTrackerStepContext();
     useCheckWithinSteppedTracker(isWithinSteppedTracker);
     const isActive = activeStep === stepNumber;
@@ -71,10 +70,9 @@ const TrackerStep = forwardRef(
       ...style,
       "--saltTrackerStep-width": `${100 / totalSteps}%`
     };
-    const Inner = /* @__PURE__ */ jsxs("li", {
+    return /* @__PURE__ */ jsxs("li", {
       className: clsx(withBaseName(), withBaseName(resolvedState), className),
       style: innerStyle,
-      tabIndex: hasTooltips ? 0 : void 0,
       "aria-current": isActive ? "step" : void 0,
       "data-state": state,
       ref,
@@ -90,16 +88,6 @@ const TrackerStep = forwardRef(
         })
       ]
     });
-    if (!hasTooltips) {
-      return Inner;
-    }
-    return /* @__PURE__ */ jsx(Tooltip, {
-      placement: "top",
-      content: /* @__PURE__ */ jsx(TrackStepTooltipProvider, {
-        children
-      }),
-      children: Inner
-    });
   }
 );
 

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport {\n  StepActiveIcon,\n  StepDefaultIcon,\n  StepSuccessIcon,\n} from \"@salt-ds/icons\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n  useSteppedTrackerContext,\n  useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\nimport { TrackStepTooltipProvider } from \"./TrackerStepTooltipContext\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype State = \"default\" | \"completed\";\n\ntype StateWithActive = State | \"active\";\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n  /**\n   * The state of the TrackerStep\n   */\n  state?: State;\n}\n\nconst iconMap = {\n  default: StepDefaultIcon,\n  completed: StepSuccessIcon,\n};\n\nconst getStateIcon = ({\n  isActive,\n  state,\n}: {\n  isActive: boolean;\n  state: State;\n}) => {\n  if (state === \"default\" && isActive) {\n    return StepActiveIcon;\n  }\n  return iconMap[state];\n};\n\nconst getState = ({\n  isActive,\n  state,\n}: {\n  isActive: boolean;\n  state: State;\n}): StateWithActive => {\n  if (state === \"default\" && isActive) {\n    return \"active\";\n  }\n  return state;\n};\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isWithinSteppedTracker) {\n        console.error(\n          \"The TrackerStep component must be placed within a SteppedTracker component\"\n        );\n      }\n    }\n  }, [isWithinSteppedTracker]);\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n  function TrackerStep(props, ref?) {\n    const {\n      state = \"default\",\n      style,\n      className,\n      children,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tracker-step\",\n      css: trackerStepCss,\n      window: targetWindow,\n    });\n\n    const { activeStep, totalSteps, hasTooltips, isWithinSteppedTracker } =\n      useSteppedTrackerContext();\n    const stepNumber = useTrackerStepContext();\n\n    useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n    const isActive = activeStep === stepNumber;\n    const Icon = getStateIcon({ isActive, state });\n    const resolvedState = getState({ isActive, state });\n    const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n    const hasConnector = stepNumber < totalSteps - 1;\n\n    const innerStyle = {\n      ...style,\n      \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n    };\n\n    const Inner = (\n      <li\n        className={clsx(withBaseName(), withBaseName(resolvedState), className)}\n        style={innerStyle}\n        tabIndex={hasTooltips ? 0 : undefined}\n        aria-current={isActive ? \"step\" : undefined}\n        data-state={state}\n        ref={ref}\n        {...restProps}\n      >\n        <Icon />\n        {hasConnector && <TrackerConnector state={connectorState} />}\n        <div className={withBaseName(\"body\")}>{children}</div>\n      </li>\n    );\n\n    if (!hasTooltips) {\n      return Inner;\n    }\n\n    return (\n      <Tooltip\n        placement=\"top\"\n        content={\n          <TrackStepTooltipProvider>{children}</TrackStepTooltipProvider>\n        }\n      >\n        {Inner}\n      </Tooltip>\n    );\n  }\n);\n"],"names":["TrackerStep","trackerStepCss"],"mappings":"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"}
+{"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { clsx } from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport {\n  StepActiveIcon,\n  StepDefaultIcon,\n  StepSuccessIcon,\n} from \"@salt-ds/icons\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n  useSteppedTrackerContext,\n  useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype State = \"default\" | \"completed\";\n\ntype StateWithActive = State | \"active\";\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n  /**\n   * The state of the TrackerStep\n   */\n  state?: State;\n}\n\nconst iconMap = {\n  default: StepDefaultIcon,\n  completed: StepSuccessIcon,\n};\n\nconst getStateIcon = ({\n  isActive,\n  state,\n}: {\n  isActive: boolean;\n  state: State;\n}) => {\n  if (state === \"default\" && isActive) {\n    return StepActiveIcon;\n  }\n  return iconMap[state];\n};\n\nconst getState = ({\n  isActive,\n  state,\n}: {\n  isActive: boolean;\n  state: State;\n}): StateWithActive => {\n  if (state === \"default\" && isActive) {\n    return \"active\";\n  }\n  return state;\n};\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isWithinSteppedTracker) {\n        console.error(\n          \"The TrackerStep component must be placed within a SteppedTracker component\"\n        );\n      }\n    }\n  }, [isWithinSteppedTracker]);\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n  function TrackerStep(props, ref) {\n    const {\n      state = \"default\",\n      style,\n      className,\n      children,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tracker-step\",\n      css: trackerStepCss,\n      window: targetWindow,\n    });\n\n    const { activeStep, totalSteps, isWithinSteppedTracker } =\n      useSteppedTrackerContext();\n    const stepNumber = useTrackerStepContext();\n\n    useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n    const isActive = activeStep === stepNumber;\n    const Icon = getStateIcon({ isActive, state });\n    const resolvedState = getState({ isActive, state });\n    const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n    const hasConnector = stepNumber < totalSteps - 1;\n\n    const innerStyle = {\n      ...style,\n      \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n    };\n\n    return (\n      <li\n        className={clsx(withBaseName(), withBaseName(resolvedState), className)}\n        style={innerStyle}\n        aria-current={isActive ? \"step\" : undefined}\n        data-state={state}\n        ref={ref}\n        {...restProps}\n      >\n        <Icon />\n        {hasConnector && <TrackerConnector state={connectorState} />}\n        <div className={withBaseName(\"body\")}>{children}</div>\n      </li>\n    );\n  }\n);\n"],"names":["TrackerStep","trackerStepCss"],"mappings":";;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAanD,MAAM,OAAU,GAAA;AAAA,EACd,OAAS,EAAA,eAAA;AAAA,EACT,SAAW,EAAA,eAAA;AACb,CAAA,CAAA;AAEA,MAAM,eAAe,CAAC;AAAA,EACpB,QAAA;AAAA,EACA,KAAA;AACF,CAGM,KAAA;AACJ,EAAI,IAAA,KAAA,KAAU,aAAa,QAAU,EAAA;AACnC,IAAO,OAAA,cAAA,CAAA;AAAA,GACT;AACA,EAAA,OAAO,OAAQ,CAAA,KAAA,CAAA,CAAA;AACjB,CAAA,CAAA;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB,QAAA;AAAA,EACA,KAAA;AACF,CAGuB,KAAA;AACrB,EAAI,IAAA,KAAA,KAAU,aAAa,QAAU,EAAA;AACnC,IAAO,OAAA,QAAA,CAAA;AAAA,GACT;AACA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAEA,MAAM,4BAAA,GAA+B,CAAC,sBAAoC,KAAA;AACxE,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,MAAA,IAAI,CAAC,sBAAwB,EAAA;AAC3B,QAAQ,OAAA,CAAA,KAAA;AAAA,UACN,4EAAA;AAAA,SACF,CAAA;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,CAAC,sBAAsB,CAAC,CAAA,CAAA;AAC7B,CAAA,CAAA;AAEO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,KAAQ,GAAA,SAAA;AAAA,MACR,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,sBAAA,KAC9B,wBAAyB,EAAA,CAAA;AAC3B,IAAA,MAAM,aAAa,qBAAsB,EAAA,CAAA;AAEzC,IAAA,4BAAA,CAA6B,sBAAsB,CAAA,CAAA;AAEnD,IAAA,MAAM,WAAW,UAAe,KAAA,UAAA,CAAA;AAChC,IAAA,MAAM,IAAO,GAAA,YAAA,CAAa,EAAE,QAAA,EAAU,OAAO,CAAA,CAAA;AAC7C,IAAA,MAAM,aAAgB,GAAA,QAAA,CAAS,EAAE,QAAA,EAAU,OAAO,CAAA,CAAA;AAClD,IAAM,MAAA,cAAA,GAAiB,UAAa,GAAA,UAAA,GAAa,QAAW,GAAA,SAAA,CAAA;AAC5D,IAAM,MAAA,YAAA,GAAe,aAAa,UAAa,GAAA,CAAA,CAAA;AAE/C,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAG,KAAA;AAAA,MACH,yBAAA,EAA2B,GAAG,GAAM,GAAA,UAAA,CAAA,CAAA,CAAA;AAAA,KACtC,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,MACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,aAAa,GAAG,SAAS,CAAA;AAAA,MACtE,KAAO,EAAA,UAAA;AAAA,MACP,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,YAAY,EAAA,KAAA;AAAA,MACZ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,QACL,gCAAiB,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,KAAO,EAAA,cAAA;AAAA,SAAgB,CAAA;AAAA,wBACzD,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,UAAI,QAAA;AAAA,SAAS,CAAA;AAAA,OAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

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