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

package/dist-es/packages/lab/src/list/VirtualizedList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedList.js","sources":["../src/list/VirtualizedList.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { ForwardedRef, forwardRef, ReactElement, useRef } from \"react\";\nimport {\n  CollectionIndexer,\n  isSelected,\n  SelectionStrategy,\n  useCollectionItems,\n  useImperativeScrollingAPI,\n} from \"../common-hooks\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport { ListItem, ListItemProxy } from \"./ListItem\";\nimport { ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { Row, useVirtualization } from \"./useVirtualization\";\n\nimport \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const VirtualizedList = forwardRef(function List<\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    borderless,\n    children,\n    className,\n    collapsibleHeaders = false,\n    defaultHighlightedIndex: defaultHighlightedIdx,\n    defaultSelected,\n    disabled: listDisabled = false,\n    disableFocus = false,\n    disableTypeToSelect,\n    displayedItemCount = 10,\n    emptyMessage,\n    getItemHeight,\n    getItemId,\n    height,\n    highlightedIndex: highlightedIdxProp,\n    id: idProp,\n    itemGapSize = 0,\n    itemHeight: itemHeightProp,\n    itemTextHighlightPattern,\n    itemToString,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: selectedProp,\n    selectionStrategy,\n    scrollingApiRef,\n    // TODO do we still need these ?\n    selectionKeys,\n    showEmptyMessage = false,\n    source,\n    style: styleProp,\n    stickyHeaders,\n    tabToSelect,\n    width,\n    ...htmlAttributes\n  }: ListProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const id = useIdMemo(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const rowHeightProxyRef = useRef<HTMLDivElement | null>(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    label: \"List\",\n    source,\n    children,\n    options: {\n      collapsibleHeaders,\n      getItemId,\n      itemToString,\n    },\n  });\n\n  const { preferredHeight } = useListHeight({\n    borderless,\n    displayedItemCount,\n    height,\n    itemCount: collectionHook.data.length,\n    itemGapSize,\n    itemHeight: itemHeightProp,\n    rowHeightRef: rowHeightProxyRef,\n  });\n  const {\n    focusVisible,\n    highlightedIndex,\n    listControlProps,\n    listHandlers,\n    scrollIntoView,\n    selected,\n  } = useList<Item, Selection>({\n    collapsibleHeaders,\n    collectionHook,\n    containerRef: rootRef,\n    defaultHighlightedIndex: defaultHighlightedIdx,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled: listDisabled,\n    disableTypeToSelect,\n    highlightedIndex: highlightedIdxProp,\n    label: id,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(selectedProp),\n    selectionStrategy,\n    selectionKeys,\n    stickyHeaders,\n    tabToSelect,\n  });\n\n  // TODO move into useList\n  const {\n    rows: data,\n    contentHeight,\n    onVerticalScroll: onScroll,\n  } = useVirtualization<Item>({\n    viewportRef: rootRef,\n    data: collectionHook.data,\n    itemGapSize,\n  });\n\n  // FIXME: useImperativeScrollingAPI doesn't work when element is not rendered beyond `renderBuffer`\n  // One potential way: pass `scrollIntoView` to `useVirtualization` and update rows before original `scrollIntoView` been called\n  useImperativeScrollingAPI({\n    collectionHook,\n    forwardedRef: scrollingApiRef,\n    scrollableRef: rootRef,\n    scrollIntoView,\n  });\n\n  function addItem(\n    list: ReactElement[],\n    row: Row<Item>,\n    idx: { value: number }\n  ) {\n    const [key, offset, pos, item] = row;\n    const index = pos - 1;\n    list.push(\n      <ListItem\n        aria-setsize={collectionHook.data.length}\n        aria-posinset={pos}\n        className={cx(className, {\n          saltHighlighted: index === highlightedIndex,\n          saltFocusVisible: focusVisible === index,\n        })}\n        data-idx={index}\n        key={key}\n        data-offset={offset}\n        role=\"option\"\n        selected={isSelected<Item>(selected, item)}\n        id={item.id}\n        style={{\n          transform: `translate3d(0px, ${offset}px, 0px)`,\n        }}\n      >\n        {item.label}\n      </ListItem>\n    );\n    idx.value += 1;\n  }\n\n  function renderItems(\n    data: Row<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    end = data.length\n  ) {\n    const listItems: ReactElement[] = [];\n    while (idx.value < end) {\n      const item = data[idx.value];\n      addItem(listItems, item, idx);\n    }\n    return listItems;\n  }\n\n  function renderEmpty() {\n    if (emptyMessage || showEmptyMessage) {\n      return (\n        <span className={withBaseName(\"empty-message\")}>\n          {emptyMessage ?? defaultEmptyMessage}\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  const renderContent = () => {\n    if (data.length) {\n      return renderItems(data);\n    } else {\n      renderEmpty();\n    }\n  };\n\n  const sizeStyles = {\n    \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n    minWidth,\n    minHeight,\n    width: width ?? \"100%\",\n    height: height ?? \"100%\",\n    maxWidth: maxWidth ?? width,\n    maxHeight: maxHeight ?? preferredHeight,\n  };\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listControlProps}\n      className={cx(withBaseName(), className, withBaseName(\"virtualized\"))}\n      id={`${id}`}\n      ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n      role=\"listbox\"\n      onScroll={onScroll}\n      style={{ ...styleProp, ...sizeStyles }}\n      tabIndex={listDisabled || disableFocus ? undefined : 0}\n    >\n      <div\n        className={withBaseName(\"scrollingContentContainer\")}\n        style={{ height: contentHeight }}\n      >\n        <ListItemProxy ref={rowHeightProxyRef} />\n        {renderContent()}\n      </div>\n    </div>\n  );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n  props: ListProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["data"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAM,mBAAsB,GAAA,oBAAA,CAAA;AAE5B,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAE/B,MAAA,eAAA,GAAkB,UAAW,CAAA,SAAS,IAIjD,CAAA;AAAA,EACE,UAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,uBAAyB,EAAA,qBAAA;AAAA,EACzB,eAAA;AAAA,EACA,UAAU,YAAe,GAAA,KAAA;AAAA,EACzB,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,kBAAqB,GAAA,EAAA;AAAA,EACrB,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,gBAAkB,EAAA,kBAAA;AAAA,EAClB,EAAI,EAAA,MAAA;AAAA,EACJ,WAAc,GAAA,CAAA;AAAA,EACd,UAAY,EAAA,cAAA;AAAA,EACZ,wBAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,eAAA;AAAA,EAEA,aAAA;AAAA,EACA,gBAAmB,GAAA,KAAA;AAAA,EACnB,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,aAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACG,GAAA,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA,CAAA;AAC3B,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA,CAAA;AAC3C,EAAM,MAAA,iBAAA,GAAoB,OAA8B,IAAI,CAAA,CAAA;AAE5D,EAAA,MAAM,iBAAiB,kBAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,KAAO,EAAA,MAAA;AAAA,IACP,MAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,kBAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,aAAc,CAAA;AAAA,IACxC,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA,EAAW,eAAe,IAAK,CAAA,MAAA;AAAA,IAC/B,WAAA;AAAA,IACA,UAAY,EAAA,cAAA;AAAA,IACZ,YAAc,EAAA,iBAAA;AAAA,GACf,CAAA,CAAA;AACD,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,gBAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,MACE,OAAyB,CAAA;AAAA,IAC3B,kBAAA;AAAA,IACA,cAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,uBAAyB,EAAA,qBAAA;AAAA,IACzB,eAAA,EAAiB,cAAe,CAAA,oBAAA,CAG9B,eAAe,CAAA;AAAA,IACjB,QAAU,EAAA,YAAA;AAAA,IACV,mBAAA;AAAA,IACA,gBAAkB,EAAA,kBAAA;AAAA,IAClB,KAAO,EAAA,EAAA;AAAA,IACP,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA,EAAU,cAAe,CAAA,oBAAA,CAGvB,YAAY,CAAA;AAAA,IACd,iBAAA;AAAA,IACA,aAAA;AAAA,IACA,aAAA;AAAA,IACA,WAAA;AAAA,GACD,CAAA,CAAA;AAGD,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,IAAA;AAAA,IACN,aAAA;AAAA,IACA,gBAAkB,EAAA,QAAA;AAAA,MAChB,iBAAwB,CAAA;AAAA,IAC1B,WAAa,EAAA,OAAA;AAAA,IACb,MAAM,cAAe,CAAA,IAAA;AAAA,IACrB,WAAA;AAAA,GACD,CAAA,CAAA;AAID,EAA0B,yBAAA,CAAA;AAAA,IACxB,cAAA;AAAA,IACA,YAAc,EAAA,eAAA;AAAA,IACd,aAAe,EAAA,OAAA;AAAA,IACf,cAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAS,SAAA,OAAA,CACP,IACA,EAAA,GAAA,EACA,GACA,EAAA;AACA,IAAA,MAAM,CAAC,GAAA,EAAK,MAAQ,EAAA,GAAA,EAAK,IAAI,CAAI,GAAA,GAAA,CAAA;AACjC,IAAA,MAAM,QAAQ,GAAM,GAAA,CAAA,CAAA;AACpB,IAAK,IAAA,CAAA,IAAA;AAAA,sBACF,GAAA,CAAA,QAAA,EAAA;AAAA,QACC,cAAA,EAAc,eAAe,IAAK,CAAA,MAAA;AAAA,QAClC,eAAe,EAAA,GAAA;AAAA,QACf,SAAA,EAAW,GAAG,SAAW,EAAA;AAAA,UACvB,iBAAiB,KAAU,KAAA,gBAAA;AAAA,UAC3B,kBAAkB,YAAiB,KAAA,KAAA;AAAA,SACpC,CAAA;AAAA,QACD,UAAU,EAAA,KAAA;AAAA,QAEV,aAAa,EAAA,MAAA;AAAA,QACb,IAAK,EAAA,QAAA;AAAA,QACL,QAAA,EAAU,UAAiB,CAAA,QAAA,EAAU,IAAI,CAAA;AAAA,QACzC,IAAI,IAAK,CAAA,EAAA;AAAA,QACT,KAAO,EAAA;AAAA,UACL,WAAW,CAAoB,iBAAA,EAAA,MAAA,CAAA,QAAA,CAAA;AAAA,SACjC;AAAA,QAEC,QAAK,EAAA,IAAA,CAAA,KAAA;AAAA,OAAA,EATD,GAUP,CAAA;AAAA,KACF,CAAA;AACA,IAAA,GAAA,CAAI,KAAS,IAAA,CAAA,CAAA;AAAA,GACf;AAEA,EAAS,SAAA,WAAA,CACPA,OACA,GAAyB,GAAA,EAAE,OAAO,CAAE,EAAA,EACpC,GAAMA,GAAAA,KAAAA,CAAK,MACX,EAAA;AACA,IAAA,MAAM,YAA4B,EAAC,CAAA;AACnC,IAAO,OAAA,GAAA,CAAI,QAAQ,GAAK,EAAA;AACtB,MAAM,MAAA,IAAA,GAAOA,MAAK,GAAI,CAAA,KAAA,CAAA,CAAA;AACtB,MAAQ,OAAA,CAAA,SAAA,EAAW,MAAM,GAAG,CAAA,CAAA;AAAA,KAC9B;AACA,IAAO,OAAA,SAAA,CAAA;AAAA,GACT;AAEA,EAAA,SAAS,WAAc,GAAA;AACrB,IAAA,IAAI,gBAAgB,gBAAkB,EAAA;AACpC,MAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,QAC1C,QAAgB,EAAA,YAAA,IAAA,IAAA,GAAA,YAAA,GAAA,mBAAA;AAAA,OACnB,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACF;AAEA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAA,IAAI,KAAK,MAAQ,EAAA;AACf,MAAA,OAAO,YAAY,IAAI,CAAA,CAAA;AAAA,KAClB,MAAA;AACL,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,iBAAA,EAAmB,WAAc,GAAA,CAAA,EAAG,WAAkB,CAAA,EAAA,CAAA,GAAA,KAAA,CAAA;AAAA,IACtD,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAO,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,MAAA;AAAA,IAChB,QAAQ,MAAU,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA;AAAA,IAClB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,KAAA;AAAA,IACtB,WAAW,SAAa,IAAA,IAAA,GAAA,SAAA,GAAA,eAAA;AAAA,GAC1B,CAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACE,GAAG,cAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACJ,WAAW,EAAG,CAAA,YAAA,IAAgB,SAAW,EAAA,YAAA,CAAa,aAAa,CAAC,CAAA;AAAA,IACpE,IAAI,CAAG,EAAA,EAAA,CAAA,CAAA;AAAA,IACP,GAAA,EAAK,UAA2B,CAAA,OAAA,EAAS,YAAY,CAAA;AAAA,IACrD,IAAK,EAAA,SAAA;AAAA,IACL,QAAA;AAAA,IACA,KAAO,EAAA,EAAE,GAAG,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,IACrC,QAAA,EAAU,YAAgB,IAAA,YAAA,GAAe,KAAY,CAAA,GAAA,CAAA;AAAA,IAErD,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,2BAA2B,CAAA;AAAA,MACnD,KAAA,EAAO,EAAE,MAAA,EAAQ,aAAc,EAAA;AAAA,MAE/B,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,aAAA,EAAA;AAAA,UAAc,GAAK,EAAA,iBAAA;AAAA,SAAmB,CAAA;AAAA,QACtC,aAAc,EAAA;AAAA,OAAA;AAAA,KACjB,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"VirtualizedList.js","sources":["../src/list/VirtualizedList.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, ReactElement, useRef } from \"react\";\nimport {\n  CollectionIndexer,\n  isSelected,\n  SelectionStrategy,\n  useCollectionItems,\n  useImperativeScrollingAPI,\n} from \"../common-hooks\";\nimport { useListHeight } from \"./useListHeight\";\n\nimport { ListItem, ListItemProxy } from \"./ListItem\";\nimport { ListProps } from \"./listTypes\";\nimport { useList } from \"./useList\";\nimport { Row, useVirtualization } from \"./useVirtualization\";\n\nimport \"./List.css\";\n\nconst defaultEmptyMessage = \"No data to display\";\n\nconst withBaseName = makePrefixer(\"saltList\");\n\nexport const VirtualizedList = forwardRef(function List<\n  Item,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    borderless,\n    children,\n    className,\n    collapsibleHeaders = false,\n    defaultHighlightedIndex: defaultHighlightedIdx,\n    defaultSelected,\n    disabled: listDisabled = false,\n    disableFocus = false,\n    disableTypeToSelect,\n    displayedItemCount = 10,\n    emptyMessage,\n    getItemHeight,\n    getItemId,\n    height,\n    highlightedIndex: highlightedIdxProp,\n    id: idProp,\n    itemGapSize = 0,\n    itemHeight: itemHeightProp,\n    itemTextHighlightPattern,\n    itemToString,\n    maxHeight,\n    maxWidth,\n    minHeight,\n    minWidth,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: selectedProp,\n    selectionStrategy,\n    scrollingApiRef,\n    // TODO do we still need these ?\n    selectionKeys,\n    showEmptyMessage = false,\n    source,\n    style: styleProp,\n    stickyHeaders,\n    tabToSelect,\n    width,\n    ...htmlAttributes\n  }: ListProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const id = useIdMemo(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const rowHeightProxyRef = useRef<HTMLDivElement | null>(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    label: \"List\",\n    source,\n    children,\n    options: {\n      collapsibleHeaders,\n      getItemId,\n      itemToString,\n    },\n  });\n\n  const { preferredHeight } = useListHeight({\n    borderless,\n    displayedItemCount,\n    height,\n    itemCount: collectionHook.data.length,\n    itemGapSize,\n    itemHeight: itemHeightProp,\n    rowHeightRef: rowHeightProxyRef,\n  });\n  const {\n    focusVisible,\n    highlightedIndex,\n    listControlProps,\n    listHandlers,\n    scrollIntoView,\n    selected,\n  } = useList<Item, Selection>({\n    collapsibleHeaders,\n    collectionHook,\n    containerRef: rootRef,\n    defaultHighlightedIndex: defaultHighlightedIdx,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled: listDisabled,\n    disableTypeToSelect,\n    highlightedIndex: highlightedIdxProp,\n    label: id,\n    onSelect,\n    onSelectionChange,\n    onHighlight,\n    restoreLastFocus,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(selectedProp),\n    selectionStrategy,\n    selectionKeys,\n    stickyHeaders,\n    tabToSelect,\n  });\n\n  // TODO move into useList\n  const {\n    rows: data,\n    contentHeight,\n    onVerticalScroll: onScroll,\n  } = useVirtualization<Item>({\n    viewportRef: rootRef,\n    data: collectionHook.data,\n    itemGapSize,\n  });\n\n  // FIXME: useImperativeScrollingAPI doesn't work when element is not rendered beyond `renderBuffer`\n  // One potential way: pass `scrollIntoView` to `useVirtualization` and update rows before original `scrollIntoView` been called\n  useImperativeScrollingAPI({\n    collectionHook,\n    forwardedRef: scrollingApiRef,\n    scrollableRef: rootRef,\n    scrollIntoView,\n  });\n\n  function addItem(\n    list: ReactElement[],\n    row: Row<Item>,\n    idx: { value: number }\n  ) {\n    const [key, offset, pos, item] = row;\n    const index = pos - 1;\n    list.push(\n      <ListItem\n        aria-setsize={collectionHook.data.length}\n        aria-posinset={pos}\n        className={clsx(className, {\n          saltHighlighted: index === highlightedIndex,\n          saltFocusVisible: focusVisible === index,\n        })}\n        data-idx={index}\n        key={key}\n        data-offset={offset}\n        role=\"option\"\n        selected={isSelected<Item>(selected, item)}\n        id={item.id}\n        style={{\n          transform: `translate3d(0px, ${offset}px, 0px)`,\n        }}\n      >\n        {item.label}\n      </ListItem>\n    );\n    idx.value += 1;\n  }\n\n  function renderItems(\n    data: Row<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    end = data.length\n  ) {\n    const listItems: ReactElement[] = [];\n    while (idx.value < end) {\n      const item = data[idx.value];\n      addItem(listItems, item, idx);\n    }\n    return listItems;\n  }\n\n  function renderEmpty() {\n    if (emptyMessage || showEmptyMessage) {\n      return (\n        <span className={withBaseName(\"empty-message\")}>\n          {emptyMessage ?? defaultEmptyMessage}\n        </span>\n      );\n    } else {\n      return null;\n    }\n  }\n\n  const renderContent = () => {\n    if (data.length) {\n      return renderItems(data);\n    } else {\n      renderEmpty();\n    }\n  };\n\n  const sizeStyles = {\n    \"--list-item-gap\": itemGapSize ? `${itemGapSize}px` : undefined,\n    minWidth,\n    minHeight,\n    width: width ?? \"100%\",\n    height: height ?? \"100%\",\n    maxWidth: maxWidth ?? width,\n    maxHeight: maxHeight ?? preferredHeight,\n  };\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listControlProps}\n      className={clsx(withBaseName(), className, withBaseName(\"virtualized\"))}\n      id={`${id}`}\n      ref={useForkRef<HTMLDivElement>(rootRef, forwardedRef)}\n      role=\"listbox\"\n      onScroll={onScroll}\n      style={{ ...styleProp, ...sizeStyles }}\n      tabIndex={listDisabled || disableFocus ? undefined : 0}\n    >\n      <div\n        className={withBaseName(\"scrollingContentContainer\")}\n        style={{ height: contentHeight }}\n      >\n        <ListItemProxy ref={rowHeightProxyRef} />\n        {renderContent()}\n      </div>\n    </div>\n  );\n}) as <Item = string, Selection extends SelectionStrategy = \"default\">(\n  props: ListProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<ListProps<Item, Selection>>;\n"],"names":["data"],"mappings":"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"}

package/dist-es/packages/lab/src/list/useList.js

@@ -1,9 +1,9 @@
 import { useRef, useCallback, isValidElement } from 'react';
+import '@salt-ds/core';
 import '../common-hooks/collectionProvider.js';
 import '../common-hooks/keyUtils.js';
 import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.js';
 import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
-import '@salt-ds/core';
 import { useKeyboardNavigation } from '../common-hooks/useKeyboardNavigation.js';
 import { useSelection } from '../common-hooks/useSelection.js';
 import { useTypeahead } from '../common-hooks/useTypeahead.js';

package/dist-es/packages/lab/src/list/useVirtualization.js

@@ -1,5 +1,6 @@
-import { useRef, useState, useMemo, useCallback, useLayoutEffect } from 'react';
+import { useRef, useState, useMemo, useCallback } from 'react';
 import { KeySet } from './keyset.js';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
 
 const byKey = ([k1], [k2]) => k1 - k2;
 const renderBuffer = 5;
@@ -36,7 +37,7 @@ const useVirtualization = ({
     },
     [data, itemGapSize, keys]
   );
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const viewport = viewportMeasures.current;
     const viewportEl = viewportRef.current;
     if (viewportEl) {

package/dist-es/packages/lab/src/list/useVirtualization.js.map

@@ -1 +1 @@
-{"version":3,"file":"useVirtualization.js","sources":["../src/list/useVirtualization.ts"],"sourcesContent":["import {\n  RefObject,\n  UIEvent,\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { KeySet } from \"./keyset\";\nimport { CollectionItem } from \"../common-hooks\";\n\n/**\n * [ item key, total height before the item, next row index, CollectionItem<Item>]\n * e.g. first item: [0, 0, 1, data[0]]\n */\nexport type Row<Item> = [number, number, number, CollectionItem<Item>];\n\nconst byKey = ([k1]: Row<unknown>, [k2]: Row<unknown>) => k1 - k2;\n\nconst renderBuffer = 5;\n\ninterface VirtualizationHookProps<Item> {\n  viewportRef: RefObject<HTMLElement>;\n  data: CollectionItem<Item>[];\n  itemGapSize?: number;\n}\n\ninterface VirtualizationHookResult<Item> {\n  rows: Row<Item>[];\n  contentHeight: number;\n  onVerticalScroll: (e: UIEvent<HTMLElement>) => void;\n}\n\nexport const useVirtualization = <Item>({\n  viewportRef,\n  data,\n  itemGapSize = 0,\n}: VirtualizationHookProps<Item>): VirtualizationHookResult<Item> => {\n  const viewportMeasures = useRef({\n    contentHeight: 10000,\n    firstVisibleRow: 0,\n    rowCount: 0,\n    rowHeight: 0,\n    scrollPos: 0,\n  });\n  const [rows, setRows] = useState<Row<Item>[]>([]);\n  const keys = useMemo(() => new KeySet(0, 1), []);\n\n  const updateRows = useCallback(\n    (from: number, to: number) => {\n      const { rowHeight } = viewportMeasures.current;\n      const rowHeightWithGap = rowHeight + itemGapSize;\n      const lo = Math.max(0, from - renderBuffer);\n      const hi = Math.min(data.length, to + renderBuffer);\n      keys.reset(lo, hi);\n      const newRows = data\n        .slice(lo, hi)\n        .map(\n          (value, idx) =>\n            [\n              keys.keyFor(idx + lo),\n              (idx + lo) * rowHeightWithGap,\n              idx + lo + 1,\n              value,\n            ] as Row<Item>\n        )\n        .sort(byKey);\n      setRows(newRows);\n    },\n    [data, itemGapSize, keys]\n  );\n\n  useLayoutEffect(() => {\n    const viewport = viewportMeasures.current;\n    const viewportEl = viewportRef.current;\n    if (viewportEl) {\n      // TODO no reference to ListItem className\n      const listItemEl = viewportEl.querySelector(\".saltListItem\");\n      if (listItemEl) {\n        const { height: viewportHeight } = viewportEl.getBoundingClientRect();\n        const { height: rowHeight } = listItemEl.getBoundingClientRect();\n        viewport.rowHeight = rowHeight;\n        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);\n        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;\n        updateRows(0, viewport.rowCount);\n      }\n    }\n  }, [data, itemGapSize, keys, updateRows]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const viewport = viewportMeasures.current;\n      // TODO: check `as` cast\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== viewport.scrollPos) {\n        viewport.scrollPos = scrollTop;\n        const firstRow = Math.floor(scrollTop / viewport.rowHeight);\n        if (firstRow !== viewport.firstVisibleRow) {\n          viewport.firstVisibleRow = firstRow;\n          const from = firstRow;\n          const to = firstRow + viewport.rowCount;\n          updateRows(from, to);\n        }\n      }\n    },\n    [updateRows]\n  );\n\n  return {\n    rows,\n    contentHeight: viewportMeasures.current.contentHeight,\n    onVerticalScroll: handleVerticalScroll,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useVirtualization.js","sources":["../src/list/useVirtualization.ts"],"sourcesContent":["import {\n  RefObject,\n  UIEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { KeySet } from \"./keyset\";\nimport { CollectionItem } from \"../common-hooks\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\n/**\n * [ item key, total height before the item, next row index, CollectionItem<Item>]\n * e.g. first item: [0, 0, 1, data[0]]\n */\nexport type Row<Item> = [number, number, number, CollectionItem<Item>];\n\nconst byKey = ([k1]: Row<unknown>, [k2]: Row<unknown>) => k1 - k2;\n\nconst renderBuffer = 5;\n\ninterface VirtualizationHookProps<Item> {\n  viewportRef: RefObject<HTMLElement>;\n  data: CollectionItem<Item>[];\n  itemGapSize?: number;\n}\n\ninterface VirtualizationHookResult<Item> {\n  rows: Row<Item>[];\n  contentHeight: number;\n  onVerticalScroll: (e: UIEvent<HTMLElement>) => void;\n}\n\nexport const useVirtualization = <Item>({\n  viewportRef,\n  data,\n  itemGapSize = 0,\n}: VirtualizationHookProps<Item>): VirtualizationHookResult<Item> => {\n  const viewportMeasures = useRef({\n    contentHeight: 10000,\n    firstVisibleRow: 0,\n    rowCount: 0,\n    rowHeight: 0,\n    scrollPos: 0,\n  });\n  const [rows, setRows] = useState<Row<Item>[]>([]);\n  const keys = useMemo(() => new KeySet(0, 1), []);\n\n  const updateRows = useCallback(\n    (from: number, to: number) => {\n      const { rowHeight } = viewportMeasures.current;\n      const rowHeightWithGap = rowHeight + itemGapSize;\n      const lo = Math.max(0, from - renderBuffer);\n      const hi = Math.min(data.length, to + renderBuffer);\n      keys.reset(lo, hi);\n      const newRows = data\n        .slice(lo, hi)\n        .map(\n          (value, idx) =>\n            [\n              keys.keyFor(idx + lo),\n              (idx + lo) * rowHeightWithGap,\n              idx + lo + 1,\n              value,\n            ] as Row<Item>\n        )\n        .sort(byKey);\n      setRows(newRows);\n    },\n    [data, itemGapSize, keys]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const viewport = viewportMeasures.current;\n    const viewportEl = viewportRef.current;\n    if (viewportEl) {\n      // TODO no reference to ListItem className\n      const listItemEl = viewportEl.querySelector(\".saltListItem\");\n      if (listItemEl) {\n        const { height: viewportHeight } = viewportEl.getBoundingClientRect();\n        const { height: rowHeight } = listItemEl.getBoundingClientRect();\n        viewport.rowHeight = rowHeight;\n        viewport.rowCount = Math.ceil(viewportHeight / rowHeight);\n        viewport.contentHeight = (rowHeight + itemGapSize) * data.length;\n        updateRows(0, viewport.rowCount);\n      }\n    }\n  }, [data, itemGapSize, keys, updateRows]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const viewport = viewportMeasures.current;\n      // TODO: check `as` cast\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== viewport.scrollPos) {\n        viewport.scrollPos = scrollTop;\n        const firstRow = Math.floor(scrollTop / viewport.rowHeight);\n        if (firstRow !== viewport.firstVisibleRow) {\n          viewport.firstVisibleRow = firstRow;\n          const from = firstRow;\n          const to = firstRow + viewport.rowCount;\n          updateRows(from, to);\n        }\n      }\n    },\n    [updateRows]\n  );\n\n  return {\n    rows,\n    contentHeight: viewportMeasures.current.contentHeight,\n    onVerticalScroll: handleVerticalScroll,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/list-deprecated/ListBase.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef, useId, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { createContext, memo, forwardRef, useContext, useRef, useMemo, useImperativeHandle, Children } from 'react';
 import { areEqual, VariableSizeList, FixedSizeList } from 'react-window';
 import { calcPreferredListHeight } from './internal/calcPreferredListHeight.js';
@@ -54,7 +54,7 @@ const Listbox = forwardRef(function Listbox2(props, ref) {
     }
   };
   return /* @__PURE__ */ jsx("div", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("disabled")]: disabled
@@ -247,7 +247,7 @@ const ListBase = forwardRef(function ListBase2(props, ref) {
     });
   };
   return /* @__PURE__ */ jsx("div", {
-    className: cx(withBaseName("wrapper"), {
+    className: clsx(withBaseName("wrapper"), {
       [withBaseName("borderless")]: borderless
     }),
     ref: containerRef,

package/dist-es/packages/lab/src/list-deprecated/ListBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListBase.js","sources":["../src/list-deprecated/ListBase.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport {\n  Children,\n  ComponentType,\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  Ref,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { areEqual, FixedSizeList, VariableSizeList } from \"react-window\";\nimport { calcPreferredListHeight } from \"./internal/calcPreferredListHeight\";\nimport { scrollIntoView } from \"./internal/scrollIntoView\";\nimport { useListAutoSizer } from \"./internal/useListAutoSizer\";\nimport { itemToString as defaultItemToString } from \"./itemToString\";\nimport { ListItemBase } from \"./ListItemBase\";\nimport { ListItemContext } from \"./ListItemContext\";\nimport { ListBaseProps } from \"./ListProps\";\nimport { useListStateContext } from \"./ListStateContext\";\nimport { useListItem, useVirtualizedListItem } from \"./useListItem\";\n\nimport \"./List.css\";\n\nconst withBaseName = makePrefixer(\"saltListDeprecated\");\n\nexport interface ListboxContextProps<Item> {\n  borderless?: boolean;\n  className?: string;\n  disabled?: boolean;\n  disableFocus?: boolean;\n  getItemId?: (index: number) => string;\n  getItemHeight?: (index?: number) => number;\n  id?: string;\n  itemToString?: (item: Item) => string;\n  listRef?: Ref<any>;\n  style?: any;\n  onScroll?: (evt: any) => void;\n}\n\nconst ListboxContext = createContext<ListboxContextProps<any>>({});\nconst DefaultItem = memo(function DefaultItem(props: any) {\n  const { item, itemToString, itemProps } = useListItem(props);\n  return <ListItemBase {...itemProps}>{itemToString(item)}</ListItemBase>;\n}, areEqual);\n\nconst DefaultVirtualizedItem = memo(function DefaultVirtualizedItem(\n  props: any\n) {\n  const { item, itemToString, itemProps } = useVirtualizedListItem(props);\n  return <ListItemBase {...itemProps}>{itemToString(item)}</ListItemBase>;\n},\nareEqual);\n\nexport interface ListboxProps extends HTMLAttributes<HTMLDivElement> {\n  onScroll?: (evt: any) => void;\n}\n\n/**\n * Listbox is the container for all list items. It is used as `outerElement` for\n * `react-window`.\n *\n * forwardRef gives `react-window` a way to attach a ref to listen to \"scroll\" events.\n * And `onScroll` is added by `react-window` so we pass it on.\n */\nconst Listbox: ComponentType<ListboxProps> = forwardRef(function Listbox(\n  props,\n  ref\n) {\n  const { style, onScroll, children } = props;\n\n  const {\n    className,\n    borderless,\n    disabled,\n    disableFocus,\n    listRef,\n    style: styleProp,\n    onScroll: onScrollProp,\n    ...restListProps\n  } = useContext<ListboxContextProps<any>>(ListboxContext);\n\n  const setListRef = useForkRef(ref, listRef);\n\n  const handleScroll = (event: any) => {\n    if (onScroll) {\n      onScroll(event);\n    }\n\n    if (onScrollProp) {\n      onScrollProp(event);\n    }\n  };\n\n  return (\n    <div\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      onScroll={handleScroll}\n      ref={setListRef}\n      style={{ ...style, ...styleProp }}\n      tabIndex={disabled || disableFocus ? undefined : 0}\n      {...restListProps}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface ListScrollHandles<Item> {\n  scrollToIndex: (itemIndex: number) => void;\n  scrollToItem: (item: Item) => void;\n  scrollTo: (scrollOffset: number) => void;\n}\n\nconst noScrolling: ListScrollHandles<unknown> = {\n  scrollToIndex: (itemIndex: number) => undefined,\n  scrollToItem: (item) => undefined,\n  scrollTo: (scrollOffset: number) => undefined,\n};\n\nexport const ListBase = forwardRef(function ListBase<Item>(\n  props: ListBaseProps<Item>,\n  ref: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const { state } = useListStateContext();\n\n  // Getting list id in the following order:\n  // 1. Use the id prop if it's defined, otherwise..\n  // 2. Use the id from list context if it's defined, or finally...\n  // 3. Generate a random id.\n  const generatedId = useId(props.id);\n  const defaultId = state.id ?? generatedId;\n\n  // Removed useCharacteristic here\n  const sizeStackable = \"36px\";\n  const defaultItemHeight =\n    sizeStackable === null ? 36 : parseInt(sizeStackable, 10);\n\n  const hasIndexer = typeof props.getItemAtIndex === \"function\";\n  const hasVariableHeight = typeof props.getItemHeight === \"function\";\n\n  const {\n    id = defaultId,\n    source = [],\n    borderless,\n    children,\n    disableMouseDown,\n    itemTextHighlightPattern,\n    itemCount = source.length,\n    itemToString = defaultItemToString,\n    // TODO: Read from css variable\n    itemGapSize = 1,\n    itemHeight = defaultItemHeight,\n    getItemHeight = () => itemHeight,\n    getItemId = (index) => `${id}-item-${index}`,\n    getItemIndex = (item) => source.indexOf(item),\n    getItemAtIndex,\n    overscanCount = 10,\n    displayedItemCount = 10,\n    virtualized,\n    width,\n    height,\n    maxWidth,\n    maxHeight,\n    minWidth,\n    minHeight,\n    ListPlaceholder,\n    ListItem = virtualized ? DefaultVirtualizedItem : DefaultItem,\n    listRef: listRefProp,\n    ...restProps\n  } = props;\n\n  const { highlightedIndex } = state;\n\n  const preferredHeight =\n    height ??\n    calcPreferredListHeight({\n      borderless,\n      displayedItemCount,\n      itemCount,\n      itemHeight,\n      getItemHeight,\n      itemGapSize,\n    });\n\n  const [containerRef, autoSize] = useListAutoSizer<HTMLDivElement>({\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n\n  /**\n   * This is used to access `react-window` API\n   * @see https://react-window.now.sh/#/api/FixedSizeList (under `Methods`)\n   */\n  const virtualizedListRef = useRef<any>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const setListRef = useForkRef(listRef, listRefProp);\n\n  const scrollToIndex = (itemIndex: number) => {\n    scrollIntoView(\n      listRef.current?.querySelector(`[data-option-index=\"${itemIndex}\"]`),\n      listRef\n    );\n  };\n\n  const scrollHandles: ListScrollHandles<Item> = useMemo(\n    () => ({\n      scrollToIndex,\n      scrollToItem: (item: Item) => {\n        scrollToIndex(getItemIndex(item));\n      },\n      scrollTo: (scrollOffset: number) => {\n        if (listRef.current) {\n          listRef.current.scrollTop = scrollOffset;\n        }\n      },\n    }),\n    [getItemIndex]\n  );\n\n  const virtualizedScrollHandles: ListScrollHandles<Item> = useMemo(\n    () => ({\n      scrollToIndex: (itemIndex: number) => {\n        if (virtualizedListRef.current) {\n          virtualizedListRef.current.scrollToItem(itemIndex);\n        }\n      },\n      scrollToItem: (item: Item) => {\n        virtualizedListRef.current.scrollToItem(getItemIndex(item));\n      },\n      scrollTo: (scrollOffset: number) => {\n        virtualizedListRef.current.scrollTo(scrollOffset);\n      },\n    }),\n    [getItemIndex]\n  );\n\n  useImperativeHandle(\n    ref,\n    () => {\n      if (virtualized && virtualizedListRef.current) {\n        return virtualizedScrollHandles;\n      } else if (listRef.current) {\n        return scrollHandles;\n      } else {\n        return noScrolling;\n      }\n    },\n    [virtualized, scrollHandles, virtualizedScrollHandles]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (highlightedIndex == null) {\n      return;\n    }\n\n    if (virtualized && virtualizedListRef.current) {\n      virtualizedListRef.current.scrollToItem(highlightedIndex);\n    } else if (listRef.current) {\n      scrollToIndex(highlightedIndex);\n    }\n  }, [highlightedIndex, virtualized]);\n\n  const renderList = () => {\n    if (Children.count(children)) {\n      return (\n        <Listbox style={autoSize}>\n          <ListItemContext.Provider\n            value={{\n              disableMouseDown,\n              getItemId,\n              getItemHeight,\n              //@ts-ignore\n              itemToString,\n              itemTextHighlightPattern,\n            }}\n          >\n            {children}\n          </ListItemContext.Provider>\n        </Listbox>\n      );\n    }\n\n    if (virtualized) {\n      const VirtualizedList: any = hasVariableHeight\n        ? VariableSizeList\n        : FixedSizeList;\n\n      return (\n        <ListItemContext.Provider\n          value={{\n            disableMouseDown,\n            getItemId,\n            //@ts-ignore\n            itemToString,\n            itemTextHighlightPattern,\n          }}\n        >\n          <VirtualizedList\n            height={autoSize.height}\n            itemCount={itemCount}\n            itemData={source}\n            itemSize={hasVariableHeight ? getItemHeight : itemHeight}\n            outerElementType={Listbox}\n            overscanCount={overscanCount}\n            ref={virtualizedListRef}\n            width={autoSize.width}\n          >\n            {ListItem}\n          </VirtualizedList>\n        </ListItemContext.Provider>\n      );\n    }\n\n    return (\n      <Listbox style={autoSize}>\n        <ListItemContext.Provider\n          value={{\n            disableMouseDown,\n            getItemId,\n            getItemHeight,\n            //@ts-ignore\n            itemToString,\n            itemTextHighlightPattern,\n          }}\n        >\n          {(hasIndexer ? Array.from({ length: itemCount }) : source).map(\n            (item, index) => (\n              <ListItem\n                index={index}\n                // No, getItemAtIndex can NOT be undefined, because hasIndexer is confirming that already. stupid stupid typescript !!!\n                item={hasIndexer ? getItemAtIndex!(index) : item}\n                key={getItemId(index)}\n              />\n            )\n          )}\n        </ListItemContext.Provider>\n      </Listbox>\n    );\n  };\n\n  // TODO It's weird that List itself isn't the root element, ListWrapper is\n  // THat means if client passes style, with margin, for example, it will break;\n  return (\n    <div\n      className={classnames(withBaseName(\"wrapper\"), {\n        [withBaseName(\"borderless\")]: borderless,\n      })}\n      ref={containerRef}\n      style={{\n        minWidth,\n        minHeight,\n        width: width ?? \"100%\",\n        height: height ?? \"100%\",\n        maxWidth: maxWidth ?? width,\n        maxHeight: maxHeight ?? preferredHeight,\n      }}\n    >\n      {itemCount === 0 && ListPlaceholder !== undefined ? (\n        <ListPlaceholder style={autoSize} />\n      ) : (\n        <ListboxContext.Provider\n          value={{\n            ...restProps,\n            listRef: setListRef,\n            id,\n            borderless,\n          }}\n        >\n          {renderList()}\n        </ListboxContext.Provider>\n      )}\n    </div>\n  );\n}) as <Item>(\n  p: ListBaseProps<Item> & { ref?: ForwardedRef<ListScrollHandles<Item>> }\n) => ReactElement<ListBaseProps<Item>>;\n"],"names":["DefaultItem","DefaultVirtualizedItem","Listbox","classnames","ListBase","itemToString","defaultItemToString","_a"],"mappings":"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"}
+{"version":3,"file":"ListBase.js","sources":["../src/list-deprecated/ListBase.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  ComponentType,\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  Ref,\n  useContext,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { areEqual, FixedSizeList, VariableSizeList } from \"react-window\";\nimport { calcPreferredListHeight } from \"./internal/calcPreferredListHeight\";\nimport { scrollIntoView } from \"./internal/scrollIntoView\";\nimport { useListAutoSizer } from \"./internal/useListAutoSizer\";\nimport { itemToString as defaultItemToString } from \"./itemToString\";\nimport { ListItemBase } from \"./ListItemBase\";\nimport { ListItemContext } from \"./ListItemContext\";\nimport { ListBaseProps } from \"./ListProps\";\nimport { useListStateContext } from \"./ListStateContext\";\nimport { useListItem, useVirtualizedListItem } from \"./useListItem\";\n\nimport \"./List.css\";\n\nconst withBaseName = makePrefixer(\"saltListDeprecated\");\n\nexport interface ListboxContextProps<Item> {\n  borderless?: boolean;\n  className?: string;\n  disabled?: boolean;\n  disableFocus?: boolean;\n  getItemId?: (index: number) => string;\n  getItemHeight?: (index?: number) => number;\n  id?: string;\n  itemToString?: (item: Item) => string;\n  listRef?: Ref<any>;\n  style?: any;\n  onScroll?: (evt: any) => void;\n}\n\nconst ListboxContext = createContext<ListboxContextProps<any>>({});\nconst DefaultItem = memo(function DefaultItem(props: any) {\n  const { item, itemToString, itemProps } = useListItem(props);\n  return <ListItemBase {...itemProps}>{itemToString(item)}</ListItemBase>;\n}, areEqual);\n\nconst DefaultVirtualizedItem = memo(function DefaultVirtualizedItem(\n  props: any\n) {\n  const { item, itemToString, itemProps } = useVirtualizedListItem(props);\n  return <ListItemBase {...itemProps}>{itemToString(item)}</ListItemBase>;\n},\nareEqual);\n\nexport interface ListboxProps extends HTMLAttributes<HTMLDivElement> {\n  onScroll?: (evt: any) => void;\n}\n\n/**\n * Listbox is the container for all list items. It is used as `outerElement` for\n * `react-window`.\n *\n * forwardRef gives `react-window` a way to attach a ref to listen to \"scroll\" events.\n * And `onScroll` is added by `react-window` so we pass it on.\n */\nconst Listbox: ComponentType<ListboxProps> = forwardRef(function Listbox(\n  props,\n  ref\n) {\n  const { style, onScroll, children } = props;\n\n  const {\n    className,\n    borderless,\n    disabled,\n    disableFocus,\n    listRef,\n    style: styleProp,\n    onScroll: onScrollProp,\n    ...restListProps\n  } = useContext<ListboxContextProps<any>>(ListboxContext);\n\n  const setListRef = useForkRef(ref, listRef);\n\n  const handleScroll = (event: any) => {\n    if (onScroll) {\n      onScroll(event);\n    }\n\n    if (onScrollProp) {\n      onScrollProp(event);\n    }\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      )}\n      onScroll={handleScroll}\n      ref={setListRef}\n      style={{ ...style, ...styleProp }}\n      tabIndex={disabled || disableFocus ? undefined : 0}\n      {...restListProps}\n    >\n      {children}\n    </div>\n  );\n});\n\nexport interface ListScrollHandles<Item> {\n  scrollToIndex: (itemIndex: number) => void;\n  scrollToItem: (item: Item) => void;\n  scrollTo: (scrollOffset: number) => void;\n}\n\nconst noScrolling: ListScrollHandles<unknown> = {\n  scrollToIndex: (itemIndex: number) => undefined,\n  scrollToItem: (item) => undefined,\n  scrollTo: (scrollOffset: number) => undefined,\n};\n\nexport const ListBase = forwardRef(function ListBase<Item>(\n  props: ListBaseProps<Item>,\n  ref: ForwardedRef<ListScrollHandles<Item>>\n) {\n  const { state } = useListStateContext();\n\n  // Getting list id in the following order:\n  // 1. Use the id prop if it's defined, otherwise..\n  // 2. Use the id from list context if it's defined, or finally...\n  // 3. Generate a random id.\n  const generatedId = useId(props.id);\n  const defaultId = state.id ?? generatedId;\n\n  // Removed useCharacteristic here\n  const sizeStackable = \"36px\";\n  const defaultItemHeight =\n    sizeStackable === null ? 36 : parseInt(sizeStackable, 10);\n\n  const hasIndexer = typeof props.getItemAtIndex === \"function\";\n  const hasVariableHeight = typeof props.getItemHeight === \"function\";\n\n  const {\n    id = defaultId,\n    source = [],\n    borderless,\n    children,\n    disableMouseDown,\n    itemTextHighlightPattern,\n    itemCount = source.length,\n    itemToString = defaultItemToString,\n    // TODO: Read from css variable\n    itemGapSize = 1,\n    itemHeight = defaultItemHeight,\n    getItemHeight = () => itemHeight,\n    getItemId = (index) => `${id}-item-${index}`,\n    getItemIndex = (item) => source.indexOf(item),\n    getItemAtIndex,\n    overscanCount = 10,\n    displayedItemCount = 10,\n    virtualized,\n    width,\n    height,\n    maxWidth,\n    maxHeight,\n    minWidth,\n    minHeight,\n    ListPlaceholder,\n    ListItem = virtualized ? DefaultVirtualizedItem : DefaultItem,\n    listRef: listRefProp,\n    ...restProps\n  } = props;\n\n  const { highlightedIndex } = state;\n\n  const preferredHeight =\n    height ??\n    calcPreferredListHeight({\n      borderless,\n      displayedItemCount,\n      itemCount,\n      itemHeight,\n      getItemHeight,\n      itemGapSize,\n    });\n\n  const [containerRef, autoSize] = useListAutoSizer<HTMLDivElement>({\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n\n  /**\n   * This is used to access `react-window` API\n   * @see https://react-window.now.sh/#/api/FixedSizeList (under `Methods`)\n   */\n  const virtualizedListRef = useRef<any>(null);\n  const listRef = useRef<HTMLDivElement | null>(null);\n\n  const setListRef = useForkRef(listRef, listRefProp);\n\n  const scrollToIndex = (itemIndex: number) => {\n    scrollIntoView(\n      listRef.current?.querySelector(`[data-option-index=\"${itemIndex}\"]`),\n      listRef\n    );\n  };\n\n  const scrollHandles: ListScrollHandles<Item> = useMemo(\n    () => ({\n      scrollToIndex,\n      scrollToItem: (item: Item) => {\n        scrollToIndex(getItemIndex(item));\n      },\n      scrollTo: (scrollOffset: number) => {\n        if (listRef.current) {\n          listRef.current.scrollTop = scrollOffset;\n        }\n      },\n    }),\n    [getItemIndex]\n  );\n\n  const virtualizedScrollHandles: ListScrollHandles<Item> = useMemo(\n    () => ({\n      scrollToIndex: (itemIndex: number) => {\n        if (virtualizedListRef.current) {\n          virtualizedListRef.current.scrollToItem(itemIndex);\n        }\n      },\n      scrollToItem: (item: Item) => {\n        virtualizedListRef.current.scrollToItem(getItemIndex(item));\n      },\n      scrollTo: (scrollOffset: number) => {\n        virtualizedListRef.current.scrollTo(scrollOffset);\n      },\n    }),\n    [getItemIndex]\n  );\n\n  useImperativeHandle(\n    ref,\n    () => {\n      if (virtualized && virtualizedListRef.current) {\n        return virtualizedScrollHandles;\n      } else if (listRef.current) {\n        return scrollHandles;\n      } else {\n        return noScrolling;\n      }\n    },\n    [virtualized, scrollHandles, virtualizedScrollHandles]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (highlightedIndex == null) {\n      return;\n    }\n\n    if (virtualized && virtualizedListRef.current) {\n      virtualizedListRef.current.scrollToItem(highlightedIndex);\n    } else if (listRef.current) {\n      scrollToIndex(highlightedIndex);\n    }\n  }, [highlightedIndex, virtualized]);\n\n  const renderList = () => {\n    if (Children.count(children)) {\n      return (\n        <Listbox style={autoSize}>\n          <ListItemContext.Provider\n            value={{\n              disableMouseDown,\n              getItemId,\n              getItemHeight,\n              //@ts-ignore\n              itemToString,\n              itemTextHighlightPattern,\n            }}\n          >\n            {children}\n          </ListItemContext.Provider>\n        </Listbox>\n      );\n    }\n\n    if (virtualized) {\n      const VirtualizedList: any = hasVariableHeight\n        ? VariableSizeList\n        : FixedSizeList;\n\n      return (\n        <ListItemContext.Provider\n          value={{\n            disableMouseDown,\n            getItemId,\n            //@ts-ignore\n            itemToString,\n            itemTextHighlightPattern,\n          }}\n        >\n          <VirtualizedList\n            height={autoSize.height}\n            itemCount={itemCount}\n            itemData={source}\n            itemSize={hasVariableHeight ? getItemHeight : itemHeight}\n            outerElementType={Listbox}\n            overscanCount={overscanCount}\n            ref={virtualizedListRef}\n            width={autoSize.width}\n          >\n            {ListItem}\n          </VirtualizedList>\n        </ListItemContext.Provider>\n      );\n    }\n\n    return (\n      <Listbox style={autoSize}>\n        <ListItemContext.Provider\n          value={{\n            disableMouseDown,\n            getItemId,\n            getItemHeight,\n            //@ts-ignore\n            itemToString,\n            itemTextHighlightPattern,\n          }}\n        >\n          {(hasIndexer ? Array.from({ length: itemCount }) : source).map(\n            (item, index) => (\n              <ListItem\n                index={index}\n                // No, getItemAtIndex can NOT be undefined, because hasIndexer is confirming that already. stupid stupid typescript !!!\n                item={hasIndexer ? getItemAtIndex!(index) : item}\n                key={getItemId(index)}\n              />\n            )\n          )}\n        </ListItemContext.Provider>\n      </Listbox>\n    );\n  };\n\n  // TODO It's weird that List itself isn't the root element, ListWrapper is\n  // THat means if client passes style, with margin, for example, it will break;\n  return (\n    <div\n      className={clsx(withBaseName(\"wrapper\"), {\n        [withBaseName(\"borderless\")]: borderless,\n      })}\n      ref={containerRef}\n      style={{\n        minWidth,\n        minHeight,\n        width: width ?? \"100%\",\n        height: height ?? \"100%\",\n        maxWidth: maxWidth ?? width,\n        maxHeight: maxHeight ?? preferredHeight,\n      }}\n    >\n      {itemCount === 0 && ListPlaceholder !== undefined ? (\n        <ListPlaceholder style={autoSize} />\n      ) : (\n        <ListboxContext.Provider\n          value={{\n            ...restProps,\n            listRef: setListRef,\n            id,\n            borderless,\n          }}\n        >\n          {renderList()}\n        </ListboxContext.Provider>\n      )}\n    </div>\n  );\n}) as <Item>(\n  p: ListBaseProps<Item> & { ref?: ForwardedRef<ListScrollHandles<Item>> }\n) => ReactElement<ListBaseProps<Item>>;\n"],"names":["DefaultItem","DefaultVirtualizedItem","Listbox","ListBase","itemToString","defaultItemToString","_a"],"mappings":"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"}

package/dist-es/packages/lab/src/list-deprecated/ListItemBase.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { memo, forwardRef, useState, useRef, useEffect } from 'react';
 import { useOverflowDetection } from '../utils/useOverflowDetection.js';
 import { Highlighter } from './internal/Highlighter.js';
@@ -48,7 +48,7 @@ const ListItemBase = memo(
     const { ref: triggerRef, ...triggerProps } = getTriggerProps({
       "aria-label": typeof children === "string" ? children : void 0,
       ...restProps,
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("deselectable")]: deselectable,

package/dist-es/packages/lab/src/list-deprecated/ListItemBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemBase.js","sources":["../src/list-deprecated/ListItemBase.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useOverflowDetection } from \"../utils\";\nimport { Highlighter } from \"./internal/Highlighter\";\nimport { useTooltip, useTooltipContext } from \"../tooltip\";\n\nimport \"./ListItem.css\";\n\n//TODO does this need to be generic <Item?\nexport interface ListItemBaseProps extends HTMLAttributes<HTMLDivElement> {\n  disabled?: boolean;\n  deselectable?: boolean;\n  focusVisible?: boolean;\n  highlighted?: boolean;\n  itemTextHighlightPattern?: RegExp | string;\n  selected?: boolean;\n  tooltipText?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltListItemDeprecated\");\n\n// just to keep line number parity\n//\nexport const ListItemBase = memo(\n  forwardRef(function ListItemBase(\n    props: ListItemBaseProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) {\n    const {\n      className,\n      deselectable,\n      selected,\n      highlighted = false,\n      focusVisible,\n      tooltipText,\n      disabled,\n      children,\n      itemTextHighlightPattern,\n      ...restProps\n    } = props;\n\n    const [openTooltip, setOpenTooltip] = useState(false);\n    const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n    const { current: detectTruncation } = useRef(typeof children === \"string\");\n\n    const [overflowRef, isOverflowed] = useOverflowDetection<HTMLDivElement>();\n    const setItemRef = useForkRef(overflowRef, ref);\n\n    useEffect(() => {\n      if (detectTruncation && isOverflowed) {\n        const timeout = setTimeout(\n          () => setOpenTooltip(highlighted),\n          highlighted ? enterDelay : leaveDelay\n        );\n\n        return () => {\n          clearTimeout(timeout);\n        };\n      }\n    }, [highlighted, enterDelay, leaveDelay, detectTruncation, isOverflowed]);\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      placement,\n      open: openTooltip,\n      disabled: !isOverflowed,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      \"aria-label\": typeof children === \"string\" ? children : undefined,\n      ...restProps,\n      className: cn(\n        withBaseName(),\n        {\n          [withBaseName(\"deselectable\")]: deselectable,\n          [withBaseName(\"highlighted\")]: highlighted,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"focusVisible\")]: focusVisible,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      ),\n    });\n\n    const handleRef = useForkRef(\n      triggerRef,\n      detectTruncation ? ref : setItemRef\n    );\n\n    return (\n      <>\n        <Tooltip {...getTooltipProps({ title: tooltipText })} />\n        <div ref={handleRef} {...triggerProps}>\n          {detectTruncation ? (\n            <span className={withBaseName(\"textWrapper\")} ref={overflowRef}>\n              {itemTextHighlightPattern == null ? (\n                children\n              ) : (\n                <Highlighter\n                  matchPattern={itemTextHighlightPattern}\n                  text={children}\n                />\n              )}\n            </span>\n          ) : (\n            children\n          )}\n        </div>\n      </>\n    );\n  })\n);\n"],"names":["ListItemBase","cn"],"mappings":"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"}
+{"version":3,"file":"ListItemBase.js","sources":["../src/list-deprecated/ListItemBase.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useOverflowDetection } from \"../utils\";\nimport { Highlighter } from \"./internal/Highlighter\";\nimport { useTooltip, useTooltipContext } from \"../tooltip\";\n\nimport \"./ListItem.css\";\n\n//TODO does this need to be generic <Item?\nexport interface ListItemBaseProps extends HTMLAttributes<HTMLDivElement> {\n  disabled?: boolean;\n  deselectable?: boolean;\n  focusVisible?: boolean;\n  highlighted?: boolean;\n  itemTextHighlightPattern?: RegExp | string;\n  selected?: boolean;\n  tooltipText?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltListItemDeprecated\");\n\n// just to keep line number parity\n//\nexport const ListItemBase = memo(\n  forwardRef(function ListItemBase(\n    props: ListItemBaseProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) {\n    const {\n      className,\n      deselectable,\n      selected,\n      highlighted = false,\n      focusVisible,\n      tooltipText,\n      disabled,\n      children,\n      itemTextHighlightPattern,\n      ...restProps\n    } = props;\n\n    const [openTooltip, setOpenTooltip] = useState(false);\n    const { Tooltip, enterDelay, leaveDelay, placement } = useTooltipContext();\n    const { current: detectTruncation } = useRef(typeof children === \"string\");\n\n    const [overflowRef, isOverflowed] = useOverflowDetection<HTMLDivElement>();\n    const setItemRef = useForkRef(overflowRef, ref);\n\n    useEffect(() => {\n      if (detectTruncation && isOverflowed) {\n        const timeout = setTimeout(\n          () => setOpenTooltip(highlighted),\n          highlighted ? enterDelay : leaveDelay\n        );\n\n        return () => {\n          clearTimeout(timeout);\n        };\n      }\n    }, [highlighted, enterDelay, leaveDelay, detectTruncation, isOverflowed]);\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      placement,\n      open: openTooltip,\n      disabled: !isOverflowed,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n      \"aria-label\": typeof children === \"string\" ? children : undefined,\n      ...restProps,\n      className: clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"deselectable\")]: deselectable,\n          [withBaseName(\"highlighted\")]: highlighted,\n          [withBaseName(\"selected\")]: selected,\n          [withBaseName(\"focusVisible\")]: focusVisible,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className\n      ),\n    });\n\n    const handleRef = useForkRef(\n      triggerRef,\n      detectTruncation ? ref : setItemRef\n    );\n\n    return (\n      <>\n        <Tooltip {...getTooltipProps({ title: tooltipText })} />\n        <div ref={handleRef} {...triggerProps}>\n          {detectTruncation ? (\n            <span className={withBaseName(\"textWrapper\")} ref={overflowRef}>\n              {itemTextHighlightPattern == null ? (\n                children\n              ) : (\n                <Highlighter\n                  matchPattern={itemTextHighlightPattern}\n                  text={children}\n                />\n              )}\n            </span>\n          ) : (\n            children\n          )}\n        </div>\n      </>\n    );\n  })\n);\n"],"names":["ListItemBase"],"mappings":"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"}

package/dist-es/packages/lab/src/logo/Logo.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { LogoTitle } from './internal/LogoTitle.js';
 import './Logo.css.js';
@@ -18,7 +18,7 @@ const Logo = forwardRef(function Logo2(props, ref) {
     ...rest
   } = props;
   return /* @__PURE__ */ jsxs("span", {
-    className: cx(withBaseName(), className, {
+    className: clsx(withBaseName(), className, {
       [withBaseName("compact")]: compact
     }),
     ref,
@@ -28,16 +28,16 @@ const Logo = forwardRef(function Logo2(props, ref) {
         className: withBaseName("wrapper"),
         children: /* @__PURE__ */ jsx(LogoImageComponent, {
           ...ImageProps,
-          className: cx(withBaseName("logo"), ImageProps == null ? void 0 : ImageProps.className),
+          className: clsx(withBaseName("logo"), ImageProps == null ? void 0 : ImageProps.className),
           src,
           alt: (ImageProps == null ? void 0 : ImageProps.alt) || "Logo"
         })
       }),
       /* @__PURE__ */ jsx(LogoTitle, {
         ...TitleProps,
-        className: cx(withBaseName("appTitle"), TitleProps == null ? void 0 : TitleProps.className),
+        className: clsx(withBaseName("appTitle"), TitleProps == null ? void 0 : TitleProps.className),
         label: appTitle,
-        separatorClassname: cx(
+        separatorClassname: clsx(
           withBaseName("titlePipe"),
           TitleProps == null ? void 0 : TitleProps.separatorClassname
         )

package/dist-es/packages/lab/src/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { LogoTitle, LogoTitleProps } from \"./internal/LogoTitle\";\nimport \"./Logo.css\";\n\nexport interface LogoProps extends ComponentPropsWithoutRef<\"span\"> {\n  /**\n   * Used to provide application title\n   */\n  appTitle?: string;\n  /**\n   * If `true`, the logo will be compact;\n   */\n  compact?: boolean;\n  /**\n   * Props passed to the Logo.\n   */\n  ImageProps?: Partial<ComponentPropsWithoutRef<\"img\">>;\n  /**\n   * Custom Component to render the logo image.\n   * e.g. if a custom renderer instead of static image using `src` prop.\n   */\n  LogoImageComponent?: ComponentType<Partial<ComponentPropsWithoutRef<\"img\">>>;\n  /**\n   * Image src for logo.\n   */\n  src?: string;\n  /**\n   * Props passed to the Application Title if used.\n   * If using a custom image then ImageProps.alt should be set to include a screen reader alternative text.\n   */\n  TitleProps?: Omit<Partial<LogoTitleProps>, \"label\">;\n}\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(\n  props,\n  ref\n) {\n  const {\n    appTitle,\n    className,\n    compact,\n    src,\n    ImageProps,\n    LogoImageComponent = \"img\",\n    TitleProps,\n    ...rest\n  } = props;\n\n  // TODO check if we need ImageProps and TitleProps classNames interface.\n  return (\n    <span\n      className={cx(withBaseName(), className, {\n        [withBaseName(\"compact\")]: compact,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      <span className={withBaseName(\"wrapper\")}>\n        <LogoImageComponent\n          {...ImageProps}\n          className={cx(withBaseName(\"logo\"), ImageProps?.className)}\n          src={src}\n          alt={ImageProps?.alt || \"Logo\"}\n        />\n      </span>\n      <LogoTitle\n        {...TitleProps}\n        className={cx(withBaseName(\"appTitle\"), TitleProps?.className)}\n        label={appTitle}\n        separatorClassname={cx(\n          withBaseName(\"titlePipe\"),\n          TitleProps?.separatorClassname\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["Logo"],"mappings":";;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA,CAAuC,SAASA,KAAAA,CAClE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAqB,GAAA,KAAA;AAAA,IACrB,UAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAGJ,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACvC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACrC,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAW,EAAG,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,UACzD,GAAA;AAAA,UACA,GAAA,EAAA,CAAK,yCAAY,GAAO,KAAA,MAAA;AAAA,SAC1B,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,SAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAW,EAAG,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC7D,KAAO,EAAA,QAAA;AAAA,QACP,kBAAoB,EAAA,EAAA;AAAA,UAClB,aAAa,WAAW,CAAA;AAAA,UACxB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,kBAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { ComponentType, forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { LogoTitle, LogoTitleProps } from \"./internal/LogoTitle\";\nimport \"./Logo.css\";\n\nexport interface LogoProps extends ComponentPropsWithoutRef<\"span\"> {\n  /**\n   * Used to provide application title\n   */\n  appTitle?: string;\n  /**\n   * If `true`, the logo will be compact;\n   */\n  compact?: boolean;\n  /**\n   * Props passed to the Logo.\n   */\n  ImageProps?: Partial<ComponentPropsWithoutRef<\"img\">>;\n  /**\n   * Custom Component to render the logo image.\n   * e.g. if a custom renderer instead of static image using `src` prop.\n   */\n  LogoImageComponent?: ComponentType<Partial<ComponentPropsWithoutRef<\"img\">>>;\n  /**\n   * Image src for logo.\n   */\n  src?: string;\n  /**\n   * Props passed to the Application Title if used.\n   * If using a custom image then ImageProps.alt should be set to include a screen reader alternative text.\n   */\n  TitleProps?: Omit<Partial<LogoTitleProps>, \"label\">;\n}\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(\n  props,\n  ref\n) {\n  const {\n    appTitle,\n    className,\n    compact,\n    src,\n    ImageProps,\n    LogoImageComponent = \"img\",\n    TitleProps,\n    ...rest\n  } = props;\n\n  // TODO check if we need ImageProps and TitleProps classNames interface.\n  return (\n    <span\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"compact\")]: compact,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      <span className={withBaseName(\"wrapper\")}>\n        <LogoImageComponent\n          {...ImageProps}\n          className={clsx(withBaseName(\"logo\"), ImageProps?.className)}\n          src={src}\n          alt={ImageProps?.alt || \"Logo\"}\n        />\n      </span>\n      <LogoTitle\n        {...TitleProps}\n        className={clsx(withBaseName(\"appTitle\"), TitleProps?.className)}\n        label={appTitle}\n        separatorClassname={clsx(\n          withBaseName(\"titlePipe\"),\n          TitleProps?.separatorClassname\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["Logo"],"mappings":";;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA,CAAuC,SAASA,KAAAA,CAClE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAqB,GAAA,KAAA;AAAA,IACrB,UAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAGJ,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACrC,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAW,IAAK,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,UAC3D,GAAA;AAAA,UACA,GAAA,EAAA,CAAK,yCAAY,GAAO,KAAA,MAAA;AAAA,SAC1B,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,SAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAW,IAAK,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC/D,KAAO,EAAA,QAAA;AAAA,QACP,kBAAoB,EAAA,IAAA;AAAA,UAClB,aAAa,WAAW,CAAA;AAAA,UACxB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,kBAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/menu-button/MenuButtonTrigger.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer, Button } from '@salt-ds/core';
 import { ChevronDownIcon } from '@salt-ds/icons';
 import './MenuButtonTrigger.css.js';
@@ -9,7 +9,7 @@ const withBaseName = makePrefixer("saltMenuButtonTrigger");
 const MenuButtonTrigger = forwardRef(function MenuButtonTrigger2({ className, hideCaret, isMenuOpen, children, ...rest }, ref) {
   return /* @__PURE__ */ jsxs(Button, {
     ref,
-    className: cx(withBaseName(), className, {
+    className: clsx(withBaseName(), className, {
       [withBaseName("buttonOpen")]: isMenuOpen
     }),
     "data-testid": "menu-button-trigger",

package/dist-es/packages/lab/src/menu-button/MenuButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { ChevronDownIcon } from \"@salt-ds/icons\";\nimport \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref\n) {\n  return (\n    <Button\n      ref={ref}\n      className={classnames(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ChevronDownIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","classnames"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAS5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,SAAW,EAAA,SAAA,EAAW,UAAY,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MAC/C,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IACX,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,CAAC,6BACC,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACnC,aAAY,EAAA,2BAAA;AAAA,OACd,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { ChevronDownIcon } from \"@salt-ds/icons\";\nimport \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref\n) {\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ChevronDownIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAS5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,SAAW,EAAA,SAAA,EAAW,UAAY,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IACX,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,CAAC,6BACC,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACnC,aAAY,EAAA,2BAAA;AAAA,OACd,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/metric/Metric.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, useMemo } from 'react';
 import { MetricContextProvider } from './internal/MetricContext.js';
 import './Metric.css.js';
@@ -53,7 +53,7 @@ const Metric = forwardRef(function Metric2({
     value,
     children: /* @__PURE__ */ jsx("div", {
       ...restProps,
-      className: cx(
+      className: clsx(
         withBaseName(),
         withBaseName(`size-${size}`),
         {

package/dist-es/packages/lab/src/metric/Metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, MetricContextValue } from \"./internal\";\n\nimport \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref\n) {\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ]\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={cx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,aAAa,CAAmB,gBAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AACtC,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,KAAA;AAAA,IACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,QAAQ,IAAM,CAAA,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAa,UAAA,EAAA,SAAA,CAAA,CAAW,CAAI,GAAA,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAe,YAAA,EAAA,WAAA,CAAA,CAAa,CAAI,GAAA,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,KAAA,CAAA,CAAO,CAAI,GAAA,KAAA;AAAA,SACpC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, MetricContextValue } from \"./internal\";\n\nimport \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref\n) {\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ]\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,aAAa,CAAmB,gBAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AACtC,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,KAAA;AAAA,IACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,QAAQ,IAAM,CAAA,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAa,UAAA,EAAA,SAAA,CAAA,CAAW,CAAI,GAAA,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAe,YAAA,EAAA,WAAA,CAAA,CAAa,CAAI,GAAA,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,KAAA,CAAA,CAAO,CAAI,GAAA,KAAA;AAAA,SACpC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/metric/MetricContent.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, Text, Display3, Display2, Display1 } from '@salt-ds/core';
 import { ArrowDownIcon, ArrowUpIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useMetricContext } from './internal/MetricContext.js';
 import './MetricContent.css.js';
@@ -49,7 +49,7 @@ const MetricContent = forwardRef(
     }) : null;
     return /* @__PURE__ */ jsxs("div", {
       ...restProps,
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
       ref,
       children: [

package/dist-es/packages/lab/src/metric/MetricContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  Text,\n  Display1,\n  Display2,\n  Display3,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref\n  ) {\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={cx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["MetricContent"],"mappings":";;;;;;;;AAqCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EACN,EAAI,EAAA,WAAA;AACN,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,QACE,gBAAiB,EAAA,CAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAA,QAAA;AAAA,MACP,MAAQ,EAAA,QAAA;AAAA,MACR,KAAO,EAAA,QAAA;AAAA,KACT,CAAA;AACA,IAAA,MAAM,iBAAiB,iBAAkB,CAAA,IAAA,CAAA,CAAA;AAEzC,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAA,EAAM,SAAY,GAAA,CAAA,SAAA,EAAY,SAAc,CAAA,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG,kBAAA;AAAA,KACL,CAAA;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,IAAA,IAAA,GAAA,sBAAA,GACC,SAAY,GAAA,gBAAA,CAAiB,SAAa,CAAA,GAAA,KAAA,CAAA,CAAA;AAE7C,IAAM,MAAA,IAAA,GACJ,aAAiB,IAAA,aAAA,mBAAiB,GAAA,CAAA,aAAA,EAAA;AAAA,MAAe,GAAG,SAAA;AAAA,KAAW,CAAK,GAAA,IAAA,CAAA;AAEtE,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACvC,iBAAiB,EAAA,CAAA,EAAG,OAAW,IAAA,EAAA,CAAA,CAAA,EAAM,UAAc,IAAA,EAAA,CAAA,CAAA;AAAA,MACnD,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAC3C,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BACjC,GAAA,CAAA,cAAA,EAAA;AAAA,cACC,aAAY,EAAA,cAAA;AAAA,cACZ,EAAI,EAAA,OAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAE9B,QAAA,EAAA,KAAA;AAAA,aACH,CAAA;AAAA,YACC,sBAAsB,KAAS,IAAA,IAAA;AAAA,WAAA;AAAA,SAClC,CAAA;AAAA,QACC,4BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  Text,\n  Display1,\n  Display2,\n  Display3,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref\n  ) {\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["MetricContent"],"mappings":";;;;;;;;AAqCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EACN,EAAI,EAAA,WAAA;AACN,CAAA,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,QACE,gBAAiB,EAAA,CAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAA,QAAA;AAAA,MACP,MAAQ,EAAA,QAAA;AAAA,MACR,KAAO,EAAA,QAAA;AAAA,KACT,CAAA;AACA,IAAA,MAAM,iBAAiB,iBAAkB,CAAA,IAAA,CAAA,CAAA;AAEzC,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAA,EAAM,SAAY,GAAA,CAAA,SAAA,EAAY,SAAc,CAAA,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG,kBAAA;AAAA,KACL,CAAA;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,IAAA,IAAA,GAAA,sBAAA,GACC,SAAY,GAAA,gBAAA,CAAiB,SAAa,CAAA,GAAA,KAAA,CAAA,CAAA;AAE7C,IAAM,MAAA,IAAA,GACJ,aAAiB,IAAA,aAAA,mBAAiB,GAAA,CAAA,aAAA,EAAA;AAAA,MAAe,GAAG,SAAA;AAAA,KAAW,CAAK,GAAA,IAAA,CAAA;AAEtE,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,iBAAiB,EAAA,CAAA,EAAG,OAAW,IAAA,EAAA,CAAA,CAAA,EAAM,UAAc,IAAA,EAAA,CAAA,CAAA;AAAA,MACnD,GAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAC3C,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BACjC,GAAA,CAAA,cAAA,EAAA;AAAA,cACC,aAAY,EAAA,cAAA;AAAA,cACZ,EAAI,EAAA,OAAA;AAAA,cACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAE9B,QAAA,EAAA,KAAA;AAAA,aACH,CAAA;AAAA,YACC,sBAAsB,KAAS,IAAA,IAAA;AAAA,WAAA;AAAA,SAClC,CAAA;AAAA,QACC,4BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/metric/MetricHeader.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, useCallback } from 'react';
 import { useMetricContext } from './internal/MetricContext.js';
 import './MetricHeader.css.js';
@@ -30,7 +30,7 @@ const MetricHeader = forwardRef(
     }, [subtitle, subtitleId, SubtitleLinkProps]);
     return /* @__PURE__ */ jsxs("div", {
       ...restProps,
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       children: [
         /* @__PURE__ */ jsx(Text, {

package/dist-es/packages/lab/src/metric/MetricHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { LinkProps, Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\nimport \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref\n  ) {\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={cx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  }\n);\n"],"names":["MetricHeader"],"mappings":";;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QAEX,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC5D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { LinkProps, Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\nimport \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref\n  ) {\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  }\n);\n"],"names":["MetricHeader"],"mappings":";;;;;;;AAuBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QAEX,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/overlay/Overlay.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { CloseIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useWindow } from '../window/WindowContext.js';
 import '../window/ElectronWindow.js';
@@ -32,14 +32,14 @@ const Overlay = forwardRef(
     }
     return /* @__PURE__ */ jsx(Portal, {
       children: /* @__PURE__ */ jsx(Window, {
-        className: cx(withBaseName(), className, {
+        className: clsx(withBaseName(), className, {
           [withBaseName(variant)]: variant === "secondary"
         }),
         id,
         ref,
         ...rest,
         children: /* @__PURE__ */ jsxs("div", {
-          className: cx(withBaseName("content")),
+          className: clsx(withBaseName("content")),
           "data-testid": "overlay-content",
           children: [
             showClose && /* @__PURE__ */ jsx(Button, {

package/dist-es/packages/lab/src/overlay/Overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport { ComponentProps, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"../window\";\nimport { UseFloatingUIProps } from \"../popper\";\nimport { Portal } from \"../portal\";\n\nimport \"./Overlay.css\";\n\ninterface ADAExceptions {\n  showClose?: boolean;\n}\n\nexport interface OverlayProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    Partial<Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">> {\n  /**\n   * object that houses ada related props.\n   * adaExceptions.showClose defaults to true. It can be removed at the risk of ADA compliance\n   */\n  adaExceptions?: ADAExceptions;\n  arrowProps?: ComponentProps<\"div\">;\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltOverlay\");\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  (\n    {\n      adaExceptions: { showClose } = {\n        showClose: true,\n      },\n      arrowProps,\n      children,\n      className,\n      open,\n      onOpenChange,\n      variant = \"primary\",\n      ...rest\n    },\n    ref\n  ) => {\n    // Will need to figure out a better way to assign popper id's for the electron windows\n    const id = useId();\n    const Window = useWindow();\n\n    const handleCloseButton = () => {\n      onOpenChange?.(false);\n    };\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Portal>\n        <Window\n          className={cx(withBaseName(), className, {\n            [withBaseName(variant)]: variant === \"secondary\",\n          })}\n          id={id}\n          ref={ref}\n          {...rest}\n        >\n          <div\n            className={cx(withBaseName(\"content\"))}\n            data-testid=\"overlay-content\"\n          >\n            {showClose && (\n              <Button\n                onClick={handleCloseButton}\n                className={withBaseName(\"close\")}\n                variant=\"secondary\"\n              >\n                <CloseIcon\n                  accessible-text=\"close overlay\"\n                  className={withBaseName(\"closeIcon\")}\n                />\n              </Button>\n            )}\n            {children}\n            <div className={withBaseName(\"arrow\")} {...arrowProps} />\n          </div>\n        </Window>\n      </Portal>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CACE;AAAA,IACE,aAAA,EAAe,EAAE,SAAA,EAAc,GAAA;AAAA,MAC7B,SAAW,EAAA,IAAA;AAAA,KACb;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AAEH,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,UACvC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,SACtC,CAAA;AAAA,QACD,EAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,EAAA,CAAG,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACrC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SACzD,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Overlay.js","sources":["../src/overlay/Overlay.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentProps, ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useWindow } from \"../window\";\nimport { UseFloatingUIProps } from \"../popper\";\nimport { Portal } from \"../portal\";\n\nimport \"./Overlay.css\";\n\ninterface ADAExceptions {\n  showClose?: boolean;\n}\n\nexport interface OverlayProps\n  extends ComponentPropsWithoutRef<\"div\">,\n    Partial<Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\">> {\n  /**\n   * object that houses ada related props.\n   * adaExceptions.showClose defaults to true. It can be removed at the risk of ADA compliance\n   */\n  adaExceptions?: ADAExceptions;\n  arrowProps?: ComponentProps<\"div\">;\n  variant?: \"primary\" | \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltOverlay\");\n\nexport const Overlay = forwardRef<HTMLDivElement, OverlayProps>(\n  (\n    {\n      adaExceptions: { showClose } = {\n        showClose: true,\n      },\n      arrowProps,\n      children,\n      className,\n      open,\n      onOpenChange,\n      variant = \"primary\",\n      ...rest\n    },\n    ref\n  ) => {\n    // Will need to figure out a better way to assign popper id's for the electron windows\n    const id = useId();\n    const Window = useWindow();\n\n    const handleCloseButton = () => {\n      onOpenChange?.(false);\n    };\n\n    if (!open) {\n      return null;\n    }\n\n    return (\n      <Portal>\n        <Window\n          className={clsx(withBaseName(), className, {\n            [withBaseName(variant)]: variant === \"secondary\",\n          })}\n          id={id}\n          ref={ref}\n          {...rest}\n        >\n          <div\n            className={clsx(withBaseName(\"content\"))}\n            data-testid=\"overlay-content\"\n          >\n            {showClose && (\n              <Button\n                onClick={handleCloseButton}\n                className={withBaseName(\"close\")}\n                variant=\"secondary\"\n              >\n                <CloseIcon\n                  accessible-text=\"close overlay\"\n                  className={withBaseName(\"closeIcon\")}\n                />\n              </Button>\n            )}\n            {children}\n            <div className={withBaseName(\"arrow\")} {...arrowProps} />\n          </div>\n        </Window>\n      </Portal>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AA0BA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAExC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,CACE;AAAA,IACE,aAAA,EAAe,EAAE,SAAA,EAAc,GAAA;AAAA,MAC7B,SAAW,EAAA,IAAA;AAAA,KACb;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,KAEL,GACG,KAAA;AAEH,IAAA,MAAM,KAAK,KAAM,EAAA,CAAA;AACjB,IAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,IAAA,MAAM,oBAAoB,MAAM;AAC9B,MAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAA,IAAI,CAAC,IAAM,EAAA;AACT,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,UACzC,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,SACtC,CAAA;AAAA,QACD,EAAA;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,SAAS,CAAC,CAAA;AAAA,UACvC,aAAY,EAAA,iBAAA;AAAA,UAEX,QAAA,EAAA;AAAA,YAAA,SAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,OAAS,EAAA,iBAAA;AAAA,cACT,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,OAAQ,EAAA,WAAA;AAAA,cAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,gBACC,iBAAgB,EAAA,eAAA;AAAA,gBAChB,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,eACrC,CAAA;AAAA,aACF,CAAA;AAAA,YAED,QAAA;AAAA,4BACA,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAAI,GAAG,UAAA;AAAA,aAAY,CAAA;AAAA,WAAA;AAAA,SACzD,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/pagination/ArrowButton.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Button } from '@salt-ds/core';
 import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { withBaseName } from './utils.js';
 
 const contentByType = /* @__PURE__ */ new Map([
@@ -44,7 +44,7 @@ const ArrowButton = ({
   return /* @__PURE__ */ jsx(Button, {
     ...restProps,
     variant: "secondary",
-    className: cx(withBaseName("arrowButton"), className),
+    className: clsx(withBaseName("arrowButton"), className),
     role: "link",
     name,
     "aria-label": name,