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

package/dist-cjs/packages/lab/src/tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useRef, MouseEvent } from \"react\";\nimport {\n  closestListItemIndex,\n  ListHandlers,\n  SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useViewportTracking,\n} from \"../common-hooks\";\nimport { ListControlProps } from \"../list/listTypes\";\nimport { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n  collectionHook,\n  containerRef,\n  contentRef = containerRef,\n  defaultSelected,\n  disabled,\n  groupSelection,\n  onSelect,\n  onSelectionChange,\n  onToggle,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n  const lastSelection = useRef(selectedProp || defaultSelected);\n\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIdx: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigation<Item, Selection>({\n      containerRef,\n      indexPositions: collectionHook.data,\n      onHighlight: onHighlightProp,\n      onKeyboardNavigation: handleKeyboardNavigation,\n      selected: lastSelection.current,\n    });\n\n  const collapsibleHook = useCollapsibleGroups<Item>({\n    collapsibleHeaders: true,\n    collectionHook,\n    highlightedIdx,\n    onToggle,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    // groupSelection,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n    onSelect,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy: selectionStrategy,\n  });\n\n  const treeNavigationHook = useTreeNavigation<Item>({\n    collectionHook,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n  });\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      collapsibleHook?.onClick?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.onClick,\n      collapsibleHook.onKeyDown,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ]\n  );\n\n  // This is only appropriate whan we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling, scrollIntoView } = useViewportTracking({\n    containerRef,\n    contentRef,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n  });\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling.current && !disabled) {\n        keyboardHook.listProps.onMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== undefined && idx !== highlightedIdx) {\n          const item = collectionHook.data[idx];\n          if (item.disabled) {\n            keyboardHook.setHighlightedIndex(-1);\n          } else {\n            keyboardHook.setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      disabled,\n      keyboardHook.setHighlightedIndex,\n      highlightedIdx,\n      isScrolling,\n    ]\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : collectionHook.data[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = /*listHandlersProp || */ {\n    onClick: handleClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    setSelected: selectionHook.setSelected,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useCollapsibleGroups","useSelection","useTreeNavigation","useCallback","useViewportTracking","closestListItemIndex"],"mappings":"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"}
+{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import { KeyboardEvent, useCallback, useRef, MouseEvent } from \"react\";\nimport {\n  closestListItemIndex,\n  ListHandlers,\n  SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useViewportTracking,\n} from \"../common-hooks\";\nimport { ListControlProps } from \"../list/listTypes\";\nimport { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n  collectionHook,\n  containerRef,\n  contentRef = containerRef,\n  defaultSelected,\n  disabled,\n  groupSelection,\n  onSelect,\n  onSelectionChange,\n  onToggle,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n  const lastSelection = useRef(selectedProp || defaultSelected);\n\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIdx: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigation<Item, Selection>({\n      containerRef,\n      indexPositions: collectionHook.data,\n      onHighlight: onHighlightProp,\n      onKeyboardNavigation: handleKeyboardNavigation,\n      selected: lastSelection.current,\n    });\n\n  const collapsibleHook = useCollapsibleGroups<Item>({\n    collapsibleHeaders: true,\n    collectionHook,\n    highlightedIdx,\n    onToggle,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    // groupSelection,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n    onSelect,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy: selectionStrategy,\n  });\n\n  const treeNavigationHook = useTreeNavigation<Item>({\n    collectionHook,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n  });\n\n  const handleClick = useCallback(\n    (evt: MouseEvent) => {\n      collapsibleHook?.onClick?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.onClick,\n      collapsibleHook.onKeyDown,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ]\n  );\n\n  // This is only appropriate whan we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling, scrollIntoView } = useViewportTracking({\n    containerRef,\n    contentRef,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n  });\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling.current && !disabled) {\n        keyboardHook.listProps.onMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== undefined && idx !== highlightedIdx) {\n          const item = collectionHook.data[idx];\n          if (item.disabled) {\n            keyboardHook.setHighlightedIndex(-1);\n          } else {\n            keyboardHook.setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      disabled,\n      keyboardHook.setHighlightedIndex,\n      highlightedIdx,\n      isScrolling,\n    ]\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : collectionHook.data[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = /*listHandlersProp || */ {\n    onClick: handleClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    setSelected: selectionHook.setSelected,\n  };\n};\n"],"names":["useRef","useKeyboardNavigation","useCollapsibleGroups","useSelection","useTreeNavigation","useCallback","useViewportTracking","closestListItemIndex"],"mappings":"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"}

package/dist-cjs/packages/lab/src/utils/useFloatingUI.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@floating-ui/react');
+
+const DEFAULT_FLOATING_UI_MIDDLEWARE = [
+  react.flip(),
+  react.shift({ limiter: react.limitShift() })
+];
+function useFloatingUI(props) {
+  const {
+    placement,
+    strategy,
+    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,
+    open = false,
+    onOpenChange
+  } = props;
+  const { reference, floating, refs, update, ...rest } = react.useFloating({
+    placement,
+    strategy,
+    middleware,
+    open,
+    onOpenChange,
+    whileElementsMounted: react.autoUpdate
+  });
+  return {
+    reference,
+    floating,
+    refs,
+    update,
+    ...rest
+  };
+}
+
+exports.DEFAULT_FLOATING_UI_MIDDLEWARE = DEFAULT_FLOATING_UI_MIDDLEWARE;
+exports.useFloatingUI = useFloatingUI;
+//# sourceMappingURL=useFloatingUI.js.map

package/dist-cjs/packages/lab/src/utils/useFloatingUI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI.tsx"],"sourcesContent":["import type { Middleware, Placement, Strategy } from \"@floating-ui/react\";\nimport {\n  autoUpdate,\n  flip,\n  limitShift,\n  shift,\n  useFloating,\n} from \"@floating-ui/react\";\n\nexport type UseFloatingUIProps = {\n  /**\n   * Set position relative to trigger\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  middleware?: Middleware[];\n  /**\n   * Set visible state. Defaults to false\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware,\n    open,\n    onOpenChange,\n    whileElementsMounted: autoUpdate,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["flip","shift","limitShift","useFloating","autoUpdate"],"mappings":";;;;;;AA0BO,MAAM,8BAAiC,GAAA;AAAA,EAC5CA,UAAK,EAAA;AAAA,EACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AACjC,EAAA;AAEO,SAAS,cACd,KACgC,EAAA;AAChC,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAa,GAAA,8BAAA;AAAA,IACb,IAAO,GAAA,KAAA;AAAA,IACP,YAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,MAAM,MAAW,EAAA,GAAA,IAAA,KAASC,iBAAY,CAAA;AAAA,IACjE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAsB,EAAAC,gBAAA;AAAA,GACvB,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG,IAAA;AAAA,GACL,CAAA;AACF;;;;;"}

package/dist-cjs/packages/lab/src/utils/useIsViewportLargerThanBreakpoint.js

@@ -9,8 +9,7 @@ const useIsViewportLargerThanBreakpoint = (targetedBreakpoint) => {
   const index = orderedBreakpoints.indexOf(targetedBreakpoint);
   const allPreviousBreakpoints = orderedBreakpoints.slice(0, index + 1);
   const currentBreakpoint = core.useCurrentBreakpoint();
-  const view = allPreviousBreakpoints.includes(currentBreakpoint);
-  return view;
+  return allPreviousBreakpoints.includes(currentBreakpoint);
 };
 
 exports.useIsViewportLargerThanBreakpoint = useIsViewportLargerThanBreakpoint;

package/dist-cjs/packages/lab/src/utils/useIsViewportLargerThanBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n  Breakpoints,\n  useCurrentBreakpoint,\n  useOrderedBreakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n  targetedBreakpoint: keyof Breakpoints\n): boolean => {\n  const orderedBreakpoints = useOrderedBreakpoints();\n\n  const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n  const allPreviousBreakpoints = orderedBreakpoints.slice(0, index + 1);\n\n  const currentBreakpoint = useCurrentBreakpoint();\n\n  const view = allPreviousBreakpoints.includes(currentBreakpoint);\n\n  return view;\n};\n"],"names":["useOrderedBreakpoints","useCurrentBreakpoint"],"mappings":";;;;;;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqBA,0BAAsB,EAAA,CAAA;AAEjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,sBAAyB,GAAA,kBAAA,CAAmB,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAC,CAAA,CAAA;AAEpE,EAAA,MAAM,oBAAoBC,yBAAqB,EAAA,CAAA;AAE/C,EAAM,MAAA,IAAA,GAAO,sBAAuB,CAAA,QAAA,CAAS,iBAAiB,CAAA,CAAA;AAE9D,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useIsViewportLargerThanBreakpoint.js","sources":["../src/utils/useIsViewportLargerThanBreakpoint.ts"],"sourcesContent":["import {\n  Breakpoints,\n  useCurrentBreakpoint,\n  useOrderedBreakpoints,\n} from \"@salt-ds/core\";\n\nexport const useIsViewportLargerThanBreakpoint = (\n  targetedBreakpoint: keyof Breakpoints\n): boolean => {\n  const orderedBreakpoints = useOrderedBreakpoints();\n  const index = orderedBreakpoints.indexOf(targetedBreakpoint);\n  const allPreviousBreakpoints = orderedBreakpoints.slice(0, index + 1);\n\n  const currentBreakpoint = useCurrentBreakpoint();\n  return allPreviousBreakpoints.includes(currentBreakpoint);\n};\n"],"names":["useOrderedBreakpoints","useCurrentBreakpoint"],"mappings":";;;;;;AAMa,MAAA,iCAAA,GAAoC,CAC/C,kBACY,KAAA;AACZ,EAAA,MAAM,qBAAqBA,0BAAsB,EAAA,CAAA;AACjD,EAAM,MAAA,KAAA,GAAQ,kBAAmB,CAAA,OAAA,CAAQ,kBAAkB,CAAA,CAAA;AAC3D,EAAA,MAAM,sBAAyB,GAAA,kBAAA,CAAmB,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAC,CAAA,CAAA;AAEpE,EAAA,MAAM,oBAAoBC,yBAAqB,EAAA,CAAA;AAC/C,EAAO,OAAA,sBAAA,CAAuB,SAAS,iBAAiB,CAAA,CAAA;AAC1D;;;;"}

package/dist-es/packages/lab/src/accordion/Accordion.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useCallback, useEffect, useMemo } from 'react';
 import { makePrefixer, useControlled } from '@salt-ds/core';
 import './Accordion.css.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { AccordionContext } from './AccordionContext.js';
 
 const withBaseName = makePrefixer("saltAccordion");
@@ -110,7 +110,7 @@ const Accordion = forwardRef(
       };
     }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);
     return /* @__PURE__ */ jsx("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ...restProps,
       ref,
       children: /* @__PURE__ */ jsx(AccordionContext.Provider, {

package/dist-es/packages/lab/src/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport \"./Accordion.css\";\nimport cn from \"classnames\";\nimport { AccordionContext } from \"./AccordionContext\";\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport interface AccordionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  maxExpandedItems?: number;\n  expandedSectionIds?: string[];\n  defaultExpandedSectionIds?: string[];\n  // expandedSectionIds in the order they were expanded.\n  // The oldest expanded item is the first in this list.\n  // When maxExpandedItems is reached, the first item in this list is the first to be collapsed\n  onChange?: (expandedSectionIds: string[] | null) => void;\n}\n\nfunction sliceToSize<T>(items?: T[], size?: number) {\n  if (size !== undefined) {\n    const cutOffCount = items ? items.length - size : 0;\n    if (cutOffCount > 0) {\n      items = items!.slice(cutOffCount);\n    }\n  }\n  return items;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(\n    {\n      disabled = false,\n      expandedSectionIds: expandedSectionIdsProp,\n      defaultExpandedSectionIds = [],\n      maxExpandedItems,\n      onChange: onChangeProp,\n      className,\n      children,\n      ...restProps\n    },\n    ref\n  ) {\n    const [sectionIds, setSectionIds] = useState<Set<string>>(new Set());\n\n    const [expandedSectionIds, setExpandedSectionIds] = useControlled<string[]>(\n      {\n        controlled: expandedSectionIdsProp,\n        default: defaultExpandedSectionIds,\n        name: \"Accordion\",\n        state: \"ExpandedSectionIds\",\n      }\n    );\n\n    const registerSection = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        setSectionIds((sectionIds) => {\n          const newSectionIds = new Set(sectionIds);\n          newSectionIds.add(sectionId);\n          return newSectionIds;\n        });\n        if (isExpanded) {\n          setExpandedSectionIds((oldExpandedSectionIds) => {\n            const newExpandedSectionIds = [...oldExpandedSectionIds];\n            newExpandedSectionIds.push(sectionId);\n            return newExpandedSectionIds;\n          });\n        }\n      },\n      []\n    );\n\n    const unregisterSection = useCallback((sectionId: string) => {\n      if (expandedSectionIds.includes(sectionId)) {\n        setExpandedSectionIds((oldValue) =>\n          oldValue.filter((id) => id !== sectionId)\n        );\n      }\n      setSectionIds((sectionIds) => {\n        const newSectionIds = new Set(sectionIds);\n        newSectionIds.delete(sectionId);\n        return newSectionIds;\n      });\n    }, []);\n\n    useEffect(() => {\n      if (\n        expandedSectionIds &&\n        maxExpandedItems !== undefined &&\n        expandedSectionIds.length > maxExpandedItems\n      ) {\n        const newExpandedSectionIds = sliceToSize(\n          expandedSectionIds,\n          maxExpandedItems\n        );\n        setExpandedSectionIds(newExpandedSectionIds || []);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds || null);\n        }\n      }\n    }, [maxExpandedItems]);\n\n    const onChange = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        let newExpandedSectionIds = [...expandedSectionIds];\n        if (isExpanded) {\n          newExpandedSectionIds.push(sectionId);\n          if (\n            maxExpandedItems != null &&\n            newExpandedSectionIds.length > maxExpandedItems\n          ) {\n            newExpandedSectionIds.shift();\n          }\n        } else {\n          newExpandedSectionIds = newExpandedSectionIds.filter(\n            (id) => id !== sectionId\n          );\n        }\n        setExpandedSectionIds(newExpandedSectionIds);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds);\n        }\n      },\n      [expandedSectionIds, onChangeProp]\n    );\n\n    const isExpanded = useCallback(\n      (sectionId: string) => expandedSectionIds.includes(sectionId),\n      [expandedSectionIds]\n    );\n\n    const contextValue: AccordionContext = useMemo(() => {\n      return {\n        registerSection,\n        unregisterSection,\n        onChange,\n        isExpanded,\n        disabled,\n      };\n    }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);\n\n    return (\n      <div className={cn(withBaseName(), className)} {...restProps} ref={ref}>\n        <AccordionContext.Provider value={contextValue}>\n          {children}\n        </AccordionContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["Accordion","isExpanded","sectionIds","cn"],"mappings":"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"}
+{"version":3,"file":"Accordion.js","sources":["../src/accordion/Accordion.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport \"./Accordion.css\";\nimport { clsx } from \"clsx\";\nimport { AccordionContext } from \"./AccordionContext\";\n\nconst withBaseName = makePrefixer(\"saltAccordion\");\n\nexport interface AccordionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  maxExpandedItems?: number;\n  expandedSectionIds?: string[];\n  defaultExpandedSectionIds?: string[];\n  // expandedSectionIds in the order they were expanded.\n  // The oldest expanded item is the first in this list.\n  // When maxExpandedItems is reached, the first item in this list is the first to be collapsed\n  onChange?: (expandedSectionIds: string[] | null) => void;\n}\n\nfunction sliceToSize<T>(items?: T[], size?: number) {\n  if (size !== undefined) {\n    const cutOffCount = items ? items.length - size : 0;\n    if (cutOffCount > 0) {\n      items = items!.slice(cutOffCount);\n    }\n  }\n  return items;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  function Accordion(\n    {\n      disabled = false,\n      expandedSectionIds: expandedSectionIdsProp,\n      defaultExpandedSectionIds = [],\n      maxExpandedItems,\n      onChange: onChangeProp,\n      className,\n      children,\n      ...restProps\n    },\n    ref\n  ) {\n    const [sectionIds, setSectionIds] = useState<Set<string>>(new Set());\n\n    const [expandedSectionIds, setExpandedSectionIds] = useControlled<string[]>(\n      {\n        controlled: expandedSectionIdsProp,\n        default: defaultExpandedSectionIds,\n        name: \"Accordion\",\n        state: \"ExpandedSectionIds\",\n      }\n    );\n\n    const registerSection = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        setSectionIds((sectionIds) => {\n          const newSectionIds = new Set(sectionIds);\n          newSectionIds.add(sectionId);\n          return newSectionIds;\n        });\n        if (isExpanded) {\n          setExpandedSectionIds((oldExpandedSectionIds) => {\n            const newExpandedSectionIds = [...oldExpandedSectionIds];\n            newExpandedSectionIds.push(sectionId);\n            return newExpandedSectionIds;\n          });\n        }\n      },\n      []\n    );\n\n    const unregisterSection = useCallback((sectionId: string) => {\n      if (expandedSectionIds.includes(sectionId)) {\n        setExpandedSectionIds((oldValue) =>\n          oldValue.filter((id) => id !== sectionId)\n        );\n      }\n      setSectionIds((sectionIds) => {\n        const newSectionIds = new Set(sectionIds);\n        newSectionIds.delete(sectionId);\n        return newSectionIds;\n      });\n    }, []);\n\n    useEffect(() => {\n      if (\n        expandedSectionIds &&\n        maxExpandedItems !== undefined &&\n        expandedSectionIds.length > maxExpandedItems\n      ) {\n        const newExpandedSectionIds = sliceToSize(\n          expandedSectionIds,\n          maxExpandedItems\n        );\n        setExpandedSectionIds(newExpandedSectionIds || []);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds || null);\n        }\n      }\n    }, [maxExpandedItems]);\n\n    const onChange = useCallback(\n      (sectionId: string, isExpanded: boolean) => {\n        let newExpandedSectionIds = [...expandedSectionIds];\n        if (isExpanded) {\n          newExpandedSectionIds.push(sectionId);\n          if (\n            maxExpandedItems != null &&\n            newExpandedSectionIds.length > maxExpandedItems\n          ) {\n            newExpandedSectionIds.shift();\n          }\n        } else {\n          newExpandedSectionIds = newExpandedSectionIds.filter(\n            (id) => id !== sectionId\n          );\n        }\n        setExpandedSectionIds(newExpandedSectionIds);\n        if (onChangeProp) {\n          onChangeProp(newExpandedSectionIds);\n        }\n      },\n      [expandedSectionIds, onChangeProp]\n    );\n\n    const isExpanded = useCallback(\n      (sectionId: string) => expandedSectionIds.includes(sectionId),\n      [expandedSectionIds]\n    );\n\n    const contextValue: AccordionContext = useMemo(() => {\n      return {\n        registerSection,\n        unregisterSection,\n        onChange,\n        isExpanded,\n        disabled,\n      };\n    }, [registerSection, unregisterSection, onChange, isExpanded, disabled]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n        <AccordionContext.Provider value={contextValue}>\n          {children}\n        </AccordionContext.Provider>\n      </div>\n    );\n  }\n);\n"],"names":["Accordion","isExpanded","sectionIds"],"mappings":"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"}

package/dist-es/packages/lab/src/accordion/AccordionDetails.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useState } from 'react';
 import { useAccordionSectionContext } from './AccordionSectionContext.js';
 import './Accordion.css.js';
@@ -51,7 +51,7 @@ const AccordionDetails = forwardRef(function AccordionDetails2({ children, class
   return /* @__PURE__ */ jsx("div", {
     ...restProps,
     ref: forkedRef,
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: isDisabled
@@ -60,7 +60,7 @@ const AccordionDetails = forwardRef(function AccordionDetails2({ children, class
     ),
     children: /* @__PURE__ */ jsx("div", {
       ref: contentRef,
-      className: cx({
+      className: clsx({
         [withBaseName("dummy")]: state === "measuring"
       }),
       children: preventUnmountOnCollapse || state !== "collapsed" ? /* @__PURE__ */ jsx("div", {

package/dist-es/packages/lab/src/accordion/AccordionDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render children even if the component is collapsed. Prevents unmounting of children components.\n   * */\n  preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n//   the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n//   the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n//   (auto has to be replaced by a number, then the component has to be rendered, then the value can\n//    be set to 0)\ntype State =\n  | \"collapsed\"\n  | \"measuring\"\n  | \"expanding\"\n  | \"expanded\"\n  | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n  HTMLDivElement,\n  AccordionDetailsProps\n>(function AccordionDetails(\n  { children, className, preventUnmountOnCollapse, ...restProps },\n  ref\n) {\n  const { isDisabled, isExpanded } = useAccordionSectionContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, rootRef);\n\n  const [state, setState] = useState<State>(\n    isExpanded ? \"expanded\" : \"collapsed\"\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    if (isExpanded) {\n      if (state === \"collapsed\") {\n        setState(\"measuring\");\n      } else if (state === \"measuring\") {\n        rootRef.current.style.height = `${\n          contentRef.current!.getBoundingClientRect().height\n        }px`;\n        setState(\"expanding\");\n      } else if (state === \"expanding\") {\n        setTimeout(() => {\n          setState(\"expanded\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"expanded\") {\n        rootRef.current.style.height = \"auto\";\n      }\n    } else {\n      if (state === \"expanded\") {\n        rootRef.current.style.height = `${\n          rootRef.current.getBoundingClientRect().height\n        }px`;\n        setTimeout(() => {\n          setState(\"collapsing\");\n        }, 0);\n      } else if (state === \"collapsing\") {\n        rootRef.current.style.height = \"0\";\n        setTimeout(() => {\n          setState(\"collapsed\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"collapsed\") {\n        rootRef.current.style.height = \"0\";\n      }\n    }\n  }, [isExpanded, state]);\n\n  return (\n    <div\n      {...restProps}\n      ref={forkedRef}\n      className={cn(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n        },\n        className\n      )}\n    >\n      <div\n        ref={contentRef}\n        className={cn({\n          [withBaseName(\"dummy\")]: state === \"measuring\",\n        })}\n      >\n        {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n          <div className={withBaseName(\"content\")}>{children}</div>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"names":["AccordionDetails","cn"],"mappings":"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"}
+{"version":3,"file":"AccordionDetails.js","sources":["../src/accordion/AccordionDetails.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useRef, useState } from \"react\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\n\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionDetails\");\n\nexport interface AccordionDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Render children even if the component is collapsed. Prevents unmounting of children components.\n   * */\n  preventUnmountOnCollapse?: boolean;\n}\n\nconst msCollapseAnimationDuration = 150;\n\n// Collapsed - the section is completely collapsed, don't render anything, height is 0\n// Measuring - the section is about to expand, rendering a dummy preview to measure\n//   the height of expanded section\n// Expanding - the section is expanding but hasn't yet expanded to full size. height is set to\n//   the value measured in the previous step\n// Expanded - the section is expanded, need to render the content, height is set to auto\n// Collapsing - the section is about to start collapsing, the height is set to current height\n//   (auto has to be replaced by a number, then the component has to be rendered, then the value can\n//    be set to 0)\ntype State =\n  | \"collapsed\"\n  | \"measuring\"\n  | \"expanding\"\n  | \"expanded\"\n  | \"collapsing\";\n\nexport const AccordionDetails = forwardRef<\n  HTMLDivElement,\n  AccordionDetailsProps\n>(function AccordionDetails(\n  { children, className, preventUnmountOnCollapse, ...restProps },\n  ref\n) {\n  const { isDisabled, isExpanded } = useAccordionSectionContext();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, rootRef);\n\n  const [state, setState] = useState<State>(\n    isExpanded ? \"expanded\" : \"collapsed\"\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!rootRef.current) {\n      return;\n    }\n    if (isExpanded) {\n      if (state === \"collapsed\") {\n        setState(\"measuring\");\n      } else if (state === \"measuring\") {\n        rootRef.current.style.height = `${\n          contentRef.current!.getBoundingClientRect().height\n        }px`;\n        setState(\"expanding\");\n      } else if (state === \"expanding\") {\n        setTimeout(() => {\n          setState(\"expanded\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"expanded\") {\n        rootRef.current.style.height = \"auto\";\n      }\n    } else {\n      if (state === \"expanded\") {\n        rootRef.current.style.height = `${\n          rootRef.current.getBoundingClientRect().height\n        }px`;\n        setTimeout(() => {\n          setState(\"collapsing\");\n        }, 0);\n      } else if (state === \"collapsing\") {\n        rootRef.current.style.height = \"0\";\n        setTimeout(() => {\n          setState(\"collapsed\");\n        }, msCollapseAnimationDuration);\n      } else if (state === \"collapsed\") {\n        rootRef.current.style.height = \"0\";\n      }\n    }\n  }, [isExpanded, state]);\n\n  return (\n    <div\n      {...restProps}\n      ref={forkedRef}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n        },\n        className\n      )}\n    >\n      <div\n        ref={contentRef}\n        className={clsx({\n          [withBaseName(\"dummy\")]: state === \"measuring\",\n        })}\n      >\n        {preventUnmountOnCollapse || state !== \"collapsed\" ? (\n          <div className={withBaseName(\"content\")}>{children}</div>\n        ) : null}\n      </div>\n    </div>\n  );\n});\n"],"names":["AccordionDetails"],"mappings":"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"}

package/dist-es/packages/lab/src/accordion/AccordionSection.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { makePrefixer } from '@salt-ds/core';
+import '../utils/useFloatingUI.js';
 import { useLayoutEffectSkipFirst } from '../utils/useLayoutEffectSkipFirst.js';
 import { AccordionSectionContext } from './AccordionSectionContext.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './Accordion.css.js';
 import { useAccordionContext } from './AccordionContext.js';
 import { isNotProduction } from './utils.js';
@@ -78,7 +79,7 @@ const AccordionSection = forwardRef(function Accordion({
   }, [expanded, disabled, onToggle]);
   return /* @__PURE__ */ jsx("div", {
     ...restProps,
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("expanded")]: expanded,

package/dist-es/packages/lab/src/accordion/AccordionSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSection.js","sources":["../src/accordion/AccordionSection.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useLayoutEffectSkipFirst } from \"../utils\";\nimport { AccordionSectionContext } from \"./AccordionSectionContext\";\nimport cn from \"classnames\";\nimport \"./Accordion.css\";\nimport { useAccordionContext } from \"./AccordionContext\";\nimport { isNotProduction } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSection\");\n\nexport interface AccordionSectionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultExpanded?: boolean;\n  disabled?: boolean;\n  expanded?: boolean;\n  onChange?: (isExpanded: boolean) => void;\n  className?: string;\n}\n\nexport const AccordionSection = forwardRef<\n  HTMLDivElement,\n  AccordionSectionProps\n>(function Accordion(\n  {\n    id: idProp,\n    disabled: disabledProp,\n    onChange: onChangeProp,\n    defaultExpanded: defaultExpandedProp,\n    expanded: expandedProp,\n    children,\n    className,\n    ...restProps\n  },\n  ref\n) {\n  const [id, setId] = useState(() =>\n    idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`\n  );\n\n  if (idProp != null && idProp != id) {\n    setId(idProp);\n  }\n\n  const {\n    registerSection,\n    unregisterSection,\n    onChange,\n    isExpanded,\n    disabled: accordionDisabled,\n  } = useAccordionContext();\n\n  const isControlled = expandedProp != null;\n  const expanded = isControlled ? expandedProp : isExpanded(id);\n  const disabled = disabledProp != null ? disabledProp : accordionDisabled;\n\n  useEffect(() => {\n    registerSection(\n      id,\n      expandedProp != null ? expandedProp : !!defaultExpandedProp\n    );\n    return () => {\n      unregisterSection(id);\n    };\n  }, [id, registerSection, unregisterSection]);\n\n  const onToggle = useCallback(() => {\n    const newExpanded = !expanded;\n    if (onChangeProp) {\n      onChangeProp(newExpanded);\n    }\n    if (!isControlled) {\n      onChange(id, newExpanded);\n    }\n  }, [id, expanded, onChangeProp, onChange, isControlled]);\n\n  useEffect(() => {\n    const isControlled = expandedProp != null;\n    if (isControlled) {\n      onChange(id, expandedProp);\n    }\n  }, [expandedProp, isControlled]);\n\n  useLayoutEffectSkipFirst(() => {\n    if (isNotProduction()) {\n      const mode = (isControlled: boolean) =>\n        isControlled ? \"controlled\" : \"uncontrolled\";\n      console.error(\n        `A component is changing from ${mode(!isControlled)} to ${mode(\n          isControlled\n        )} mode.`\n      );\n    }\n  }, [isControlled]);\n\n  const contextValue: AccordionSectionContext = useMemo(() => {\n    return {\n      isExpanded: expanded,\n      isDisabled: disabled,\n      onToggle,\n    };\n  }, [expanded, disabled, onToggle]);\n\n  return (\n    <div\n      {...restProps}\n      className={cn(\n        withBaseName(),\n        {\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n    >\n      <AccordionSectionContext.Provider value={contextValue}>\n        {children}\n      </AccordionSectionContext.Provider>\n    </div>\n  );\n});\n"],"names":["isControlled","cn"],"mappings":"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"}
+{"version":3,"file":"AccordionSection.js","sources":["../src/accordion/AccordionSection.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useLayoutEffectSkipFirst } from \"../utils\";\nimport { AccordionSectionContext } from \"./AccordionSectionContext\";\nimport { clsx } from \"clsx\";\nimport \"./Accordion.css\";\nimport { useAccordionContext } from \"./AccordionContext\";\nimport { isNotProduction } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSection\");\n\nexport interface AccordionSectionProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultExpanded?: boolean;\n  disabled?: boolean;\n  expanded?: boolean;\n  onChange?: (isExpanded: boolean) => void;\n  className?: string;\n}\n\nexport const AccordionSection = forwardRef<\n  HTMLDivElement,\n  AccordionSectionProps\n>(function Accordion(\n  {\n    id: idProp,\n    disabled: disabledProp,\n    onChange: onChangeProp,\n    defaultExpanded: defaultExpandedProp,\n    expanded: expandedProp,\n    children,\n    className,\n    ...restProps\n  },\n  ref\n) {\n  const [id, setId] = useState(() =>\n    idProp != null ? idProp : `salt-${Math.round(Math.random() * 1e5)}`\n  );\n\n  if (idProp != null && idProp != id) {\n    setId(idProp);\n  }\n\n  const {\n    registerSection,\n    unregisterSection,\n    onChange,\n    isExpanded,\n    disabled: accordionDisabled,\n  } = useAccordionContext();\n\n  const isControlled = expandedProp != null;\n  const expanded = isControlled ? expandedProp : isExpanded(id);\n  const disabled = disabledProp != null ? disabledProp : accordionDisabled;\n\n  useEffect(() => {\n    registerSection(\n      id,\n      expandedProp != null ? expandedProp : !!defaultExpandedProp\n    );\n    return () => {\n      unregisterSection(id);\n    };\n  }, [id, registerSection, unregisterSection]);\n\n  const onToggle = useCallback(() => {\n    const newExpanded = !expanded;\n    if (onChangeProp) {\n      onChangeProp(newExpanded);\n    }\n    if (!isControlled) {\n      onChange(id, newExpanded);\n    }\n  }, [id, expanded, onChangeProp, onChange, isControlled]);\n\n  useEffect(() => {\n    const isControlled = expandedProp != null;\n    if (isControlled) {\n      onChange(id, expandedProp);\n    }\n  }, [expandedProp, isControlled]);\n\n  useLayoutEffectSkipFirst(() => {\n    if (isNotProduction()) {\n      const mode = (isControlled: boolean) =>\n        isControlled ? \"controlled\" : \"uncontrolled\";\n      console.error(\n        `A component is changing from ${mode(!isControlled)} to ${mode(\n          isControlled\n        )} mode.`\n      );\n    }\n  }, [isControlled]);\n\n  const contextValue: AccordionSectionContext = useMemo(() => {\n    return {\n      isExpanded: expanded,\n      isDisabled: disabled,\n      onToggle,\n    };\n  }, [expanded, disabled, onToggle]);\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      ref={ref}\n    >\n      <AccordionSectionContext.Provider value={contextValue}>\n        {children}\n      </AccordionSectionContext.Provider>\n    </div>\n  );\n});\n"],"names":["isControlled"],"mappings":"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"}

package/dist-es/packages/lab/src/accordion/AccordionSummary.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useCallback } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { ChevronRightIcon } from '@salt-ds/icons';
 import { useAccordionSectionContext } from './AccordionSectionContext.js';
@@ -24,7 +24,7 @@ const AccordionSummary = forwardRef(function AccordionSummary2({ className, chil
   }
   return /* @__PURE__ */ jsxs("div", {
     ...restProps,
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: isDisabled,

package/dist-es/packages/lab/src/accordion/AccordionSummary.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionSummary.js","sources":["../src/accordion/AccordionSummary.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport cn from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSummary\");\n\nexport interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ReactNode;\n}\n\nexport const AccordionSummary = forwardRef<\n  HTMLDivElement,\n  AccordionSummaryProps\n>(function AccordionSummary({ className, children, icon, ...restProps }, ref) {\n  const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n    ({ key }) => {\n      if (key === \"Enter\" || key === \" \") {\n        onToggle();\n      }\n    },\n    [onToggle]\n  );\n\n  if (!icon) {\n    icon = <ChevronRightIcon aria-hidden />;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={cn(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"expanded\")]: isExpanded,\n        },\n        className\n      )}\n      ref={ref}\n      role=\"button\"\n      aria-expanded={isExpanded}\n      onClick={isDisabled ? undefined : onToggle}\n      onKeyDown={isDisabled ? undefined : onKeyDown}\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <div className={withBaseName(\"icon\")}>{icon}</div>\n      {children}\n    </div>\n  );\n});\n"],"names":["AccordionSummary","cn"],"mappings":";;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAM3C,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,WAAW,QAAU,EAAA,IAAA,EAAA,GAAS,SAAU,EAAA,EAAG,GAAK,EAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,QAAA,KAAa,0BAA2B,EAAA,CAAA;AAExE,EAAA,MAAM,SAAkD,GAAA,WAAA;AAAA,IACtD,CAAC,EAAE,GAAA,EAAU,KAAA;AACX,MAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA;AAAA,MAAiB,aAAW,EAAA,IAAA;AAAA,KAAC,CAAA,CAAA;AAAA,GACvC;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAAC,EAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,eAAe,EAAA,UAAA;AAAA,IACf,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,QAAA;AAAA,IAClC,SAAA,EAAW,aAAa,KAAY,CAAA,GAAA,SAAA;AAAA,IACpC,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,IAE5B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAI,QAAA,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"AccordionSummary.js","sources":["../src/accordion/AccordionSummary.tsx"],"sourcesContent":["import {\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { useAccordionSectionContext } from \"./AccordionSectionContext\";\nimport \"./Accordion.css\";\n\nconst withBaseName = makePrefixer(\"saltAccordionSummary\");\n\nexport interface AccordionSummaryProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ReactNode;\n}\n\nexport const AccordionSummary = forwardRef<\n  HTMLDivElement,\n  AccordionSummaryProps\n>(function AccordionSummary({ className, children, icon, ...restProps }, ref) {\n  const { isDisabled, isExpanded, onToggle } = useAccordionSectionContext();\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(\n    ({ key }) => {\n      if (key === \"Enter\" || key === \" \") {\n        onToggle();\n      }\n    },\n    [onToggle]\n  );\n\n  if (!icon) {\n    icon = <ChevronRightIcon aria-hidden />;\n  }\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"expanded\")]: isExpanded,\n        },\n        className\n      )}\n      ref={ref}\n      role=\"button\"\n      aria-expanded={isExpanded}\n      onClick={isDisabled ? undefined : onToggle}\n      onKeyDown={isDisabled ? undefined : onKeyDown}\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <div className={withBaseName(\"icon\")}>{icon}</div>\n      {children}\n    </div>\n  );\n});\n"],"names":["AccordionSummary"],"mappings":";;;;;;;;AAaA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAM3C,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBAAiB,CAAA,EAAE,WAAW,QAAU,EAAA,IAAA,EAAA,GAAS,SAAU,EAAA,EAAG,GAAK,EAAA;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,QAAA,KAAa,0BAA2B,EAAA,CAAA;AAExE,EAAA,MAAM,SAAkD,GAAA,WAAA;AAAA,IACtD,CAAC,EAAE,GAAA,EAAU,KAAA;AACX,MAAI,IAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,KAAQ,GAAK,EAAA;AAClC,QAAS,QAAA,EAAA,CAAA;AAAA,OACX;AAAA,KACF;AAAA,IACA,CAAC,QAAQ,CAAA;AAAA,GACX,CAAA;AAEA,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,IAAA,mBAAQ,GAAA,CAAA,gBAAA,EAAA;AAAA,MAAiB,aAAW,EAAA,IAAA;AAAA,KAAC,CAAA,CAAA;AAAA,GACvC;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,UAAA;AAAA,OAC9B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACA,GAAA;AAAA,IACA,IAAK,EAAA,QAAA;AAAA,IACL,eAAe,EAAA,UAAA;AAAA,IACf,OAAA,EAAS,aAAa,KAAY,CAAA,GAAA,QAAA;AAAA,IAClC,SAAA,EAAW,aAAa,KAAY,CAAA,GAAA,SAAA;AAAA,IACpC,QAAA,EAAU,aAAa,CAAK,CAAA,GAAA,CAAA;AAAA,IAE5B,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAAI,QAAA,EAAA,IAAA;AAAA,OAAK,CAAA;AAAA,MAC3C,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/app-header/AppHeader.js

@@ -1,9 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { Toolbar } from '../toolbar/Toolbar.js';
 import { makePrefixer } from '@salt-ds/core';
 import { forwardRef } from 'react';
 import '../toolbar/overflow-panel/OverflowPanel.js';
+import '../utils/useFloatingUI.js';
 import '../responsive/useResizeObserver.js';
 import '../toolbar/toolbar-field/ToolbarField.js';
 import '../toolbar/Tooltray.css.js';
@@ -15,7 +16,7 @@ const withBaseName = makePrefixer("saltAppHeader");
 const AppHeader = forwardRef(
   ({ children, className, ...rest }, ref) => {
     return /* @__PURE__ */ jsx(Toolbar, {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       overflowButtonIcon: /* @__PURE__ */ jsx(MenuIcon, {}),
       children

package/dist-es/packages/lab/src/app-header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport { Toolbar } from \"../toolbar\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\n\nimport \"./AppHeader.css\";\nimport { forwardRef, HTMLAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={cx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={cx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAQ,KAAA;AAMzC,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACvC,GAAA;AAAA,MACA,kBAAA,sBAAqB,QAAS,EAAA,EAAA,CAAA;AAAA,MAG7B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAcJ;AACF;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Toolbar } from \"../toolbar\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\n\nimport \"./AppHeader.css\";\nimport { forwardRef, HTMLAttributes } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  ({ children, className, ...rest }, ref) => {\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAQ,KAAA;AAMzC,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACA,kBAAA,sBAAqB,QAAS,EAAA,EAAA,CAAA;AAAA,MAG7B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAcJ;AACF;;;;"}

package/dist-es/packages/lab/src/avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { classBase } from './internal/constants.js';
 import { DefaultAvatar } from './internal/DefaultAvatar.js';
@@ -48,7 +48,7 @@ const Avatar = forwardRef(function Avatar2({
   }
   return /* @__PURE__ */ jsx("div", {
     ref,
-    className: cx(withBaseName(), withBaseName(size), className),
+    className: clsx(withBaseName(), withBaseName(size), className),
     ...rest,
     children
   });

package/dist-es/packages/lab/src/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport { classBase } from \"./internal/constants\";\nimport { DefaultAvatar } from \"./internal/DefaultAvatar\";\nimport { useLoaded } from \"./internal/useLoaded\";\n\nimport \"./Avatar.css\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  id?: string;\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  size?: \"small\" | \"medium\" | \"large\";\n  sizes?: string;\n  src?: string;\n  srcSet?: string;\n  title?: string;\n}\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    alt = \"\",\n    className,\n    children: childrenProp,\n    id: idProp,\n    size = \"medium\",\n    src,\n    srcSet,\n    title = \"user\",\n    imgProps,\n    sizes,\n    ...rest\n  },\n  ref\n) {\n  let children;\n  const id = useId(idProp);\n\n  const loaded = useLoaded({ ...imgProps, src, srcSet });\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && loaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        className={withBaseName(\"image\")}\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    children = alt[0];\n  } else {\n    children = <DefaultAvatar id={id} title={title} {...rest} />;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(withBaseName(), withBaseName(size), className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Avatar","cn"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAE9B,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,EAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AACJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,SAAS,SAAU,CAAA,EAAE,GAAG,QAAU,EAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AACrD,EAAA,MAAM,SAAS,GAAO,IAAA,MAAA,CAAA;AACtB,EAAM,MAAA,gBAAA,GAAmB,UAAU,MAAW,KAAA,OAAA,CAAA;AAE9C,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb,MAAA,IAAW,UAAU,GAAK,EAAA;AACxB,IAAA,QAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,GACV,MAAA;AACL,IAAA,QAAA,mBAAY,GAAA,CAAA,aAAA,EAAA;AAAA,MAAc,EAAA;AAAA,MAAQ,KAAA;AAAA,MAAe,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAWC,EAAG,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,IAC1D,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Avatar.js","sources":["../src/avatar/Avatar.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, ImgHTMLAttributes } from \"react\";\nimport { classBase } from \"./internal/constants\";\nimport { DefaultAvatar } from \"./internal/DefaultAvatar\";\nimport { useLoaded } from \"./internal/useLoaded\";\n\nimport \"./Avatar.css\";\n\nexport interface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  id?: string;\n  imgProps?: ImgHTMLAttributes<HTMLImageElement>;\n  size?: \"small\" | \"medium\" | \"large\";\n  sizes?: string;\n  src?: string;\n  srcSet?: string;\n  title?: string;\n}\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(\n  {\n    alt = \"\",\n    className,\n    children: childrenProp,\n    id: idProp,\n    size = \"medium\",\n    src,\n    srcSet,\n    title = \"user\",\n    imgProps,\n    sizes,\n    ...rest\n  },\n  ref\n) {\n  let children;\n  const id = useId(idProp);\n\n  const loaded = useLoaded({ ...imgProps, src, srcSet });\n  const hasImg = src || srcSet;\n  const hasImgNotFailing = hasImg && loaded !== \"error\";\n\n  if (hasImgNotFailing) {\n    children = (\n      <img\n        className={withBaseName(\"image\")}\n        alt={alt}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        {...imgProps}\n      />\n    );\n  } else if (childrenProp != null) {\n    children = childrenProp;\n  } else if (hasImg && alt) {\n    children = alt[0];\n  } else {\n    children = <DefaultAvatar id={id} title={title} {...rest} />;\n  }\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(withBaseName(), withBaseName(size), className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["Avatar"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,SAAS,CAAA,CAAA;AAE9B,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,GAAM,GAAA,EAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,QAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAI,IAAA,QAAA,CAAA;AACJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,SAAS,SAAU,CAAA,EAAE,GAAG,QAAU,EAAA,GAAA,EAAK,QAAQ,CAAA,CAAA;AACrD,EAAA,MAAM,SAAS,GAAO,IAAA,MAAA,CAAA;AACtB,EAAM,MAAA,gBAAA,GAAmB,UAAU,MAAW,KAAA,OAAA,CAAA;AAE9C,EAAA,IAAI,gBAAkB,EAAA;AACpB,IAAA,QAAA,mBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAC/B,GAAA;AAAA,MACA,GAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,QAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ,MAAA,IAAW,gBAAgB,IAAM,EAAA;AAC/B,IAAW,QAAA,GAAA,YAAA,CAAA;AAAA,GACb,MAAA,IAAW,UAAU,GAAK,EAAA;AACxB,IAAA,QAAA,GAAW,GAAI,CAAA,CAAA,CAAA,CAAA;AAAA,GACV,MAAA;AACL,IAAA,QAAA,mBAAY,GAAA,CAAA,aAAA,EAAA;AAAA,MAAc,EAAA;AAAA,MAAQ,KAAA;AAAA,MAAe,GAAG,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAC5D;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,IAC5D,GAAG,IAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/badge/Badge.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId } from '@salt-ds/core';
 import { MessageIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import './Badge.css.js';
 
@@ -23,16 +23,16 @@ const Badge = forwardRef(function Badge2({
     badgeContentValue = `${max}+`;
   }
   return /* @__PURE__ */ jsxs("span", {
-    className: cx(withBaseName(), className),
+    className: clsx(withBaseName(), className),
     ref,
     role: "img",
-    "aria-labelledby": cx(childId, badgeId),
+    "aria-labelledby": clsx(childId, badgeId),
     ...rest,
     children: [
       children && isValidElement(children) ? cloneElement(children, { id: childId }) : children,
       /* @__PURE__ */ jsx("span", {
         id: badgeId,
-        className: cx(withBaseName("badge")),
+        className: clsx(withBaseName("badge")),
         children: badgeContentValue
       })
     ]

package/dist-es/packages/lab/src/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { MessageIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactText,\n} from \"react\";\n\nimport \"./Badge.css\";\n\n/**\n * @example overriding density prop to fit a smaller denser space otherwise handled through context provider\n * <Badge density={'high'} />\n *\n * NOTE: Badge component no longer has AccessibleText prop\n *\n */\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge.\n   */\n  badgeContent?: string | number;\n  /**\n   * The badge will be added relative to this node. Renders the \"message\" icon by default.\n   */\n  children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\n\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    badgeContent = 0,\n    max = 1000,\n    className,\n    children = <MessageIcon />,\n    ...rest\n  },\n  ref\n) {\n  const badgeId = useId();\n  const childId = useId(\n    isValidElement<HTMLAttributes<HTMLElement>>(children)\n      ? children.props?.id\n      : undefined\n  );\n\n  let badgeContentValue = badgeContent;\n  if (badgeContentValue > max) {\n    badgeContentValue = `${max}+`;\n  }\n\n  return (\n    <span\n      className={cx(withBaseName(), className)}\n      ref={ref}\n      role=\"img\"\n      aria-labelledby={cx(childId, badgeId)}\n      {...rest}\n    >\n      {children && isValidElement<HTMLAttributes<HTMLElement>>(children)\n        ? cloneElement(children, { id: childId })\n        : children}\n      <span id={badgeId} className={cx(withBaseName(\"badge\"))}>\n        {badgeContentValue}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge"],"mappings":";;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAwC,CAAA,SAASA,MACpE,CAAA;AAAA,EACE,YAAe,GAAA,CAAA;AAAA,EACf,GAAM,GAAA,GAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAA,uBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,EACrB,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AApDF,EAAA,IAAA,EAAA,CAAA;AAqDE,EAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,EAAA,MAAM,OAAU,GAAA,KAAA;AAAA,IACd,eAA4C,QAAQ,CAAA,GAAA,CAChD,EAAS,GAAA,QAAA,CAAA,KAAA,KAAT,mBAAgB,EAChB,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,iBAAoB,GAAA,YAAA,CAAA;AACxB,EAAA,IAAI,oBAAoB,GAAK,EAAA;AAC3B,IAAA,iBAAA,GAAoB,CAAG,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACL,iBAAA,EAAiB,EAAG,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IACnC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAY,QAAA,IAAA,cAAA,CAA4C,QAAQ,CAC7D,GAAA,YAAA,CAAa,UAAU,EAAE,EAAA,EAAI,OAAQ,EAAC,CACtC,GAAA,QAAA;AAAA,sBACH,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,EAAI,EAAA,OAAA;AAAA,QAAS,SAAW,EAAA,EAAA,CAAG,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACnD,QAAA,EAAA,iBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { MessageIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactText,\n} from \"react\";\n\nimport \"./Badge.css\";\n\n/**\n * @example overriding density prop to fit a smaller denser space otherwise handled through context provider\n * <Badge density={'high'} />\n *\n * NOTE: Badge component no longer has AccessibleText prop\n *\n */\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge.\n   */\n  badgeContent?: string | number;\n  /**\n   * The badge will be added relative to this node. Renders the \"message\" icon by default.\n   */\n  children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\n\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    badgeContent = 0,\n    max = 1000,\n    className,\n    children = <MessageIcon />,\n    ...rest\n  },\n  ref\n) {\n  const badgeId = useId();\n  const childId = useId(\n    isValidElement<HTMLAttributes<HTMLElement>>(children)\n      ? children.props?.id\n      : undefined\n  );\n\n  let badgeContentValue = badgeContent;\n  if (badgeContentValue > max) {\n    badgeContentValue = `${max}+`;\n  }\n\n  return (\n    <span\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      role=\"img\"\n      aria-labelledby={clsx(childId, badgeId)}\n      {...rest}\n    >\n      {children && isValidElement<HTMLAttributes<HTMLElement>>(children)\n        ? cloneElement(children, { id: childId })\n        : children}\n      <span id={badgeId} className={clsx(withBaseName(\"badge\"))}>\n        {badgeContentValue}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge"],"mappings":";;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAwC,CAAA,SAASA,MACpE,CAAA;AAAA,EACE,YAAe,GAAA,CAAA;AAAA,EACf,GAAM,GAAA,GAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAA,uBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,EACrB,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AApDF,EAAA,IAAA,EAAA,CAAA;AAqDE,EAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,EAAA,MAAM,OAAU,GAAA,KAAA;AAAA,IACd,eAA4C,QAAQ,CAAA,GAAA,CAChD,EAAS,GAAA,QAAA,CAAA,KAAA,KAAT,mBAAgB,EAChB,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,iBAAoB,GAAA,YAAA,CAAA;AACxB,EAAA,IAAI,oBAAoB,GAAK,EAAA;AAC3B,IAAA,iBAAA,GAAoB,CAAG,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,GAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACL,iBAAA,EAAiB,IAAK,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IACrC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAY,QAAA,IAAA,cAAA,CAA4C,QAAQ,CAC7D,GAAA,YAAA,CAAa,UAAU,EAAE,EAAA,EAAI,OAAQ,EAAC,CACtC,GAAA,QAAA;AAAA,sBACH,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,EAAI,EAAA,OAAA;AAAA,QAAS,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACrD,QAAA,EAAA,iBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/banner/Banner.js

@@ -3,7 +3,7 @@ import { forwardRef, useState, useEffect } from 'react';
 import { makePrefixer, useAriaAnnouncer, useForkRef, StatusIndicator, Link, Button } from '@salt-ds/core';
 import getInnerText from './internal/getInnerText.js';
 import { CloseIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './Banner.css.js';
 
 const withBaseName = makePrefixer("saltBanner");
@@ -34,17 +34,17 @@ const Banner = forwardRef(function Banner2({
   }, [announce, disableAnnouncer, containerNode, announcementProp]);
   const getIconProps = ({ className: className2, ...restProps } = {}) => {
     return {
-      className: cx(withBaseName("icon"), status, className2),
+      className: clsx(withBaseName("icon"), status, className2),
       ...restProps
     };
   };
   const getLabelProps = ({ className: className2, ...restProps } = {}) => ({
-    className: cx(withBaseName("label"), status, className2),
+    className: clsx(withBaseName("label"), status, className2),
     ...restProps
   });
   const getLinkProps = ({ className: className2, href, ...restProps } = {}) => ({
     children: "Link",
-    className: cx(withBaseName("link"), status, className2),
+    className: clsx(withBaseName("link"), status, className2),
     href,
     ...restProps
   });
@@ -81,7 +81,7 @@ const Banner = forwardRef(function Banner2({
     contentElement = render(getStateAndPropsGetters());
   }
   return /* @__PURE__ */ jsxs("div", {
-    className: cx(withBaseName(), withBaseName(status), className, {
+    className: clsx(withBaseName(), withBaseName(status), className, {
       [withBaseName("emphasize")]: emphasize
     }),
     ref: handleRef,

package/dist-es/packages/lab/src/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: cx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: cx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: cx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={cx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["Banner","LinkProps","className"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: clsx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: clsx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: clsx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["Banner","LinkProps","className"],"mappings":"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"}

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makePrefixer, Text, Link } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, Children } from 'react';
 import { useBreadcrumbsContext } from './internal/BreadcrumbsContext.js';
 import './Breadcrumb.css.js';
@@ -26,7 +26,7 @@ const Breadcrumb = forwardRef(
     const hasOnlyIcon = Icon && !hasChildren;
     const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsx(Text, {
       maxRows: 1,
-      className: cx(
+      className: clsx(
         withBaseName(),
         className,
         withBaseName("currentLevel")
@@ -34,7 +34,7 @@ const Breadcrumb = forwardRef(
       styleAs: "label",
       children
     }) : /* @__PURE__ */ jsxs("div", {
-      className: cx(
+      className: clsx(
         withBaseName(),
         className,
         {
@@ -67,7 +67,7 @@ const Breadcrumb = forwardRef(
         minWidth: minWidth != null ? minWidth : itemsMinWidth,
         maxWidth: maxWidth != null ? maxWidth : itemsMaxWidth
       },
-      className: cx(liClass, containerClassName),
+      className: clsx(liClass, containerClassName),
       ...containerPropsRest,
       children: content
     });

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { TooltipProps } from \"../tooltip\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={classnames(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={classnames(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={classnames(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["Breadcrumb","classnames"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAY,qBAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAS,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAWA,EAAW,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAChD,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, TooltipProps } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["Breadcrumb"],"mappings":";;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAY,qBAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAS,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAW,IAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAC1C,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}