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

package/dist-es/packages/lab/src/common-hooks/useViewportTracking.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewportTracking.js","sources":["../src/common-hooks/useViewportTracking.ts"],"sourcesContent":["import {\n  MutableRefObject,\n  RefObject,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n} from \"react\";\nimport { CollectionItem } from \"./collectionTypes\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\n\nconst HeightOnly = [\"height\"];\nconst HeightWithScroll = [\"height\", \"scrollHeight\"];\nconst EMPTY_ARRAY: any[] = [];\n\nconst ObservedDimensions = {\n  containerOnly: [HeightWithScroll, EMPTY_ARRAY],\n  withContent: [HeightOnly, HeightOnly],\n};\nconst getObservedDimensions = (containerOnly: boolean) =>\n  containerOnly\n    ? ObservedDimensions.containerOnly\n    : ObservedDimensions.withContent;\n\nconst NULL_REF = { current: null };\n\nconst getItemTop = (\n  element: HTMLElement,\n  offsetContainer: HTMLElement | null\n) => {\n  const { transform = \"none\" } = getComputedStyle(element);\n  if (transform.startsWith(\"matrix\")) {\n    const pos = transform.lastIndexOf(\",\");\n    return parseInt(transform.slice(pos + 1));\n  } else {\n    let offsetParent = element.offsetParent as HTMLElement;\n    if (offsetParent === offsetContainer || offsetContainer === null) {\n      return element.offsetTop;\n    } else {\n      let top = element.offsetTop;\n      while (offsetParent !== null && offsetParent !== offsetContainer) {\n        top += offsetParent.offsetTop;\n        offsetParent = offsetParent.offsetParent as HTMLElement;\n      }\n      return top;\n    }\n  }\n};\n\nexport interface ViewportTrackingProps<Item> {\n  containerRef: RefObject<HTMLElement>;\n  contentRef?: RefObject<HTMLElement>;\n  highlightedIdx?: number;\n  indexPositions: CollectionItem<Item>[];\n  stickyHeaders?: boolean;\n}\n\nexport interface ViewportTrackingResult<Item> {\n  isScrolling: MutableRefObject<boolean>;\n  scrollIntoView: (item: CollectionItem<Item>) => void;\n}\n\nexport const useViewportTracking = <Item>({\n  containerRef,\n  contentRef = NULL_REF,\n  highlightedIdx = -1,\n  indexPositions,\n  stickyHeaders = false,\n}: ViewportTrackingProps<Item>): ViewportTrackingResult<Item> => {\n  const scrolling = useRef<boolean>(false);\n  const viewport = useRef({\n    height: 0,\n    contentHeight: 0,\n  });\n\n  const scrollTo = useCallback((scrollPos: number) => {\n    scrolling.current = true;\n    if (containerRef.current) {\n      containerRef.current.scrollTop = scrollPos;\n    }\n    setTimeout(() => {\n      scrolling.current = false;\n    });\n  }, []);\n\n  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);\n\n  const scrollToEnd = useCallback(() => {\n    scrollTo(viewport.current.contentHeight - viewport.current.height);\n  }, [scrollTo]);\n\n  const scrollIntoViewIfNeeded = useCallback(\n    (item: CollectionItem<Item>) => {\n      const offsetContainer = contentRef.current || containerRef.current;\n      if (item.id) {\n        const el = document.getElementById(item.id);\n        if (el && containerRef.current) {\n          const { height: viewportHeight } = viewport.current;\n          const targetEl =\n            el.ariaExpanded && el.firstChild\n              ? (el.firstChild as HTMLElement)\n              : el;\n          const headerHeight = stickyHeaders ? 36 : 0;\n          const itemTop = getItemTop(targetEl, offsetContainer);\n          const itemHeight = targetEl.offsetHeight;\n          const { scrollTop } = containerRef.current;\n          const viewportStart = scrollTop + headerHeight;\n          const viewportEnd = viewportStart + viewportHeight - headerHeight;\n\n          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {\n            const newScrollTop =\n              itemTop + itemHeight > viewportEnd\n                ? scrollTop + (itemTop + itemHeight) - viewportEnd\n                : itemTop - headerHeight;\n\n            scrollTo(newScrollTop);\n          }\n        }\n      }\n    },\n    [containerRef, contentRef, scrollTo, stickyHeaders]\n  );\n\n  useLayoutEffect(() => {\n    const { height, contentHeight } = viewport.current;\n    const item = indexPositions[highlightedIdx];\n    if (contentHeight > height && item) {\n      const [firstItem] = indexPositions;\n      const [lastItem] = indexPositions.slice(-1);\n      if (item === firstItem) {\n        scrollToStart();\n      } else if (item === lastItem) {\n        scrollToEnd();\n      } else {\n        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);\n      }\n    }\n  }, [\n    highlightedIdx,\n    indexPositions,\n    scrollIntoViewIfNeeded,\n    scrollToEnd,\n    scrollToStart,\n  ]);\n\n  const onContainerResize: ResizeHandler = useCallback(\n    ({ height, scrollHeight }) => {\n      if (typeof height === \"number\") {\n        viewport.current.height = height;\n      }\n      if (typeof scrollHeight === \"number\") {\n        viewport.current.contentHeight = scrollHeight;\n      }\n    },\n    []\n  );\n\n  const onContentResize: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      viewport.current.contentHeight = height;\n    }\n  }, []);\n\n  // If we only have a container, then we will observe its height and scrollHeight,\n  // contentRef will be null, so second call to observer will observe nothing.\n  // If we have both container and content, then we observe the height of each.\n  const [containerDimensions, contentDimensions] = getObservedDimensions(\n    contentRef === NULL_REF\n  );\n  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);\n  useResizeObserver(contentRef, contentDimensions, onContentResize, true);\n\n  return {\n    isScrolling: scrolling,\n    scrollIntoView: scrollIntoViewIfNeeded,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useViewportTracking.js","sources":["../src/common-hooks/useViewportTracking.ts"],"sourcesContent":["import { MutableRefObject, RefObject, useCallback, useRef } from \"react\";\nimport { CollectionItem } from \"./collectionTypes\";\nimport { ResizeHandler, useResizeObserver } from \"../responsive\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nconst HeightOnly = [\"height\"];\nconst HeightWithScroll = [\"height\", \"scrollHeight\"];\nconst EMPTY_ARRAY: any[] = [];\n\nconst ObservedDimensions = {\n  containerOnly: [HeightWithScroll, EMPTY_ARRAY],\n  withContent: [HeightOnly, HeightOnly],\n};\nconst getObservedDimensions = (containerOnly: boolean) =>\n  containerOnly\n    ? ObservedDimensions.containerOnly\n    : ObservedDimensions.withContent;\n\nconst NULL_REF = { current: null };\n\nconst getItemTop = (\n  element: HTMLElement,\n  offsetContainer: HTMLElement | null\n) => {\n  const { transform = \"none\" } = getComputedStyle(element);\n  if (transform.startsWith(\"matrix\")) {\n    const pos = transform.lastIndexOf(\",\");\n    return parseInt(transform.slice(pos + 1));\n  } else {\n    let offsetParent = element.offsetParent as HTMLElement;\n    if (offsetParent === offsetContainer || offsetContainer === null) {\n      return element.offsetTop;\n    } else {\n      let top = element.offsetTop;\n      while (offsetParent !== null && offsetParent !== offsetContainer) {\n        top += offsetParent.offsetTop;\n        offsetParent = offsetParent.offsetParent as HTMLElement;\n      }\n      return top;\n    }\n  }\n};\n\nexport interface ViewportTrackingProps<Item> {\n  containerRef: RefObject<HTMLElement>;\n  contentRef?: RefObject<HTMLElement>;\n  highlightedIdx?: number;\n  indexPositions: CollectionItem<Item>[];\n  stickyHeaders?: boolean;\n}\n\nexport interface ViewportTrackingResult<Item> {\n  isScrolling: MutableRefObject<boolean>;\n  scrollIntoView: (item: CollectionItem<Item>) => void;\n}\n\nexport const useViewportTracking = <Item>({\n  containerRef,\n  contentRef = NULL_REF,\n  highlightedIdx = -1,\n  indexPositions,\n  stickyHeaders = false,\n}: ViewportTrackingProps<Item>): ViewportTrackingResult<Item> => {\n  const scrolling = useRef<boolean>(false);\n  const viewport = useRef({\n    height: 0,\n    contentHeight: 0,\n  });\n\n  const scrollTo = useCallback((scrollPos: number) => {\n    scrolling.current = true;\n    if (containerRef.current) {\n      containerRef.current.scrollTop = scrollPos;\n    }\n    setTimeout(() => {\n      scrolling.current = false;\n    });\n  }, []);\n\n  const scrollToStart = useCallback(() => scrollTo(0), [scrollTo]);\n\n  const scrollToEnd = useCallback(() => {\n    scrollTo(viewport.current.contentHeight - viewport.current.height);\n  }, [scrollTo]);\n\n  const scrollIntoViewIfNeeded = useCallback(\n    (item: CollectionItem<Item>) => {\n      const offsetContainer = contentRef.current || containerRef.current;\n      if (item.id) {\n        const el = document.getElementById(item.id);\n        if (el && containerRef.current) {\n          const { height: viewportHeight } = viewport.current;\n          const targetEl =\n            el.ariaExpanded && el.firstChild\n              ? (el.firstChild as HTMLElement)\n              : el;\n          const headerHeight = stickyHeaders ? 36 : 0;\n          const itemTop = getItemTop(targetEl, offsetContainer);\n          const itemHeight = targetEl.offsetHeight;\n          const { scrollTop } = containerRef.current;\n          const viewportStart = scrollTop + headerHeight;\n          const viewportEnd = viewportStart + viewportHeight - headerHeight;\n\n          if (itemTop + itemHeight > viewportEnd || itemTop < viewportStart) {\n            const newScrollTop =\n              itemTop + itemHeight > viewportEnd\n                ? scrollTop + (itemTop + itemHeight) - viewportEnd\n                : itemTop - headerHeight;\n\n            scrollTo(newScrollTop);\n          }\n        }\n      }\n    },\n    [containerRef, contentRef, scrollTo, stickyHeaders]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const { height, contentHeight } = viewport.current;\n    const item = indexPositions[highlightedIdx];\n    if (contentHeight > height && item) {\n      const [firstItem] = indexPositions;\n      const [lastItem] = indexPositions.slice(-1);\n      if (item === firstItem) {\n        scrollToStart();\n      } else if (item === lastItem) {\n        scrollToEnd();\n      } else {\n        scrollIntoViewIfNeeded(indexPositions[highlightedIdx]);\n      }\n    }\n  }, [\n    highlightedIdx,\n    indexPositions,\n    scrollIntoViewIfNeeded,\n    scrollToEnd,\n    scrollToStart,\n  ]);\n\n  const onContainerResize: ResizeHandler = useCallback(\n    ({ height, scrollHeight }) => {\n      if (typeof height === \"number\") {\n        viewport.current.height = height;\n      }\n      if (typeof scrollHeight === \"number\") {\n        viewport.current.contentHeight = scrollHeight;\n      }\n    },\n    []\n  );\n\n  const onContentResize: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      viewport.current.contentHeight = height;\n    }\n  }, []);\n\n  // If we only have a container, then we will observe its height and scrollHeight,\n  // contentRef will be null, so second call to observer will observe nothing.\n  // If we have both container and content, then we observe the height of each.\n  const [containerDimensions, contentDimensions] = getObservedDimensions(\n    contentRef === NULL_REF\n  );\n  useResizeObserver(containerRef, containerDimensions, onContainerResize, true);\n  useResizeObserver(contentRef, contentDimensions, onContentResize, true);\n\n  return {\n    isScrolling: scrolling,\n    scrollIntoView: scrollIntoViewIfNeeded,\n  };\n};\n"],"names":[],"mappings":";;;;;;AAKA,MAAM,UAAA,GAAa,CAAC,QAAQ,CAAA,CAAA;AAC5B,MAAM,gBAAA,GAAmB,CAAC,QAAA,EAAU,cAAc,CAAA,CAAA;AAClD,MAAM,cAAqB,EAAC,CAAA;AAE5B,MAAM,kBAAqB,GAAA;AAAA,EACzB,aAAA,EAAe,CAAC,gBAAA,EAAkB,WAAW,CAAA;AAAA,EAC7C,WAAA,EAAa,CAAC,UAAA,EAAY,UAAU,CAAA;AACtC,CAAA,CAAA;AACA,MAAM,wBAAwB,CAAC,aAAA,KAC7B,aACI,GAAA,kBAAA,CAAmB,gBACnB,kBAAmB,CAAA,WAAA,CAAA;AAEzB,MAAM,QAAA,GAAW,EAAE,OAAA,EAAS,IAAK,EAAA,CAAA;AAEjC,MAAM,UAAA,GAAa,CACjB,OAAA,EACA,eACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAA,GAAY,MAAO,EAAA,GAAI,iBAAiB,OAAO,CAAA,CAAA;AACvD,EAAI,IAAA,SAAA,CAAU,UAAW,CAAA,QAAQ,CAAG,EAAA;AAClC,IAAM,MAAA,GAAA,GAAM,SAAU,CAAA,WAAA,CAAY,GAAG,CAAA,CAAA;AACrC,IAAA,OAAO,QAAS,CAAA,SAAA,CAAU,KAAM,CAAA,GAAA,GAAM,CAAC,CAAC,CAAA,CAAA;AAAA,GACnC,MAAA;AACL,IAAA,IAAI,eAAe,OAAQ,CAAA,YAAA,CAAA;AAC3B,IAAI,IAAA,YAAA,KAAiB,eAAmB,IAAA,eAAA,KAAoB,IAAM,EAAA;AAChE,MAAA,OAAO,OAAQ,CAAA,SAAA,CAAA;AAAA,KACV,MAAA;AACL,MAAA,IAAI,MAAM,OAAQ,CAAA,SAAA,CAAA;AAClB,MAAO,OAAA,YAAA,KAAiB,IAAQ,IAAA,YAAA,KAAiB,eAAiB,EAAA;AAChE,QAAA,GAAA,IAAO,YAAa,CAAA,SAAA,CAAA;AACpB,QAAA,YAAA,GAAe,YAAa,CAAA,YAAA,CAAA;AAAA,OAC9B;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,GACF;AACF,CAAA,CAAA;AAeO,MAAM,sBAAsB,CAAO;AAAA,EACxC,YAAA;AAAA,EACA,UAAa,GAAA,QAAA;AAAA,EACb,cAAiB,GAAA,CAAA,CAAA;AAAA,EACjB,cAAA;AAAA,EACA,aAAgB,GAAA,KAAA;AAClB,CAAiE,KAAA;AAC/D,EAAM,MAAA,SAAA,GAAY,OAAgB,KAAK,CAAA,CAAA;AACvC,EAAA,MAAM,WAAW,MAAO,CAAA;AAAA,IACtB,MAAQ,EAAA,CAAA;AAAA,IACR,aAAe,EAAA,CAAA;AAAA,GAChB,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,WAAY,CAAA,CAAC,SAAsB,KAAA;AAClD,IAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AACpB,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QAAQ,SAAY,GAAA,SAAA,CAAA;AAAA,KACnC;AACA,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,SAAA,CAAU,OAAU,GAAA,KAAA,CAAA;AAAA,KACrB,CAAA,CAAA;AAAA,GACH,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM,QAAA,CAAS,CAAC,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE/D,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,QAAA,CAAS,QAAS,CAAA,OAAA,CAAQ,aAAgB,GAAA,QAAA,CAAS,QAAQ,MAAM,CAAA,CAAA;AAAA,GACnE,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,sBAAyB,GAAA,WAAA;AAAA,IAC7B,CAAC,IAA+B,KAAA;AAC9B,MAAM,MAAA,eAAA,GAAkB,UAAW,CAAA,OAAA,IAAW,YAAa,CAAA,OAAA,CAAA;AAC3D,MAAA,IAAI,KAAK,EAAI,EAAA;AACX,QAAA,MAAM,EAAK,GAAA,QAAA,CAAS,cAAe,CAAA,IAAA,CAAK,EAAE,CAAA,CAAA;AAC1C,QAAI,IAAA,EAAA,IAAM,aAAa,OAAS,EAAA;AAC9B,UAAA,MAAM,EAAE,MAAA,EAAQ,cAAe,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AAC5C,UAAA,MAAM,WACJ,EAAG,CAAA,YAAA,IAAgB,EAAG,CAAA,UAAA,GACjB,GAAG,UACJ,GAAA,EAAA,CAAA;AACN,UAAM,MAAA,YAAA,GAAe,gBAAgB,EAAK,GAAA,CAAA,CAAA;AAC1C,UAAM,MAAA,OAAA,GAAU,UAAW,CAAA,QAAA,EAAU,eAAe,CAAA,CAAA;AACpD,UAAA,MAAM,aAAa,QAAS,CAAA,YAAA,CAAA;AAC5B,UAAM,MAAA,EAAE,SAAU,EAAA,GAAI,YAAa,CAAA,OAAA,CAAA;AACnC,UAAA,MAAM,gBAAgB,SAAY,GAAA,YAAA,CAAA;AAClC,UAAM,MAAA,WAAA,GAAc,gBAAgB,cAAiB,GAAA,YAAA,CAAA;AAErD,UAAA,IAAI,OAAU,GAAA,UAAA,GAAa,WAAe,IAAA,OAAA,GAAU,aAAe,EAAA;AACjE,YAAM,MAAA,YAAA,GACJ,UAAU,UAAa,GAAA,WAAA,GACnB,aAAa,OAAU,GAAA,UAAA,CAAA,GAAc,cACrC,OAAU,GAAA,YAAA,CAAA;AAEhB,YAAA,QAAA,CAAS,YAAY,CAAA,CAAA;AAAA,WACvB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAA,EAAc,UAAY,EAAA,QAAA,EAAU,aAAa,CAAA;AAAA,GACpD,CAAA;AAEA,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,EAAE,MAAA,EAAQ,aAAc,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AAC3C,IAAA,MAAM,OAAO,cAAe,CAAA,cAAA,CAAA,CAAA;AAC5B,IAAI,IAAA,aAAA,GAAgB,UAAU,IAAM,EAAA;AAClC,MAAM,MAAA,CAAC,SAAS,CAAI,GAAA,cAAA,CAAA;AACpB,MAAA,MAAM,CAAC,QAAQ,CAAI,GAAA,cAAA,CAAe,MAAM,CAAE,CAAA,CAAA,CAAA;AAC1C,MAAA,IAAI,SAAS,SAAW,EAAA;AACtB,QAAc,aAAA,EAAA,CAAA;AAAA,OAChB,MAAA,IAAW,SAAS,QAAU,EAAA;AAC5B,QAAY,WAAA,EAAA,CAAA;AAAA,OACP,MAAA;AACL,QAAA,sBAAA,CAAuB,eAAe,cAAe,CAAA,CAAA,CAAA;AAAA,OACvD;AAAA,KACF;AAAA,GACC,EAAA;AAAA,IACD,cAAA;AAAA,IACA,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,iBAAmC,GAAA,WAAA;AAAA,IACvC,CAAC,EAAE,MAAQ,EAAA,YAAA,EAAmB,KAAA;AAC5B,MAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,QAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA,CAAA;AAAA,OAC5B;AACA,MAAI,IAAA,OAAO,iBAAiB,QAAU,EAAA;AACpC,QAAA,QAAA,CAAS,QAAQ,aAAgB,GAAA,YAAA,CAAA;AAAA,OACnC;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,eAAiC,GAAA,WAAA,CAAY,CAAC,EAAE,QAAa,KAAA;AACjE,IAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,MAAA,QAAA,CAAS,QAAQ,aAAgB,GAAA,MAAA,CAAA;AAAA,KACnC;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAKL,EAAM,MAAA,CAAC,mBAAqB,EAAA,iBAAiB,CAAI,GAAA,qBAAA;AAAA,IAC/C,UAAe,KAAA,QAAA;AAAA,GACjB,CAAA;AACA,EAAkB,iBAAA,CAAA,YAAA,EAAc,mBAAqB,EAAA,iBAAA,EAAmB,IAAI,CAAA,CAAA;AAC5E,EAAkB,iBAAA,CAAA,UAAA,EAAY,iBAAmB,EAAA,eAAA,EAAiB,IAAI,CAAA,CAAA;AAEtE,EAAO,OAAA;AAAA,IACL,WAAa,EAAA,SAAA;AAAA,IACb,cAAgB,EAAA,sBAAA;AAAA,GAClB,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/common-hooks/utils/filter-utils.js

@@ -1,6 +1,7 @@
 import { escapeRegExp } from '../../utils/escapeRegExp.js';
 import 'react';
 import '@salt-ds/core';
+import '../../utils/useFloatingUI.js';
 
 const leftTrim = (value) => value ? value.replace(/^\s+/g, "") : value;
 const getDefaultFilterRegex = (value) => new RegExp(`(${escapeRegExp(leftTrim(value))})`, "gi");

package/dist-es/packages/lab/src/common-hooks/utils/filter-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-utils.js","sources":["../src/common-hooks/utils/filter-utils.ts"],"sourcesContent":["import { escapeRegExp } from \"../../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nexport type FilterPredicate = (item: string) => boolean;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;AAMA,MAAM,QAAA,GAAW,CAAC,KAChB,KAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAI,GAAA,KAAA,CAAA;AAE1B,MAAA,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,QAAS,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA,EAAM,IAAI,EAAA;AAE1C,MAAA,gBAAA,GACX,CAAC,UAAa,GAAA,EAAA,EAAI,iBAAiC,qBACnD,KAAA,CAAC,SAAY,GAAA,EAAA,KACX,OAAQ,CAAA,SAAA,CAAU,MAAM,CACxB,IAAA,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAM,CAAA,cAAA,CAAe,UAAU,CAAC,CAAM,KAAA;;;;"}
+{"version":3,"file":"filter-utils.js","sources":["../src/common-hooks/utils/filter-utils.ts"],"sourcesContent":["import { escapeRegExp } from \"../../utils\";\n\nexport type GetFilterRegex = (inputValue: string) => RegExp;\n\nexport type FilterPredicate = (item: string) => boolean;\n\nconst leftTrim = (value: string) =>\n  value ? value.replace(/^\\s+/g, \"\") : value;\n\nexport const getDefaultFilterRegex: GetFilterRegex = (value) =>\n  new RegExp(`(${escapeRegExp(leftTrim(value))})`, \"gi\");\n\nexport const getDefaultFilter =\n  (inputValue = \"\", getFilterRegex: GetFilterRegex = getDefaultFilterRegex) =>\n  (itemValue = \"\"): boolean =>\n    Boolean(itemValue.length) &&\n    Boolean(inputValue.length) &&\n    itemValue.match(getFilterRegex(inputValue)) !== null;\n"],"names":[],"mappings":";;;;;AAMA,MAAM,QAAA,GAAW,CAAC,KAChB,KAAA,KAAA,GAAQ,MAAM,OAAQ,CAAA,OAAA,EAAS,EAAE,CAAI,GAAA,KAAA,CAAA;AAE1B,MAAA,qBAAA,GAAwC,CAAC,KAAA,KACpD,IAAI,MAAA,CAAO,CAAI,CAAA,EAAA,YAAA,CAAa,QAAS,CAAA,KAAK,CAAC,CAAA,CAAA,CAAA,CAAA,EAAM,IAAI,EAAA;AAE1C,MAAA,gBAAA,GACX,CAAC,UAAa,GAAA,EAAA,EAAI,iBAAiC,qBACnD,KAAA,CAAC,SAAY,GAAA,EAAA,KACX,OAAQ,CAAA,SAAA,CAAU,MAAM,CACxB,IAAA,OAAA,CAAQ,WAAW,MAAM,CAAA,IACzB,UAAU,KAAM,CAAA,cAAA,CAAe,UAAU,CAAC,CAAM,KAAA;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactAction.js

@@ -1,36 +1,21 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useForkRef, Button } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip, Button } from '@salt-ds/core';
 import { forwardRef } from 'react';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 
 const ContactAction = forwardRef(
   function ContactAction2(props, ref) {
     const { label, icon, accessibleText, tooltipProps, ...restProps } = props;
     const Icon = icon;
-    const { getTooltipProps, getTriggerProps } = useTooltip({
+    return /* @__PURE__ */ jsx(Tooltip, {
       placement: "top",
-      disabled: !accessibleText
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps(
-      {
+      disabled: !accessibleText,
+      content: accessibleText,
+      children: /* @__PURE__ */ jsx(Button, {
         variant: "secondary",
-        ...restProps
-      }
-    );
-    const handleRef = useForkRef(triggerRef, ref);
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx(Button, {
-          ...triggerProps,
-          ref: handleRef,
-          children: label ? label : /* @__PURE__ */ jsx(Icon, {})
-        }),
-        /* @__PURE__ */ jsx(Tooltip, {
-          ...getTooltipProps({ title: accessibleText, ...tooltipProps })
-        })
-      ]
+        ref,
+        ...restProps,
+        children: label ? label : /* @__PURE__ */ jsx(Icon, {})
+      })
     });
   }
 );

package/dist-es/packages/lab/src/contact-details/ContactAction.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactAction.js","sources":["../src/contact-details/ContactAction.tsx"],"sourcesContent":["import { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef } from \"react\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\n\nexport type ContactActionProps = ButtonProps & {\n  accessibleText?: string;\n  tooltipProps?: TooltipProps;\n} & (\n    | {\n        label: string;\n        icon?: ComponentType<IconProps>;\n      }\n    | {\n        label?: string;\n        icon: ComponentType<IconProps>;\n      }\n  );\n\nexport const ContactAction = forwardRef<HTMLButtonElement, ContactActionProps>(\n  function ContactAction(props, ref) {\n    const { label, icon, accessibleText, tooltipProps, ...restProps } = props;\n\n    const Icon = icon!;\n\n    const { getTooltipProps, getTriggerProps } = useTooltip({\n      placement: \"top\",\n      disabled: !accessibleText,\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<typeof Button>(\n      {\n        variant: \"secondary\",\n        ...restProps,\n      }\n    );\n\n    const handleRef = useForkRef(triggerRef, ref);\n\n    return (\n      <>\n        <Button {...triggerProps} ref={handleRef}>\n          {label ? label : <Icon />}\n        </Button>\n        <Tooltip\n          {...getTooltipProps({ title: accessibleText, ...tooltipProps })}\n        />\n      </>\n    );\n  }\n);\n"],"names":["ContactAction"],"mappings":";;;;;;;AAmBO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAgB,EAAA,YAAA,EAAA,GAAiB,WAAc,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAA;AAEb,IAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,MACtD,SAAW,EAAA,KAAA;AAAA,MACX,UAAU,CAAC,cAAA;AAAA,KACZ,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,GAAA,EAAK,UAAe,EAAA,GAAA,YAAA,EAAiB,GAAA,eAAA;AAAA,MAC3C;AAAA,QACE,OAAS,EAAA,WAAA;AAAA,QACT,GAAG,SAAA;AAAA,OACL;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,UAAA,EAAY,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,UAAQ,GAAG,YAAA;AAAA,UAAc,GAAK,EAAA,SAAA;AAAA,UAC5B,QAAA,EAAA,KAAA,GAAQ,KAAQ,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,SACzB,CAAA;AAAA,wBACC,GAAA,CAAA,OAAA,EAAA;AAAA,UACE,GAAG,eAAgB,CAAA,EAAE,OAAO,cAAgB,EAAA,GAAG,cAAc,CAAA;AAAA,SAChE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactAction.js","sources":["../src/contact-details/ContactAction.tsx"],"sourcesContent":["import { Button, ButtonProps, Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef } from \"react\";\n\nexport type ContactActionProps = ButtonProps & {\n  accessibleText?: string;\n  tooltipProps?: TooltipProps;\n} & (\n    | {\n        label: string;\n        icon?: ComponentType<IconProps>;\n      }\n    | {\n        label?: string;\n        icon: ComponentType<IconProps>;\n      }\n  );\n\nexport const ContactAction = forwardRef<HTMLButtonElement, ContactActionProps>(\n  function ContactAction(props, ref) {\n    const { label, icon, accessibleText, tooltipProps, ...restProps } = props;\n\n    const Icon = icon!;\n\n    return (\n      <Tooltip\n        placement=\"top\"\n        disabled={!accessibleText}\n        content={accessibleText}\n      >\n        <Button variant=\"secondary\" ref={ref} {...restProps}>\n          {label ? label : <Icon />}\n        </Button>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["ContactAction"],"mappings":";;;;AAkBO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,KAAO,EAAA,IAAA,EAAM,cAAgB,EAAA,YAAA,EAAA,GAAiB,WAAc,GAAA,KAAA,CAAA;AAEpE,IAAA,MAAM,IAAO,GAAA,IAAA,CAAA;AAEb,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,SAAU,EAAA,KAAA;AAAA,MACV,UAAU,CAAC,cAAA;AAAA,MACX,OAAS,EAAA,cAAA;AAAA,MAET,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,GAAA;AAAA,QAAW,GAAG,SAAA;AAAA,QACvC,QAAA,EAAA,KAAA,GAAQ,KAAQ,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,CAAA;AAAA,OACzB,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactAvatar.js

@@ -4,7 +4,7 @@ import { makePrefixer } from '@salt-ds/core';
 import { Avatar } from '../avatar/Avatar.js';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 
 const withBaseName = makePrefixer("saltContactAvatar");
 const ContactAvatar = forwardRef(
@@ -26,7 +26,7 @@ const ContactAvatar = forwardRef(
       ...restProps,
       ref,
       "aria-hidden": true,
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("stacked")]: isStacked

package/dist-es/packages/lab/src/contact-details/ContactAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Avatar, AvatarProps } from \"../avatar\";\nimport { useContactDetailsContext } from \"./internal\";\nimport cn from \"classnames\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport interface ContactAvatarProps extends AvatarProps {}\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? \"large\" : \"medium\";\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={cn(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":["cn"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,OAAU,GAAA,QAAA,CAAA;AACrD,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Avatar, AvatarProps } from \"../avatar\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport interface ContactAvatarProps extends AvatarProps {}\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? \"large\" : \"medium\";\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAU,wBAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,OAAU,GAAA,QAAA,CAAA;AACrD,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactDetails.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import './internal/FavoriteToggleWithTooltip.js';
 import { ContactDetailsContext } from './internal/ContactDetailsContext.js';
@@ -56,7 +56,7 @@ const ContactDetails = forwardRef(
       children: /* @__PURE__ */ jsxs("div", {
         ...restProps,
         ref,
-        className: cx(
+        className: clsx(
           withBaseName(),
           getClassName(variant, isStacked),
           {

package/dist-es/packages/lab/src/contact-details/ContactDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactDetails.js","sources":["../src/contact-details/ContactDetails.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { ContactDetailsContext, useComponentSize } from \"./internal\";\n\nimport \"./ContactDetails.css\";\n\nconst withBaseName = makePrefixer(\"saltContactDetails\");\n\nexport type ContactDetailsVariant = \"default\" | \"compact\" | \"mini\";\n\nexport interface ContactDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: ContactDetailsVariant;\n  stackAtBreakpoint?: number;\n  embedded?: boolean;\n}\n\nfunction getClassName(variant: ContactDetailsVariant, isStacked?: boolean) {\n  return withBaseName(`${variant}${isStacked ? \"-stacked\" : \"\"}`);\n}\n\nexport const ContactDetails = forwardRef<HTMLDivElement, ContactDetailsProps>(\n  function ContactDetails(props, externalRef) {\n    const {\n      children,\n      variant = \"default\",\n      className,\n      stackAtBreakpoint = 300,\n      embedded,\n      ...restProps\n    } = props;\n\n    const [hasAvatar, setHasAvatar] = useState<boolean>(false);\n    const [primary, setPrimary] = useState<string>();\n    const [primaryId, setPrimaryId] = useState<string>();\n\n    const [secondary, setSecondary] = useState<string>();\n    const [secondaryId, setSecondaryId] = useState<string>();\n\n    const [tertiary, setTertiary] = useState<string>();\n    const [tertiaryId, setTertiaryId] = useState<string>();\n\n    const [containerRef, componentSize] =\n      useComponentSize<HTMLDivElement>(stackAtBreakpoint);\n\n    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;\n\n    variant === \"compact\" &&\n      isStacked &&\n      console.log(\"componentSize\", componentSize.width, containerRef.current);\n\n    const ref = useForkRef(externalRef, containerRef);\n\n    const contextValue = {\n      variant,\n      hasAvatar,\n      setHasAvatar,\n      isStacked,\n      primary,\n      setPrimary,\n      primaryId,\n      setPrimaryId,\n      secondary,\n      setSecondary,\n      secondaryId,\n      setSecondaryId,\n      tertiary,\n      setTertiary,\n      tertiaryId,\n      setTertiaryId,\n    };\n\n    const showNoAvatar = !hasAvatar && !embedded && variant !== \"mini\";\n\n    return (\n      <ContactDetailsContext.Provider value={contextValue}>\n        <div\n          {...restProps}\n          ref={ref}\n          className={cn(\n            withBaseName(),\n            getClassName(variant, isStacked),\n            {\n              [withBaseName(\"embedded\")]: embedded,\n              [withBaseName(\"noAvatar\")]: showNoAvatar,\n            },\n            className\n          )}\n          role=\"article\"\n          aria-roledescription=\"Contact Card\"\n        >\n          {children}\n          {showNoAvatar ? (\n            <div className={withBaseName(\"noAvatar-indicator\")} />\n          ) : null}\n        </div>\n      </ContactDetailsContext.Provider>\n    );\n  }\n);\n"],"names":["ContactDetails","cn"],"mappings":"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"}
+{"version":3,"file":"ContactDetails.js","sources":["../src/contact-details/ContactDetails.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { ContactDetailsContext, useComponentSize } from \"./internal\";\n\nimport \"./ContactDetails.css\";\n\nconst withBaseName = makePrefixer(\"saltContactDetails\");\n\nexport type ContactDetailsVariant = \"default\" | \"compact\" | \"mini\";\n\nexport interface ContactDetailsProps extends HTMLAttributes<HTMLDivElement> {\n  variant?: ContactDetailsVariant;\n  stackAtBreakpoint?: number;\n  embedded?: boolean;\n}\n\nfunction getClassName(variant: ContactDetailsVariant, isStacked?: boolean) {\n  return withBaseName(`${variant}${isStacked ? \"-stacked\" : \"\"}`);\n}\n\nexport const ContactDetails = forwardRef<HTMLDivElement, ContactDetailsProps>(\n  function ContactDetails(props, externalRef) {\n    const {\n      children,\n      variant = \"default\",\n      className,\n      stackAtBreakpoint = 300,\n      embedded,\n      ...restProps\n    } = props;\n\n    const [hasAvatar, setHasAvatar] = useState<boolean>(false);\n    const [primary, setPrimary] = useState<string>();\n    const [primaryId, setPrimaryId] = useState<string>();\n\n    const [secondary, setSecondary] = useState<string>();\n    const [secondaryId, setSecondaryId] = useState<string>();\n\n    const [tertiary, setTertiary] = useState<string>();\n    const [tertiaryId, setTertiaryId] = useState<string>();\n\n    const [containerRef, componentSize] =\n      useComponentSize<HTMLDivElement>(stackAtBreakpoint);\n\n    const isStacked = componentSize && componentSize.width < stackAtBreakpoint;\n\n    variant === \"compact\" &&\n      isStacked &&\n      console.log(\"componentSize\", componentSize.width, containerRef.current);\n\n    const ref = useForkRef(externalRef, containerRef);\n\n    const contextValue = {\n      variant,\n      hasAvatar,\n      setHasAvatar,\n      isStacked,\n      primary,\n      setPrimary,\n      primaryId,\n      setPrimaryId,\n      secondary,\n      setSecondary,\n      secondaryId,\n      setSecondaryId,\n      tertiary,\n      setTertiary,\n      tertiaryId,\n      setTertiaryId,\n    };\n\n    const showNoAvatar = !hasAvatar && !embedded && variant !== \"mini\";\n\n    return (\n      <ContactDetailsContext.Provider value={contextValue}>\n        <div\n          {...restProps}\n          ref={ref}\n          className={clsx(\n            withBaseName(),\n            getClassName(variant, isStacked),\n            {\n              [withBaseName(\"embedded\")]: embedded,\n              [withBaseName(\"noAvatar\")]: showNoAvatar,\n            },\n            className\n          )}\n          role=\"article\"\n          aria-roledescription=\"Contact Card\"\n        >\n          {children}\n          {showNoAvatar ? (\n            <div className={withBaseName(\"noAvatar-indicator\")} />\n          ) : null}\n        </div>\n      </ContactDetailsContext.Provider>\n    );\n  }\n);\n"],"names":["ContactDetails"],"mappings":"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"}

package/dist-es/packages/lab/src/contact-details/ContactFavoriteToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactFavoriteToggle.js","sources":["../src/contact-details/ContactFavoriteToggle.tsx"],"sourcesContent":["import { useControlled, useId } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport {\n  FavoriteToggleWithTooltip,\n  FavoriteToggleWithTooltipProps,\n} from \"./internal\";\nimport { TooltipProps } from \"../tooltip\";\n\nexport interface ContactFavoriteToggleProps\n  extends FavoriteToggleWithTooltipProps {\n  isFavorite?: boolean;\n  defaultIsFavorite?: boolean;\n  onChange?: (isFavorite: boolean) => void;\n  tooltipProps?: TooltipProps;\n}\n\nexport const ContactFavoriteToggle = forwardRef<\n  HTMLSpanElement,\n  ContactFavoriteToggleProps\n>(function ContactFavoriteToggle(props, ref) {\n  const {\n    id: idProp,\n    isFavorite: isFavoriteProp,\n    defaultIsFavorite = false,\n    onChange: onChangeProp,\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n\n  const [isFavorite, setIsFavorite] = useControlled({\n    controlled: isFavoriteProp,\n    default: defaultIsFavorite,\n    name: \"ContactDetails\",\n    state: \"isFavorite\",\n  });\n\n  const onChange = (isSelected: boolean) => {\n    setIsFavorite(isSelected);\n    if (onChangeProp) {\n      onChangeProp(isSelected);\n    }\n  };\n\n  const tooltipTitle = `${isFavorite ? \"Remove\" : \"Mark\"} as favorite`;\n\n  return (\n    <FavoriteToggleWithTooltip\n      {...restProps}\n      id={id}\n      ref={ref}\n      tooltipProps={tooltipProps}\n      aria-label=\"Favorite\"\n      isSelected={isFavorite}\n      onChange={onChange}\n      tooltipTitle={tooltipTitle}\n    />\n  );\n});\n"],"names":["ContactFavoriteToggle"],"mappings":";;;;;;AAgBO,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAoB,GAAA,KAAA;AAAA,IACpB,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,iBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,CAAC,UAAwB,KAAA;AACxC,IAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAG,EAAA,UAAA,GAAa,QAAW,GAAA,MAAA,CAAA,YAAA,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,yBAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAW,EAAA,UAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ContactFavoriteToggle.js","sources":["../src/contact-details/ContactFavoriteToggle.tsx"],"sourcesContent":["import { TooltipProps, useControlled, useId } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport {\n  FavoriteToggleWithTooltip,\n  FavoriteToggleWithTooltipProps,\n} from \"./internal\";\n\nexport interface ContactFavoriteToggleProps\n  extends FavoriteToggleWithTooltipProps {\n  isFavorite?: boolean;\n  defaultIsFavorite?: boolean;\n  onChange?: (isFavorite: boolean) => void;\n  tooltipProps?: TooltipProps;\n}\n\nexport const ContactFavoriteToggle = forwardRef<\n  HTMLSpanElement,\n  ContactFavoriteToggleProps\n>(function ContactFavoriteToggle(props, ref) {\n  const {\n    id: idProp,\n    isFavorite: isFavoriteProp,\n    defaultIsFavorite = false,\n    onChange: onChangeProp,\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const id = useId(idProp);\n\n  const [isFavorite, setIsFavorite] = useControlled({\n    controlled: isFavoriteProp,\n    default: defaultIsFavorite,\n    name: \"ContactDetails\",\n    state: \"isFavorite\",\n  });\n\n  const onChange = (isSelected: boolean) => {\n    setIsFavorite(isSelected);\n    if (onChangeProp) {\n      onChangeProp(isSelected);\n    }\n  };\n\n  const tooltipTitle = `${isFavorite ? \"Remove\" : \"Mark\"} as favorite`;\n\n  return (\n    <FavoriteToggleWithTooltip\n      {...restProps}\n      id={id}\n      ref={ref}\n      tooltipProps={tooltipProps}\n      aria-label=\"Favorite\"\n      isSelected={isFavorite}\n      onChange={onChange}\n      tooltipTitle={tooltipTitle}\n    />\n  );\n});\n"],"names":["ContactFavoriteToggle"],"mappings":";;;;;;AAeO,MAAM,qBAAwB,GAAA,UAAA,CAGnC,SAASA,sBAAAA,CAAsB,OAAO,GAAK,EAAA;AAC3C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,UAAY,EAAA,cAAA;AAAA,IACZ,iBAAoB,GAAA,KAAA;AAAA,IACpB,QAAU,EAAA,YAAA;AAAA,IACV,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAc,CAAA;AAAA,IAChD,UAAY,EAAA,cAAA;AAAA,IACZ,OAAS,EAAA,iBAAA;AAAA,IACT,IAAM,EAAA,gBAAA;AAAA,IACN,KAAO,EAAA,YAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,QAAA,GAAW,CAAC,UAAwB,KAAA;AACxC,IAAA,aAAA,CAAc,UAAU,CAAA,CAAA;AACxB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAAA,KACzB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,YAAA,GAAe,CAAG,EAAA,UAAA,GAAa,QAAW,GAAA,MAAA,CAAA,YAAA,CAAA,CAAA;AAEhD,EAAA,uBACG,GAAA,CAAA,yBAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAW,EAAA,UAAA;AAAA,IACX,UAAY,EAAA,UAAA;AAAA,IACZ,QAAA;AAAA,IACA,YAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactMetadata.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { ChevronUpIcon, ChevronDownIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState } from 'react';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
@@ -35,7 +35,7 @@ const ContactMetadata = forwardRef(
         !collapsible || showMetadata ? /* @__PURE__ */ jsxs("div", {
           ...restProps,
           ref,
-          className: cx(withBaseName(), variantClassName, className),
+          className: clsx(withBaseName(), variantClassName, className),
           children: [
             collapsible ? /* @__PURE__ */ jsx("div", {
               className: withBaseName("separator")

package/dist-es/packages/lab/src/contact-details/ContactMetadata.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactMetadata.js","sources":["../src/contact-details/ContactMetadata.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadata\");\n\nexport interface ContactMetadataProps extends HTMLAttributes<HTMLDivElement> {\n  collapsible?: boolean;\n  collapseButtonId?: string;\n}\n\nexport const ContactMetadata = forwardRef<HTMLDivElement, ContactMetadataProps>(\n  function ContactMetadata(props, ref) {\n    const { collapsible, children, collapseButtonId, className, ...restProps } =\n      props;\n    const { primaryId, variant, isStacked } = useContactDetailsContext();\n\n    const [showMetadata, setShowMetadata] = useState<boolean>(!collapsible);\n\n    const toggleShowMetadata = () => {\n      setShowMetadata(!showMetadata);\n    };\n\n    if (variant !== \"default\") {\n      return null;\n    }\n\n    const variantClassName = withBaseName(isStacked ? \"stacked\" : \"default\");\n\n    const id = useId(collapseButtonId);\n\n    return (\n      <>\n        {collapsible ? (\n          <Button\n            aria-expanded={showMetadata}\n            aria-label={showMetadata ? \"Collapse\" : \"Expand\"}\n            aria-labelledby={`${id} ${primaryId}`}\n            id={id}\n            onClick={toggleShowMetadata}\n            variant=\"secondary\"\n            className={withBaseName(\"expander\")}\n          >\n            {showMetadata ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          </Button>\n        ) : null}\n        {!collapsible || showMetadata ? (\n          <div\n            {...restProps}\n            ref={ref}\n            className={cn(withBaseName(), variantClassName, className)}\n          >\n            {collapsible ? <div className={withBaseName(\"separator\")} /> : null}\n            {children}\n          </div>\n        ) : null}\n      </>\n    );\n  }\n);\n"],"names":["ContactMetadata","cn"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAOhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,KAAA,EAAO,GAAK,EAAA;AACnC,IAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,gBAAkB,EAAA,SAAA,EAAA,GAAc,WAC7D,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,SAAA,KAAc,wBAAyB,EAAA,CAAA;AAEnE,IAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAkB,CAAC,WAAW,CAAA,CAAA;AAEtE,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,eAAA,CAAgB,CAAC,YAAY,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,IAAI,YAAY,SAAW,EAAA;AACzB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,gBAAmB,GAAA,YAAA,CAAa,SAAY,GAAA,SAAA,GAAY,SAAS,CAAA,CAAA;AAEvE,IAAM,MAAA,EAAA,GAAK,MAAM,gBAAgB,CAAA,CAAA;AAEjC,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAA,WAAA,mBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,eAAe,EAAA,YAAA;AAAA,UACf,YAAA,EAAY,eAAe,UAAa,GAAA,QAAA;AAAA,UACxC,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,SAAA,CAAA,CAAA;AAAA,UAC1B,EAAA;AAAA,UACA,OAAS,EAAA,kBAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UACR,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAEjC,QAAe,EAAA,YAAA,mBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA,uBAAM,eAAgB,EAAA,EAAA,CAAA;AAAA,SACvD,CACE,GAAA,IAAA;AAAA,QACH,CAAC,WAAe,IAAA,YAAA,mBACd,IAAA,CAAA,KAAA,EAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAW,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,kBAAkB,SAAS,CAAA;AAAA,UAExD,QAAA,EAAA;AAAA,YAAA,WAAA,mBAAe,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,aAAG,CAAK,GAAA,IAAA;AAAA,YAC9D,QAAA;AAAA,WAAA;AAAA,SACH,CACE,GAAA,IAAA;AAAA,OAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactMetadata.js","sources":["../src/contact-details/ContactMetadata.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useState } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadata\");\n\nexport interface ContactMetadataProps extends HTMLAttributes<HTMLDivElement> {\n  collapsible?: boolean;\n  collapseButtonId?: string;\n}\n\nexport const ContactMetadata = forwardRef<HTMLDivElement, ContactMetadataProps>(\n  function ContactMetadata(props, ref) {\n    const { collapsible, children, collapseButtonId, className, ...restProps } =\n      props;\n    const { primaryId, variant, isStacked } = useContactDetailsContext();\n\n    const [showMetadata, setShowMetadata] = useState<boolean>(!collapsible);\n\n    const toggleShowMetadata = () => {\n      setShowMetadata(!showMetadata);\n    };\n\n    if (variant !== \"default\") {\n      return null;\n    }\n\n    const variantClassName = withBaseName(isStacked ? \"stacked\" : \"default\");\n\n    const id = useId(collapseButtonId);\n\n    return (\n      <>\n        {collapsible ? (\n          <Button\n            aria-expanded={showMetadata}\n            aria-label={showMetadata ? \"Collapse\" : \"Expand\"}\n            aria-labelledby={`${id} ${primaryId}`}\n            id={id}\n            onClick={toggleShowMetadata}\n            variant=\"secondary\"\n            className={withBaseName(\"expander\")}\n          >\n            {showMetadata ? <ChevronUpIcon /> : <ChevronDownIcon />}\n          </Button>\n        ) : null}\n        {!collapsible || showMetadata ? (\n          <div\n            {...restProps}\n            ref={ref}\n            className={clsx(withBaseName(), variantClassName, className)}\n          >\n            {collapsible ? <div className={withBaseName(\"separator\")} /> : null}\n            {children}\n          </div>\n        ) : null}\n      </>\n    );\n  }\n);\n"],"names":["ContactMetadata"],"mappings":";;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,qBAAqB,CAAA,CAAA;AAOhD,MAAM,eAAkB,GAAA,UAAA;AAAA,EAC7B,SAASA,gBAAgB,CAAA,KAAA,EAAO,GAAK,EAAA;AACnC,IAAA,MAAM,EAAE,WAAa,EAAA,QAAA,EAAU,gBAAkB,EAAA,SAAA,EAAA,GAAc,WAC7D,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,EAAE,SAAA,EAAW,OAAS,EAAA,SAAA,KAAc,wBAAyB,EAAA,CAAA;AAEnE,IAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA,CAAkB,CAAC,WAAW,CAAA,CAAA;AAEtE,IAAA,MAAM,qBAAqB,MAAM;AAC/B,MAAA,eAAA,CAAgB,CAAC,YAAY,CAAA,CAAA;AAAA,KAC/B,CAAA;AAEA,IAAA,IAAI,YAAY,SAAW,EAAA;AACzB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,MAAM,gBAAmB,GAAA,YAAA,CAAa,SAAY,GAAA,SAAA,GAAY,SAAS,CAAA,CAAA;AAEvE,IAAM,MAAA,EAAA,GAAK,MAAM,gBAAgB,CAAA,CAAA;AAEjC,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAA,WAAA,mBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,eAAe,EAAA,YAAA;AAAA,UACf,YAAA,EAAY,eAAe,UAAa,GAAA,QAAA;AAAA,UACxC,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,SAAA,CAAA,CAAA;AAAA,UAC1B,EAAA;AAAA,UACA,OAAS,EAAA,kBAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UACR,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAEjC,QAAe,EAAA,YAAA,mBAAA,GAAA,CAAC,aAAc,EAAA,EAAA,CAAA,uBAAM,eAAgB,EAAA,EAAA,CAAA;AAAA,SACvD,CACE,GAAA,IAAA;AAAA,QACH,CAAC,WAAe,IAAA,YAAA,mBACd,IAAA,CAAA,KAAA,EAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,kBAAkB,SAAS,CAAA;AAAA,UAE1D,QAAA,EAAA;AAAA,YAAA,WAAA,mBAAe,GAAA,CAAA,KAAA,EAAA;AAAA,cAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,aAAG,CAAK,GAAA,IAAA;AAAA,YAC9D,QAAA;AAAA,WAAA;AAAA,SACH,CACE,GAAA,IAAA;AAAA,OAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactPrimaryInfo.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Text } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
@@ -30,7 +30,7 @@ const ContactPrimaryInfo = forwardRef(function ContactPrimaryInfo2(props, ref) {
     id,
     ref,
     styleAs: variant === "default" ? "h2" : "h4",
-    className: cx(withBaseName(), className),
+    className: clsx(withBaseName(), className),
     role: "heading",
     "aria-labelledby": `${id} ${secondaryId != null ? secondaryId : null} ${tertiaryId != null ? tertiaryId : null}`,
     "aria-level": ariaLevel,

package/dist-es/packages/lab/src/contact-details/ContactPrimaryInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactPrimaryInfo.js","sources":["../src/contact-details/ContactPrimaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport cn from \"classnames\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactPrimaryInfo\");\n\nexport interface ContactPrimaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  text: string;\n}\n\nexport const ContactPrimaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactPrimaryInfoProps\n>(function ContactPrimaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    className,\n    \"aria-level\": ariaLevel = 2,\n    ...restProps\n  } = props;\n  const { setPrimary, setPrimaryId, secondaryId, tertiaryId, variant } =\n    useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setPrimary(text || \"\");\n    setPrimaryId(id);\n    return () => {\n      setPrimary(undefined);\n      setPrimaryId(undefined);\n    };\n  }, [setPrimary, id, text, setPrimaryId]);\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      id={id}\n      ref={ref}\n      styleAs={variant === \"default\" ? \"h2\" : \"h4\"}\n      className={cn(withBaseName(), className)}\n      role=\"heading\"\n      aria-labelledby={`${id} ${secondaryId != null ? secondaryId : null} ${\n        tertiaryId != null ? tertiaryId : null\n      }`}\n      aria-level={ariaLevel}\n      data-testid=\"primary\"\n    >\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactPrimaryInfo","cn"],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAOnD,MAAM,kBAAqB,GAAA,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAc,SAAY,GAAA,CAAA;AAAA,IACvB,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,UAAY,EAAA,YAAA,EAAc,aAAa,UAAY,EAAA,OAAA,KACzD,wBAAyB,EAAA,CAAA;AAC3B,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,QAAQ,EAAE,CAAA,CAAA;AACrB,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,KAAS,CAAA,CAAA,CAAA;AACpB,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,KACC,CAAC,UAAA,EAAY,EAAI,EAAA,IAAA,EAAM,YAAY,CAAC,CAAA,CAAA;AAEvC,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,EAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,IAAA;AAAA,IACxC,SAAW,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,IAAK,EAAA,SAAA;AAAA,IACL,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,WAAA,IAAe,OAAO,WAAc,GAAA,IAAA,CAAA,CAAA,EAC5D,UAAc,IAAA,IAAA,GAAO,UAAa,GAAA,IAAA,CAAA,CAAA;AAAA,IAEpC,YAAY,EAAA,SAAA;AAAA,IACZ,aAAY,EAAA,SAAA;AAAA,IAEX,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ContactPrimaryInfo.js","sources":["../src/contact-details/ContactPrimaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactPrimaryInfo\");\n\nexport interface ContactPrimaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  text: string;\n}\n\nexport const ContactPrimaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactPrimaryInfoProps\n>(function ContactPrimaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    className,\n    \"aria-level\": ariaLevel = 2,\n    ...restProps\n  } = props;\n  const { setPrimary, setPrimaryId, secondaryId, tertiaryId, variant } =\n    useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setPrimary(text || \"\");\n    setPrimaryId(id);\n    return () => {\n      setPrimary(undefined);\n      setPrimaryId(undefined);\n    };\n  }, [setPrimary, id, text, setPrimaryId]);\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      id={id}\n      ref={ref}\n      styleAs={variant === \"default\" ? \"h2\" : \"h4\"}\n      className={clsx(withBaseName(), className)}\n      role=\"heading\"\n      aria-labelledby={`${id} ${secondaryId != null ? secondaryId : null} ${\n        tertiaryId != null ? tertiaryId : null\n      }`}\n      aria-level={ariaLevel}\n      data-testid=\"primary\"\n    >\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactPrimaryInfo"],"mappings":";;;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,wBAAwB,CAAA,CAAA;AAOnD,MAAM,kBAAqB,GAAA,UAAA,CAGhC,SAASA,mBAAAA,CAAmB,OAAO,GAAK,EAAA;AACxC,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAc,SAAY,GAAA,CAAA;AAAA,IACvB,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,UAAY,EAAA,YAAA,EAAc,aAAa,UAAY,EAAA,OAAA,KACzD,wBAAyB,EAAA,CAAA;AAC3B,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,QAAQ,EAAE,CAAA,CAAA;AACrB,IAAA,YAAA,CAAa,EAAE,CAAA,CAAA;AACf,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,KAAS,CAAA,CAAA,CAAA;AACpB,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AAAA,KACxB,CAAA;AAAA,KACC,CAAC,UAAA,EAAY,EAAI,EAAA,IAAA,EAAM,YAAY,CAAC,CAAA,CAAA;AAEvC,EAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,EAAA;AAAA,IACA,GAAA;AAAA,IACA,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,IAAA;AAAA,IACxC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,IAAK,EAAA,SAAA;AAAA,IACL,iBAAA,EAAiB,GAAG,EAAM,CAAA,CAAA,EAAA,WAAA,IAAe,OAAO,WAAc,GAAA,IAAA,CAAA,CAAA,EAC5D,UAAc,IAAA,IAAA,GAAO,UAAa,GAAA,IAAA,CAAA,CAAA;AAAA,IAEpC,YAAY,EAAA,SAAA;AAAA,IACZ,aAAY,EAAA,SAAA;AAAA,IAEX,QAAA,EAAA,IAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactSecondaryInfo.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Text } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
@@ -31,7 +31,7 @@ const ContactSecondaryInfo = forwardRef(function ContactSecondaryInfo2(props, re
     ...restProps,
     id,
     ref,
-    className: cx(withBaseName(), className),
+    className: clsx(withBaseName(), className),
     "data-testid": "secondary",
     children: [
       Icon ? /* @__PURE__ */ jsx(Icon, {

package/dist-es/packages/lab/src/contact-details/ContactSecondaryInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactSecondaryInfo.js","sources":["../src/contact-details/ContactSecondaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport cn from \"classnames\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactSecondaryInfo\");\n\nexport interface ContactSecondaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n  ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactSecondaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactSecondaryInfoProps\n>(function ContactSecondaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    icon: Icon,\n    className,\n    ValueComponent,\n    ...restProps\n  } = props;\n  const { setSecondary, setSecondaryId, variant } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setSecondary(text || \"\");\n    setSecondaryId(id);\n    return () => {\n      setSecondary(undefined);\n      setSecondaryId(undefined);\n    };\n  }, [id, text, setSecondary, setSecondaryId]);\n\n  return (\n    <Text\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      maxRows={1}\n      {...restProps}\n      id={id}\n      ref={ref}\n      className={cn(withBaseName(), className)}\n      data-testid=\"secondary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactSecondaryInfo","cn"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AASrD,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAM,EAAA,IAAA;AAAA,IACN,SAAA;AAAA,IACA,cAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,cAAgB,EAAA,OAAA,KAAY,wBAAyB,EAAA,CAAA;AAC3E,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,QAAQ,EAAE,CAAA,CAAA;AACvB,IAAA,cAAA,CAAe,EAAE,CAAA,CAAA;AACjB,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AACtB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,YAAA,EAAc,cAAc,CAAC,CAAA,CAAA;AAE3C,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,OAAS,EAAA,CAAA;AAAA,IACR,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,aAAY,EAAA,WAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ContactSecondaryInfo.js","sources":["../src/contact-details/ContactSecondaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactSecondaryInfo\");\n\nexport interface ContactSecondaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n  ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactSecondaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactSecondaryInfoProps\n>(function ContactSecondaryInfo(props, ref) {\n  const {\n    id: idProp,\n    text,\n    icon: Icon,\n    className,\n    ValueComponent,\n    ...restProps\n  } = props;\n  const { setSecondary, setSecondaryId, variant } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setSecondary(text || \"\");\n    setSecondaryId(id);\n    return () => {\n      setSecondary(undefined);\n      setSecondaryId(undefined);\n    };\n  }, [id, text, setSecondary, setSecondaryId]);\n\n  return (\n    <Text\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      maxRows={1}\n      {...restProps}\n      id={id}\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      data-testid=\"secondary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactSecondaryInfo"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,0BAA0B,CAAA,CAAA;AASrD,MAAM,oBAAuB,GAAA,UAAA,CAGlC,SAASA,qBAAAA,CAAqB,OAAO,GAAK,EAAA;AAC1C,EAAM,MAAA;AAAA,IACJ,EAAI,EAAA,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAM,EAAA,IAAA;AAAA,IACN,SAAA;AAAA,IACA,cAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,EAAE,YAAA,EAAc,cAAgB,EAAA,OAAA,KAAY,wBAAyB,EAAA,CAAA;AAC3E,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,QAAQ,EAAE,CAAA,CAAA;AACvB,IAAA,cAAA,CAAe,EAAE,CAAA,CAAA;AACjB,IAAA,OAAO,MAAM;AACX,MAAA,YAAA,CAAa,KAAS,CAAA,CAAA,CAAA;AACtB,MAAA,cAAA,CAAe,KAAS,CAAA,CAAA,CAAA;AAAA,KAC1B,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,YAAA,EAAc,cAAc,CAAC,CAAA,CAAA;AAE3C,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACC,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,OAAS,EAAA,CAAA;AAAA,IACR,GAAG,SAAA;AAAA,IACJ,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,aAAY,EAAA,WAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/ContactTertiaryInfo.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Text } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import './internal/FavoriteToggleWithTooltip.js';
 import { useContactDetailsContext } from './internal/ContactDetailsContext.js';
@@ -27,7 +27,7 @@ const ContactTertiaryInfo = forwardRef(function ContactTertiaryInfo2(props, ref)
     styleAs: variant === "default" ? "h4" : void 0,
     id,
     ref,
-    className: cx(withBaseName(), className),
+    className: clsx(withBaseName(), className),
     "data-testid": "tertiary",
     children: [
       Icon ? /* @__PURE__ */ jsx(Icon, {

package/dist-es/packages/lab/src/contact-details/ContactTertiaryInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactTertiaryInfo.js","sources":["../src/contact-details/ContactTertiaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport cn from \"classnames\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactTertiaryInfo\");\n\nexport interface ContactTertiaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n}\n\nexport const ContactTertiaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactTertiaryInfoProps\n>(function ContactTertiaryInfo(props, ref) {\n  const { id: idProp, text, icon: Icon, className, ...restProps } = props;\n  const { variant, setTertiary, setTertiaryId } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setTertiary(text);\n    setTertiaryId(id);\n    return () => {\n      setTertiary(undefined);\n      setTertiaryId(undefined);\n    };\n  }, [id, text, setTertiary, setTertiaryId]);\n\n  if (variant === \"mini\") {\n    return null;\n  }\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      id={id}\n      ref={ref}\n      className={cn(withBaseName(), className)}\n      data-testid=\"tertiary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactTertiaryInfo","cn"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAQpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAM,MAAA,EAAE,IAAI,MAAQ,EAAA,IAAA,EAAM,MAAM,IAAM,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,WAAa,EAAA,aAAA,KAAkB,wBAAyB,EAAA,CAAA;AACzE,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAChB,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,KACzB,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,WAAA,EAAa,aAAa,CAAC,CAAA,CAAA;AAEzC,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAAC,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,aAAY,EAAA,UAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ContactTertiaryInfo.js","sources":["../src/contact-details/ContactTertiaryInfo.tsx"],"sourcesContent":["import { makePrefixer, useId, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ComponentType, forwardRef, HTMLAttributes, useEffect } from \"react\";\nimport { useContactDetailsContext } from \"./internal\";\n\nconst withBaseName = makePrefixer(\"saltContactTertiaryInfo\");\n\nexport interface ContactTertiaryInfoProps\n  extends HTMLAttributes<HTMLDivElement> {\n  icon?: ComponentType<IconProps>;\n  text: string;\n}\n\nexport const ContactTertiaryInfo = forwardRef<\n  HTMLDivElement,\n  ContactTertiaryInfoProps\n>(function ContactTertiaryInfo(props, ref) {\n  const { id: idProp, text, icon: Icon, className, ...restProps } = props;\n  const { variant, setTertiary, setTertiaryId } = useContactDetailsContext();\n  const id = useId(idProp);\n\n  useEffect(() => {\n    setTertiary(text);\n    setTertiaryId(id);\n    return () => {\n      setTertiary(undefined);\n      setTertiaryId(undefined);\n    };\n  }, [id, text, setTertiary, setTertiaryId]);\n\n  if (variant === \"mini\") {\n    return null;\n  }\n\n  return (\n    <Text\n      {...restProps}\n      maxRows={1}\n      styleAs={variant === \"default\" ? \"h4\" : undefined}\n      id={id}\n      ref={ref}\n      className={clsx(withBaseName(), className)}\n      data-testid=\"tertiary\"\n    >\n      {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n      {text}\n    </Text>\n  );\n});\n"],"names":["ContactTertiaryInfo"],"mappings":";;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAQpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAM,MAAA,EAAE,IAAI,MAAQ,EAAA,IAAA,EAAM,MAAM,IAAM,EAAA,SAAA,EAAA,GAAc,WAAc,GAAA,KAAA,CAAA;AAClE,EAAA,MAAM,EAAE,OAAA,EAAS,WAAa,EAAA,aAAA,KAAkB,wBAAyB,EAAA,CAAA;AACzE,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,IAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAChB,IAAA,OAAO,MAAM;AACX,MAAA,WAAA,CAAY,KAAS,CAAA,CAAA,CAAA;AACrB,MAAA,aAAA,CAAc,KAAS,CAAA,CAAA,CAAA;AAAA,KACzB,CAAA;AAAA,KACC,CAAC,EAAA,EAAI,IAAM,EAAA,WAAA,EAAa,aAAa,CAAC,CAAA,CAAA;AAEzC,EAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IACE,GAAG,SAAA;AAAA,IACJ,OAAS,EAAA,CAAA;AAAA,IACT,OAAA,EAAS,OAAY,KAAA,SAAA,GAAY,IAAO,GAAA,KAAA,CAAA;AAAA,IACxC,EAAA;AAAA,IACA,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,aAAY,EAAA,UAAA;AAAA,IAEX,QAAA,EAAA;AAAA,MAAA,IAAA,mBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MACnD,IAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/MailLinkComponent.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import { Link, Text } from '@salt-ds/core';
 import { isEmail } from '../utils/isEmail.js';
 import 'react';
+import '../utils/useFloatingUI.js';
 
 const MailLinkComponent = (props) => {
   const { value, ...restProps } = props;

package/dist-es/packages/lab/src/contact-details/MailLinkComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}
+{"version":3,"file":"MailLinkComponent.js","sources":["../src/contact-details/MailLinkComponent.tsx"],"sourcesContent":["import { Link, Text } from \"@salt-ds/core\";\n\nimport { isEmail } from \"../utils\";\nimport { ValueComponentProps } from \"./types\";\n\nexport const MailLinkComponent = (props: ValueComponentProps) => {\n  const { value, ...restProps } = props;\n\n  return isEmail(value) ? (\n    <Link href={`mailto:${value}`} tabIndex={0} maxRows={1} {...restProps}>\n      {value}\n    </Link>\n  ) : (\n    <Text maxRows={1}>{value}</Text>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAKa,MAAA,iBAAA,GAAoB,CAAC,KAA+B,KAAA;AAC/D,EAAM,MAAA,EAAE,KAAU,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAEhC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAA,mBACjB,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,MAAM,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IAAS,QAAU,EAAA,CAAA;AAAA,IAAG,OAAS,EAAA,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IACzD,QAAA,EAAA,KAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,OAAS,EAAA,CAAA;AAAA,IAAI,QAAA,EAAA,KAAA;AAAA,GAAM,CAAA,CAAA;AAE7B;;;;"}

package/dist-es/packages/lab/src/contact-details/internal/FavoriteToggleWithTooltip.js

@@ -1,10 +1,7 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useForkRef } from '@salt-ds/core';
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { Tooltip } from '@salt-ds/core';
 import { FavoriteToggle } from './FavoriteToggle.js';
-import { Tooltip } from '../../tooltip/Tooltip.js';
-import '../../tooltip/TooltipContext.js';
-import { useTooltip } from '../../tooltip/useTooltip.js';
 
 const FavoriteToggleWithTooltip = forwardRef(function FavoriteToggleWithTooltip2(props, ref) {
   const {
@@ -12,22 +9,14 @@ const FavoriteToggleWithTooltip = forwardRef(function FavoriteToggleWithTooltip2
     tooltipProps,
     ...restProps
   } = props;
-  const { getTooltipProps, getTriggerProps } = useTooltip({
+  return /* @__PURE__ */ jsx(Tooltip, {
     enterDelay: 1500,
-    placement: "bottom"
-  });
-  const { ref: triggerRef, ...triggerProps } = getTriggerProps(restProps);
-  const handleRef = useForkRef(triggerRef, ref);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(Tooltip, {
-        ...getTooltipProps({ title: tooltipTitle, ...tooltipProps })
-      }),
-      /* @__PURE__ */ jsx(FavoriteToggle, {
-        ...triggerProps,
-        ref: handleRef
-      })
-    ]
+    placement: "bottom",
+    content: tooltipTitle,
+    children: /* @__PURE__ */ jsx(FavoriteToggle, {
+      ref,
+      ...restProps
+    })
   });
 });
 

package/dist-es/packages/lab/src/contact-details/internal/FavoriteToggleWithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FavoriteToggleWithTooltip.js","sources":["../src/contact-details/internal/FavoriteToggleWithTooltip.tsx"],"sourcesContent":["import { useForkRef } from \"@salt-ds/core\";\nimport { forwardRef } from \"react\";\nimport { FavoriteToggle, FavoriteToggleProps } from \"./FavoriteToggle\";\nimport { Tooltip, TooltipProps, useTooltip } from \"../../tooltip\";\n\nexport interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {\n  tooltipProps?: TooltipProps;\n  tooltipTitle?: string;\n}\n\nexport const FavoriteToggleWithTooltip = forwardRef<\n  HTMLSpanElement,\n  FavoriteToggleWithTooltipProps\n>(function FavoriteToggleWithTooltip(props, ref) {\n  const {\n    tooltipTitle = \"Toggle favorite\",\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  const { getTooltipProps, getTriggerProps } = useTooltip({\n    enterDelay: 1500,\n    placement: \"bottom\",\n  });\n\n  const { ref: triggerRef, ...triggerProps } =\n    getTriggerProps<typeof FavoriteToggle>(restProps);\n\n  const handleRef = useForkRef(triggerRef, ref);\n\n  return (\n    <>\n      <Tooltip {...getTooltipProps({ title: tooltipTitle, ...tooltipProps })} />\n      <FavoriteToggle {...triggerProps} ref={handleRef} />\n    </>\n  );\n});\n"],"names":["FavoriteToggleWithTooltip"],"mappings":";;;;;;;;AAUO,MAAM,yBAA4B,GAAA,UAAA,CAGvC,SAASA,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,iBAAA;AAAA,IACf,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,EAAE,eAAA,EAAiB,eAAgB,EAAA,GAAI,UAAW,CAAA;AAAA,IACtD,UAAY,EAAA,IAAA;AAAA,IACZ,SAAW,EAAA,QAAA;AAAA,GACZ,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,GAAK,EAAA,UAAA,EAAA,GAAe,YAAa,EAAA,GACvC,gBAAuC,SAAS,CAAA,CAAA;AAElD,EAAM,MAAA,SAAA,GAAY,UAAW,CAAA,UAAA,EAAY,GAAG,CAAA,CAAA;AAE5C,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACE,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,QAAS,GAAG,eAAgB,CAAA,EAAE,OAAO,YAAc,EAAA,GAAG,cAAc,CAAA;AAAA,OAAG,CAAA;AAAA,sBACvE,GAAA,CAAA,cAAA,EAAA;AAAA,QAAgB,GAAG,YAAA;AAAA,QAAc,GAAK,EAAA,SAAA;AAAA,OAAW,CAAA;AAAA,KAAA;AAAA,GACpD,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"FavoriteToggleWithTooltip.js","sources":["../src/contact-details/internal/FavoriteToggleWithTooltip.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Tooltip, TooltipProps } from \"@salt-ds/core\";\nimport { FavoriteToggle, FavoriteToggleProps } from \"./FavoriteToggle\";\n\nexport interface FavoriteToggleWithTooltipProps extends FavoriteToggleProps {\n  tooltipProps?: TooltipProps;\n  tooltipTitle?: string;\n}\n\nexport const FavoriteToggleWithTooltip = forwardRef<\n  HTMLSpanElement,\n  FavoriteToggleWithTooltipProps\n>(function FavoriteToggleWithTooltip(props, ref) {\n  const {\n    tooltipTitle = \"Toggle favorite\",\n    tooltipProps,\n    ...restProps\n  } = props;\n\n  return (\n    <Tooltip enterDelay={1500} placement=\"bottom\" content={tooltipTitle}>\n      <FavoriteToggle ref={ref} {...restProps} />\n    </Tooltip>\n  );\n});\n"],"names":["FavoriteToggleWithTooltip"],"mappings":";;;;;AASO,MAAM,yBAA4B,GAAA,UAAA,CAGvC,SAASA,0BAAAA,CAA0B,OAAO,GAAK,EAAA;AAC/C,EAAM,MAAA;AAAA,IACJ,YAAe,GAAA,iBAAA;AAAA,IACf,YAAA;AAAA,IACG,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,IAAQ,UAAY,EAAA,IAAA;AAAA,IAAM,SAAU,EAAA,QAAA;AAAA,IAAS,OAAS,EAAA,YAAA;AAAA,IACrD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,MAAe,GAAA;AAAA,MAAW,GAAG,SAAA;AAAA,KAAW,CAAA;AAAA,GAC3C,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/contact-details/internal/StarIconContainer.js

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { StarIcon } from './StarIcon.js';
 
@@ -15,7 +15,7 @@ const StarIconContainer = forwardRef(function StarIconContainer2(props, ref) {
     ...other
   } = props;
   return /* @__PURE__ */ jsx("span", {
-    className: cx(
+    className: clsx(
       withBaseName(),
       {
         [withBaseName("focusVisible")]: isFocusVisible
@@ -25,7 +25,7 @@ const StarIconContainer = forwardRef(function StarIconContainer2(props, ref) {
     ...other,
     ref,
     children: /* @__PURE__ */ jsx(StarIcon, {
-      className: cx(withBaseName("svg"), {
+      className: clsx(withBaseName("svg"), {
         [withBaseName("focused")]: isFocusVisible && isFocused,
         [withBaseName("selected")]: isSelected && !isHighlighted,
         [withBaseName("selecting")]: !isSelected && isHighlighted,

package/dist-es/packages/lab/src/contact-details/internal/StarIconContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StarIconContainer.js","sources":["../src/contact-details/internal/StarIconContainer.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { StarIcon } from \"./StarIcon\";\n\nconst withBaseName = makePrefixer(\"saltContactFavoriteToggle\");\n\nexport interface StarIconContainerProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  isFocusVisible?: boolean;\n  isFocused?: boolean;\n  isHighlighted?: boolean;\n  isSelected?: boolean;\n}\n\nexport const StarIconContainer = forwardRef<\n  HTMLSpanElement,\n  StarIconContainerProps\n>(function StarIconContainer(props, ref) {\n  const {\n    isSelected,\n    isHighlighted,\n    isFocused,\n    isFocusVisible,\n    className,\n    ...other\n  } = props;\n\n  return (\n    <span\n      className={classnames(\n        withBaseName(),\n        {\n          [withBaseName(\"focusVisible\")]: isFocusVisible,\n        },\n        className\n      )}\n      {...other}\n      ref={ref}\n    >\n      <StarIcon\n        className={classnames(withBaseName(\"svg\"), {\n          [withBaseName(\"focused\")]: isFocusVisible && isFocused,\n          [withBaseName(\"selected\")]: isSelected && !isHighlighted,\n          [withBaseName(\"selecting\")]: !isSelected && isHighlighted,\n          [withBaseName(\"deselected\")]: !isSelected && !isHighlighted,\n          [withBaseName(\"deselecting\")]: isSelected && isHighlighted,\n        })}\n        highlighted={isHighlighted}\n        selected={isSelected}\n      />\n    </span>\n  );\n});\n"],"names":["StarIconContainer","classnames"],"mappings":";;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA,CAAA;AAWtD,MAAM,iBAAoB,GAAA,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAK,EAAA;AACvC,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAAC,EAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,cAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAAA,EAAA,CAAW,YAAa,CAAA,KAAK,CAAG,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,cAAkB,IAAA,SAAA;AAAA,QAC7C,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,cAAc,CAAC,aAAA;AAAA,QAC3C,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,UAAc,IAAA,aAAA;AAAA,QAC5C,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,cAAc,CAAC,aAAA;AAAA,QAC9C,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,UAAc,IAAA,aAAA;AAAA,OAC9C,CAAA;AAAA,MACD,WAAa,EAAA,aAAA;AAAA,MACb,QAAU,EAAA,UAAA;AAAA,KACZ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"StarIconContainer.js","sources":["../src/contact-details/internal/StarIconContainer.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { StarIcon } from \"./StarIcon\";\n\nconst withBaseName = makePrefixer(\"saltContactFavoriteToggle\");\n\nexport interface StarIconContainerProps\n  extends HTMLAttributes<HTMLSpanElement> {\n  className?: string;\n  isFocusVisible?: boolean;\n  isFocused?: boolean;\n  isHighlighted?: boolean;\n  isSelected?: boolean;\n}\n\nexport const StarIconContainer = forwardRef<\n  HTMLSpanElement,\n  StarIconContainerProps\n>(function StarIconContainer(props, ref) {\n  const {\n    isSelected,\n    isHighlighted,\n    isFocused,\n    isFocusVisible,\n    className,\n    ...other\n  } = props;\n\n  return (\n    <span\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focusVisible\")]: isFocusVisible,\n        },\n        className\n      )}\n      {...other}\n      ref={ref}\n    >\n      <StarIcon\n        className={clsx(withBaseName(\"svg\"), {\n          [withBaseName(\"focused\")]: isFocusVisible && isFocused,\n          [withBaseName(\"selected\")]: isSelected && !isHighlighted,\n          [withBaseName(\"selecting\")]: !isSelected && isHighlighted,\n          [withBaseName(\"deselected\")]: !isSelected && !isHighlighted,\n          [withBaseName(\"deselecting\")]: isSelected && isHighlighted,\n        })}\n        highlighted={isHighlighted}\n        selected={isSelected}\n      />\n    </span>\n  );\n});\n"],"names":["StarIconContainer"],"mappings":";;;;;;AAKA,MAAM,YAAA,GAAe,aAAa,2BAA2B,CAAA,CAAA;AAWtD,MAAM,iBAAoB,GAAA,UAAA,CAG/B,SAASA,kBAAAA,CAAkB,OAAO,GAAK,EAAA;AACvC,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,aAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,cAAA;AAAA,OAClC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,KAAA;AAAA,IACJ,GAAA;AAAA,IAEA,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,KAAK,CAAG,EAAA;AAAA,QACnC,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,cAAkB,IAAA,SAAA;AAAA,QAC7C,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,cAAc,CAAC,aAAA;AAAA,QAC3C,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,CAAC,UAAc,IAAA,aAAA;AAAA,QAC5C,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,cAAc,CAAC,aAAA;AAAA,QAC9C,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,UAAc,IAAA,aAAA;AAAA,OAC9C,CAAA;AAAA,MACD,WAAa,EAAA,aAAA;AAAA,MACb,QAAU,EAAA,UAAA;AAAA,KACZ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/content-status/ContentStatus.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, useAriaAnnouncer, Text, Button } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useEffect } from 'react';
 import { StatusIndicator } from './internal/StatusIndicator.js';
 import './ContentStatus.css.js';
@@ -46,7 +46,7 @@ const ContentStatus = forwardRef(
       }
     }, [announce, disableAnnouncer, message, status, title]);
     return /* @__PURE__ */ jsxs("div", {
-      className: cx(withBaseName(), className),
+      className: clsx(withBaseName(), className),
       ref,
       ...rest,
       children: [
@@ -64,20 +64,20 @@ const ContentStatus = forwardRef(
         }),
         hasContent && /* @__PURE__ */ jsxs("div", {
           "aria-labelledby": id,
-          className: cx(withBaseName("content")),
+          className: clsx(withBaseName("content")),
           id,
           role: "region",
           children: [
             title && /* @__PURE__ */ jsx(Text, {
-              className: cx(withBaseName("title")),
+              className: clsx(withBaseName("title")),
               children: title
             }),
             message && /* @__PURE__ */ jsx(Text, {
-              className: cx(withBaseName("message")),
+              className: clsx(withBaseName("message")),
               children: message
             }),
             hasActions && /* @__PURE__ */ jsx("div", {
-              className: cx(withBaseName("actions")),
+              className: clsx(withBaseName("actions")),
               children: children || /* @__PURE__ */ jsx(Button, {
                 onClick: onActionClick,
                 ref: buttonRef,

package/dist-es/packages/lab/src/content-status/ContentStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useAriaAnnouncer,\n  useId,\n  Text,\n} from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport { forwardRef, HTMLAttributes, MouseEvent, Ref, useEffect } from \"react\";\n\nimport {\n  StatusIndicator,\n  StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nimport \"./ContentStatus.css\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<any>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      unit = \"%\",\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={cx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          unit={unit}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={cx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={cx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={cx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={cx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["ContentStatus"],"mappings":"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"}
+{"version":3,"file":"ContentStatus.js","sources":["../src/content-status/ContentStatus.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useAriaAnnouncer,\n  useId,\n  Text,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, MouseEvent, Ref, useEffect } from \"react\";\n\nimport {\n  StatusIndicator,\n  StatusIndicatorProps,\n} from \"./internal/StatusIndicator\";\n\nimport \"./ContentStatus.css\";\n\nconst withBaseName = makePrefixer(\"saltContentStatus\");\n\nexport interface ContentStatusProps\n  extends HTMLAttributes<HTMLDivElement>,\n    StatusIndicatorProps {\n  actionLabel?: string;\n  buttonRef?: Ref<any>;\n  onActionClick?: (evt: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport const ContentStatus = forwardRef<HTMLDivElement, ContentStatusProps>(\n  function ContentStatus(\n    {\n      CircularProgressProps,\n      SpinnerProps,\n      actionLabel,\n      buttonRef,\n      className,\n      children,\n      disableAnnouncer,\n      message,\n      onActionClick,\n      status = \"info\",\n      title,\n      unit = \"%\",\n      value,\n      ...rest\n    },\n    ref\n  ) {\n    const id = useId();\n\n    const hasDefaultActionContent = actionLabel && onActionClick;\n    const hasActions = children || hasDefaultActionContent;\n    const hasContent = title || message || hasActions;\n\n    const { announce } = useAriaAnnouncer();\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      const toBeAnnounced = [];\n      if (title) {\n        toBeAnnounced.push(title);\n      }\n      if (message) {\n        toBeAnnounced.push(message);\n      }\n      // Loading is announced by the spinner\n      if (status !== \"loading\") {\n        toBeAnnounced.push(status);\n      }\n      if (toBeAnnounced.length > 0) {\n        announce(toBeAnnounced.join(\" \"));\n      }\n    }, [announce, disableAnnouncer, message, status, title]);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <StatusIndicator\n          CircularProgressProps={CircularProgressProps}\n          SpinnerProps={SpinnerProps}\n          disableAnnouncer={disableAnnouncer}\n          id={id}\n          message={message}\n          status={status}\n          title={title}\n          unit={unit}\n          value={value}\n          {...rest}\n        />\n        {hasContent && (\n          <div\n            // `aria-labelledby` to itself so that children of this div will show up in screen reader, and we don't need to join to aria-label\n            aria-labelledby={id}\n            className={clsx(withBaseName(\"content\"))}\n            id={id}\n            role=\"region\"\n          >\n            {title && (\n              <Text className={clsx(withBaseName(\"title\"))}>{title}</Text>\n            )}\n            {message && (\n              <Text className={clsx(withBaseName(\"message\"))}>{message}</Text>\n            )}\n            {hasActions && (\n              <div className={clsx(withBaseName(\"actions\"))}>\n                {children || (\n                  <Button onClick={onActionClick} ref={buttonRef}>\n                    {actionLabel}\n                  </Button>\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["ContentStatus"],"mappings":"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"}

package/dist-es/packages/lab/src/content-status/internal/StatusIndicator.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
-import cx from 'classnames';
+import { makePrefixer, Spinner, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
+import { clsx } from 'clsx';
 import { CircularProgress } from '../../progress/CircularProgress/CircularProgress.js';
 import '../../progress/LinearProgress/LinearProgress.js';
-import { Spinner } from '../../spinner/Spinner.js';
 
 const withBaseName = makePrefixer("saltContentStatus");
 function StatusIndicator({
@@ -24,7 +23,7 @@ function StatusIndicator({
     if (value !== void 0) {
       return /* @__PURE__ */ jsx(CircularProgress, {
         "aria-label": title || message,
-        className: cx(
+        className: clsx(
           withBaseName("determinateLoading"),
           circularProgressClassName
         ),
@@ -35,7 +34,7 @@ function StatusIndicator({
       });
     }
     return /* @__PURE__ */ jsx(Spinner, {
-      className: cx(withBaseName("indeterminateLoading"), spinnerClassName),
+      className: clsx(withBaseName("indeterminateLoading"), spinnerClassName),
       completionAnnouncement: null,
       "data-testid": `spinner-${id}`,
       disableAnnouncer,