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

package/dist-cjs/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":["useRef","useCallback","useIsomorphicLayoutEffect"],"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":["useRef","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var ariaHidden = require('aria-hidden');
-var cx = require('classnames');
+var clsx = require('clsx');
 var noScroll = require('no-scroll');
 var React = require('react');
 var core = require('@salt-ds/core');
@@ -15,7 +15,6 @@ require('./Scrim.css.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var noScroll__default = /*#__PURE__*/_interopDefaultLegacy(noScroll);
 
 const scrims = /* @__PURE__ */ new Set();
@@ -132,7 +131,7 @@ const Scrim = React.forwardRef(function Scrim2({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     "aria-modal": !enableContainerMode,
-    className: cx__default["default"](className, withBaseName(), {
+    className: clsx.clsx(className, withBaseName(), {
       [withBaseName("containerFix")]: enableContainerMode
     }),
     "data-testid": "scrim",

package/dist-cjs/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":["makePrefixer","forwardRef","Scrim","useRef","useForkRef","useId","useEffect","noScroll","hideOthers","preventFocusOthers","ownerDocument","jsx","classnames","FocusManager","ScrimContext"],"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":["makePrefixer","forwardRef","Scrim","useRef","useForkRef","useId","useEffect","noScroll","hideOthers","preventFocusOthers","ownerDocument","jsx","clsx","FocusManager","ScrimContext"],"mappings":"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"}

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

@@ -4,17 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cx = require('classnames');
+var clsx = require('clsx');
 var core = require('@salt-ds/core');
 var Input = require('../input/Input.js');
 var StaticInputAdornment = require('../input/StaticInputAdornment.js');
 var icons = require('@salt-ds/icons');
 require('./SearchInput.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const baseName = "saltSearchInput";
 const SearchInput = React.forwardRef(
   function SearchInput2({
@@ -56,10 +52,10 @@ const SearchInput = React.forwardRef(
       onKeyUp == null ? void 0 : onKeyUp(event);
     };
     return /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
-      className: cx__default["default"](baseName, className),
+      className: clsx.clsx(baseName, className),
       ref: handleRef,
       endAdornment: !!value && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-        className: cx__default["default"](`${baseName}-clearButton`),
+        className: clsx.clsx(`${baseName}-clearButton`),
         onClick: handleClear,
         variant: "secondary",
         children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {

package/dist-cjs/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":["forwardRef","SearchInput","SearchIcon","useRef","useForkRef","useControlled","jsx","Input","cx","Button","CloseIcon","StaticInputAdornment"],"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":["forwardRef","SearchInput","SearchIcon","useRef","useForkRef","useControlled","jsx","Input","clsx","Button","CloseIcon","StaticInputAdornment"],"mappings":"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"}

package/dist-cjs/packages/lab/src/skip-link/SkipLink.js

@@ -6,23 +6,19 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@salt-ds/core');
 require('./SkipLink.css.js');
-var cx = require('classnames');
+var clsx = require('clsx');
 var useManageFocusOnTarget = require('./internal/useManageFocusOnTarget.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltSkipLink");
 const SkipLink = React.forwardRef(
   function SkipLink2({ className, targetRef, ...rest }, ref) {
-    const targetClass = cx__default["default"](withBaseName("target"), className);
+    const targetClass = clsx.clsx(withBaseName("target"), className);
     const eventHandlers = useManageFocusOnTarget.useManageFocusOnTarget({ targetRef, targetClass });
     return /* @__PURE__ */ jsxRuntime.jsx("li", {
       children: /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
         ...eventHandlers,
         ...rest,
-        className: cx__default["default"](withBaseName(), className),
+        className: clsx.clsx(withBaseName(), className),
         ref
       })
     });

package/dist-cjs/packages/lab/src/skip-link/SkipLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { forwardRef, RefObject } from \"react\";\nimport { LinkProps, Link, makePrefixer } from \"@salt-ds/core\";\nimport \"./SkipLink.css\";\nimport cx from \"classnames\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\ninterface SkipLinkProps extends LinkProps {\n  /**\n   * This is a ref that has access to the target element.\n   *\n   * This will be used to apply focus to that element\n   *\n   * Refs are referentially stable so if this changes it won't be picked up\n   * will need to find a better way of passing in the target element to apply the attributes\n   */\n  targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink({ className, targetRef, ...rest }, ref) {\n    const targetClass = cx(withBaseName(\"target\"), className);\n\n    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n    return (\n      <li>\n        <Link\n          {...eventHandlers}\n          {...rest}\n          className={cx(withBaseName(), className)}\n          ref={ref}\n        />\n      </li>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","SkipLink","cx","useManageFocusOnTarget","jsx","Link"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,WAAc,GAAAC,sBAAA,CAAG,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAExD,IAAA,MAAM,aAAgB,GAAAC,6CAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAAA,cAAA,CAAAC,SAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAH,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACvC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { forwardRef, RefObject } from \"react\";\nimport { LinkProps, Link, makePrefixer } from \"@salt-ds/core\";\nimport \"./SkipLink.css\";\nimport { clsx } from \"clsx\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\ninterface SkipLinkProps extends LinkProps {\n  /**\n   * This is a ref that has access to the target element.\n   *\n   * This will be used to apply focus to that element\n   *\n   * Refs are referentially stable so if this changes it won't be picked up\n   * will need to find a better way of passing in the target element to apply the attributes\n   */\n  targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink({ className, targetRef, ...rest }, ref) {\n    const targetClass = clsx(withBaseName(\"target\"), className);\n\n    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n    return (\n      <li>\n        <Link\n          {...eventHandlers}\n          {...rest}\n          className={clsx(withBaseName(), className)}\n          ref={ref}\n        />\n      </li>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","SkipLink","clsx","useManageFocusOnTarget","jsx","Link"],"mappings":";;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,WAAc,GAAAC,SAAA,CAAK,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAE1D,IAAA,MAAM,aAAgB,GAAAC,6CAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAAA,cAAA,CAAAC,SAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAH,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.js

@@ -4,20 +4,16 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var cx = require('classnames');
+var clsx = require('clsx');
 var core = require('@salt-ds/core');
 require('./SkipLinks.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltSkipLinks");
 const SkipLinks = React.forwardRef(function SkipLinks2(props, ref) {
   const { className, children, ...restProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx("ul", {
     ...restProps,
-    className: cx__default["default"](withBaseName(), className),
+    className: clsx.clsx(withBaseName(), className),
     ref,
     children
   });

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n  HTMLUListElement,\n  HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n  const { className, children, ...restProps } = props;\n\n  return (\n    <ul {...restProps} className={cx(withBaseName(), className)} ref={ref}>\n      {children}\n    </ul>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SkipLinks","jsx","cx"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA,CAGvB,SAASC,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE9C,EAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC1D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n  HTMLUListElement,\n  HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n  const { className, children, ...restProps } = props;\n\n  return (\n    <ul {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n      {children}\n    </ul>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SkipLinks","jsx","clsx"],"mappings":";;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA,CAGvB,SAASC,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE9C,EAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC5D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/slider/Slider.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var SliderHandle = require('./internal/SliderHandle.js');
 var SliderMarkLabels = require('./internal/SliderMarkLabels.js');
@@ -17,10 +17,6 @@ var useSliderMouseDown = require('./internal/useSliderMouseDown.js');
 var utils = require('./internal/utils.js');
 require('./Slider.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltSlider");
 const defaultMin = 0;
 const defaultMax = 100;
@@ -81,7 +77,7 @@ const Slider = React.forwardRef(function Slider2({
     onChange
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    className: cx__default["default"](
+    className: clsx.clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: disabled

package/dist-cjs/packages/lab/src/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  pageStep?: number;\n  value?: SliderValue;\n  defaultValue?: SliderValue;\n  pushable?: boolean;\n  pushDistance?: number;\n  disabled?: boolean;\n  onChange?: SliderChangeHandler;\n  marks?: SliderMark[];\n  hideMarks?: boolean;\n  hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    pageStep = step,\n    value: valueProp,\n    defaultValue = defaultMin,\n    onChange,\n    label,\n    className,\n    pushable,\n    pushDistance = 0,\n    disabled,\n    marks,\n    hideMarks,\n    hideMarkLabels,\n    ...restProps\n  },\n  ref\n) {\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n  const trackStyle = useMemo(\n    () => createTrackStyle(min, max, value),\n    [min, max, value]\n  );\n\n  const valueLength = Array.isArray(value) ? value.length : 1;\n\n  const handleStyles: CSSProperties[] = useMemo(\n    () => createHandleStyles(valueLength),\n    [valueLength]\n  );\n\n  const onMouseDown = useSliderMouseDown(\n    trackRef,\n    value,\n    min,\n    max,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  const onKeyDown = useSliderKeyDown(\n    value,\n    min,\n    max,\n    pageStep,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  return (\n    <div\n      className={cn(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      aria-label={`${label} slider from ${min} to ${max}`}\n      role=\"group\"\n    >\n      {label !== undefined ? (\n        <div className={withBaseName(\"label\")}>{label}</div>\n      ) : null}\n      <div\n        className={withBaseName(\"clickable\")}\n        onMouseDown={disabled ? undefined : onMouseDown}\n      >\n        <div\n          className={withBaseName(\"track\")}\n          style={trackStyle}\n          ref={trackRef}\n        >\n          <SliderRail />\n          {marks && !hideMarks ? (\n            <SliderRailMarks min={min} max={max} marks={marks} />\n          ) : null}\n          {marks && !hideMarkLabels ? (\n            <SliderMarkLabels min={min} max={max} marks={marks} />\n          ) : null}\n          <SliderSelection valueLength={valueLength} />\n          {(Array.isArray(value) ? value : [value]).map((v, i) => (\n            <SliderHandle\n              key={i}\n              min={min}\n              max={max}\n              value={v}\n              index={i}\n              disabled={!!disabled}\n              valueLength={valueLength}\n              style={handleStyles[i]}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Slider","useRef","useControlled","useValueUpdater","useMemo","createTrackStyle","createHandleStyles","useSliderMouseDown","useSliderKeyDown","jsxs","cn","jsx","SliderRail","SliderRailMarks","SliderMarkLabels","SliderSelection","SliderHandle"],"mappings":"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"}
+{"version":3,"file":"Slider.js","sources":["../src/slider/Slider.tsx"],"sourcesContent":["import { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  CSSProperties,\n  forwardRef,\n  HTMLAttributes,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { SliderHandle } from \"./internal/SliderHandle\";\nimport { SliderMarkLabels } from \"./internal/SliderMarkLabels\";\nimport { SliderRail } from \"./internal/SliderRail\";\nimport { SliderMark, SliderRailMarks } from \"./internal/SliderRailMarks\";\nimport { SliderSelection } from \"./internal/SliderSelection\";\nimport { createHandleStyles, createTrackStyle } from \"./internal/styles\";\nimport { useSliderKeyDown } from \"./internal/useSliderKeyDown\";\nimport { useSliderMouseDown } from \"./internal/useSliderMouseDown\";\nimport { useValueUpdater } from \"./internal/utils\";\nimport { SliderChangeHandler, SliderValue } from \"./types\";\n\nimport \"./Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSlider\");\n\nconst defaultMin = 0;\nconst defaultMax = 100;\nconst defaultStep = 1;\n\nexport interface SliderProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  label?: string;\n  min?: number;\n  max?: number;\n  step?: number;\n  pageStep?: number;\n  value?: SliderValue;\n  defaultValue?: SliderValue;\n  pushable?: boolean;\n  pushDistance?: number;\n  disabled?: boolean;\n  onChange?: SliderChangeHandler;\n  marks?: SliderMark[];\n  hideMarks?: boolean;\n  hideMarkLabels?: boolean;\n}\n\nexport const Slider = forwardRef<HTMLDivElement, SliderProps>(function Slider(\n  {\n    min = defaultMin,\n    max = defaultMax,\n    step = defaultStep,\n    pageStep = step,\n    value: valueProp,\n    defaultValue = defaultMin,\n    onChange,\n    label,\n    className,\n    pushable,\n    pushDistance = 0,\n    disabled,\n    marks,\n    hideMarks,\n    hideMarkLabels,\n    ...restProps\n  },\n  ref\n) {\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const [value, setValue] = useControlled<SliderValue>({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Slider\",\n    state: \"Value\",\n  });\n\n  const updateValueItem = useValueUpdater(pushable, pushDistance, min, max);\n\n  const trackStyle = useMemo(\n    () => createTrackStyle(min, max, value),\n    [min, max, value]\n  );\n\n  const valueLength = Array.isArray(value) ? value.length : 1;\n\n  const handleStyles: CSSProperties[] = useMemo(\n    () => createHandleStyles(valueLength),\n    [valueLength]\n  );\n\n  const onMouseDown = useSliderMouseDown(\n    trackRef,\n    value,\n    min,\n    max,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  const onKeyDown = useSliderKeyDown(\n    value,\n    min,\n    max,\n    pageStep,\n    step,\n    updateValueItem,\n    setValue,\n    onChange\n  );\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n      onKeyDown={disabled ? undefined : onKeyDown}\n      aria-label={`${label} slider from ${min} to ${max}`}\n      role=\"group\"\n    >\n      {label !== undefined ? (\n        <div className={withBaseName(\"label\")}>{label}</div>\n      ) : null}\n      <div\n        className={withBaseName(\"clickable\")}\n        onMouseDown={disabled ? undefined : onMouseDown}\n      >\n        <div\n          className={withBaseName(\"track\")}\n          style={trackStyle}\n          ref={trackRef}\n        >\n          <SliderRail />\n          {marks && !hideMarks ? (\n            <SliderRailMarks min={min} max={max} marks={marks} />\n          ) : null}\n          {marks && !hideMarkLabels ? (\n            <SliderMarkLabels min={min} max={max} marks={marks} />\n          ) : null}\n          <SliderSelection valueLength={valueLength} />\n          {(Array.isArray(value) ? value : [value]).map((v, i) => (\n            <SliderHandle\n              key={i}\n              min={min}\n              max={max}\n              value={v}\n              index={i}\n              disabled={!!disabled}\n              valueLength={valueLength}\n              style={handleStyles[i]}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Slider","useRef","useControlled","useValueUpdater","useMemo","createTrackStyle","createHandleStyles","useSliderMouseDown","useSliderKeyDown","jsxs","clsx","jsx","SliderRail","SliderRailMarks","SliderMarkLabels","SliderSelection","SliderHandle"],"mappings":"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"}

package/dist-cjs/packages/lab/src/slider/internal/SliderHandle.js

@@ -4,17 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var utils = require('./utils.js');
 var Tooltip = require('../../tooltip/Tooltip.js');
 require('../../tooltip/TooltipContext.js');
 var useTooltip = require('../../tooltip/useTooltip.js');
 require('../Slider.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltSliderHandle");
 function SliderHandle(props) {
   const { min, max, value, disabled, valueLength, index, style } = props;
@@ -23,7 +19,7 @@ function SliderHandle(props) {
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", {
         ...getTriggerProps({
-          className: cx__default["default"](withBaseName(), {
+          className: clsx.clsx(withBaseName(), {
             [withBaseName("min")]: value === min,
             [withBaseName("max")]: value === max
           }),

package/dist-cjs/packages/lab/src/slider/internal/SliderHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\nimport { Tooltip, useTooltip } from \"../../tooltip\";\n\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n  min: number;\n  max: number;\n  value: number;\n  index: number;\n  disabled: boolean;\n  valueLength: number;\n  style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n  const { min, max, value, disabled, valueLength, index, style } = props;\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({ placement: \"top\" });\n\n  return (\n    <>\n      <div\n        {...getTriggerProps<\"div\">({\n          className: cn(withBaseName(), {\n            [withBaseName(\"min\")]: value === min,\n            [withBaseName(\"max\")]: value === max,\n          }),\n          style,\n          role: \"slider\",\n          \"aria-valuemin\": min,\n          \"aria-valuemax\": max,\n          \"aria-valuenow\": value,\n          \"aria-disabled\": disabled,\n          \"aria-label\": getSliderAriaLabel(valueLength, index),\n          tabIndex: 0,\n        })}\n        data-handle-index={index}\n      />\n      <Tooltip\n        {...getTooltipProps({ title: `${value}`, disablePortal: true })}\n      />\n    </>\n  );\n}\n"],"names":["makePrefixer","useTooltip","jsxs","Fragment","jsx","cn","getSliderAriaLabel","Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAM,MAAA,EAAE,iBAAiB,eAAgB,EAAA,GAAIC,sBAAW,EAAE,SAAA,EAAW,OAAO,CAAA,CAAA;AAE5E,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,QACE,GAAG,eAAuB,CAAA;AAAA,UACzB,SAAA,EAAWC,sBAAG,CAAA,YAAA,EAAgB,EAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,YACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,WAClC,CAAA;AAAA,UACD,KAAA;AAAA,UACA,IAAM,EAAA,QAAA;AAAA,UACN,eAAiB,EAAA,GAAA;AAAA,UACjB,eAAiB,EAAA,GAAA;AAAA,UACjB,eAAiB,EAAA,KAAA;AAAA,UACjB,eAAiB,EAAA,QAAA;AAAA,UACjB,YAAA,EAAcC,wBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,UACnD,QAAU,EAAA,CAAA;AAAA,SACX,CAAA;AAAA,QACD,mBAAmB,EAAA,KAAA;AAAA,OACrB,CAAA;AAAA,sBACCF,cAAA,CAAAG,eAAA,EAAA;AAAA,QACE,GAAG,gBAAgB,EAAE,KAAA,EAAO,GAAG,KAAS,CAAA,CAAA,EAAA,aAAA,EAAe,MAAM,CAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SliderHandle.js","sources":["../src/slider/internal/SliderHandle.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { CSSProperties } from \"react\";\nimport { getSliderAriaLabel } from \"./utils\";\nimport { Tooltip, useTooltip } from \"../../tooltip\";\n\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderHandle\");\n\nexport interface SliderHandleProps {\n  min: number;\n  max: number;\n  value: number;\n  index: number;\n  disabled: boolean;\n  valueLength: number;\n  style: CSSProperties;\n}\n\nexport function SliderHandle(props: SliderHandleProps): JSX.Element {\n  const { min, max, value, disabled, valueLength, index, style } = props;\n\n  const { getTriggerProps, getTooltipProps } = useTooltip({ placement: \"top\" });\n\n  return (\n    <>\n      <div\n        {...getTriggerProps<\"div\">({\n          className: clsx(withBaseName(), {\n            [withBaseName(\"min\")]: value === min,\n            [withBaseName(\"max\")]: value === max,\n          }),\n          style,\n          role: \"slider\",\n          \"aria-valuemin\": min,\n          \"aria-valuemax\": max,\n          \"aria-valuenow\": value,\n          \"aria-disabled\": disabled,\n          \"aria-label\": getSliderAriaLabel(valueLength, index),\n          tabIndex: 0,\n        })}\n        data-handle-index={index}\n      />\n      <Tooltip\n        {...getTooltipProps({ title: `${value}`, disablePortal: true })}\n      />\n    </>\n  );\n}\n"],"names":["makePrefixer","useTooltip","jsxs","Fragment","jsx","clsx","getSliderAriaLabel","Tooltip"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAY7C,SAAS,aAAa,KAAuC,EAAA;AAClE,EAAM,MAAA,EAAE,KAAK,GAAK,EAAA,KAAA,EAAO,UAAU,WAAa,EAAA,KAAA,EAAO,OAAU,GAAA,KAAA,CAAA;AAEjE,EAAM,MAAA,EAAE,iBAAiB,eAAgB,EAAA,GAAIC,sBAAW,EAAE,SAAA,EAAW,OAAO,CAAA,CAAA;AAE5E,EACE,uBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAACC,cAAA,CAAA,KAAA,EAAA;AAAA,QACE,GAAG,eAAuB,CAAA;AAAA,UACzB,SAAA,EAAWC,SAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,YAC9B,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,YACjC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,GAAA;AAAA,WAClC,CAAA;AAAA,UACD,KAAA;AAAA,UACA,IAAM,EAAA,QAAA;AAAA,UACN,eAAiB,EAAA,GAAA;AAAA,UACjB,eAAiB,EAAA,GAAA;AAAA,UACjB,eAAiB,EAAA,KAAA;AAAA,UACjB,eAAiB,EAAA,QAAA;AAAA,UACjB,YAAA,EAAcC,wBAAmB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,UACnD,QAAU,EAAA,CAAA;AAAA,SACX,CAAA;AAAA,QACD,mBAAmB,EAAA,KAAA;AAAA,OACrB,CAAA;AAAA,sBACCF,cAAA,CAAAG,eAAA,EAAA;AAAA,QACE,GAAG,gBAAgB,EAAE,KAAA,EAAO,GAAG,KAAS,CAAA,CAAA,EAAA,aAAA,EAAe,MAAM,CAAA;AAAA,OAChE,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/slider/internal/SliderRailMarks.js

@@ -5,15 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var styles = require('./styles.js');
 var utils = require('./utils.js');
 require('../Slider.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltSliderRailMarks");
 function SliderRailMarks(props) {
   const { min, max, marks } = props;
@@ -31,7 +27,7 @@ function SliderRailMarks(props) {
     style,
     children: marks.map((mark, i) => {
       return /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: cx__default["default"](withBaseName("mark"), {
+        className: clsx.clsx(withBaseName("mark"), {
           [withBaseName("max")]: utils.isMarkAtMax(max, mark)
         }),
         style: markStyles[i]

package/dist-cjs/packages/lab/src/slider/internal/SliderRailMarks.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { ReactNode, useMemo } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isMarkAtMax } from \"./utils\";\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n  value: number;\n  label: ReactNode;\n}\n\nexport type SliderMark = number | LabeledMark;\n\nexport interface SliderRailMarksProps {\n  min: number;\n  max: number;\n  marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n  const { min, max, marks } = props;\n  const style = useMemo(\n    () => createSliderRailMarksStyle(min, max, marks),\n    [min, max, marks]\n  );\n  const marksLength = marks.length;\n  const markStyles = useMemo(\n    () => createHandleStyles(marksLength),\n    [marksLength]\n  );\n\n  return (\n    <div className={withBaseName()} style={style}>\n      {marks.map((mark, i) => {\n        return (\n          <div\n            key={`Mark${i}`}\n            className={cn(withBaseName(\"mark\"), {\n              [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n            })}\n            style={markStyles[i]}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["makePrefixer","useMemo","createSliderRailMarksStyle","createHandleStyles","jsx","cn","isMarkAtMax"],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC5B,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,MAAMC,iCAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAAD,aAAA;AAAA,IACjB,MAAME,0BAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAAC,sBAAA,CAAG,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UAClC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAAC,iBAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,OAAO,CAKd,CAAA,CAAA,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"SliderRailMarks.js","sources":["../src/slider/internal/SliderRailMarks.tsx"],"sourcesContent":["import { ReactNode, useMemo } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { createHandleStyles, createSliderRailMarksStyle } from \"./styles\";\nimport { isMarkAtMax } from \"./utils\";\nimport \"../Slider.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderRailMarks\");\n\nexport interface LabeledMark {\n  value: number;\n  label: ReactNode;\n}\n\nexport type SliderMark = number | LabeledMark;\n\nexport interface SliderRailMarksProps {\n  min: number;\n  max: number;\n  marks: SliderMark[];\n}\n\nexport function SliderRailMarks(props: SliderRailMarksProps) {\n  const { min, max, marks } = props;\n  const style = useMemo(\n    () => createSliderRailMarksStyle(min, max, marks),\n    [min, max, marks]\n  );\n  const marksLength = marks.length;\n  const markStyles = useMemo(\n    () => createHandleStyles(marksLength),\n    [marksLength]\n  );\n\n  return (\n    <div className={withBaseName()} style={style}>\n      {marks.map((mark, i) => {\n        return (\n          <div\n            key={`Mark${i}`}\n            className={clsx(withBaseName(\"mark\"), {\n              [withBaseName(\"max\")]: isMarkAtMax(max, mark),\n            })}\n            style={markStyles[i]}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"names":["makePrefixer","useMemo","createSliderRailMarksStyle","createHandleStyles","jsx","clsx","isMarkAtMax"],"mappings":";;;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAehD,SAAS,gBAAgB,KAA6B,EAAA;AAC3D,EAAA,MAAM,EAAE,GAAA,EAAK,GAAK,EAAA,KAAA,EAAU,GAAA,KAAA,CAAA;AAC5B,EAAA,MAAM,KAAQ,GAAAC,aAAA;AAAA,IACZ,MAAMC,iCAAA,CAA2B,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,IAChD,CAAC,GAAK,EAAA,GAAA,EAAK,KAAK,CAAA;AAAA,GAClB,CAAA;AACA,EAAA,MAAM,cAAc,KAAM,CAAA,MAAA,CAAA;AAC1B,EAAA,MAAM,UAAa,GAAAD,aAAA;AAAA,IACjB,MAAME,0BAAmB,WAAW,CAAA;AAAA,IACpC,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,YAAa,EAAA;AAAA,IAAG,KAAA;AAAA,IAC7B,QAAM,EAAA,KAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,CAAM,KAAA;AACtB,MAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAW,EAAAC,SAAA,CAAK,YAAa,CAAA,MAAM,CAAG,EAAA;AAAA,UACpC,CAAC,YAAa,CAAA,KAAK,CAAI,GAAAC,iBAAA,CAAY,KAAK,IAAI,CAAA;AAAA,SAC7C,CAAA;AAAA,QACD,OAAO,UAAW,CAAA,CAAA,CAAA;AAAA,OAAA,EAJb,OAAO,CAKd,CAAA,CAAA,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/lab/src/spinner/Spinner.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var index = require('./svgSpinners/index.js');
 require('./Spinner.css.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const SpinnerSizeValues = ["small", "medium", "large"];
 const baseName = "saltSvgSpinner";
 const Spinner = React.forwardRef(
@@ -64,7 +60,7 @@ const Spinner = React.forwardRef(
     ]);
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
       "aria-label": ariaLabel,
-      className: cx__default["default"](`${baseName}-${size}`, className, baseName),
+      className: clsx.clsx(`${baseName}-${size}`, className, baseName),
       ref,
       role,
       ...rest,

package/dist-cjs/packages/lab/src/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useAriaAnnouncer, useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { getSvgSpinner } from \"./svgSpinners\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small | medium | large\" />\n */\n\n// TODO: documentation -- add line about best practices:\n// - Improve accessibility by customizing the aria-label to provide additional context about *what* is loading, e.g. `aria-label=\"loading settings panel\"`.\n\nexport const SpinnerSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst baseName = \"saltSvgSpinner\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'small', 'medium', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProps,\n      ...rest\n    },\n    ref\n  ) {\n    const generatedId = useId(idProps);\n    const SvgSpinner = getSvgSpinner(size);\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        // announcerInterval > 0 &&\n        // above line was causing typescript type error that I didn't manage to sort out right away\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // the announcer will stop after 20s\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={cx(`${baseName}-${size}`, className, baseName)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SvgSpinner id={generatedId} />\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","Spinner","useId","getSvgSpinner","useAriaAnnouncer","useEffect","jsx","cx"],"mappings":";;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,EAAA;AAE5D,MAAM,QAAW,GAAA,gBAAA,CAAA;AAqCV,MAAM,OAAU,GAAAA,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,OAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,WAAA,GAAcC,WAAM,OAAO,CAAA,CAAA;AACjC,IAAM,MAAA,UAAA,GAAaC,oBAAc,IAAI,CAAA,CAAA;AAErC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,qBAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAM,MAAA,QAAA,GAGJ,YAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,sBAAG,CAAA,CAAA,EAAG,QAAY,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,EAAQ,WAAW,QAAQ,CAAA;AAAA,MACxD,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,UAAA,EAAA;AAAA,QAAW,EAAI,EAAA,WAAA;AAAA,OAAa,CAAA;AAAA,KAC/B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useAriaAnnouncer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { getSvgSpinner } from \"./svgSpinners\";\n\nimport \"./Spinner.css\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small | medium | large\" />\n */\n\n// TODO: documentation -- add line about best practices:\n// - Improve accessibility by customizing the aria-label to provide additional context about *what* is loading, e.g. `aria-label=\"loading settings panel\"`.\n\nexport const SpinnerSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport type SpinnerSize = typeof SpinnerSizeValues[number];\nconst baseName = \"saltSvgSpinner\";\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'small', 'medium', 'large'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProps,\n      ...rest\n    },\n    ref\n  ) {\n    const generatedId = useId(idProps);\n    const SvgSpinner = getSvgSpinner(size);\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        // announcerInterval > 0 &&\n        // above line was causing typescript type error that I didn't manage to sort out right away\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // the announcer will stop after 20s\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`\n            );\n            clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(`${baseName}-${size}`, className, baseName)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SvgSpinner id={generatedId} />\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","Spinner","useId","getSvgSpinner","useAriaAnnouncer","useEffect","jsx","clsx"],"mappings":";;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA,CAAC,OAAS,EAAA,QAAA,EAAU,OAAO,EAAA;AAE5D,MAAM,QAAW,GAAA,gBAAA,CAAA;AAqCV,MAAM,OAAU,GAAAA,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,yBAAyB,CAAY,SAAA,EAAA,SAAA,CAAA,CAAA;AAAA,IACrC,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,OAAA;AAAA,IACD,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,WAAA,GAAcC,WAAM,OAAO,CAAA,CAAA;AACjC,IAAM,MAAA,UAAA,GAAaC,oBAAc,IAAI,CAAA,CAAA;AAErC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,qBAAiB,EAAA,CAAA;AAEtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAI,IAAA,gBAAA;AAAkB,QAAA,OAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,CAAA;AAErC,MAAM,MAAA,QAAA,GAGJ,YAAY,MAAM;AAChB,QAAA,IAAI,IAAI,IAAK,EAAA,CAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,CAAG,EAAA,SAAA,CAAA,mDAAA,CAAA;AAAA,WACL,CAAA;AACA,UAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,UAAA,OAAA;AAAA,SACF;AACA,QAAA,QAAA,CAAS,SAAS,CAAA,CAAA;AAAA,SACjB,iBAAiB,CAAA,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAI,IAAA,gBAAA;AAAkB,UAAA,OAAA;AAEtB,QAAA,aAAA,CAAc,QAAQ,CAAA,CAAA;AACtB,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA,CAAA;AAAA,SACjC;AAAA,OACF,CAAA;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA,gBAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,WAAWC,SAAK,CAAA,CAAA,EAAG,QAAY,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,EAAQ,WAAW,QAAQ,CAAA;AAAA,MAC1D,GAAA;AAAA,MACA,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAAD,cAAA,CAAA,UAAA,EAAA;AAAA,QAAW,EAAI,EAAA,WAAA;AAAA,OAAa,CAAA;AAAA,KAC/B,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
-var cx = require('classnames');
+var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
@@ -13,10 +13,6 @@ var useStepperInput = require('./useStepperInput.js');
 require('./StepperInput.css.js');
 var useActivationIndicatorPosition = require('./internal/useActivationIndicatorPosition.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
-
 const withBaseName = core.makePrefixer("saltStepperInput");
 const StepperInput = React.forwardRef(
   function StepperInput2(props, ref) {
@@ -51,7 +47,7 @@ const StepperInput = React.forwardRef(
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
           "aria-label": "Refresh default value",
-          className: cx__default["default"](withBaseName("secondaryButton"), {
+          className: clsx.clsx(withBaseName("secondaryButton"), {
             [withBaseName("hideSecondaryButton")]: !(showRefreshButton || valuesHaveDiverged())
           }),
           onClick: refreshCurrentValue,
@@ -64,7 +60,7 @@ const StepperInput = React.forwardRef(
           className: withBaseName("buttonContainer"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-              className: cx__default["default"](
+              className: clsx.clsx(
                 withBaseName("stepperButton"),
                 withBaseName("increment"),
                 {
@@ -79,7 +75,7 @@ const StepperInput = React.forwardRef(
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-              className: cx__default["default"](
+              className: clsx.clsx(
                 withBaseName("stepperButton"),
                 withBaseName("decrement"),
                 {
@@ -98,7 +94,7 @@ const StepperInput = React.forwardRef(
       ]
     });
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: cx__default["default"](withBaseName(), className),
+      className: clsx.clsx(withBaseName(), className),
       onBlur: props.onBlur,
       onFocus: props.onFocus,
       ref,

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { Input, InputProps } from \"../input\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport \"./StepperInput.css\";\n\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={classnames(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={classnames(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useRef","useStepperInput","useActivationIndicatorPosition","jsxs","jsx","Button","classnames","RefreshIcon","TriangleUpIcon","TriangleDownIcon","Input"],"mappings":"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"}
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { Input, InputProps } from \"../input\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport \"./StepperInput.css\";\n\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={clsx(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useRef","useStepperInput","useActivationIndicatorPosition","jsxs","jsx","Button","clsx","RefreshIcon","TriangleUpIcon","TriangleDownIcon","Input"],"mappings":"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"}