@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.1

package/dist-es/packages/lab/src/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 classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Info as DefaultInfo } from \"../Info\";\nimport { Circle, LinearGradient, SIZE, ViewBox } from \"./CircularProgressParts\";\nimport { InfoRendererProps } from \"../LinearProgress/LinearProgress\";\nimport \"./CircularProgress.css\";\n\nconst MAX = 100;\nconst MIN = 0;\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport const SIZE_OPTIONS = {\n  small: {\n    container: 36,\n  },\n  medium: {\n    container: 48,\n  },\n  large: {\n    container: 60,\n  },\n};\n\nfunction getRelativeValue(value: number, min: number, max: number): number {\n  return (Math.min(Math.max(min, value), max) - min) / (max - min);\n}\n\nfunction easeOut(t: number): number {\n  t = getRelativeValue(t, 0, 1);\n  t = (t -= 1) * t * t + 1;\n  return t;\n}\n\nfunction easeIn(t: number): number {\n  return t * t;\n}\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   * 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   * The size of the circle\n   * (small, medium, large)\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"static\";\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 {string} variant the variant to use.\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    showInfo = true,\n    size = \"small\",\n    renderInfo,\n    value = 0,\n    unit = \"%\",\n    variant = \"static\",\n    ...rest\n  },\n  ref\n) {\n  const circleStyle: CSSProperties = {};\n  const rootStyle: CSSProperties = {};\n  const rootProps: HTMLAttributes<any> = {};\n\n  if (variant === \"determinate\" || variant === \"static\") {\n    const circumference = 2 * Math.PI * ((SIZE - 2) * 0.5);\n    circleStyle.strokeDasharray = circumference.toFixed(3);\n    rootProps[\"aria-valuenow\"] = Math.round(value);\n\n    if (variant === \"static\") {\n      circleStyle.strokeDashoffset = `${(\n        ((100 - value) / 100) *\n        circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = \"rotate(-90deg)\";\n    } else {\n      circleStyle.strokeDashoffset = `${(\n        easeIn((100 - value) / 100) * circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(\n        3\n      )}deg)`;\n    }\n  }\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 containerSize = SIZE_OPTIONS[size].container;\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={value}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={classnames(className, \"saltCircularProgress\", {\n        [withBaseName(\"small\")]: size === \"small\",\n        [withBaseName(\"medium\")]: size === \"medium\",\n        [withBaseName(\"large\")]: size === \"large\",\n        [withBaseName(\"disabled\")]: disabled,\n      })}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={MAX}\n      aria-valuemin={MIN}\n      aria-valuenow={value}\n      {...rest}\n    >\n      <div\n        className={classnames(withBaseName(\"container\"), {\n          [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n          [withBaseName(\"static\")]: variant === \"static\",\n        })}\n        style={{ width: containerSize, height: containerSize, ...rootStyle }}\n      >\n        <ViewBox>\n          <LinearGradient />\n          <Circle className={withBaseName(\"railCircle\")} strokeWidth={1} />\n          <Circle\n            strokeWidth={2}\n            style={circleStyle}\n            className={classnames(withBaseName(\"circle\"), {\n              [withBaseName(\"circleIndeterminate\")]:\n                variant === \"indeterminate\",\n              [withBaseName(\"circleStatic\")]: variant === \"static\",\n            })}\n          />\n        </ViewBox>\n      </div>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","DefaultInfo","classnames"],"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  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 { Circle, LinearGradient, SIZE, ViewBox } from \"./CircularProgressParts\";\nimport { InfoRendererProps } from \"../LinearProgress/LinearProgress\";\nimport \"./CircularProgress.css\";\n\nconst MAX = 100;\nconst MIN = 0;\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nexport const SIZE_OPTIONS = {\n  small: {\n    container: 36,\n  },\n  medium: {\n    container: 48,\n  },\n  large: {\n    container: 60,\n  },\n};\n\nfunction getRelativeValue(value: number, min: number, max: number): number {\n  return (Math.min(Math.max(min, value), max) - min) / (max - min);\n}\n\nfunction easeOut(t: number): number {\n  t = getRelativeValue(t, 0, 1);\n  t = (t -= 1) * t * t + 1;\n  return t;\n}\n\nfunction easeIn(t: number): number {\n  return t * t;\n}\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   * 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   * The size of the circle\n   * (small, medium, large)\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"static\";\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 {string} variant the variant to use.\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    showInfo = true,\n    size = \"small\",\n    renderInfo,\n    value = 0,\n    unit = \"%\",\n    variant = \"static\",\n    ...rest\n  },\n  ref\n) {\n  const circleStyle: CSSProperties = {};\n  const rootStyle: CSSProperties = {};\n  const rootProps: HTMLAttributes<any> = {};\n\n  if (variant === \"determinate\" || variant === \"static\") {\n    const circumference = 2 * Math.PI * ((SIZE - 2) * 0.5);\n    circleStyle.strokeDasharray = circumference.toFixed(3);\n    rootProps[\"aria-valuenow\"] = Math.round(value);\n\n    if (variant === \"static\") {\n      circleStyle.strokeDashoffset = `${(\n        ((100 - value) / 100) *\n        circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = \"rotate(-90deg)\";\n    } else {\n      circleStyle.strokeDashoffset = `${(\n        easeIn((100 - value) / 100) * circumference\n      ).toFixed(3)}px`;\n      rootStyle.transform = `rotate(${(easeOut(value / 70) * 270).toFixed(\n        3\n      )}deg)`;\n    }\n  }\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 containerSize = SIZE_OPTIONS[size].container;\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={value}\n        {...rest}\n      />\n    );\n  }\n\n  return (\n    <div\n      className={clsx(className, \"saltCircularProgress\", {\n        [withBaseName(\"small\")]: size === \"small\",\n        [withBaseName(\"medium\")]: size === \"medium\",\n        [withBaseName(\"large\")]: size === \"large\",\n        [withBaseName(\"disabled\")]: disabled,\n      })}\n      data-testid=\"circular-progress\"\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={ariaLabel}\n      aria-valuemax={MAX}\n      aria-valuemin={MIN}\n      aria-valuenow={value}\n      {...rest}\n    >\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n          [withBaseName(\"static\")]: variant === \"static\",\n        })}\n        style={{ width: containerSize, height: containerSize, ...rootStyle }}\n      >\n        <ViewBox>\n          <LinearGradient />\n          <Circle className={withBaseName(\"railCircle\")} strokeWidth={1} />\n          <Circle\n            strokeWidth={2}\n            style={circleStyle}\n            className={clsx(withBaseName(\"circle\"), {\n              [withBaseName(\"circleIndeterminate\")]:\n                variant === \"indeterminate\",\n              [withBaseName(\"circleStatic\")]: variant === \"static\",\n            })}\n          />\n        </ViewBox>\n      </div>\n      {progressInfo}\n    </div>\n  );\n});\n"],"names":["CircularProgress","DefaultInfo"],"mappings":"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"}

package/dist-es/packages/lab/src/progress/LinearProgress/LinearProgress.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import './LinearProgress.css.js';
 import { Info } from '../Info.js';
@@ -60,7 +60,7 @@ const LinearProgress = forwardRef(
       barStyle.transform = `translateX(${value - 100}%)`;
     }
     return /* @__PURE__ */ jsxs("div", {
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("disabled")]: disabled,
@@ -77,18 +77,18 @@ const LinearProgress = forwardRef(
       ...rest,
       children: [
         /* @__PURE__ */ jsxs("div", {
-          className: cx(withBaseName("barContainer"), {
+          className: clsx(withBaseName("barContainer"), {
             [withBaseName("determinate")]: variant === "determinate",
             [withBaseName("indeterminate")]: variant === "indeterminate",
             [withBaseName("query")]: variant === "query"
           }),
           children: [
             /* @__PURE__ */ jsx("div", {
-              className: cx(withBaseName("bar"), withBaseName("bar1")),
+              className: clsx(withBaseName("bar"), withBaseName("bar1")),
               style: barStyle
             }),
             variant === "determinate" ? null : /* @__PURE__ */ jsx("div", {
-              className: cx(withBaseName("bar"), withBaseName("bar2"))
+              className: clsx(withBaseName("bar"), withBaseName("bar2"))
             })
           ]
         }),

package/dist-es/packages/lab/src/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 classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport \"./LinearProgress.css\";\n\nimport { Info as DefaultInfo } from \"../Info\";\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   * 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   * The size of the line, default is 'small'.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"query\";\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      renderInfo,\n      showInfo = true,\n      size = \"small\",\n      variant = \"determinate\",\n      unit = \"%\",\n      value = 0,\n      ...rest\n    },\n    ref\n  ) {\n    let progressInfo: ReactNode = null;\n\n    const progressUnit = withBaseName(\"progressUnit\");\n    const progressValue = withBaseName(\"progressValue\");\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 unit={unit} value={value} className={progressValue} />\n      );\n    }\n\n    const rootProps: HTMLAttributes<HTMLDivElement> = {};\n    const barStyle: CSSProperties = {};\n\n    if (variant === \"determinate\") {\n      rootProps[\"aria-valuenow\"] = Math.round(value);\n      rootProps[\"aria-valuemin\"] = 0;\n      rootProps[\"aria-valuemax\"] = 100;\n      barStyle.transform = `translateX(${value - 100}%)`;\n    }\n\n    return (\n      <div\n        className={classnames(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"small\")]: size === \"small\",\n            [withBaseName(\"medium\")]: size === \"medium\",\n            [withBaseName(\"large\")]: size === \"large\",\n          },\n          className\n        )}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        {...rootProps}\n        {...rest}\n      >\n        <div\n          className={classnames(withBaseName(\"barContainer\"), {\n            [withBaseName(\"determinate\")]: variant === \"determinate\",\n            [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n            [withBaseName(\"query\")]: variant === \"query\",\n          })}\n        >\n          <div\n            className={classnames(withBaseName(\"bar\"), withBaseName(\"bar1\"))}\n            style={barStyle}\n          />\n          {variant === \"determinate\" ? null : (\n            <div\n              className={classnames(withBaseName(\"bar\"), withBaseName(\"bar2\"))}\n            />\n          )}\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","DefaultInfo","classnames"],"mappings":"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"}
+{"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\";\nimport \"./LinearProgress.css\";\n\nimport { Info as DefaultInfo } from \"../Info\";\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   * 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   * The size of the line, default is 'small'.\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Default unit is`%`.\n   */\n  unit?: string;\n  /**\n   * The value of the progress indicator for the determinate and static variants.\n   * Value between 0 and 100.\n   */\n  value?: number;\n  /**\n   * The variant to use.\n   * Use indeterminate or query when there is no progress value.\n   */\n  variant?: \"determinate\" | \"indeterminate\" | \"query\";\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      renderInfo,\n      showInfo = true,\n      size = \"small\",\n      variant = \"determinate\",\n      unit = \"%\",\n      value = 0,\n      ...rest\n    },\n    ref\n  ) {\n    let progressInfo: ReactNode = null;\n\n    const progressUnit = withBaseName(\"progressUnit\");\n    const progressValue = withBaseName(\"progressValue\");\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 unit={unit} value={value} className={progressValue} />\n      );\n    }\n\n    const rootProps: HTMLAttributes<HTMLDivElement> = {};\n    const barStyle: CSSProperties = {};\n\n    if (variant === \"determinate\") {\n      rootProps[\"aria-valuenow\"] = Math.round(value);\n      rootProps[\"aria-valuemin\"] = 0;\n      rootProps[\"aria-valuemax\"] = 100;\n      barStyle.transform = `translateX(${value - 100}%)`;\n    }\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"small\")]: size === \"small\",\n            [withBaseName(\"medium\")]: size === \"medium\",\n            [withBaseName(\"large\")]: size === \"large\",\n          },\n          className\n        )}\n        ref={ref}\n        data-testid=\"linear-progress\"\n        role=\"progressbar\"\n        {...rootProps}\n        {...rest}\n      >\n        <div\n          className={clsx(withBaseName(\"barContainer\"), {\n            [withBaseName(\"determinate\")]: variant === \"determinate\",\n            [withBaseName(\"indeterminate\")]: variant === \"indeterminate\",\n            [withBaseName(\"query\")]: variant === \"query\",\n          })}\n        >\n          <div\n            className={clsx(withBaseName(\"bar\"), withBaseName(\"bar1\"))}\n            style={barStyle}\n          />\n          {variant === \"determinate\" ? null : (\n            <div className={clsx(withBaseName(\"bar\"), withBaseName(\"bar2\"))} />\n          )}\n        </div>\n        {progressInfo}\n      </div>\n    );\n  }\n);\n"],"names":["LinearProgress","DefaultInfo"],"mappings":"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"}

package/dist-es/packages/lab/src/query-input/QueryInput.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import './internal/CategoryList.js';
 import './internal/CategoryListContext.js';
@@ -37,7 +37,7 @@ const QueryInput = forwardRef(
       valueSelectorProps
     } = useQueryInput(props, externalRef);
     return /* @__PURE__ */ jsxs("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       onBlur: queryInputProps.onBlur,
       onFocus: queryInputProps.onFocus,
       "data-testid": "query-input",

package/dist-es/packages/lab/src/query-input/QueryInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { BooleanOperator, useQueryInput } from \"./useQueryInput\";\n\nimport \"./QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInput\");\n\nexport interface QueryInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  categories: QueryInputCategory[];\n  selectedItems?: QueryInputItem[];\n  onChange?: (items: QueryInputItem[]) => void;\n  defaultSelectedItems?: QueryInputItem[];\n  showCategory?: boolean;\n  autoClose?: boolean;\n  displayedItemCount?: number;\n  booleanOperator?: BooleanOperator;\n  onBooleanOperatorChange?: (newOperator: BooleanOperator) => void;\n  defaultBooleanOperator?: BooleanOperator;\n}\n\nexport const QueryInput = forwardRef<HTMLDivElement, QueryInputProps>(\n  function QueryInput(props, externalRef) {\n    const {\n      disabled,\n      categories,\n      selectedItems,\n      onChange,\n      defaultSelectedItems,\n      showCategory,\n      autoClose,\n      displayedItemCount,\n      booleanOperator,\n      onBooleanOperatorChange,\n      defaultBooleanOperator,\n      className,\n      ...restProps\n    } = props;\n\n    const {\n      queryInputProps,\n      queryInputBodyRef,\n      queryInputBodyProps,\n      valueSelectorProps,\n    } = useQueryInput(props, externalRef);\n\n    return (\n      <div\n        className={cn(withBaseName(), className)}\n        onBlur={queryInputProps.onBlur}\n        onFocus={queryInputProps.onFocus}\n        data-testid=\"query-input\"\n        {...restProps}\n      >\n        <QueryInputBody\n          ref={queryInputBodyRef}\n          {...queryInputBodyProps}\n          showCategory={showCategory}\n        />\n        <ValueSelector {...valueSelectorProps} />\n      </div>\n    );\n  }\n);\n"],"names":["QueryInput","cn"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,WAAa,EAAA;AACtC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,oBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,kBAAA;AAAA,MACA,eAAA;AAAA,MACA,uBAAA;AAAA,MACA,sBAAA;AAAA,MACA,SAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,aAAc,CAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAEpC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACvC,QAAQ,eAAgB,CAAA,MAAA;AAAA,MACxB,SAAS,eAAgB,CAAA,OAAA;AAAA,MACzB,aAAY,EAAA,aAAA;AAAA,MACX,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UACC,GAAK,EAAA,iBAAA;AAAA,UACJ,GAAG,mBAAA;AAAA,UACJ,YAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UAAe,GAAG,kBAAA;AAAA,SAAoB,CAAA;AAAA,OAAA;AAAA,KACzC,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { BooleanOperator, useQueryInput } from \"./useQueryInput\";\n\nimport \"./QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInput\");\n\nexport interface QueryInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  categories: QueryInputCategory[];\n  selectedItems?: QueryInputItem[];\n  onChange?: (items: QueryInputItem[]) => void;\n  defaultSelectedItems?: QueryInputItem[];\n  showCategory?: boolean;\n  autoClose?: boolean;\n  displayedItemCount?: number;\n  booleanOperator?: BooleanOperator;\n  onBooleanOperatorChange?: (newOperator: BooleanOperator) => void;\n  defaultBooleanOperator?: BooleanOperator;\n}\n\nexport const QueryInput = forwardRef<HTMLDivElement, QueryInputProps>(\n  function QueryInput(props, externalRef) {\n    const {\n      disabled,\n      categories,\n      selectedItems,\n      onChange,\n      defaultSelectedItems,\n      showCategory,\n      autoClose,\n      displayedItemCount,\n      booleanOperator,\n      onBooleanOperatorChange,\n      defaultBooleanOperator,\n      className,\n      ...restProps\n    } = props;\n\n    const {\n      queryInputProps,\n      queryInputBodyRef,\n      queryInputBodyProps,\n      valueSelectorProps,\n    } = useQueryInput(props, externalRef);\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={queryInputProps.onBlur}\n        onFocus={queryInputProps.onFocus}\n        data-testid=\"query-input\"\n        {...restProps}\n      >\n        <QueryInputBody\n          ref={queryInputBodyRef}\n          {...queryInputBodyProps}\n          showCategory={showCategory}\n        />\n        <ValueSelector {...valueSelectorProps} />\n      </div>\n    );\n  }\n);\n"],"names":["QueryInput"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,WAAa,EAAA;AACtC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,oBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,kBAAA;AAAA,MACA,eAAA;AAAA,MACA,uBAAA;AAAA,MACA,sBAAA;AAAA,MACA,SAAA;AAAA,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAI,aAAc,CAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAEpC,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,QAAQ,eAAgB,CAAA,MAAA;AAAA,MACxB,SAAS,eAAgB,CAAA,OAAA;AAAA,MACzB,aAAY,EAAA,aAAA;AAAA,MACX,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UACC,GAAK,EAAA,iBAAA;AAAA,UACJ,GAAG,mBAAA;AAAA,UACJ,YAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,aAAA,EAAA;AAAA,UAAe,GAAG,kBAAA;AAAA,SAAoB,CAAA;AAAA,OAAA;AAAA,KACzC,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/radio-button/RadioButton.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { makePrefixer } from '@salt-ds/core';
 import { ControlLabel } from '../control-label/ControlLabel.js';
@@ -21,7 +21,7 @@ const RadioButton = forwardRef(
       ...rest
     } = props;
     return /* @__PURE__ */ jsx("div", {
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("disabled")]: disabled
@@ -31,7 +31,7 @@ const RadioButton = forwardRef(
       ...rest,
       children: /* @__PURE__ */ jsx(ControlLabel, {
         ...LabelProps,
-        className: cx(
+        className: clsx(
           withBaseName("labelContainer"),
           {
             [withBaseName("disabled")]: disabled

package/dist-es/packages/lab/src/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  ComponentType,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { RadioButtonBase as Radio } from \"./RadioButtonBase\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * Custom icon component\n   */\n  icon?: ComponentType<RadioButtonIconProps>;\n  /**\n   * The label to be shown next to the radio\n   */\n  label?: ControlLabelProps[\"label\"];\n  LabelProps?: Partial<ControlLabelProps>;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked,\n      className,\n      icon,\n      disabled,\n      label,\n      LabelProps,\n      value,\n      onChange,\n      ...rest\n    } = props;\n\n    return (\n      <div\n        className={classnames(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        {...rest}\n      >\n        <ControlLabel\n          {...LabelProps}\n          className={classnames(\n            withBaseName(\"labelContainer\"),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className\n          )}\n          disabled={disabled}\n          label={label}\n          labelPlacement=\"right\"\n          ref={ref}\n        >\n          <Radio\n            checked={checked}\n            disabled={disabled}\n            value={value}\n            onChange={onChange}\n            icon={icon}\n          />\n        </ControlLabel>\n      </div>\n    );\n  }\n);\n"],"names":["RadioButton","classnames","Radio"],"mappings":";;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAqB5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAW,EAAAA,EAAA;AAAA,UACT,aAAa,gBAAgB,CAAA;AAAA,UAC7B;AAAA,YACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAe,EAAA,OAAA;AAAA,QACf,GAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAC,eAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"RadioButton.js","sources":["../src/radio-button/RadioButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  ComponentType,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { RadioButtonBase as Radio } from \"./RadioButtonBase\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\n\nimport \"./RadioButton.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButton\");\n\nexport interface RadioButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * Custom icon component\n   */\n  icon?: ComponentType<RadioButtonIconProps>;\n  /**\n   * The label to be shown next to the radio\n   */\n  label?: ControlLabelProps[\"label\"];\n  LabelProps?: Partial<ControlLabelProps>;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  value?: string;\n}\n\nexport const RadioButton = forwardRef<HTMLLabelElement, RadioButtonProps>(\n  function RadioButton(props, ref) {\n    const {\n      checked,\n      className,\n      icon,\n      disabled,\n      label,\n      LabelProps,\n      value,\n      onChange,\n      ...rest\n    } = props;\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className\n        )}\n        {...rest}\n      >\n        <ControlLabel\n          {...LabelProps}\n          className={clsx(\n            withBaseName(\"labelContainer\"),\n            {\n              [withBaseName(\"disabled\")]: disabled,\n            },\n            className\n          )}\n          disabled={disabled}\n          label={label}\n          labelPlacement=\"right\"\n          ref={ref}\n        >\n          <Radio\n            checked={checked}\n            disabled={disabled}\n            value={value}\n            onChange={onChange}\n            icon={icon}\n          />\n        </ControlLabel>\n      </div>\n    );\n  }\n);\n"],"names":["RadioButton","Radio"],"mappings":";;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAqB5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,YAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,gBAAgB,CAAA;AAAA,UAC7B;AAAA,YACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,QAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAe,EAAA,OAAA;AAAA,QACf,GAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAC,eAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,KAAA;AAAA,UACA,QAAA;AAAA,UACA,IAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/radio-button/RadioButtonBase.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import '../form-field-context/FormFieldContext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
@@ -99,7 +99,7 @@ const RadioButtonBase = forwardRef(function RadioBase(props, ref) {
   };
   const RadioIcon = iconProp || RadioButtonIcon;
   return /* @__PURE__ */ jsx("span", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: disabled,

package/dist-es/packages/lab/src/radio-button/RadioButtonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonBase.js","sources":["../src/radio-button/RadioButtonBase.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  FocusEventHandler,\n  forwardRef,\n  Ref,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsFocusVisible,\n} from \"@salt-ds/core\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport {\n  RadioButtonIcon as DefaultRadioIcon,\n  RadioButtonIconProps,\n} from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonBase.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonBase\");\n\nexport interface RadioButtonBaseProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * custom icon component\n   */\n  icon?: ComponentType<RadioButtonIconProps>;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  name?: string;\n  defaultChecked?: boolean;\n  onFocus?: FocusEventHandler<HTMLSpanElement>;\n  onBlur?: FocusEventHandler<HTMLSpanElement>;\n  required?: boolean;\n  id?: string;\n  tabIndex?: number;\n  value?: string;\n}\n\nexport const RadioButtonBase = forwardRef<\n  HTMLSpanElement,\n  RadioButtonBaseProps\n>(function RadioBase(props, ref) {\n  const {\n    checked: checkedProp,\n    defaultChecked,\n    name: nameProp,\n    className,\n    disabled: disabledProp,\n    icon: iconProp,\n    value,\n    onFocus,\n    onBlur,\n    onChange,\n    id,\n    tabIndex,\n    ...rest\n  } = props;\n\n  useFormFieldProps();\n\n  const radioGroup = useRadioGroup();\n\n  let radioGroupChecked = checkedProp;\n  let name = nameProp;\n  if (radioGroup) {\n    if (typeof radioGroupChecked === \"undefined\") {\n      radioGroupChecked = radioGroup.value === props.value;\n    }\n    if (typeof name === \"undefined\") {\n      name = radioGroup.name;\n    }\n  }\n\n  const [checked, setCheckedState] = useControlled({\n    controlled: radioGroupChecked,\n    default: Boolean(defaultChecked),\n    name: \"RadioBase\",\n    state: \"checked\",\n  });\n\n  const formFieldProps = useFormFieldProps();\n\n  let disabled = disabledProp;\n  if (formFieldProps) {\n    if (typeof disabled === \"undefined\") {\n      disabled = formFieldProps.a11yProps?.disabled;\n    }\n  }\n\n  const [focusVisible, setFocusVisible] = useState(false);\n  if (disabled && focusVisible) {\n    setFocusVisible(false);\n  }\n\n  const {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref: focusVisibleRef,\n  } = useIsFocusVisible();\n\n  const handleRef = useForkRef<HTMLSpanElement>(\n    ref,\n    focusVisibleRef as Ref<HTMLSpanElement>\n  );\n\n  const handleFocus: FocusEventHandler<HTMLElement> = (event) => {\n    if (formFieldProps && formFieldProps.onFocus) {\n      formFieldProps.onFocus(event);\n    }\n    handleFocusVisible(event);\n    if (isFocusVisibleRef.current) {\n      setFocusVisible(true);\n    }\n    if (onFocus) {\n      onFocus(event);\n    }\n  };\n\n  const handleBlur: FocusEventHandler<HTMLElement> = (event) => {\n    if (formFieldProps && formFieldProps.onBlur) {\n      formFieldProps.onBlur(event);\n    }\n    handleBlurVisible();\n    setFocusVisible(false);\n    if (onBlur) {\n      onBlur(event);\n    }\n  };\n\n  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const newChecked = event.target.checked;\n    setCheckedState(newChecked);\n    if (onChange) {\n      onChange(event);\n    }\n    if (radioGroup && radioGroup.onChange) {\n      radioGroup.onChange(event);\n    }\n  };\n\n  const RadioIcon = iconProp || DefaultRadioIcon;\n\n  return (\n    <span\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"focusVisible\")]: focusVisible,\n        },\n        className\n      )}\n      ref={handleRef}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      {...rest}\n    >\n      <span className={withBaseName(\"radioContainer\")}>\n        <input\n          className={withBaseName(\"input\")}\n          checked={radioGroupChecked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          id={id}\n          name={name}\n          onChange={handleInputChange}\n          type=\"radio\"\n          value={value}\n          tabIndex={tabIndex}\n        />\n        <RadioIcon checked={checked} />\n      </span>\n    </span>\n  );\n});\n"],"names":["DefaultRadioIcon","classnames"],"mappings":"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"}
+{"version":3,"file":"RadioButtonBase.js","sources":["../src/radio-button/RadioButtonBase.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  FocusEventHandler,\n  forwardRef,\n  Ref,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useIsFocusVisible,\n} from \"@salt-ds/core\";\nimport { useRadioGroup } from \"./internal/useRadioGroup\";\nimport {\n  RadioButtonIcon as DefaultRadioIcon,\n  RadioButtonIconProps,\n} from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonBase.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonBase\");\n\nexport interface RadioButtonBaseProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  /**\n   * custom icon component\n   */\n  icon?: ComponentType<RadioButtonIconProps>;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  name?: string;\n  defaultChecked?: boolean;\n  onFocus?: FocusEventHandler<HTMLSpanElement>;\n  onBlur?: FocusEventHandler<HTMLSpanElement>;\n  required?: boolean;\n  id?: string;\n  tabIndex?: number;\n  value?: string;\n}\n\nexport const RadioButtonBase = forwardRef<\n  HTMLSpanElement,\n  RadioButtonBaseProps\n>(function RadioBase(props, ref) {\n  const {\n    checked: checkedProp,\n    defaultChecked,\n    name: nameProp,\n    className,\n    disabled: disabledProp,\n    icon: iconProp,\n    value,\n    onFocus,\n    onBlur,\n    onChange,\n    id,\n    tabIndex,\n    ...rest\n  } = props;\n\n  useFormFieldProps();\n\n  const radioGroup = useRadioGroup();\n\n  let radioGroupChecked = checkedProp;\n  let name = nameProp;\n  if (radioGroup) {\n    if (typeof radioGroupChecked === \"undefined\") {\n      radioGroupChecked = radioGroup.value === props.value;\n    }\n    if (typeof name === \"undefined\") {\n      name = radioGroup.name;\n    }\n  }\n\n  const [checked, setCheckedState] = useControlled({\n    controlled: radioGroupChecked,\n    default: Boolean(defaultChecked),\n    name: \"RadioBase\",\n    state: \"checked\",\n  });\n\n  const formFieldProps = useFormFieldProps();\n\n  let disabled = disabledProp;\n  if (formFieldProps) {\n    if (typeof disabled === \"undefined\") {\n      disabled = formFieldProps.a11yProps?.disabled;\n    }\n  }\n\n  const [focusVisible, setFocusVisible] = useState(false);\n  if (disabled && focusVisible) {\n    setFocusVisible(false);\n  }\n\n  const {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref: focusVisibleRef,\n  } = useIsFocusVisible();\n\n  const handleRef = useForkRef<HTMLSpanElement>(\n    ref,\n    focusVisibleRef as Ref<HTMLSpanElement>\n  );\n\n  const handleFocus: FocusEventHandler<HTMLElement> = (event) => {\n    if (formFieldProps && formFieldProps.onFocus) {\n      formFieldProps.onFocus(event);\n    }\n    handleFocusVisible(event);\n    if (isFocusVisibleRef.current) {\n      setFocusVisible(true);\n    }\n    if (onFocus) {\n      onFocus(event);\n    }\n  };\n\n  const handleBlur: FocusEventHandler<HTMLElement> = (event) => {\n    if (formFieldProps && formFieldProps.onBlur) {\n      formFieldProps.onBlur(event);\n    }\n    handleBlurVisible();\n    setFocusVisible(false);\n    if (onBlur) {\n      onBlur(event);\n    }\n  };\n\n  const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    const newChecked = event.target.checked;\n    setCheckedState(newChecked);\n    if (onChange) {\n      onChange(event);\n    }\n    if (radioGroup && radioGroup.onChange) {\n      radioGroup.onChange(event);\n    }\n  };\n\n  const RadioIcon = iconProp || DefaultRadioIcon;\n\n  return (\n    <span\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"focusVisible\")]: focusVisible,\n        },\n        className\n      )}\n      ref={handleRef}\n      onBlur={handleBlur}\n      onFocus={handleFocus}\n      {...rest}\n    >\n      <span className={withBaseName(\"radioContainer\")}>\n        <input\n          className={withBaseName(\"input\")}\n          checked={radioGroupChecked}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          id={id}\n          name={name}\n          onChange={handleInputChange}\n          type=\"radio\"\n          value={value}\n          tabIndex={tabIndex}\n        />\n        <RadioIcon checked={checked} />\n      </span>\n    </span>\n  );\n});\n"],"names":["DefaultRadioIcon"],"mappings":"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"}

package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState, useRef, useImperativeHandle } from 'react';
 import { makePrefixer, useId } from '@salt-ds/core';
 import '../form-field-context/FormFieldContext.js';
@@ -63,7 +63,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
   );
   const name = useId(nameProp);
   return /* @__PURE__ */ jsxs("fieldset", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       row ? withBaseName("horizontal") : withBaseName("vertical"),
       className
@@ -74,7 +74,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup2(props, ref) {
     ...a11yProps,
     children: [
       !inFormField && /* @__PURE__ */ jsx(FormLabel, {
-        className: cx(withBaseName("legend")),
+        className: clsx(withBaseName("legend")),
         label: legend
       }),
       /* @__PURE__ */ jsx(RadioGroupContext.Provider, {

package/dist-es/packages/lab/src/radio-button/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { FormGroup } from \"../form-group\";\nimport { FormLabel } from \"../form-field\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\nimport { RadioButton } from \"./RadioButton\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  defaultValue?: string;\n  icon?: ComponentType<RadioButtonIconProps>;\n  legend?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  radios?: {\n    disabled?: boolean;\n    label?: string;\n    value?: string;\n  }[];\n  row?: boolean;\n  value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n  HTMLFieldSetElement,\n  RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    defaultValue,\n    legend,\n    icon,\n    radios,\n    onChange,\n    value: valueProp,\n    row,\n    name: nameProp,\n    ...rest\n  } = props;\n\n  const { inFormField, a11yProps } = useFormFieldProps({\n    focusVisible: false,\n  });\n\n  const [stateValue, setStateValue] = useState(props.defaultValue);\n\n  const getValue = () => (isControlled() ? props.value : stateValue);\n\n  const isControlled = () => props.value !== undefined;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!isControlled()) {\n      setStateValue(event.target.value);\n    }\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  };\n\n  const rootRef = useRef<HTMLFieldSetElement>(null);\n\n  useImperativeHandle(\n    undefined,\n    () => ({\n      focus: () => {\n        const current = rootRef.current;\n        if (current) {\n          let input: HTMLInputElement | null = current.querySelector(\n            \"input:not(:disabled):checked\"\n          );\n          if (!input) {\n            input = current.querySelector(\"input:not(:disabled)\");\n          }\n          if (input) {\n            input.focus();\n          }\n        }\n      },\n    }),\n    []\n  );\n\n  const name = useId(nameProp);\n\n  return (\n    <fieldset\n      className={classnames(\n        withBaseName(),\n        row ? withBaseName(\"horizontal\") : withBaseName(\"vertical\"),\n        className\n      )}\n      data-testid=\"radio-button-group\"\n      ref={ref}\n      role=\"radiogroup\"\n      {...a11yProps}\n    >\n      {!inFormField && (\n        <FormLabel\n          className={classnames(withBaseName(\"legend\"))}\n          label={legend}\n        />\n      )}\n\n      <RadioGroupContext.Provider\n        value={{ name, onChange: handleChange, value: getValue() }}\n      >\n        <FormGroup role=\"radiogroup\" {...rest} row={row}>\n          {(radios &&\n            radios.map((radio) => (\n              <RadioButton\n                disabled={radio.disabled}\n                icon={icon}\n                key={radio.label}\n                label={radio.label}\n                value={radio.value}\n              />\n            ))) ||\n            children}\n        </FormGroup>\n      </RadioGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["RadioButtonGroup","classnames"],"mappings":"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"}
+{"version":3,"file":"RadioButtonGroup.js","sources":["../src/radio-button/RadioButtonGroup.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEventHandler,\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { FormGroup } from \"../form-group\";\nimport { FormLabel } from \"../form-field\";\nimport { RadioGroupContext } from \"./internal/RadioGroupContext\";\nimport { RadioButton } from \"./RadioButton\";\nimport { RadioButtonIconProps } from \"./RadioButtonIcon\";\n\nimport \"./RadioButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonGroup\");\n\nexport interface RadioButtonGroupProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  defaultValue?: string;\n  icon?: ComponentType<RadioButtonIconProps>;\n  legend?: string;\n  name?: string;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  radios?: {\n    disabled?: boolean;\n    label?: string;\n    value?: string;\n  }[];\n  row?: boolean;\n  value?: string;\n}\n\nexport const RadioButtonGroup = forwardRef<\n  HTMLFieldSetElement,\n  RadioButtonGroupProps\n>(function RadioButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    defaultValue,\n    legend,\n    icon,\n    radios,\n    onChange,\n    value: valueProp,\n    row,\n    name: nameProp,\n    ...rest\n  } = props;\n\n  const { inFormField, a11yProps } = useFormFieldProps({\n    focusVisible: false,\n  });\n\n  const [stateValue, setStateValue] = useState(props.defaultValue);\n\n  const getValue = () => (isControlled() ? props.value : stateValue);\n\n  const isControlled = () => props.value !== undefined;\n\n  const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n    if (!isControlled()) {\n      setStateValue(event.target.value);\n    }\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  };\n\n  const rootRef = useRef<HTMLFieldSetElement>(null);\n\n  useImperativeHandle(\n    undefined,\n    () => ({\n      focus: () => {\n        const current = rootRef.current;\n        if (current) {\n          let input: HTMLInputElement | null = current.querySelector(\n            \"input:not(:disabled):checked\"\n          );\n          if (!input) {\n            input = current.querySelector(\"input:not(:disabled)\");\n          }\n          if (input) {\n            input.focus();\n          }\n        }\n      },\n    }),\n    []\n  );\n\n  const name = useId(nameProp);\n\n  return (\n    <fieldset\n      className={clsx(\n        withBaseName(),\n        row ? withBaseName(\"horizontal\") : withBaseName(\"vertical\"),\n        className\n      )}\n      data-testid=\"radio-button-group\"\n      ref={ref}\n      role=\"radiogroup\"\n      {...a11yProps}\n    >\n      {!inFormField && (\n        <FormLabel className={clsx(withBaseName(\"legend\"))} label={legend} />\n      )}\n\n      <RadioGroupContext.Provider\n        value={{ name, onChange: handleChange, value: getValue() }}\n      >\n        <FormGroup role=\"radiogroup\" {...rest} row={row}>\n          {(radios &&\n            radios.map((radio) => (\n              <RadioButton\n                disabled={radio.disabled}\n                icon={icon}\n                key={radio.label}\n                label={radio.label}\n                value={radio.value}\n              />\n            ))) ||\n            children}\n        </FormGroup>\n      </RadioGroupContext.Provider>\n    </fieldset>\n  );\n});\n"],"names":["RadioButtonGroup"],"mappings":"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"}

package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './RadioButtonIcon.css.js';
 
 const withBaseName = makePrefixer("saltRadioButtonIcon");
 const RadioButtonIcon = ({ checked }) => {
   return /* @__PURE__ */ jsxs("svg", {
-    className: cx(withBaseName(), {
+    className: clsx(withBaseName(), {
       [withBaseName("checked")]: checked
     }),
     height: "14",

package/dist-es/packages/lab/src/radio-button/RadioButtonIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { ComponentType, ReactElement } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n  checked?: boolean;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({ checked }: RadioButtonIconProps) => {\n  return (\n    <svg\n      className={classnames(withBaseName(), {\n        [withBaseName(\"checked\")]: checked,\n      })}\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n    >\n      <circle className={withBaseName(\"border\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n      {checked && (\n        <circle className={withBaseName(\"inner-checked\")} cx=\"7\" cy=\"7\" r=\"3\" />\n      )}\n    </svg>\n  );\n};\n\n/**\n * Creates a component that can be given to Radio or RadioButton as the 'icon'\n */\nexport const makeRadioIcon =\n  (\n    iconChecked: ReactElement | null,\n    iconUnchecked: ReactElement | null\n  ): ComponentType<RadioButtonIconProps> =>\n  (props: RadioButtonIconProps) =>\n    props.checked ? iconChecked : iconUnchecked;\n"],"names":["classnames"],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAShD,MAAM,eAAkB,GAAA,CAAC,EAAE,OAAA,EAAoC,KAAA;AACpE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAWA,EAAW,CAAA,YAAA,EAAgB,EAAA;AAAA,MACpC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,GAAA;AAAA,OAAI,CAAA;AAAA,KAAA;AAAA,GAE1E,CAAA,CAAA;AAEJ,EAAA;AAKa,MAAA,aAAA,GACX,CACE,WACA,EAAA,aAAA,KAEF,CAAC,KACC,KAAA,KAAA,CAAM,UAAU,WAAc,GAAA;;;;"}
+{"version":3,"file":"RadioButtonIcon.js","sources":["../src/radio-button/RadioButtonIcon.tsx"],"sourcesContent":["import { ComponentType, ReactElement } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport \"./RadioButtonIcon.css\";\n\nconst withBaseName = makePrefixer(\"saltRadioButtonIcon\");\n\nexport interface RadioButtonIconProps {\n  checked?: boolean;\n}\n\n/**\n * Default radio icon\n */\nexport const RadioButtonIcon = ({ checked }: RadioButtonIconProps) => {\n  return (\n    <svg\n      className={clsx(withBaseName(), {\n        [withBaseName(\"checked\")]: checked,\n      })}\n      height=\"14\"\n      viewBox=\"0 0 14 14\"\n      width=\"14\"\n    >\n      <circle className={withBaseName(\"border\")} cx=\"7\" cy=\"7\" r=\"6.5\" />\n      {checked && (\n        <circle className={withBaseName(\"inner-checked\")} cx=\"7\" cy=\"7\" r=\"3\" />\n      )}\n    </svg>\n  );\n};\n\n/**\n * Creates a component that can be given to Radio or RadioButton as the 'icon'\n */\nexport const makeRadioIcon =\n  (\n    iconChecked: ReactElement | null,\n    iconUnchecked: ReactElement | null\n  ): ComponentType<RadioButtonIconProps> =>\n  (props: RadioButtonIconProps) =>\n    props.checked ? iconChecked : iconUnchecked;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAShD,MAAM,eAAkB,GAAA,CAAC,EAAE,OAAA,EAAoC,KAAA;AACpE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,MAAO,EAAA,IAAA;AAAA,IACP,OAAQ,EAAA,WAAA;AAAA,IACR,KAAM,EAAA,IAAA;AAAA,IAEN,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,KAAA;AAAA,OAAM,CAAA;AAAA,MAChE,2BACE,GAAA,CAAA,QAAA,EAAA;AAAA,QAAO,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QAAG,EAAG,EAAA,GAAA;AAAA,QAAI,EAAG,EAAA,GAAA;AAAA,QAAI,CAAE,EAAA,GAAA;AAAA,OAAI,CAAA;AAAA,KAAA;AAAA,GAE1E,CAAA,CAAA;AAEJ,EAAA;AAKa,MAAA,aAAA,GACX,CACE,WACA,EAAA,aAAA,KAEF,CAAC,KACC,KAAA,KAAA,CAAM,UAAU,WAAc,GAAA;;;;"}

package/dist-es/packages/lab/src/responsive/useResizeObserver.js

@@ -19,7 +19,7 @@ const getTargetSize = (element, contentRect, dimension) => {
       return 0;
   }
 };
-const resizeObserver = new ResizeObserver((entries) => {
+const resizeObserver = typeof ResizeObserver !== "undefined" ? new ResizeObserver((entries) => {
   for (const entry of entries) {
     const { target, contentRect } = entry;
     const observedTarget = observedMap.get(target);
@@ -42,7 +42,7 @@ const resizeObserver = new ResizeObserver((entries) => {
       }
     }
   }
-});
+}) : null;
 function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
   const dimensionsRef = useRef(dimensions);
   const measure = useCallback((target) => {
@@ -56,6 +56,9 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
     );
   }, []);
   useIsomorphicLayoutEffect(() => {
+    if (!resizeObserver) {
+      return void 0;
+    }
     const target = ref.current;
     let cleanedUp = false;
     async function registerObserver() {
@@ -65,7 +68,7 @@ function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false)
       if (fonts) {
         await fonts.ready;
       }
-      if (!cleanedUp) {
+      if (!cleanedUp && resizeObserver) {
         const observedTarget = observedMap.get(target);
         if (observedTarget) {
           const measurements = measure(target);

package/dist-es/packages/lab/src/responsive/useResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n  for (const entry of entries) {\n    const { target, contentRect } = entry;\n    const observedTarget = observedMap.get(target as HTMLElement);\n    if (observedTarget) {\n      const { onResize, measurements } = observedTarget;\n      let sizeChanged = false;\n      for (const [dimension, size] of Object.entries(measurements)) {\n        const newSize = getTargetSize(\n          target as HTMLElement,\n          contentRect,\n          dimension as measuredDimension\n        );\n        if (newSize !== size) {\n          sizeChanged = true;\n          measurements[dimension as measuredDimension] = newSize;\n        }\n      }\n      if (sizeChanged) {\n        onResize && onResize(measurements);\n      }\n    }\n  }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure]);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useResizeObserver.js","sources":["../src/responsive/useResizeObserver.ts"],"sourcesContent":["/* eslint-disable no-restricted-syntax */\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef, RefObject } from \"react\";\nexport const WidthHeight = [\"height\", \"width\"];\nexport const HeightOnly = [\"height\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  scrollHeight?: T;\n  scrollWidth?: T;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new WeakMap<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  contentRect: DOMRectReadOnly,\n  dimension: measuredDimension\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return contentRect.height;\n    case \"scrollHeight\":\n      return element.scrollHeight;\n    case \"scrollWidth\":\n      return element.scrollWidth;\n    case \"width\":\n      return contentRect.width;\n    default:\n      return 0;\n  }\n};\n\nconst resizeObserver =\n  typeof ResizeObserver !== \"undefined\"\n    ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n        for (const entry of entries) {\n          const { target, contentRect } = entry;\n          const observedTarget = observedMap.get(target as HTMLElement);\n          if (observedTarget) {\n            const { onResize, measurements } = observedTarget;\n            let sizeChanged = false;\n            for (const [dimension, size] of Object.entries(measurements)) {\n              const newSize = getTargetSize(\n                target as HTMLElement,\n                contentRect,\n                dimension as measuredDimension\n              );\n              if (newSize !== size) {\n                sizeChanged = true;\n                measurements[dimension as measuredDimension] = newSize;\n              }\n            }\n            if (sizeChanged) {\n              onResize && onResize(measurements);\n            }\n          }\n        }\n      })\n    : null;\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\n// Note asking for scrollHeight alone will not trigger onResize, this is only triggered by height,\n// with scrollHeight returned as an auxilliary value\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false\n): void {\n  const dimensionsRef = useRef(dimensions);\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const rect = target.getBoundingClientRect();\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(target, rect, dim as measuredDimension);\n        return map;\n      },\n      {}\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useIsomorphicLayoutEffect(() => {\n    if (!resizeObserver) {\n      return undefined;\n    }\n\n    const target = ref.current as HTMLElement;\n    let cleanedUp = false;\n\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      cleanedUp = false;\n      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n      const { fonts } = document as any;\n      if (fonts) {\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        await fonts.ready;\n      }\n      if (!cleanedUp && resizeObserver) {\n        const observedTarget = observedMap.get(target);\n        if (observedTarget) {\n          const measurements = measure(target);\n          observedTarget.measurements = measurements;\n          resizeObserver.observe(target);\n          if (reportInitialSize) {\n            onResize(measurements);\n          }\n        }\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        throw Error(\n          \"useResizeObserver attemping to observe same element twice\"\n        );\n      }\n      void registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n        cleanedUp = true;\n      }\n    };\n  }, [ref, measure]);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n\n  // TODO might be a good idea to ref and return the current measurememnts. That way, derived hooks\n  // e.g useBreakpoints don't have to measure and client cn make onResize callback simpler\n}\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/scrim/Scrim.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { hideOthers } from 'aria-hidden';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import noScroll from 'no-scroll';
 import { forwardRef, useRef, useEffect } from 'react';
 import { makePrefixer, useForkRef, useId, ownerDocument } from '@salt-ds/core';
@@ -123,7 +123,7 @@ const Scrim = forwardRef(function Scrim2({
   }
   return /* @__PURE__ */ jsx("div", {
     "aria-modal": !enableContainerMode,
-    className: cx(className, withBaseName(), {
+    className: clsx(className, withBaseName(), {
       [withBaseName("containerFix")]: enableContainerMode
     }),
     "data-testid": "scrim",

package/dist-es/packages/lab/src/scrim/Scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { hideOthers } from \"aria-hidden\";\nimport classnames from \"classnames\";\nimport noScroll from \"no-scroll\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, ownerDocument, useForkRef, useId } from \"@salt-ds/core\";\nimport { FocusManager, FocusManagerProps } from \"../focus-manager\";\nimport { preventFocusOthers } from \"./internal/PreventFocus\";\nimport { ScrimContext } from \"./ScrimContext\";\n\nimport \"./Scrim.css\";\n\nconst scrims = new Set();\n\nconst getDefaultParent = () =>\n  typeof document !== \"undefined\" ? document.body : null;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nfunction preventSelection(parent = getDefaultParent()): () => void {\n  if (parent) {\n    const previous = parent.style.userSelect;\n    parent.style.userSelect = \"none\";\n\n    return () => {\n      parent.style.userSelect = previous;\n    };\n  }\n  return noop;\n}\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface ScrimProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Ref of the element that automatically receives focus when the Scrim is opened.\n   */\n  autoFocusRef?: FocusManagerProps[\"autoFocusRef\"];\n  /**\n   * Prop to enable escape key to close scrim.\n   * The default value of this props is false\n   */\n  closeWithEscape?: boolean;\n  /**\n   * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n   * replace it to the last focused element when it closes.\n   */\n  disableAutoFocus?: boolean;\n  /**\n   * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * If `true`, the trap focus will not restore focus to previously focused element once\n   * trap focus is hidden.\n   */\n  disableReturnFocus?: boolean;\n  /**\n   * By default, an error will be thrown if the focus trap contains no elements in its tab order.\n   * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.\n   * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.\n   */\n  fallbackFocusRef?: FocusManagerProps[\"fallbackFocusRef\"];\n  /**\n   * The handler for backdrop click on Scrim.\n   */\n  onBackDropClick?: (e: SyntheticEvent) => void;\n  /**\n   * The handler for onClose of Scrim.\n   */\n  onClose?: () => void;\n  /**\n   * To maintain open and close of the scrim.\n   */\n  open?: boolean;\n  /**\n   * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.\n   * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  enableContainerMode?: boolean;\n  /**\n   * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.\n   * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  containerRef?: RefObject<HTMLElement>;\n  /**\n   * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.\n   */\n  returnFocusOptions?: FocusManagerProps[\"returnFocusOptions\"];\n  /**\n   * comma separated string of query selectors which may need to be overridden for edge cases.\n   */\n  tabEnabledSelectors?: string;\n  /**\n   * Prop to pass z-index for Scrim.\n   */\n  zIndex?: number;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  {\n    autoFocusRef,\n    closeWithEscape = false,\n    className,\n    children,\n    disableAutoFocus,\n    disableFocusTrap,\n    disableReturnFocus,\n    fallbackFocusRef,\n    onBackDropClick,\n    onClose,\n    open,\n    containerRef,\n    enableContainerMode = false,\n    returnFocusOptions,\n    tabEnabledSelectors = defaultSelector,\n    zIndex,\n    ...rest\n  },\n  ref\n) {\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const setWrapperRef = useForkRef(ref, scrimRef);\n  const undoAria = useRef(noop);\n  const undoSelection = useRef(noop);\n  const undoTabIndex = useRef(noop);\n  const scrimId = useId();\n\n  useEffect(() => {\n    if (open && !containerRef?.current) {\n      scrims.add(scrimId);\n      noScroll.on();\n    }\n\n    return () => {\n      if (open) {\n        scrims.delete(scrimId);\n        if (scrims.size === 0) {\n          noScroll.off();\n        }\n      }\n    };\n  }, [open, containerRef, scrimId]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current || undefined;\n\n      if (scrimRef.current) {\n        undoAria.current = hideOthers(scrimRef.current, parent);\n      }\n    }\n\n    return () => {\n      undoAria.current?.();\n    };\n  }, [open, containerRef]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current;\n\n      if (parent) {\n        undoSelection.current = preventSelection(parent);\n        undoTabIndex.current = preventFocusOthers(\n          scrimRef.current,\n          tabEnabledSelectors,\n          parent\n        );\n      }\n    }\n\n    return () => {\n      undoSelection.current?.();\n      undoTabIndex.current?.();\n    };\n  }, [open, containerRef, tabEnabledSelectors]);\n\n  useEffect(() => {\n    if (closeWithEscape && open && scrimRef.current) {\n      const escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          onClose?.();\n        }\n      };\n\n      const doc = ownerDocument(scrimRef.current);\n      doc.addEventListener(\"keydown\", escapeHandler);\n\n      return () => {\n        doc.removeEventListener(\"keydown\", escapeHandler);\n      };\n    }\n  }, [closeWithEscape, onClose, open]);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-modal={!enableContainerMode}\n      className={classnames(className, withBaseName(), {\n        [withBaseName(\"containerFix\")]: enableContainerMode,\n      })}\n      data-testid=\"scrim\"\n      onClick={onBackDropClick}\n      ref={setWrapperRef}\n      role=\"dialog\"\n      style={{\n        zIndex,\n      }}\n      {...rest}\n    >\n      <FocusManager\n        active={open}\n        autoFocusRef={autoFocusRef}\n        disableAutoFocus={disableAutoFocus}\n        disableFocusTrap={disableFocusTrap || !!enableContainerMode}\n        disableReturnFocus={disableReturnFocus}\n        returnFocusOptions={returnFocusOptions}\n        tabEnabledSelectors={tabEnabledSelectors}\n      >\n        <ScrimContext.Provider value={onClose}>\n          {children}\n        </ScrimContext.Provider>\n      </FocusManager>\n    </div>\n  );\n});\n"],"names":["Scrim","classnames"],"mappings":"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"}
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { hideOthers } from \"aria-hidden\";\nimport { clsx } from \"clsx\";\nimport noScroll from \"no-scroll\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, ownerDocument, useForkRef, useId } from \"@salt-ds/core\";\nimport { FocusManager, FocusManagerProps } from \"../focus-manager\";\nimport { preventFocusOthers } from \"./internal/PreventFocus\";\nimport { ScrimContext } from \"./ScrimContext\";\n\nimport \"./Scrim.css\";\n\nconst scrims = new Set();\n\nconst getDefaultParent = () =>\n  typeof document !== \"undefined\" ? document.body : null;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nfunction preventSelection(parent = getDefaultParent()): () => void {\n  if (parent) {\n    const previous = parent.style.userSelect;\n    parent.style.userSelect = \"none\";\n\n    return () => {\n      parent.style.userSelect = previous;\n    };\n  }\n  return noop;\n}\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface ScrimProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Ref of the element that automatically receives focus when the Scrim is opened.\n   */\n  autoFocusRef?: FocusManagerProps[\"autoFocusRef\"];\n  /**\n   * Prop to enable escape key to close scrim.\n   * The default value of this props is false\n   */\n  closeWithEscape?: boolean;\n  /**\n   * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n   * replace it to the last focused element when it closes.\n   */\n  disableAutoFocus?: boolean;\n  /**\n   * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * If `true`, the trap focus will not restore focus to previously focused element once\n   * trap focus is hidden.\n   */\n  disableReturnFocus?: boolean;\n  /**\n   * By default, an error will be thrown if the focus trap contains no elements in its tab order.\n   * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.\n   * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.\n   */\n  fallbackFocusRef?: FocusManagerProps[\"fallbackFocusRef\"];\n  /**\n   * The handler for backdrop click on Scrim.\n   */\n  onBackDropClick?: (e: SyntheticEvent) => void;\n  /**\n   * The handler for onClose of Scrim.\n   */\n  onClose?: () => void;\n  /**\n   * To maintain open and close of the scrim.\n   */\n  open?: boolean;\n  /**\n   * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.\n   * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  enableContainerMode?: boolean;\n  /**\n   * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.\n   * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  containerRef?: RefObject<HTMLElement>;\n  /**\n   * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.\n   */\n  returnFocusOptions?: FocusManagerProps[\"returnFocusOptions\"];\n  /**\n   * comma separated string of query selectors which may need to be overridden for edge cases.\n   */\n  tabEnabledSelectors?: string;\n  /**\n   * Prop to pass z-index for Scrim.\n   */\n  zIndex?: number;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  {\n    autoFocusRef,\n    closeWithEscape = false,\n    className,\n    children,\n    disableAutoFocus,\n    disableFocusTrap,\n    disableReturnFocus,\n    fallbackFocusRef,\n    onBackDropClick,\n    onClose,\n    open,\n    containerRef,\n    enableContainerMode = false,\n    returnFocusOptions,\n    tabEnabledSelectors = defaultSelector,\n    zIndex,\n    ...rest\n  },\n  ref\n) {\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const setWrapperRef = useForkRef(ref, scrimRef);\n  const undoAria = useRef(noop);\n  const undoSelection = useRef(noop);\n  const undoTabIndex = useRef(noop);\n  const scrimId = useId();\n\n  useEffect(() => {\n    if (open && !containerRef?.current) {\n      scrims.add(scrimId);\n      noScroll.on();\n    }\n\n    return () => {\n      if (open) {\n        scrims.delete(scrimId);\n        if (scrims.size === 0) {\n          noScroll.off();\n        }\n      }\n    };\n  }, [open, containerRef, scrimId]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current || undefined;\n\n      if (scrimRef.current) {\n        undoAria.current = hideOthers(scrimRef.current, parent);\n      }\n    }\n\n    return () => {\n      undoAria.current?.();\n    };\n  }, [open, containerRef]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current;\n\n      if (parent) {\n        undoSelection.current = preventSelection(parent);\n        undoTabIndex.current = preventFocusOthers(\n          scrimRef.current,\n          tabEnabledSelectors,\n          parent\n        );\n      }\n    }\n\n    return () => {\n      undoSelection.current?.();\n      undoTabIndex.current?.();\n    };\n  }, [open, containerRef, tabEnabledSelectors]);\n\n  useEffect(() => {\n    if (closeWithEscape && open && scrimRef.current) {\n      const escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          onClose?.();\n        }\n      };\n\n      const doc = ownerDocument(scrimRef.current);\n      doc.addEventListener(\"keydown\", escapeHandler);\n\n      return () => {\n        doc.removeEventListener(\"keydown\", escapeHandler);\n      };\n    }\n  }, [closeWithEscape, onClose, open]);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-modal={!enableContainerMode}\n      className={clsx(className, withBaseName(), {\n        [withBaseName(\"containerFix\")]: enableContainerMode,\n      })}\n      data-testid=\"scrim\"\n      onClick={onBackDropClick}\n      ref={setWrapperRef}\n      role=\"dialog\"\n      style={{\n        zIndex,\n      }}\n      {...rest}\n    >\n      <FocusManager\n        active={open}\n        autoFocusRef={autoFocusRef}\n        disableAutoFocus={disableAutoFocus}\n        disableFocusTrap={disableFocusTrap || !!enableContainerMode}\n        disableReturnFocus={disableReturnFocus}\n        returnFocusOptions={returnFocusOptions}\n        tabEnabledSelectors={tabEnabledSelectors}\n      >\n        <ScrimContext.Provider value={onClose}>\n          {children}\n        </ScrimContext.Provider>\n      </FocusManager>\n    </div>\n  );\n});\n"],"names":["Scrim"],"mappings":"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"}

package/dist-es/packages/lab/src/search-input/SearchInput.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { useForkRef, useControlled, Button } from '@salt-ds/core';
 import { Input } from '../input/Input.js';
 import { StaticInputAdornment } from '../input/StaticInputAdornment.js';
@@ -48,10 +48,10 @@ const SearchInput = forwardRef(
       onKeyUp == null ? void 0 : onKeyUp(event);
     };
     return /* @__PURE__ */ jsx(Input, {
-      className: cx(baseName, className),
+      className: clsx(baseName, className),
       ref: handleRef,
       endAdornment: !!value && /* @__PURE__ */ jsx(Button, {
-        className: cx(`${baseName}-clearButton`),
+        className: clsx(`${baseName}-clearButton`),
         onClick: handleClear,
         variant: "secondary",
         children: /* @__PURE__ */ jsx(CloseIcon, {

package/dist-es/packages/lab/src/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { Input, InputProps, StaticInputAdornment } from \"../input\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\n\nimport \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={cx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={cx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["SearchInput"],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { Input, InputProps, StaticInputAdornment } from \"../input\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\n\nimport \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={clsx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={clsx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["SearchInput"],"mappings":";;;;;;;;;AAeA,MAAM,QAAW,GAAA,iBAAA,CAAA;AAyBV,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,aAAgB,GAAA,UAAA;AAAA,IAChB,SAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACP,YAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,QAAA,GAAW,OAAyB,IAAI,CAAA,CAAA;AAC9C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE1C,IAAA,MAAM,CAAC,KAAA,EAAO,QAAU,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,MACpD,UAAY,EAAA,SAAA;AAAA,MACZ,OAAS,EAAA,YAAA;AAAA,MACT,IAAM,EAAA,aAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CACnB,KAAA,EACA,QACG,KAAA;AACH,MAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AACjB,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,QAAA,CAAA,CAAA;AAAA,KACpB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA6C,KAAA;AAzEtE,MAAA,IAAA,EAAA,CAAA;AA0EM,MAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AACX,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,KAAO,EAAA,EAAA,CAAA,CAAA;AAAA,OACpB;AACA,MAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,MAAA,CAAA,EAAA,GAAA,QAAA,CAAS,YAAT,IAAkB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,KAAA,EAAA,CAAA;AAAA,KACpB,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,CAAC,KAA2C,KAAA;AAC9D,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,QAAA,IAAY,KAAO,EAAA;AAC9C,QAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,OACb;AAEA,MAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MACnC,GAAK,EAAA,SAAA;AAAA,MACL,YACE,EAAA,CAAC,CAAC,KAAA,oBACC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAA,EAAW,IAAK,CAAA,CAAA,EAAG,QAAsB,CAAA,YAAA,CAAA,CAAA;AAAA,QACzC,OAAS,EAAA,WAAA;AAAA,QACT,OAAQ,EAAA,WAAA;AAAA,QAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,UACC,YAAW,EAAA,aAAA;AAAA,UACX,WAAW,CAAG,EAAA,QAAA,CAAA,UAAA,CAAA;AAAA,SAChB,CAAA;AAAA,OACF,CAAA;AAAA,MAGJ,QAAU,EAAA,YAAA;AAAA,MACV,OAAS,EAAA,WAAA;AAAA,MACT,cAAA,EACE,iCACG,GAAA,CAAA,oBAAA,EAAA;AAAA,QACC,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA;AAAA,UAAc,WAAW,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,SAAiB,CAAA;AAAA,OAChD,CAAA;AAAA,MAGJ,OAAO,KAAS,IAAA,EAAA;AAAA,MACf,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}