@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/deck-layout/DeckLayout.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltDeckLayout {\n  overflow: hidden;\n}\n\n.saltDeckLayout-animate {\n  white-space: nowrap;\n}\n\n.saltDeckLayout-slide-horizontal {\n  width: var(--deckLayout-width);\n  transition: transform var(--salt-animation-duration);\n  transform: translateX(var(--deckLayout-transform-value));\n}\n\n.saltDeckLayout-slide-vertical {\n  height: var(--deckLayout-height);\n  transition: transform var(--salt-animation-duration);\n  transform: translateY(var(--deckLayout-transform-value));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=DeckLayout.css.js.map

package/dist-es/packages/lab/src/deck-layout/DeckLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/deck-layout/DeckLayout.js

@@ -0,0 +1,84 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useCallback, Children } from 'react';
+import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { DeckItem } from '../deck-item/DeckItem.js';
+import '../responsive/useResizeObserver.js';
+import { useWidth } from '../responsive/useWidth.js';
+import './DeckLayout.css.js';
+import cx from 'classnames';
+
+const withBaseName = makePrefixer("saltDeckLayout");
+const DeckLayout = forwardRef(
+  function DeckLayout2({
+    activeIndex = 0,
+    animation,
+    className,
+    children,
+    direction = "horizontal",
+    style,
+    deckItemProps,
+    ...rest
+  }, ref) {
+    const [deckItemRef, deckItemWidth] = useWidth(true);
+    const [deckItemHeight, setDeckItemHeight] = useState(0);
+    const handleResize = useCallback(
+      function handleResize2(contentRect) {
+        setDeckItemHeight(contentRect.height);
+      },
+      []
+    );
+    useIsomorphicLayoutEffect(() => {
+      if (!deckItemRef.current) {
+        return void 0;
+      }
+      handleResize(deckItemRef.current.getBoundingClientRect());
+      const observer = new ResizeObserver(
+        ([{ contentRect }]) => {
+          handleResize(contentRect);
+        }
+      );
+      observer.observe(deckItemRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [deckItemRef, handleResize]);
+    const deckLayoutStyles = {
+      ...style,
+      "--deckLayout-width": `${deckItemWidth}px`,
+      "--deckLayout-height": `${deckItemHeight}px`
+    };
+    const innerStyles = {
+      "--deckLayout-transform-value": `-${activeIndex * 100}%`
+    };
+    return /* @__PURE__ */ jsx("div", {
+      className: cx(withBaseName(), className),
+      style: deckLayoutStyles,
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx("div", {
+        className: cx(
+          {
+            [withBaseName("animate")]: animation
+          },
+          {
+            [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+          }
+        ),
+        style: innerStyles,
+        children: Children.map(children, (child, index) => {
+          return /* @__PURE__ */ jsx(DeckItem, {
+            ref: deckItemRef,
+            index,
+            activeIndex,
+            animation,
+            ...deckItemProps,
+            children: child
+          });
+        })
+      })
+    });
+  }
+);
+
+export { DeckLayout };
+//# sourceMappingURL=DeckLayout.js.map

package/dist-es/packages/lab/src/deck-layout/DeckLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import {\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  useState,\n  useCallback,\n  CSSProperties,\n} from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { DeckItem, DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\nimport \"./DeckLayout.css\";\n\nimport cx from \"classnames\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref\n  ) {\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect\n    ) {\n      setDeckItemHeight(contentRect.height);\n    },\n    []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        }\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={cx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={cx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            }\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n);\n"],"names":["DeckLayout","handleResize"],"mappings":"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"}

package/dist-es/packages/lab/src/dialog/Dialog.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltDialog {\n  --dialog-background: var(--saltDialog-background, var(--salt-container-primary-background));\n  --dialog-borderBottomWidth: var(--saltDialog-borderBottomWidth, 2px);\n  --dialog-borderColor: var(--saltDialog-borderColor, var(--salt-container-primary-borderColor));\n  --dialog-borderStyle: var(--saltDialog-borderStyle, var(--salt-container-borderStyle));\n  --dialog-borderWidth: var(--saltDialog-borderColor, var(--salt-size-border));\n  --dialog-boxShadow: var(--saltDialog-boxShadow, var(--salt-overlayable-shadow-modal));\n  --dialog-margin: var(--saltDialog-margin, calc(3 * var(--salt-size-unit)));\n  --dialog-padding: var(--saltDialog-padding, calc(3 * var(--salt-size-unit)));\n}\n\n.saltDialog {\n  background: var(--dialog-background);\n  border-color: var(--dialog-borderColor);\n  border-width: var(--dialog-borderWidth);\n  border-style: var(--dialog-borderStyle);\n  border-bottom-width: var(--dialog-borderBottomWidth);\n  display: flex;\n  flex-direction: column;\n  inset: 0; /* what does this do ? */\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--dialog-padding);\n  position: relative;\n  box-shadow: var(--saltDialog-boxShadow, var(--dialog-boxShadow));\n  margin: var(--saltDialog-margin, var(--dialog-margin));\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Dialog.css.js.map

package/dist-es/packages/lab/src/dialog/Dialog.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/dialog/Dialog.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useState, useEffect, useCallback, useRef } from 'react';
+import { DialogContext } from './internal/DialogContext.js';
+import { Scrim } from '../scrim/Scrim.js';
+import '../scrim/ScrimContext.js';
+import { useWindow } from '../window/WindowContext.js';
+import '../window/ElectronWindow.js';
+import { Portal } from '../portal/Portal.js';
+import './Dialog.css.js';
+
+const withBaseName = makePrefixer("saltDialog");
+const Dialog = forwardRef(function Dialog2(props, ref) {
+  const {
+    autoFocusRef,
+    children,
+    className,
+    height,
+    id,
+    onClose,
+    open: openProp,
+    status,
+    width,
+    enableBackdropClick,
+    disablePortal,
+    ...rest
+  } = props;
+  const Window = useWindow();
+  const [open, setOpen] = useState(openProp);
+  useEffect(() => {
+    setOpen(openProp);
+  }, [openProp]);
+  const dialogId = useId();
+  const handleClose = useCallback(() => {
+    onClose == null ? void 0 : onClose();
+    setOpen(false);
+  }, [onClose, setOpen]);
+  const handleBackdropClick = useCallback(() => {
+    if (enableBackdropClick) {
+      handleClose();
+    }
+  }, [enableBackdropClick, handleClose]);
+  const contentElementRef = useRef(null);
+  const setContentElement = useCallback((node) => {
+    contentElementRef.current = node;
+  }, []);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DialogContext.Provider, {
+    value: { status, dialogId, setContentElement },
+    children: /* @__PURE__ */ jsx(Portal, {
+      disablePortal,
+      children: /* @__PURE__ */ jsx(Scrim, {
+        autoFocusRef,
+        fallbackFocusRef: contentElementRef,
+        open,
+        closeWithEscape: true,
+        onBackDropClick: handleBackdropClick,
+        onClose: handleClose,
+        "aria-labelledby": `${dialogId}-heading`,
+        "aria-describedby": `${dialogId}-body`,
+        children: /* @__PURE__ */ jsx(Window, {
+          id,
+          children: /* @__PURE__ */ jsx("div", {
+            ...rest,
+            className: cx(withBaseName(), className, {
+              [withBaseName("infoShadow")]: status === "info"
+            }),
+            style: { width },
+            ref,
+            children
+          })
+        })
+      })
+    })
+  });
+});
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

package/dist-es/packages/lab/src/dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../src/dialog/Dialog.tsx"],"sourcesContent":["import { makePrefixer, useId, ValidationStatus } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\nimport { Scrim, ScrimProps } from \"../scrim\";\nimport { useWindow } from \"../window\";\nimport { Portal } from \"../portal\";\n\nimport \"./Dialog.css\";\n\nexport interface DialogProps extends HTMLAttributes<HTMLDivElement> {\n  autoFocusRef?: ScrimProps[\"autoFocusRef\"];\n  height?: string | number;\n  onClose?: () => void;\n  open?: boolean;\n  status?: ValidationStatus;\n  width?: string | number;\n  enableBackdropClick?: boolean;\n  disablePortal?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDialog\");\n\n/**\n * The Dialog is a window that contains text and interactive components.\n * By default, Dialog is non-modal, but supports modal behaviour as well.\n */\nexport const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(\n  props,\n  ref\n) {\n  const {\n    autoFocusRef,\n    children,\n    className,\n    height,\n    id,\n    onClose,\n    open: openProp,\n    status,\n    width,\n    enableBackdropClick,\n    disablePortal,\n    ...rest\n  } = props;\n\n  const Window = useWindow();\n  const [open, setOpen] = useState(openProp);\n\n  useEffect(() => {\n    setOpen(openProp);\n  }, [openProp]);\n\n  const dialogId = useId();\n\n  const handleClose = useCallback(() => {\n    onClose?.();\n    setOpen(false);\n  }, [onClose, setOpen]);\n\n  const handleBackdropClick = useCallback(() => {\n    if (enableBackdropClick) {\n      handleClose();\n    }\n  }, [enableBackdropClick, handleClose]);\n\n  const contentElementRef = useRef<HTMLDivElement | null>(null);\n\n  const setContentElement = useCallback((node: HTMLDivElement) => {\n    contentElementRef.current = node;\n  }, []);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <DialogContext.Provider value={{ status, dialogId, setContentElement }}>\n      <Portal disablePortal={disablePortal}>\n        <Scrim\n          autoFocusRef={autoFocusRef}\n          fallbackFocusRef={contentElementRef}\n          open={open}\n          closeWithEscape\n          onBackDropClick={handleBackdropClick}\n          onClose={handleClose}\n          aria-labelledby={`${dialogId}-heading`}\n          aria-describedby={`${dialogId}-body`}\n        >\n          <Window id={id}>\n            <div\n              {...rest}\n              className={classnames(withBaseName(), className, {\n                [withBaseName(\"infoShadow\")]: status === \"info\",\n              })}\n              style={{ width }}\n              ref={ref}\n            >\n              {children}\n            </div>\n          </Window>\n        </Scrim>\n      </Portal>\n    </DialogContext.Provider>\n  );\n});\n"],"names":["Dialog","classnames"],"mappings":";;;;;;;;;;;;AA4BA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAMvC,MAAM,MAAS,GAAA,UAAA,CAAwC,SAASA,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,EAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,MAAA;AAAA,IACA,KAAA;AAAA,IACA,mBAAA;AAAA,IACA,aAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,QAAQ,CAAA,CAAA;AAEzC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,OAAA,CAAQ,QAAQ,CAAA,CAAA;AAAA,GAClB,EAAG,CAAC,QAAQ,CAAC,CAAA,CAAA;AAEb,EAAA,MAAM,WAAW,KAAM,EAAA,CAAA;AAEvB,EAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,GACZ,EAAA,CAAC,OAAS,EAAA,OAAO,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,mBAAA,GAAsB,YAAY,MAAM;AAC5C,IAAA,IAAI,mBAAqB,EAAA;AACvB,MAAY,WAAA,EAAA,CAAA;AAAA,KACd;AAAA,GACC,EAAA,CAAC,mBAAqB,EAAA,WAAW,CAAC,CAAA,CAAA;AAErC,EAAM,MAAA,iBAAA,GAAoB,OAA8B,IAAI,CAAA,CAAA;AAE5D,EAAM,MAAA,iBAAA,GAAoB,WAAY,CAAA,CAAC,IAAyB,KAAA;AAC9D,IAAA,iBAAA,CAAkB,OAAU,GAAA,IAAA,CAAA;AAAA,GAC9B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EACE,uBAAA,GAAA,CAAC,cAAc,QAAd,EAAA;AAAA,IAAuB,KAAO,EAAA,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA;AAAA,IACnE,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,MAAO,aAAA;AAAA,MACN,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,YAAA;AAAA,QACA,gBAAkB,EAAA,iBAAA;AAAA,QAClB,IAAA;AAAA,QACA,eAAe,EAAA,IAAA;AAAA,QACf,eAAiB,EAAA,mBAAA;AAAA,QACjB,OAAS,EAAA,WAAA;AAAA,QACT,mBAAiB,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,QACpB,oBAAkB,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,QAErB,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,UAAO,EAAA;AAAA,UACN,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,YACE,GAAG,IAAA;AAAA,YACJ,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,cAC/C,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,MAAW,KAAA,MAAA;AAAA,aAC1C,CAAA;AAAA,YACD,KAAA,EAAO,EAAE,KAAM,EAAA;AAAA,YACf,GAAA;AAAA,YAEC,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/dialog/DialogActions.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=DialogActions.css.js.map

package/dist-es/packages/lab/src/dialog/DialogActions.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/dialog/DialogActions.js

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import cx from 'classnames';
+import { makePrefixer } from '@salt-ds/core';
+import './DialogActions.css.js';
+
+const withBaseName = makePrefixer("saltDialogActions");
+const DialogActions = forwardRef(
+  function DialogActions2(props, ref) {
+    const { className, children, ...rest } = props;
+    return /* @__PURE__ */ jsx("div", {
+      ...rest,
+      className: cx(withBaseName(), className),
+      ref,
+      children
+    });
+  }
+);
+
+export { DialogActions };
+//# sourceMappingURL=DialogActions.js.map

package/dist-es/packages/lab/src/dialog/DialogActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport classnames from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./DialogActions.css\";\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n  function DialogActions(props, ref) {\n    const { className, children, ...rest } = props;\n\n    return (\n      <div\n        {...rest}\n        className={classnames(withBaseName(), className)}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogActions","classnames"],"mappings":";;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/C,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dialog/DialogContent.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltDialogContent {\n  --dialog-content-fontSize: var(--saltDialog-content-fontSize, var(--salt-text-fontSize));\n  --dialog-content-lineHeight: var(--saltDialog-content-lineHeight, var(--salt-text-lineHeight));\n  --dialog-content-paddingTop: var(--saltDialog-content-paddingTop, calc(var(--salt-size-unit) * 2));\n  --dialog-content-paddingBottom: var(--saltDialog-content-paddingBottom, calc(var(--salt-size-unit) * 3));\n  --dialog-content-minHeight: var(--saltDialog-content-minHeight, var(--dialog-content-fontSize));\n  --dialog-content-color: var(--saltDialog-content-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogContent {\n  flex: 1 1 auto;\n  overflow: visible;\n  font-weight: var(--salt-text-fontWeight);\n  font-size: var(--dialog-content-fontSize);\n  padding-top: var(--dialog-content-paddingTop);\n  padding-bottom: var(--dialog-content-paddingBottom);\n  min-height: var(--dialog-content-minHeight);\n  line-height: var(--dialog-content-lineHeight);\n  color: var(--dialog-content-color);\n}\n\n.saltDialogContent-leftGutter {\n  padding-left: 32px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=DialogContent.css.js.map

package/dist-es/packages/lab/src/dialog/DialogContent.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/dialog/DialogContent.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useContext } from 'react';
+import { DialogContext } from './internal/DialogContext.js';
+import './DialogContent.css.js';
+
+const withBaseName = makePrefixer("saltDialogContent");
+const DialogContent = forwardRef(
+  function DialogContent2(props, ref) {
+    const { children, className, ...rest } = props;
+    const { status, dialogId, setContentElement } = useContext(DialogContext);
+    const handleRef = useForkRef(ref, setContentElement);
+    return /* @__PURE__ */ jsx("div", {
+      ...rest,
+      className: cx(
+        withBaseName(),
+        className,
+        {
+          [withBaseName("leftGutter")]: !!status
+        },
+        className
+      ),
+      id: `${dialogId}-body`,
+      ref: handleRef,
+      children
+    });
+  }
+);
+
+export { DialogContent };
+//# sourceMappingURL=DialogContent.js.map

package/dist-es/packages/lab/src/dialog/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport classnames from \"classnames\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={classnames(\n          withBaseName(),\n          className,\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["DialogContent","classnames"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dialog/DialogTitle.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-touch {\n  --dialog-title-fontSize: 26px;\n}\n\n.salt-density-low {\n  --dialog-title-fontSize: 24px;\n}\n\n.salt-density-medium {\n  --dialog-title-fontSize: 22px;\n}\n\n.salt-density-high {\n  --dialog-title-fontSize: 20px;\n}\n\n.saltDialogTitle {\n  --dialog-closeButton-padding: var(--saltDialog-closeButton-padding, var(--salt-size-unit));\n  --dialog-closeButton-offset: var(--saltDialog-closeButton-offset, calc(var(--dialog-padding) * -1));\n\n  --dialog-title-lineHeight: var(--saltDialog-title-lineHeight, var(--salt-text-lineHeight));\n  --dialog-title-fontWeight: var(--saltDialog-title-fontWeight, var(--salt-text-fontWeight-strong));\n  --dialog-title-icon-marginRight: var(--saltDialog-title-icon-marginRight, 8px);\n  --dialog-title-color: var(--saltDialog-title-color, var(--salt-text-primary-foreground));\n}\n\n.saltDialogTitle {\n  display: flex;\n  flex: 0 0 auto;\n  font-size: var(--dialog-title-fontSize);\n  font-weight: var(--dialog-title-fontWeight);\n  min-height: 16px;\n  position: relative;\n  color: var(--dialog-title-color);\n}\n\n.saltDialogTitle-close {\n  position: absolute;\n  padding-top: var(--dialog-closeButton-padding);\n  padding-bottom: var(--dialog-closeButton-padding);\n  right: var(--dialog-closeButton-offset);\n  top: var(--dialog-closeButton-offset);\n}\n\n.saltDialogTitle-statusIndicator {\n  margin-right: var(--dialog-title-icon-marginRight);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=DialogTitle.css.js.map

package/dist-es/packages/lab/src/dialog/DialogTitle.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/dialog/DialogTitle.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button, StatusIndicator } from '@salt-ds/core';
+import { CloseIcon } from '@salt-ds/icons';
+import cx from 'classnames';
+import { forwardRef, useContext } from 'react';
+import { DialogContext } from './internal/DialogContext.js';
+import './DialogTitle.css.js';
+
+const withBaseName = makePrefixer("saltDialogTitle");
+const DialogTitle = forwardRef(
+  function DialogTitle2(props, ref) {
+    const { children, className, onClose, ...rest } = props;
+    const { status, dialogId } = useContext(DialogContext);
+    return /* @__PURE__ */ jsxs("div", {
+      className: cx(withBaseName(), className),
+      ref,
+      ...rest,
+      children: [
+        onClose && /* @__PURE__ */ jsx(Button, {
+          className: withBaseName("close"),
+          onClick: onClose,
+          variant: "secondary",
+          children: /* @__PURE__ */ jsx(CloseIcon, {
+            "aria-label": "close dialog",
+            className: withBaseName("closeIcon")
+          })
+        }),
+        status && /* @__PURE__ */ jsx(StatusIndicator, {
+          className: withBaseName("statusIndicator"),
+          status
+        }),
+        /* @__PURE__ */ jsx("span", {
+          "aria-level": 1,
+          id: `${dialogId}-heading`,
+          role: "heading",
+          children
+        })
+      ]
+    });
+  }
+);
+
+export { DialogTitle };
+//# sourceMappingURL=DialogTitle.js.map

package/dist-es/packages/lab/src/dialog/DialogTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { Button, makePrefixer, StatusIndicator } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { forwardRef, HTMLAttributes, SyntheticEvent, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogTitle.css\";\nexport interface DialogTitleProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the built-in ARIA heading attributes.\n   */\n  disableAria?: boolean;\n  onClose?: (event: SyntheticEvent) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\nexport const DialogTitle = forwardRef<HTMLDivElement, DialogTitleProps>(\n  function DialogTitle(props, ref) {\n    const { children, className, onClose, ...rest } = props;\n    const { status, dialogId } = useContext(DialogContext);\n\n    return (\n      <div\n        className={classnames(withBaseName(), className)}\n        ref={ref}\n        {...rest}\n      >\n        {onClose && (\n          <Button\n            className={withBaseName(\"close\")}\n            onClick={onClose}\n            variant=\"secondary\"\n          >\n            <CloseIcon\n              aria-label=\"close dialog\"\n              className={withBaseName(\"closeIcon\")}\n            />\n          </Button>\n        )}\n        {status && (\n          <StatusIndicator\n            className={withBaseName(\"statusIndicator\")}\n            status={status}\n          />\n        )}\n        <span aria-level={1} id={`${dialogId}-heading`} role=\"heading\">\n          {children}\n        </span>\n      </div>\n    );\n  }\n);\n"],"names":["DialogTitle","classnames"],"mappings":";;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,OAAA,EAAA,GAAY,MAAS,GAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAS,EAAA,GAAI,WAAW,aAAa,CAAA,CAAA;AAErD,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,EAAA,CAAW,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAC/C,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,OAAA,oBACE,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,OAAS,EAAA,OAAA;AAAA,UACT,OAAQ,EAAA,WAAA;AAAA,UAER,QAAC,kBAAA,GAAA,CAAA,SAAA,EAAA;AAAA,YACC,YAAW,EAAA,cAAA;AAAA,YACX,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,WACrC,CAAA;AAAA,SACF,CAAA;AAAA,QAED,0BACE,GAAA,CAAA,eAAA,EAAA;AAAA,UACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UACzC,MAAA;AAAA,SACF,CAAA;AAAA,wBAED,GAAA,CAAA,MAAA,EAAA;AAAA,UAAK,YAAY,EAAA,CAAA;AAAA,UAAG,IAAI,CAAG,EAAA,QAAA,CAAA,QAAA,CAAA;AAAA,UAAoB,IAAK,EAAA,SAAA;AAAA,UAClD,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/dialog/internal/DialogContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const DialogContext = createContext({});
+
+export { DialogContext };
+//# sourceMappingURL=DialogContext.js.map

package/dist-es/packages/lab/src/dialog/internal/DialogContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContext.js","sources":["../src/dialog/internal/DialogContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ValidationStatus } from \"@salt-ds/core\";\n\nexport const DialogContext = createContext<{\n  status?: ValidationStatus;\n  dialogId?: string;\n  setContentElement?: (node: HTMLDivElement) => void;\n}>({});\n"],"names":[],"mappings":";;AAGa,MAAA,aAAA,GAAgB,aAI1B,CAAA,EAAE;;;;"}

package/dist-es/packages/lab/src/dropdown/Dropdown.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltDropdown {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdown-fullWidth {\n  width: 100%;\n}\n\n.saltDropdown-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Dropdown.css.js.map

package/dist-es/packages/lab/src/dropdown/Dropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist-es/packages/lab/src/dropdown/Dropdown.js

@@ -0,0 +1,127 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIdMemo, useForkRef } from '@salt-ds/core';
+import { forwardRef, useRef, useCallback, cloneElement } from 'react';
+import { CollectionProvider } from '../common-hooks/collectionProvider.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import '../common-hooks/keyUtils.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import '../responsive/useResizeObserver.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import { List } from '../list/List.js';
+import { DropdownBase } from './DropdownBase.js';
+import { DropdownButton } from './DropdownButton.js';
+import { useDropdown } from './useDropdown.js';
+
+const Dropdown = forwardRef(function Dropdown2({
+  "aria-label": ariaLabel,
+  children,
+  defaultIsOpen,
+  defaultSelected,
+  id: idProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString,
+  onOpenChange,
+  onSelectionChange,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  triggerComponent,
+  ListItem,
+  ListProps: ListProps2,
+  width = 180,
+  ...props
+}, forwardedRef) {
+  const id = useIdMemo(idProp);
+  const rootRef = useRef(null);
+  const forkedRef = useForkRef(rootRef, forwardedRef);
+  const collectionHook = useCollectionItems({
+    id,
+    source,
+    children,
+    options: {
+      itemToString: itemToString$1
+    }
+  });
+  const {
+    highlightedIndex,
+    triggerLabel,
+    listHandlers,
+    listControlProps,
+    selected,
+    ...dropdownListHook
+  } = useDropdown({
+    collectionHook,
+    defaultHighlightedIndex: ListProps2 == null ? void 0 : ListProps2.defaultHighlightedIndex,
+    defaultIsOpen,
+    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    highlightedIndex: ListProps2 == null ? void 0 : ListProps2.highlightedIndex,
+    isOpen: isOpenProp,
+    itemToString: itemToString$1,
+    label: "Dropdown",
+    onHighlight: ListProps2 == null ? void 0 : ListProps2.onHighlight,
+    onOpenChange,
+    onSelectionChange,
+    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selectionStrategy
+  });
+  const collectionItemsToItem = useCallback(
+    (itemOrItems) => {
+      if (Array.isArray(itemOrItems)) {
+        return itemOrItems.map((i) => i.value);
+      } else if (itemOrItems) {
+        return itemOrItems.value;
+      }
+    },
+    []
+  );
+  const getTriggerComponent = () => {
+    const ariaProps = {
+      "aria-activedescendant": dropdownListHook.isOpen ? listControlProps == null ? void 0 : listControlProps["aria-activedescendant"] : void 0,
+      "aria-label": ariaLabel
+    };
+    if (triggerComponent) {
+      const ownProps = triggerComponent.props;
+      return cloneElement(
+        triggerComponent,
+        forwardCallbackProps(ownProps, {
+          ...listControlProps,
+          ...ariaProps
+        })
+      );
+    } else {
+      return /* @__PURE__ */ jsx(DropdownButton, {
+        label: triggerLabel,
+        ...listControlProps,
+        ...ariaProps
+      });
+    }
+  };
+  return /* @__PURE__ */ jsx(CollectionProvider, {
+    collectionHook,
+    children: /* @__PURE__ */ jsxs(DropdownBase, {
+      ...props,
+      id,
+      isOpen: dropdownListHook.isOpen,
+      onOpenChange: dropdownListHook.onOpenChange,
+      ref: forkedRef,
+      width,
+      children: [
+        getTriggerComponent(),
+        /* @__PURE__ */ jsx(List, {
+          ListItem,
+          itemToString: itemToString$1,
+          ...ListProps2,
+          highlightedIndex,
+          listHandlers,
+          onSelectionChange,
+          selected: collectionItemsToItem(selected),
+          selectionStrategy,
+          "data-testid": "dropdown-list"
+        })
+      ]
+    })
+  });
+});
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist-es/packages/lab/src/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  CollectionItem,\n  CollectionProvider,\n  itemToString as defaultItemToString,\n  SelectionProps,\n  SelectionStrategy,\n  SingleSelectionStrategy,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport { ListProps } from \"../list/listTypes\";\nimport { DropdownBase, MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\nimport { forwardCallbackProps } from \"../utils\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\"\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[]\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      } else if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    []\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...listControlProps,\n          ...ariaProps,\n        })\n      );\n    } else {\n      return (\n        <DropdownButton\n          label={triggerLabel}\n          {...listControlProps}\n          {...ariaProps}\n        />\n      );\n    }\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  }\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","ListProps","useId"],"mappings":"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"}