npm - @exponential_app/eui-react - Versions diffs - 0.2.1 → 0.3.0 - Mend

@exponential_app/eui-react 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md +9 -0
package/dist/exponential-ui-react.css +1 -1
package/dist/index.js +82 -25
package/dist/index.js.map +3 -3
package/dist/primitives/index.js +423 -254
package/dist/primitives/index.js.map +6 -3
package/dist/types/primitives/carousel.d.ts +24 -0
package/dist/types/primitives/index.d.ts +3 -0
package/dist/types/primitives/mosaic.d.ts +18 -0
package/dist/types/primitives/outline.d.ts +16 -0
package/package.json +2 -2

package/dist/primitives/index.js CHANGED Viewed

@@ -453,23 +453,81 @@ function CardFooter({ className, ...props }) {
     ...props
   });
 }
+// packages/exponential-ui-react/src/primitives/carousel.tsx
+import { useLayoutEffect, useRef as useRef2 } from "react";
+import { CAROUSEL_CLASSES, carouselCounterText } from "@exponential_app/eui/web/primitives";
+import { CAROUSEL_GEOMETRY, carouselCounterText as carouselCounterText2 } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function CarouselCounter({ page, total, className, ...props }) {
+  return /* @__PURE__ */ jsx9("span", {
+    "data-slot": "carousel-counter",
+    "aria-hidden": "true",
+    className: cn2(CAROUSEL_CLASSES.counter, className),
+    ...props,
+    children: carouselCounterText(page, total)
+  });
+}
+var defaultPageLabel = (page, total) => `Page ${page + 1} of ${total}`;
+function CarouselThumbnails({ count, urls, page, onPageChange, pageLabel = defaultPageLabel, className, ...props }) {
+  const strip = useRef2(null);
+  useLayoutEffect(() => {
+    const el = strip.current;
+    const thumb = el?.children[page];
+    if (!el || !thumb)
+      return;
+    const a = el.getBoundingClientRect();
+    const b = thumb.getBoundingClientRect();
+    const delta = b.left < a.left ? b.left - a.left : b.right > a.right ? b.right - a.right : 0;
+    if (delta !== 0)
+      el.scrollLeft += delta;
+  }, [page, count]);
+  const n = Math.max(0, Math.floor(count));
+  return /* @__PURE__ */ jsx9("div", {
+    ref: strip,
+    "data-slot": "carousel-thumbnails",
+    className: cn2(CAROUSEL_CLASSES.thumbnails, className),
+    ...props,
+    children: Array.from({ length: n }, (_, i) => {
+      const current = i === page;
+      const src = urls[i];
+      return /* @__PURE__ */ jsx9("button", {
+        type: "button",
+        "data-slot": "carousel-thumbnail",
+        "data-current": current ? `true` : undefined,
+        "aria-current": current ? `true` : undefined,
+        "aria-label": pageLabel(i, n),
+        className: CAROUSEL_CLASSES.thumbnail,
+        onClick: () => onPageChange?.(i),
+        children: src ? /* @__PURE__ */ jsx9("img", {
+          src,
+          alt: "",
+          "aria-hidden": "true",
+          loading: "lazy",
+          decoding: "async",
+          draggable: false,
+          className: CAROUSEL_CLASSES.thumbnailImage
+        }) : null
+      }, i);
+    })
+  });
+}
 // packages/exponential-ui-react/src/primitives/checkbox.tsx
 import { CheckIcon } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { CHECKBOX_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx9(CheckboxPrimitive.Root, {
+  return /* @__PURE__ */ jsx10(CheckboxPrimitive.Root, {
     "data-slot": "checkbox",
     className: cn2(CHECKBOX_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx9(CheckboxPrimitive.Indicator, {
+    children: /* @__PURE__ */ jsx10(CheckboxPrimitive.Indicator, {
       "data-slot": "checkbox-indicator",
       className: CHECKBOX_CLASSES.indicator,
-      children: /* @__PURE__ */ jsx9(CheckIcon, {
+      children: /* @__PURE__ */ jsx10(CheckIcon, {
         className: CHECKBOX_CLASSES.icon
       })
     })
@@ -480,14 +538,14 @@ import * as React2 from "react";
 import { Check, Copy } from "lucide-react";
 import { tokenizeCode } from "@exponential_app/eui";
 import { CODE_BLOCK_CLASSES, CODE_TOKEN_CLASS, codeBlockLineVariants, codeBlockVariants } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx10, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 function CodeBlock({
   className,
   variant = `default`,
   size = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     "data-slot": "code-block",
     "data-variant": variant,
     "data-size": size,
@@ -496,14 +554,14 @@ function CodeBlock({
   });
 }
 function CodeBlockHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     "data-slot": "code-block-header",
     className: cn2(CODE_BLOCK_CLASSES.header, className),
     ...props
   });
 }
 function CodeBlockTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     "data-slot": "code-block-title",
     className: cn2(CODE_BLOCK_CLASSES.title, className),
     ...props
@@ -513,7 +571,7 @@ function CodeBlockActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     "data-slot": "code-block-actions",
     className: cn2(CODE_BLOCK_CLASSES.actions, className),
     ...props
@@ -537,7 +595,7 @@ function CodeBlockCopyButton({
   }, [copied]);
   return /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx10(Button, {
+      /* @__PURE__ */ jsx11(Button, {
         "data-slot": "code-block-copy-button",
         "data-copied": copied || undefined,
         variant,
@@ -552,9 +610,9 @@ function CodeBlockCopyButton({
           clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
         },
         ...props,
-        children: copied ? /* @__PURE__ */ jsx10(Check, {}) : /* @__PURE__ */ jsx10(Copy, {})
+        children: copied ? /* @__PURE__ */ jsx11(Check, {}) : /* @__PURE__ */ jsx11(Copy, {})
       }),
-      /* @__PURE__ */ jsx10("span", {
+      /* @__PURE__ */ jsx11("span", {
         "aria-live": "polite",
         className: CODE_BLOCK_CLASSES.srOnly,
         children: copied ? labels.copied : ``
@@ -575,7 +633,7 @@ function CodeBlockContent({
 }) {
   const source = typeof children === `string` ? children : null;
   const lines = React2.useMemo(() => source !== null && language ? tokenizeCode(source.replace(/\n$/, ``), language) : null, [source, language]);
-  return /* @__PURE__ */ jsx10("pre", {
+  return /* @__PURE__ */ jsx11("pre", {
     "data-slot": "code-block-content",
     "data-wrap": wrap || undefined,
     "data-numbered": lineNumbers || undefined,
@@ -589,17 +647,17 @@ function CodeBlockContent({
     },
     className: cn2(CODE_BLOCK_CLASSES.content, className),
     ...props,
-    children: /* @__PURE__ */ jsx10("code", {
+    children: /* @__PURE__ */ jsx11("code", {
       "data-slot": "code-block-code",
       className: CODE_BLOCK_CLASSES.code,
-      children: lines !== null ? lines.map((tokens, index) => /* @__PURE__ */ jsx10(CodeBlockLine, {
-        children: tokens.length === 0 ? null : tokens.map((token, j) => /* @__PURE__ */ jsx10("span", {
+      children: lines !== null ? lines.map((tokens, index) => /* @__PURE__ */ jsx11(CodeBlockLine, {
+        children: tokens.length === 0 ? null : tokens.map((token, j) => /* @__PURE__ */ jsx11("span", {
           "data-token": token.kind,
           className: cn2(CODE_TOKEN_CLASS[token.kind], CODE_BLOCK_CLASSES.token),
           children: token.text
         }, j))
       }, index)) : lineNumbers && source !== null ? source.replace(/\n$/, ``).split(`
-`).map((line, index) => /* @__PURE__ */ jsx10(CodeBlockLine, {
+`).map((line, index) => /* @__PURE__ */ jsx11(CodeBlockLine, {
         children: line
       }, index)) : children
     })
@@ -612,12 +670,12 @@ function CodeBlockLine({
   ...props
 }) {
   const empty = children === undefined || children === null || children === `` || Array.isArray(children) && children.length === 0;
-  return /* @__PURE__ */ jsx10("span", {
+  return /* @__PURE__ */ jsx11("span", {
     "data-slot": "code-block-line",
     "data-variant": variant,
     className: cn2(codeBlockLineVariants({ variant }), className),
     ...props,
-    children: /* @__PURE__ */ jsx10("span", {
+    children: /* @__PURE__ */ jsx11("span", {
       "data-slot": "code-block-line-content",
       className: CODE_BLOCK_CLASSES.lineContent,
       children: empty ? `
@@ -626,7 +684,7 @@ function CodeBlockLine({
   });
 }
 function CodeBlockFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx10("div", {
+  return /* @__PURE__ */ jsx11("div", {
     "data-slot": "code-block-footer",
     className: cn2(CODE_BLOCK_CLASSES.footer, className),
     ...props
@@ -634,11 +692,11 @@ function CodeBlockFooter({ className, ...props }) {
 }
 // packages/exponential-ui-react/src/primitives/collapsible.tsx
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Root, {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Root, {
     "data-slot": "collapsible",
     ...props
   });
@@ -646,7 +704,7 @@ function Collapsible({
 function CollapsibleTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Trigger, {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Trigger, {
     "data-slot": "collapsible-trigger",
     ...props
   });
@@ -654,7 +712,7 @@ function CollapsibleTrigger({
 function CollapsibleContent({
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Content, {
+  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Content, {
     "data-slot": "collapsible-content",
     ...props
   });
@@ -663,7 +721,7 @@ function CollapsibleContent({
 import * as React3 from "react";
 import { CircleXIcon, SearchIcon } from "lucide-react";
 import { COMMAND_CLASSES, COMMAND_LABEL_STYLE, COMMAND_SELECT_EVENT, commandItemValue, createCommandStore, observeCommandListHeight } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 var CommandContext = React3.createContext(null);
 var GroupContext = React3.createContext(null);
@@ -705,14 +763,14 @@ function Command({ className, value, defaultValue, onValueChange, filter, should
       store.onKeyDown(e.nativeEvent);
     },
     children: [
-      /* @__PURE__ */ jsx12("label", {
+      /* @__PURE__ */ jsx13("label", {
         "data-slot": "command-label",
         htmlFor: inputId,
         id: labelId,
         style: COMMAND_LABEL_STYLE,
         children: label
       }),
-      /* @__PURE__ */ jsx12(CommandContext.Provider, {
+      /* @__PURE__ */ jsx13(CommandContext.Provider, {
         value: ctx,
         children
       })
@@ -739,10 +797,10 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
     "data-slot": "command-input-wrapper",
     className: COMMAND_CLASSES.inputWrapper,
     children: [
-      /* @__PURE__ */ jsx12(SearchIcon, {
+      /* @__PURE__ */ jsx13(SearchIcon, {
         className: COMMAND_CLASSES.inputGlyph
       }),
-      /* @__PURE__ */ jsx12("input", {
+      /* @__PURE__ */ jsx13("input", {
         ref: (node) => {
           input.current = node;
           if (typeof ref === `function`)
@@ -767,7 +825,7 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
         value: shown,
         onChange: (e) => change(e.target.value)
       }),
-      shown !== `` ? /* @__PURE__ */ jsx12("button", {
+      shown !== `` ? /* @__PURE__ */ jsx13("button", {
         type: "button",
         "data-slot": "command-input-clear",
         "aria-label": clearLabel ?? `Clear search`,
@@ -776,7 +834,7 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
           change(``);
           input.current?.focus();
         },
-        children: /* @__PURE__ */ jsx12(CircleXIcon, {})
+        children: /* @__PURE__ */ jsx13(CircleXIcon, {})
       }) : null
     ]
   });
@@ -790,7 +848,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
     if (list.current && sizer.current)
       return observeCommandListHeight(list.current, sizer.current);
   }, []);
-  return /* @__PURE__ */ jsx12("div", {
+  return /* @__PURE__ */ jsx13("div", {
     ref: list,
     "data-slot": "command-list",
     className: cn2(COMMAND_CLASSES.list, className),
@@ -800,7 +858,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
     "aria-activedescendant": store.selectedId,
     "aria-label": ariaLabel ?? `Suggestions`,
     id: listId,
-    children: /* @__PURE__ */ jsx12("div", {
+    children: /* @__PURE__ */ jsx13("div", {
       ref: (node) => {
         sizer.current = node;
         store.setSizer(node);
@@ -813,7 +871,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
 function CommandEmpty({ className, ...props }) {
   const { store } = useRoot();
   useStore(store);
-  return store.empty() ? /* @__PURE__ */ jsx12("div", {
+  return store.empty() ? /* @__PURE__ */ jsx13("div", {
     "data-slot": "command-empty",
     className: cn2(COMMAND_CLASSES.empty, className),
     ...props,
@@ -841,18 +899,18 @@ function CommandGroup({ className, heading, value, forceMount, children, ...prop
     "data-value": groupValue,
     hidden: visible ? undefined : true,
     children: [
-      heading ? /* @__PURE__ */ jsx12("div", {
+      heading ? /* @__PURE__ */ jsx13("div", {
         "data-slot": "command-group-heading",
         className: COMMAND_CLASSES.groupHeading,
         "aria-hidden": true,
         id: headingId,
         children: heading
       }) : null,
-      /* @__PURE__ */ jsx12("div", {
+      /* @__PURE__ */ jsx13("div", {
         "data-slot": "command-group-items",
         role: "group",
         "aria-labelledby": heading ? headingId : undefined,
-        children: /* @__PURE__ */ jsx12(GroupContext.Provider, {
+        children: /* @__PURE__ */ jsx13(GroupContext.Provider, {
           value: ctx,
           children
         })
@@ -894,7 +952,7 @@ function CommandItem({ className, value, keywords, onSelect, disabled, forceMoun
   if (!visible)
     return null;
   const selected = own !== `` && store.value === own;
-  return /* @__PURE__ */ jsx12("div", {
+  return /* @__PURE__ */ jsx13("div", {
     ref: el,
     "data-slot": "command-item",
     className: cn2(COMMAND_CLASSES.item, className),
@@ -921,7 +979,7 @@ function CommandSeparator({ className, alwaysRender, ...props }) {
   React3.useLayoutEffect(() => store.update(id, { el: el.current }));
   if (!alwaysRender && store.search !== ``)
     return null;
-  return /* @__PURE__ */ jsx12("div", {
+  return /* @__PURE__ */ jsx13("div", {
     ref: el,
     "data-slot": "command-separator",
     className: cn2(COMMAND_CLASSES.separator, className),
@@ -930,7 +988,7 @@ function CommandSeparator({ className, alwaysRender, ...props }) {
   });
 }
 function CommandShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx12("span", {
+  return /* @__PURE__ */ jsx13("span", {
     "data-slot": "command-shortcut",
     className: cn2(COMMAND_CLASSES.shortcut, className),
     ...props
@@ -940,13 +998,13 @@ function CommandShortcut({ className, ...props }) {
 import { forwardRef } from "react";
 import { CONTEXT_RING_CLASSES, RING_RADIUS, RING_SIZE, RING_STROKE, RING_TONE_CLASS, ringGeometry } from "@exponential_app/eui/web/primitives";
 import { RING_RADIUS as RING_RADIUS2, RING_SIZE as RING_SIZE2, RING_STROKE as RING_STROKE2, RING_TONE_CLASS as RING_TONE_CLASS2, ringGeometry as ringGeometry2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = false, className, ...props }, ref) {
   const value = percent ?? null;
   if (value === null && !showEmpty)
     return null;
   const { circumference, dashOffset } = ringGeometry(value ?? 0);
-  return /* @__PURE__ */ jsx13(Button, {
+  return /* @__PURE__ */ jsx14(Button, {
     ref,
     type: "button",
     variant: "ghost",
@@ -963,7 +1021,7 @@ var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = f
       "aria-hidden": true,
       className: CONTEXT_RING_CLASSES.svg,
       children: [
-        /* @__PURE__ */ jsx13("circle", {
+        /* @__PURE__ */ jsx14("circle", {
           cx: RING_SIZE / 2,
           cy: RING_SIZE / 2,
           r: RING_RADIUS,
@@ -972,7 +1030,7 @@ var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = f
           strokeWidth: RING_STROKE,
           opacity: 0.2
         }),
-        value !== null && /* @__PURE__ */ jsx13("circle", {
+        value !== null && /* @__PURE__ */ jsx14("circle", {
           cx: RING_SIZE / 2,
           cy: RING_SIZE / 2,
           r: RING_RADIUS,
@@ -999,13 +1057,13 @@ import { MOBILE_ALERT, MOBILE_ARMS, MOBILE_PAGE, MOBILE_SHEET, MOBILE_SHEET_FULL
 // packages/exponential-ui-react/src/primitives/sheet-chrome.tsx
 import * as React4 from "react";
 import { SHEET_CHROME_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var SheetDragContext = React4.createContext(null);
 function SheetDragProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx14(SheetDragContext.Provider, {
+  return /* @__PURE__ */ jsx15(SheetDragContext.Provider, {
     value,
     children
   });
@@ -1018,7 +1076,7 @@ function SheetGrabber({
   ...props
 }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx14("div", {
+  return /* @__PURE__ */ jsx15("div", {
     "data-slot": "sheet-grabber",
     "aria-hidden": true,
     ...drag,
@@ -1131,9 +1189,9 @@ function useSheetDrag({
 }
 // packages/exponential-ui-react/src/primitives/sheet.tsx
-import { jsx as jsx15, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Root, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Root, {
     "data-slot": "sheet",
     ...props
   });
@@ -1141,7 +1199,7 @@ function Sheet({ ...props }) {
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Trigger, {
     "data-slot": "sheet-trigger",
     ...props
   });
@@ -1149,7 +1207,7 @@ function SheetTrigger({
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
     "data-slot": "sheet-close",
     ...props
   });
@@ -1157,7 +1215,7 @@ function SheetClose({
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Portal, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Portal, {
     "data-slot": "sheet-portal",
     ...props
   });
@@ -1166,7 +1224,7 @@ function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Overlay, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Overlay, {
     "data-slot": "sheet-overlay",
     className: cn2(SHEET_CLASSES.overlay, className),
     ...props
@@ -1198,11 +1256,11 @@ function SheetContent({
   }, [ref]);
   return /* @__PURE__ */ jsxs6(SheetPortal, {
     children: [
-      /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
+      /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
         asChild: true,
-        children: /* @__PURE__ */ jsx15(SheetOverlay, {})
+        children: /* @__PURE__ */ jsx16(SheetOverlay, {})
       }),
-      /* @__PURE__ */ jsx15(SheetPrimitive.Content, {
+      /* @__PURE__ */ jsx16(SheetPrimitive.Content, {
         "data-slot": "sheet-content",
         "data-side": side,
         ref: setPanel,
@@ -1219,8 +1277,8 @@ function SheetContent({
           children: [
             showGrabber && /* @__PURE__ */ jsxs6(Fragment2, {
               children: [
-                /* @__PURE__ */ jsx15(SheetGrabber, {}),
-                /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
+                /* @__PURE__ */ jsx16(SheetGrabber, {}),
+                /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
                   ref: dragCloseRef,
                   "aria-hidden": true,
                   tabIndex: -1,
@@ -1232,10 +1290,10 @@ function SheetContent({
             showCloseButton && /* @__PURE__ */ jsxs6(SheetPrimitive.Close, {
               className: SHEET_CLASSES.close,
               children: [
-                /* @__PURE__ */ jsx15(XIcon, {
+                /* @__PURE__ */ jsx16(XIcon, {
                   className: SHEET_CLASSES.closeIcon
                 }),
-                /* @__PURE__ */ jsx15("span", {
+                /* @__PURE__ */ jsx16("span", {
                   className: SHEET_CLASSES.srOnly,
                   children: "Close"
                 })
@@ -1249,7 +1307,7 @@ function SheetContent({
 }
 function SheetHeader({ className, ...props }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-slot": "sheet-header",
     ...drag,
     className: cn2(SHEET_CLASSES.header, className),
@@ -1257,7 +1315,7 @@ function SheetHeader({ className, ...props }) {
   });
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-slot": "sheet-footer",
     className: cn2(SHEET_CLASSES.footer, className),
     ...props
@@ -1267,7 +1325,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Title, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Title, {
     "data-slot": "sheet-title",
     className: cn2(SHEET_CLASSES.title, className),
     ...props
@@ -1277,7 +1335,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx15(SheetPrimitive.Description, {
+  return /* @__PURE__ */ jsx16(SheetPrimitive.Description, {
     "data-slot": "sheet-description",
     className: cn2(SHEET_CLASSES.description, className),
     ...props
@@ -1299,11 +1357,11 @@ function useMediaQuery(query) {
 }
 // packages/exponential-ui-react/src/primitives/dialog.tsx
-import { jsx as jsx16, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Root, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Root, {
     "data-slot": "dialog",
     ...props
   });
@@ -1311,7 +1369,7 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Trigger, {
     "data-slot": "dialog-trigger",
     ...props
   });
@@ -1319,7 +1377,7 @@ function DialogTrigger({
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Portal, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Portal, {
     "data-slot": "dialog-portal",
     ...props
   });
@@ -1327,7 +1385,7 @@ function DialogPortal({
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
     "data-slot": "dialog-close",
     ...props
   });
@@ -1336,7 +1394,7 @@ function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Overlay, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Overlay, {
     "data-slot": "dialog-overlay",
     className: cn2(DIALOG_CLASSES.overlay, className),
     ...props
@@ -1369,7 +1427,7 @@ function DialogContent({
   }, [ref]);
   const isPhone = useMediaQuery(DIALOG_PHONE_QUERY);
   if (isSheet && isPhone) {
-    return /* @__PURE__ */ jsx16(SheetContent, {
+    return /* @__PURE__ */ jsx17(SheetContent, {
       side: "bottom",
       "data-slot": "dialog-content",
       "data-mobile": mobile,
@@ -1377,7 +1435,7 @@ function DialogContent({
       className: cn2(DIALOG_CLASSES.phoneSheet, mobile === `sheet-full` && DIALOG_CLASSES.phoneSheetFull, className),
       onInteractOutside,
       ...props,
-      children: /* @__PURE__ */ jsx16(DialogPresentationContext.Provider, {
+      children: /* @__PURE__ */ jsx17(DialogPresentationContext.Provider, {
         value: mobile,
         children
       })
@@ -1386,8 +1444,8 @@ function DialogContent({
   return /* @__PURE__ */ jsxs7(DialogPortal, {
     "data-slot": "dialog-portal",
     children: [
-      /* @__PURE__ */ jsx16(DialogOverlay, {}),
-      /* @__PURE__ */ jsx16(DialogPrimitive.Content, {
+      /* @__PURE__ */ jsx17(DialogOverlay, {}),
+      /* @__PURE__ */ jsx17(DialogPrimitive.Content, {
         "data-slot": "dialog-content",
         "data-mobile": mobile,
         ref: setPanel,
@@ -1399,17 +1457,17 @@ function DialogContent({
           }
         },
         ...props,
-        children: /* @__PURE__ */ jsx16(DialogPresentationContext.Provider, {
+        children: /* @__PURE__ */ jsx17(DialogPresentationContext.Provider, {
           value: mobile,
           children: /* @__PURE__ */ jsxs7(SheetDragProvider, {
             value: isSheet ? handleProps : null,
             children: [
               isSheet && /* @__PURE__ */ jsxs7(Fragment3, {
                 children: [
-                  /* @__PURE__ */ jsx16(SheetGrabber, {
+                  /* @__PURE__ */ jsx17(SheetGrabber, {
                     className: DIALOG_CLASSES.grabber
                   }),
-                  /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
+                  /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
                     ref: dragCloseRef,
                     "aria-hidden": true,
                     tabIndex: -1,
@@ -1422,8 +1480,8 @@ function DialogContent({
                 "data-slot": "dialog-close",
                 className: cn2(DIALOG_CLASSES.close, mobile !== `page` && DIALOG_CLASSES.closePhoneHidden),
                 children: [
-                  /* @__PURE__ */ jsx16(XIcon2, {}),
-                  /* @__PURE__ */ jsx16("span", {
+                  /* @__PURE__ */ jsx17(XIcon2, {}),
+                  /* @__PURE__ */ jsx17("span", {
                     className: DIALOG_CLASSES.srOnly,
                     children: "Close"
                   })
@@ -1438,7 +1496,7 @@ function DialogContent({
 }
 function DialogHeader({ className, ...props }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx17("div", {
     "data-slot": "dialog-header",
     ...drag,
     className: cn2(DIALOG_CLASSES.header, className),
@@ -1446,14 +1504,14 @@ function DialogHeader({ className, ...props }) {
   });
 }
 function DialogBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx17("div", {
     "data-slot": "dialog-body",
     className: cn2(DIALOG_CLASSES.body, className),
     ...props
   });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx17("div", {
     "data-slot": "dialog-footer",
     className: cn2(DIALOG_CLASSES.footer, className),
     ...props
@@ -1466,9 +1524,9 @@ function DialogCancel({
 }) {
   const mobile = React7.useContext(DialogPresentationContext);
   const keepOnMobile = mobile === `alert` || mobile === `page`;
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
     asChild: true,
-    children: /* @__PURE__ */ jsx16(Button, {
+    children: /* @__PURE__ */ jsx17(Button, {
       type: "button",
       variant: "ghost",
       "data-dialog-cancel": "",
@@ -1482,7 +1540,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Title, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Title, {
     "data-slot": "dialog-title",
     className: cn2(DIALOG_CLASSES.title, className),
     ...props
@@ -1492,7 +1550,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(DialogPrimitive.Description, {
+  return /* @__PURE__ */ jsx17(DialogPrimitive.Description, {
     "data-slot": "dialog-description",
     className: cn2(DIALOG_CLASSES.description, className),
     ...props
@@ -1501,7 +1559,7 @@ function DialogDescription({
 // packages/exponential-ui-react/src/primitives/disclosure-header.tsx
 import { ChevronDown, ChevronRight as ChevronRight2 } from "lucide-react";
 import { DISCLOSURE_HEADER_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChevronRightGlyph = ChevronRight2;
 var ChevronDownGlyph = ChevronDown;
 function DisclosureHeader({
@@ -1513,7 +1571,7 @@ function DisclosureHeader({
   ...props
 }) {
   const Glyph = open ? ChevronDownGlyph : ChevronRightGlyph;
-  const glyph = /* @__PURE__ */ jsx17(Glyph, {
+  const glyph = /* @__PURE__ */ jsx18(Glyph, {
     "data-slot": "disclosure-chevron",
     className: cn2(DISCLOSURE_HEADER_CLASSES.chevron, chevron === `trailing` && DISCLOSURE_HEADER_CLASSES.chevronTrailing)
   });
@@ -1537,7 +1595,7 @@ import * as React8 from "react";
 import { ChevronRight as ChevronRight3 } from "lucide-react";
 import { DOCK_CARD_CLASSES, DOCK_PILE_CLASSES, dockPileGeometry } from "@exponential_app/eui/web/primitives";
 import { DOCK_CARD_CLASSES as DOCK_CARD_CLASSES2, DOCK_PILE_CLASSES as DOCK_PILE_CLASSES2, DOCK_PILE_CONSTANTS, dockPileGeometry as dockPileGeometry2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
 function DockCard({
   tint = `muted`,
   icon: Icon,
@@ -1554,7 +1612,7 @@ function DockCard({
   ...props
 }) {
   const pressable = onOpen !== undefined;
-  return /* @__PURE__ */ jsx18("div", {
+  return /* @__PURE__ */ jsx19("div", {
     "data-slot": "dock-card",
     role: pressable ? `button` : undefined,
     tabIndex: pressable && !hidden ? 0 : undefined,
@@ -1577,7 +1635,7 @@ function DockCard({
       "data-hidden": hidden ? `true` : `false`,
       className: DOCK_CARD_CLASSES.body,
       children: [
-        Icon && /* @__PURE__ */ jsx18(Icon, {
+        Icon && /* @__PURE__ */ jsx19(Icon, {
           "aria-hidden": true,
           "data-slot": "dock-card-icon",
           className: cn2(DOCK_CARD_CLASSES.icon, DOCK_CARD_CLASSES.tint[tint])
@@ -1588,17 +1646,17 @@ function DockCard({
             /* @__PURE__ */ jsxs9("div", {
               className: DOCK_CARD_CLASSES.header,
               children: [
-                /* @__PURE__ */ jsx18("span", {
+                /* @__PURE__ */ jsx19("span", {
                   "data-slot": "dock-card-label",
                   className: cn2(DOCK_CARD_CLASSES.label, DOCK_CARD_CLASSES.tint[tint]),
                   children: label
                 }),
-                caption !== undefined && caption !== null && /* @__PURE__ */ jsx18("span", {
+                caption !== undefined && caption !== null && /* @__PURE__ */ jsx19("span", {
                   "data-slot": "dock-card-caption",
                   className: DOCK_CARD_CLASSES.caption,
                   children: caption
                 }),
-                meta !== undefined && meta !== null && /* @__PURE__ */ jsx18("span", {
+                meta !== undefined && meta !== null && /* @__PURE__ */ jsx19("span", {
                   "data-slot": "dock-card-meta",
                   className: DOCK_CARD_CLASSES.meta,
                   children: meta
@@ -1608,16 +1666,16 @@ function DockCard({
             /* @__PURE__ */ jsxs9("div", {
               className: DOCK_CARD_CLASSES.row,
               children: [
-                /* @__PURE__ */ jsx18("span", {
+                /* @__PURE__ */ jsx19("span", {
                   "data-slot": "dock-card-title",
                   className: DOCK_CARD_CLASSES.title,
                   children: title
                 }),
-                pressable ? /* @__PURE__ */ jsx18(ChevronRight3, {
+                pressable ? /* @__PURE__ */ jsx19(ChevronRight3, {
                   "aria-hidden": true,
                   "data-slot": "dock-card-chevron",
                   className: DOCK_CARD_CLASSES.chevron
-                }) : trailing !== undefined && trailing !== null ? /* @__PURE__ */ jsx18("span", {
+                }) : trailing !== undefined && trailing !== null ? /* @__PURE__ */ jsx19("span", {
                   "data-slot": "dock-card-trailing",
                   className: DOCK_CARD_CLASSES.trailing,
                   children: trailing
@@ -1652,7 +1710,7 @@ function DockPile({ items, expanded, onExpandedChange, className, style, ...prop
     return () => observer.disconnect();
   }, [items]);
   const geometry = dockPileGeometry(items.map((item) => item.height ?? measured[item.id] ?? 0), expanded);
-  return /* @__PURE__ */ jsx18("div", {
+  return /* @__PURE__ */ jsx19("div", {
     "data-slot": "dock-pile",
     "data-expanded": expanded ? `true` : `false`,
     className: cn2(DOCK_PILE_CLASSES.root, className),
@@ -1674,7 +1732,7 @@ function DockPile({ items, expanded, onExpandedChange, className, style, ...prop
     ...props,
     children: items.map((item, i) => {
       const placed = geometry.items[i] ?? { offset: 0, scale: 1, visible: true };
-      return /* @__PURE__ */ jsx18("div", {
+      return /* @__PURE__ */ jsx19("div", {
         ref: (el) => {
           if (el)
             nodes.current.set(item.id, el);
@@ -1695,12 +1753,12 @@ function DockPile({ items, expanded, onExpandedChange, className, style, ...prop
 import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2, CircleIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { DROPDOWN_MENU_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 "use client";
 function DropdownMenu({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Root, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Root, {
     "data-slot": "dropdown-menu",
     ...props
   });
@@ -1708,7 +1766,7 @@ function DropdownMenu({
 function DropdownMenuPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
     "data-slot": "dropdown-menu-portal",
     ...props
   });
@@ -1716,7 +1774,7 @@ function DropdownMenuPortal({
 function DropdownMenuTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Trigger, {
     "data-slot": "dropdown-menu-trigger",
     ...props
   });
@@ -1726,8 +1784,8 @@ function DropdownMenuContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Content, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Content, {
       "data-slot": "dropdown-menu-content",
       sideOffset,
       className: cn2(DROPDOWN_MENU_CLASSES.content, className),
@@ -1738,7 +1796,7 @@ function DropdownMenuContent({
 function DropdownMenuGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Group, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Group, {
     "data-slot": "dropdown-menu-group",
     ...props
   });
@@ -1749,7 +1807,7 @@ function DropdownMenuItem({
   variant = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Item, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Item, {
     "data-slot": "dropdown-menu-item",
     "data-inset": inset,
     "data-variant": variant,
@@ -1769,10 +1827,10 @@ function DropdownMenuCheckboxItem({
     checked,
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", {
+      /* @__PURE__ */ jsx20("span", {
         className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx19(CheckIcon2, {
+        children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx20(CheckIcon2, {
             className: DROPDOWN_MENU_CLASSES.checkIcon
           })
         })
@@ -1784,7 +1842,7 @@ function DropdownMenuCheckboxItem({
 function DropdownMenuRadioGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.RadioGroup, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.RadioGroup, {
     "data-slot": "dropdown-menu-radio-group",
     ...props
   });
@@ -1799,10 +1857,10 @@ function DropdownMenuRadioItem({
     className: cn2(DROPDOWN_MENU_CLASSES.checkItem, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx19("span", {
+      /* @__PURE__ */ jsx20("span", {
         className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx19(CircleIcon, {
+        children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx20(CircleIcon, {
             className: DROPDOWN_MENU_CLASSES.radioIcon
           })
         })
@@ -1816,7 +1874,7 @@ function DropdownMenuLabel({
   inset,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Label, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Label, {
     "data-slot": "dropdown-menu-label",
     "data-inset": inset,
     className: cn2(DROPDOWN_MENU_CLASSES.label, className),
@@ -1827,7 +1885,7 @@ function DropdownMenuSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Separator, {
     "data-slot": "dropdown-menu-separator",
     className: cn2(DROPDOWN_MENU_CLASSES.separator, className),
     ...props
@@ -1837,7 +1895,7 @@ function DropdownMenuShortcut({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19("span", {
+  return /* @__PURE__ */ jsx20("span", {
     "data-slot": "dropdown-menu-shortcut",
     className: cn2(DROPDOWN_MENU_CLASSES.shortcut, className),
     ...props
@@ -1846,7 +1904,7 @@ function DropdownMenuShortcut({
 function DropdownMenuSub({
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Sub, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Sub, {
     "data-slot": "dropdown-menu-sub",
     ...props
   });
@@ -1866,7 +1924,7 @@ function DropdownMenuSubTrigger({
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx19(ChevronRightIcon2, {
+      /* @__PURE__ */ jsx20(ChevronRightIcon2, {
         className: DROPDOWN_MENU_CLASSES.subChevron
       })
     ]
@@ -1876,8 +1934,8 @@ function DropdownMenuSubContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.SubContent, {
+  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.SubContent, {
       "data-slot": "dropdown-menu-sub-content",
       className: cn2(DROPDOWN_MENU_CLASSES.subContent, className),
       ...props
@@ -1890,17 +1948,17 @@ import { EMPTY_STATE_CLASSES } from "@exponential_app/eui/web/primitives";
 // packages/exponential-ui-react/src/primitives/icon-disc.tsx
 import { ICON_DISC_CLASSES } from "@exponential_app/eui/web/primitives";
 import { ICON_DISC_TONES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function IconDisc({
   icon: Icon,
   tone = `primary`,
   strokeWidth,
   className
 }) {
-  return /* @__PURE__ */ jsx20("div", {
+  return /* @__PURE__ */ jsx21("div", {
     "data-slot": "icon-disc",
     className: cn2(ICON_DISC_CLASSES.root, ICON_DISC_CLASSES.tones[tone], className),
-    children: /* @__PURE__ */ jsx20(Icon, {
+    children: /* @__PURE__ */ jsx21(Icon, {
       className: ICON_DISC_CLASSES.icon,
       strokeWidth,
       "aria-hidden": "true",
@@ -1911,7 +1969,7 @@ function IconDisc({
 // packages/exponential-ui-react/src/primitives/empty-state.tsx
 import { EMPTY_STATE_SIZES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon,
   title,
@@ -1927,12 +1985,12 @@ function EmptyState({
       role: "status",
       className: cn2(EMPTY_STATE_CLASSES.list, className),
       children: [
-        Icon && /* @__PURE__ */ jsx21(Icon, {
+        Icon && /* @__PURE__ */ jsx22(Icon, {
           "aria-hidden": "true",
           focusable: "false",
           className: EMPTY_STATE_CLASSES.listIcon
         }),
-        /* @__PURE__ */ jsx21("span", {
+        /* @__PURE__ */ jsx22("span", {
           children: title
         })
       ]
@@ -1944,18 +2002,18 @@ function EmptyState({
     role: "status",
     className: cn2(EMPTY_STATE_CLASSES.page, className),
     children: [
-      Icon && /* @__PURE__ */ jsx21(IconDisc, {
+      Icon && /* @__PURE__ */ jsx22(IconDisc, {
         icon: Icon
       }),
-      /* @__PURE__ */ jsx21("h2", {
+      /* @__PURE__ */ jsx22("h2", {
         className: EMPTY_STATE_CLASSES.pageTitle,
         children: title
       }),
-      description && /* @__PURE__ */ jsx21("p", {
+      description && /* @__PURE__ */ jsx22("p", {
         className: EMPTY_STATE_CLASSES.pageDescription,
         children: description
       }),
-      children && /* @__PURE__ */ jsx21("div", {
+      children && /* @__PURE__ */ jsx22("div", {
         className: EMPTY_STATE_CLASSES.pageActions,
         children
       })
@@ -1967,7 +2025,7 @@ function ListEmpty({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21("p", {
+  return /* @__PURE__ */ jsx22("p", {
     "data-slot": "list-empty",
     role: "status",
     className: cn2(EMPTY_STATE_CLASSES.listEmpty, className),
@@ -1992,13 +2050,13 @@ function EmptyCta({
       /* @__PURE__ */ jsxs11("span", {
         className: EMPTY_STATE_CLASSES.ctaTitle,
         children: [
-          /* @__PURE__ */ jsx21(Icon, {
+          /* @__PURE__ */ jsx22(Icon, {
             className: EMPTY_STATE_CLASSES.ctaIcon
           }),
           title
         ]
       }),
-      /* @__PURE__ */ jsx21("span", {
+      /* @__PURE__ */ jsx22("span", {
         className: EMPTY_STATE_CLASSES.ctaDescription,
         children: description
       })
@@ -2008,9 +2066,9 @@ function EmptyCta({
 // packages/exponential-ui-react/src/primitives/glass-card.tsx
 import { GLASS_CARD_CLASSES } from "@exponential_app/eui/web/primitives";
 import { GLASS_CARD_CLASS, GLASS_CARD_CLASSES as GLASS_CARD_CLASSES2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function GlassCard({ className, ...props }) {
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx23("div", {
     "data-slot": "glass-card",
     className: cn2(GLASS_CARD_CLASSES.root, className),
     ...props
@@ -2019,13 +2077,13 @@ function GlassCard({ className, ...props }) {
 // packages/exponential-ui-react/src/primitives/hover-card.tsx
 import { HoverCard as HoverCardPrimitive } from "radix-ui";
 import { HOVER_CARD_CLASSES, HOVER_CARD_DELAYS } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function HoverCard({
   openDelay = HOVER_CARD_DELAYS.openDelay,
   closeDelay = HOVER_CARD_DELAYS.closeDelay,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(HoverCardPrimitive.Root, {
+  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Root, {
     "data-slot": "hover-card",
     openDelay,
     closeDelay,
@@ -2035,7 +2093,7 @@ function HoverCard({
 function HoverCardTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(HoverCardPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Trigger, {
     "data-slot": "hover-card-trigger",
     ...props
   });
@@ -2046,8 +2104,8 @@ function HoverCardContent({
   sideOffset = 6,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(HoverCardPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx23(HoverCardPrimitive.Content, {
+  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx24(HoverCardPrimitive.Content, {
       "data-slot": "hover-card-content",
       align,
       sideOffset,
@@ -2060,9 +2118,9 @@ function HoverCardContent({
 import * as React9 from "react";
 import { INPUT_CLASSES } from "@exponential_app/eui/web/primitives";
 import { BARE_FIELD_CLASS, FIELD_CHROME_CLASS } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Input = React9.forwardRef(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx24("input", {
+  return /* @__PURE__ */ jsx25("input", {
     ref,
     type,
     "data-slot": "input",
@@ -2073,16 +2131,16 @@ var Input = React9.forwardRef(({ className, type, ...props }, ref) => {
 Input.displayName = `Input`;
 // packages/exponential-ui-react/src/primitives/kbd.tsx
 import { KBD_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx25("kbd", {
+  return /* @__PURE__ */ jsx26("kbd", {
     "data-slot": "kbd",
     className: cn2(KBD_CLASSES.root, className),
     ...props
   });
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx25("span", {
+  return /* @__PURE__ */ jsx26("span", {
     "data-slot": "kbd-group",
     className: cn2(KBD_CLASSES.group, className),
     ...props
@@ -2091,12 +2149,12 @@ function KbdGroup({ className, ...props }) {
 // packages/exponential-ui-react/src/primitives/label.tsx
 import { Label as LabelPrimitive } from "radix-ui";
 import { LABEL_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx26(LabelPrimitive.Root, {
+  return /* @__PURE__ */ jsx27(LabelPrimitive.Root, {
     "data-slot": "label",
     className: cn2(LABEL_CLASSES.root, className),
     ...props
@@ -2110,19 +2168,19 @@ import { METER_CLASSES } from "@exponential_app/eui/web/primitives";
 // packages/exponential-ui-react/src/primitives/progress.tsx
 import { Progress as ProgressPrimitive } from "radix-ui";
 import { PROGRESS_CLASSES, progressIndicatorTransform } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Progress({
   className,
   value,
   ...props
 }) {
   const indeterminate = value === null || value === undefined;
-  return /* @__PURE__ */ jsx27(ProgressPrimitive.Root, {
+  return /* @__PURE__ */ jsx28(ProgressPrimitive.Root, {
     "data-slot": "progress",
     value,
     className: cn2(PROGRESS_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx27(ProgressPrimitive.Indicator, {
+    children: /* @__PURE__ */ jsx28(ProgressPrimitive.Indicator, {
       "data-slot": "progress-indicator",
       className: cn2(PROGRESS_CLASSES.indicator, indeterminate ? PROGRESS_CLASSES.indicatorIndeterminate : PROGRESS_CLASSES.indicatorDeterminate),
       style: indeterminate ? undefined : { transform: progressIndicatorTransform(value) }
@@ -2131,14 +2189,14 @@ function Progress({
 }
 // packages/exponential-ui-react/src/primitives/meter.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function Meter({
   value,
   tone = `normal`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(Progress, {
+  return /* @__PURE__ */ jsx29(Progress, {
     "data-slot": "meter",
     "data-tone": tone,
     value,
@@ -2146,14 +2204,115 @@ function Meter({
     ...props
   });
 }
+// packages/exponential-ui-react/src/primitives/mosaic.tsx
+import { MOSAIC_CLASSES, mosaicTiles } from "@exponential_app/eui/web/primitives";
+import { MOSAIC_GEOMETRY, mosaicTiles as mosaicTiles2 } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx30, jsxs as jsxs12, Fragment as Fragment4 } from "react/jsx-runtime";
+function Mosaic({ pictures, label, onSelect, className, ...props }) {
+  const tiles = mosaicTiles(pictures.length);
+  const tile = (t, lead) => {
+    const picture = pictures[t.index];
+    const alt = picture.alt ?? ``;
+    return /* @__PURE__ */ jsxs12("button", {
+      type: "button",
+      "data-slot": "mosaic-tile",
+      "data-size": t.size,
+      "aria-label": t.more > 0 ? `${alt}, ${t.more} more` : alt || undefined,
+      className: cn2(MOSAIC_CLASSES.tile, lead ? MOSAIC_CLASSES.lead : MOSAIC_CLASSES.fill),
+      onClick: () => onSelect?.(t.index),
+      children: [
+        /* @__PURE__ */ jsx30("img", {
+          src: picture.src,
+          alt: "",
+          "aria-hidden": "true",
+          loading: "lazy",
+          decoding: "async",
+          draggable: false,
+          className: MOSAIC_CLASSES.image
+        }),
+        t.more > 0 ? /* @__PURE__ */ jsx30("span", {
+          "aria-hidden": "true",
+          className: MOSAIC_CLASSES.more,
+          children: `+${t.more}`
+        }) : null
+      ]
+    }, t.index);
+  };
+  return /* @__PURE__ */ jsx30("div", {
+    "data-slot": "mosaic",
+    role: "group",
+    "aria-label": label || undefined,
+    className: cn2(MOSAIC_CLASSES.root, className),
+    ...props,
+    children: tiles.length >= 3 ? /* @__PURE__ */ jsxs12(Fragment4, {
+      children: [
+        tile(tiles[0], true),
+        /* @__PURE__ */ jsx30("div", {
+          "data-slot": "mosaic-side",
+          className: MOSAIC_CLASSES.side,
+          children: tiles.slice(1).map((t) => tile(t, false))
+        })
+      ]
+    }) : tiles.map((t) => tile(t, false))
+  });
+}
+// packages/exponential-ui-react/src/primitives/outline.tsx
+import { OUTLINE_CLASSES, outlineCountText } from "@exponential_app/eui/web/primitives";
+import { OUTLINE_GEOMETRY, outlineCountText as outlineCountText2 } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+function Outline({ items, value, caption, onSelect, className, ...props }) {
+  return /* @__PURE__ */ jsxs13("nav", {
+    "data-slot": "outline",
+    "aria-label": caption || `Outline`,
+    className: cn2(OUTLINE_CLASSES.root, className),
+    ...props,
+    children: [
+      caption ? /* @__PURE__ */ jsx31("div", {
+        "data-slot": "outline-caption",
+        "aria-hidden": "true",
+        className: OUTLINE_CLASSES.caption,
+        children: caption
+      }) : null,
+      items.map((item) => {
+        const active = value != null && item.id === value;
+        const count = outlineCountText(item.count);
+        return /* @__PURE__ */ jsxs13("button", {
+          type: "button",
+          "data-slot": "outline-row",
+          "data-active": active ? `true` : undefined,
+          "aria-current": active ? `location` : undefined,
+          "aria-label": count ? `${item.title}, ${item.count}` : undefined,
+          className: OUTLINE_CLASSES.row,
+          onClick: () => onSelect?.(item.id),
+          children: [
+            active ? /* @__PURE__ */ jsx31("span", {
+              "data-slot": "outline-bar",
+              "aria-hidden": "true",
+              className: OUTLINE_CLASSES.bar
+            }) : null,
+            /* @__PURE__ */ jsx31("span", {
+              className: OUTLINE_CLASSES.title,
+              children: item.title
+            }),
+            count ? /* @__PURE__ */ jsx31("span", {
+              "aria-hidden": "true",
+              className: OUTLINE_CLASSES.count,
+              children: count
+            }) : null
+          ]
+        }, item.id);
+      })
+    ]
+  });
+}
 // packages/exponential-ui-react/src/primitives/popover.tsx
 import { Popover as PopoverPrimitive } from "radix-ui";
 import { POPOVER_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Root, {
+  return /* @__PURE__ */ jsx32(PopoverPrimitive.Root, {
     "data-slot": "popover",
     ...props
   });
@@ -2161,7 +2320,7 @@ function Popover({
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx32(PopoverPrimitive.Trigger, {
     "data-slot": "popover-trigger",
     ...props
   });
@@ -2172,8 +2331,8 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx29(PopoverPrimitive.Content, {
+  return /* @__PURE__ */ jsx32(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx32(PopoverPrimitive.Content, {
       "data-slot": "popover-content",
       align,
       sideOffset,
@@ -2185,7 +2344,7 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Anchor, {
+  return /* @__PURE__ */ jsx32(PopoverPrimitive.Anchor, {
     "data-slot": "popover-anchor",
     ...props
   });
@@ -2193,7 +2352,7 @@ function PopoverAnchor({
 // packages/exponential-ui-react/src/primitives/progress-ring.tsx
 import { PROGRESS_RING_CLASSES, RING_RADIUS as RING_RADIUS3, RING_SIZE as RING_SIZE3, RING_STROKE as RING_STROKE3, progressRingPercent, ringGeometry as ringGeometry3 } from "@exponential_app/eui/web/primitives";
 import { progressRingPercent as progressRingPercent2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
 function ProgressRing({
   done,
   total,
@@ -2204,7 +2363,7 @@ function ProgressRing({
 }) {
   const { circumference, dashOffset } = ringGeometry3(progressRingPercent(done, total));
   const centre = RING_SIZE3 / 2;
-  return /* @__PURE__ */ jsxs12("svg", {
+  return /* @__PURE__ */ jsxs14("svg", {
     viewBox: `0 0 ${RING_SIZE3} ${RING_SIZE3}`,
     width: size,
     height: size,
@@ -2215,7 +2374,7 @@ function ProgressRing({
     className: cn2(PROGRESS_RING_CLASSES.root, colorClass, className),
     style: colorHex ? { color: colorHex } : undefined,
     children: [
-      /* @__PURE__ */ jsx30("circle", {
+      /* @__PURE__ */ jsx33("circle", {
         cx: centre,
         cy: centre,
         r: RING_RADIUS3,
@@ -2224,7 +2383,7 @@ function ProgressRing({
         strokeWidth: RING_STROKE3,
         opacity: 0.2
       }),
-      done > 0 && /* @__PURE__ */ jsx30("circle", {
+      done > 0 && /* @__PURE__ */ jsx33("circle", {
         "data-slot": "progress-ring-arc",
         cx: centre,
         cy: centre,
@@ -2242,30 +2401,30 @@ function ProgressRing({
 // packages/exponential-ui-react/src/primitives/scroll-area.tsx
 import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
 import { SCROLL_AREA_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
 function ScrollArea({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs13(ScrollAreaPrimitive.Root, {
+  return /* @__PURE__ */ jsxs15(ScrollAreaPrimitive.Root, {
     "data-slot": "scroll-area",
     className: cn2(SCROLL_AREA_CLASSES.root, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31(ScrollAreaPrimitive.Viewport, {
+      /* @__PURE__ */ jsx34(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
         className: SCROLL_AREA_CLASSES.viewport,
         children
       }),
-      /* @__PURE__ */ jsx31(ScrollBar, {}),
-      /* @__PURE__ */ jsx31(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx34(ScrollBar, {}),
+      /* @__PURE__ */ jsx34(ScrollAreaPrimitive.Corner, {})
     ]
   });
 }
 function ScrollBar({ className, orientation = `vertical`, ...props }) {
-  return /* @__PURE__ */ jsx31(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+  return /* @__PURE__ */ jsx34(ScrollAreaPrimitive.ScrollAreaScrollbar, {
     "data-slot": "scroll-area-scrollbar",
     orientation,
     className: cn2(SCROLL_AREA_CLASSES.scrollbar, SCROLL_AREA_CLASSES.orientations[orientation], className),
     ...props,
-    children: /* @__PURE__ */ jsx31(ScrollAreaPrimitive.ScrollAreaThumb, {
+    children: /* @__PURE__ */ jsx34(ScrollAreaPrimitive.ScrollAreaThumb, {
       "data-slot": "scroll-area-thumb",
       className: SCROLL_AREA_CLASSES.thumb
     })
@@ -2278,12 +2437,12 @@ import { SEGMENTED_CONTROL_CLASSES } from "@exponential_app/eui/web/primitives";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { TABS_CLASSES } from "@exponential_app/eui/web/primitives";
 import { SEGMENTED_ITEM, SEGMENTED_LIST, SEGMENTED_ROW, SEGMENTED_ROW_COMPACT, SEGMENTED_TAB } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function Tabs({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Root, {
+  return /* @__PURE__ */ jsx35(TabsPrimitive.Root, {
     "data-slot": "tabs",
     className: cn2(TABS_CLASSES.root, className),
     ...props
@@ -2293,7 +2452,7 @@ function TabsList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.List, {
+  return /* @__PURE__ */ jsx35(TabsPrimitive.List, {
     "data-slot": "tabs-list",
     className: cn2(TABS_CLASSES.list, className),
     ...props
@@ -2303,7 +2462,7 @@ function TabsTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx35(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
     className: cn2(TABS_CLASSES.trigger, className),
     ...props
@@ -2313,7 +2472,7 @@ function TabsContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Content, {
+  return /* @__PURE__ */ jsx35(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn2(TABS_CLASSES.content, className),
     ...props
@@ -2321,7 +2480,7 @@ function TabsContent({
 }
 // packages/exponential-ui-react/src/primitives/segmented-control.tsx
-import { jsx as jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -2332,23 +2491,23 @@ function SegmentedControl({
 }) {
   const triggers = options.map((option) => {
     const Glyph = option.icon;
-    return /* @__PURE__ */ jsxs14(TabsTrigger, {
+    return /* @__PURE__ */ jsxs16(TabsTrigger, {
       value: option.value,
       disabled: disabled || option.disabled,
       className: SEGMENTED_CONTROL_CLASSES.trigger,
       children: [
-        Glyph ? /* @__PURE__ */ jsx33(Glyph, {
+        Glyph ? /* @__PURE__ */ jsx36(Glyph, {
           "aria-hidden": true
         }) : null,
         option.label
       ]
     }, option.value);
   });
-  return /* @__PURE__ */ jsx33(Tabs, {
+  return /* @__PURE__ */ jsx36(Tabs, {
     "data-slot": "segmented-control",
     value,
     onValueChange: (next) => onValueChange(next),
-    children: /* @__PURE__ */ jsx33(TabsList, {
+    children: /* @__PURE__ */ jsx36(TabsList, {
       className: cn2(fill && SEGMENTED_CONTROL_CLASSES.fill, className),
       children: triggers
     })
@@ -2358,12 +2517,12 @@ function SegmentedControl({
 import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon } from "lucide-react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { SELECT_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 "use client";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Root, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Root, {
     "data-slot": "select",
     ...props
   });
@@ -2371,7 +2530,7 @@ function Select({
 function SelectGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Group, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Group, {
     "data-slot": "select-group",
     ...props
   });
@@ -2379,7 +2538,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Value, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Value, {
     "data-slot": "select-value",
     ...props
   });
@@ -2390,16 +2549,16 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs17(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
     className: cn2(SELECT_CLASSES.trigger, className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx34(SelectPrimitive.Icon, {
+      /* @__PURE__ */ jsx37(SelectPrimitive.Icon, {
         asChild: true,
-        children: /* @__PURE__ */ jsx34(ChevronDownIcon2, {
+        children: /* @__PURE__ */ jsx37(ChevronDownIcon2, {
           className: SELECT_CLASSES.triggerIcon
         })
       })
@@ -2413,20 +2572,20 @@ function SelectContent({
   align = `center`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Portal, {
-    children: /* @__PURE__ */ jsxs15(SelectPrimitive.Content, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxs17(SelectPrimitive.Content, {
       "data-slot": "select-content",
       className: cn2(SELECT_CLASSES.content, position === `popper` && SELECT_CLASSES.contentPopper, className),
       position,
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx34(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx34(SelectPrimitive.Viewport, {
+        /* @__PURE__ */ jsx37(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx37(SelectPrimitive.Viewport, {
           className: cn2(SELECT_CLASSES.viewport, position === `popper` && SELECT_CLASSES.viewportPopper),
           children
         }),
-        /* @__PURE__ */ jsx34(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx37(SelectScrollDownButton, {})
       ]
     })
   });
@@ -2435,7 +2594,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Label, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Label, {
     "data-slot": "select-label",
     className: cn2(SELECT_CLASSES.label, className),
     ...props
@@ -2446,21 +2605,21 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(SelectPrimitive.Item, {
+  return /* @__PURE__ */ jsxs17(SelectPrimitive.Item, {
     "data-slot": "select-item",
     className: cn2(SELECT_CLASSES.item, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx34("span", {
+      /* @__PURE__ */ jsx37("span", {
         "data-slot": "select-item-indicator",
         className: SELECT_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx34(SelectPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx34(CheckIcon3, {
+        children: /* @__PURE__ */ jsx37(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx37(CheckIcon3, {
             className: SELECT_CLASSES.itemCheck
           })
         })
       }),
-      /* @__PURE__ */ jsx34(SelectPrimitive.ItemText, {
+      /* @__PURE__ */ jsx37(SelectPrimitive.ItemText, {
         children
       })
     ]
@@ -2470,7 +2629,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.Separator, {
     "data-slot": "select-separator",
     className: cn2(SELECT_CLASSES.separator, className),
     ...props
@@ -2480,11 +2639,11 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.ScrollUpButton, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.ScrollUpButton, {
     "data-slot": "select-scroll-up-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx34(ChevronUpIcon, {
+    children: /* @__PURE__ */ jsx37(ChevronUpIcon, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2493,11 +2652,11 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.ScrollDownButton, {
+  return /* @__PURE__ */ jsx37(SelectPrimitive.ScrollDownButton, {
     "data-slot": "select-scroll-down-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx34(ChevronDownIcon2, {
+    children: /* @__PURE__ */ jsx37(ChevronDownIcon2, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2505,7 +2664,7 @@ function SelectScrollDownButton({
 // packages/exponential-ui-react/src/primitives/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import { SEPARATOR_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 "use client";
 function Separator({
   className,
@@ -2513,7 +2672,7 @@ function Separator({
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(SeparatorPrimitive.Root, {
+  return /* @__PURE__ */ jsx38(SeparatorPrimitive.Root, {
     "data-slot": "separator",
     decorative,
     orientation,
@@ -2523,9 +2682,9 @@ function Separator({
 }
 // packages/exponential-ui-react/src/primitives/skeleton.tsx
 import { SKELETON_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx36("div", {
+  return /* @__PURE__ */ jsx39("div", {
     "data-slot": "skeleton",
     className: cn2(SKELETON_CLASSES.root, className),
     ...props
@@ -2534,14 +2693,14 @@ function Skeleton({ className, ...props }) {
 // packages/exponential-ui-react/src/primitives/spinner.tsx
 import { LoaderCircle } from "lucide-react";
 import { SPINNER_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Spinner({
   size = 10,
   label = `Loading`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(LoaderCircle, {
+  return /* @__PURE__ */ jsx40(LoaderCircle, {
     "data-slot": "spinner",
     "data-testid": "feedback-spinner",
     "aria-label": label,
@@ -2555,18 +2714,18 @@ function Spinner({
 // packages/exponential-ui-react/src/primitives/switch.tsx
 import { Switch as SwitchPrimitive } from "radix-ui";
 import { SWITCH_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Switch({
   className,
   size = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(SwitchPrimitive.Root, {
+  return /* @__PURE__ */ jsx41(SwitchPrimitive.Root, {
     "data-slot": "switch",
     "data-size": size,
     className: cn2(SWITCH_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx38(SwitchPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx41(SwitchPrimitive.Thumb, {
       "data-slot": "switch-thumb",
       className: cn2(SWITCH_CLASSES.thumb)
     })
@@ -2574,12 +2733,12 @@ function Switch({
 }
 // packages/exponential-ui-react/src/primitives/table.tsx
 import { TABLE_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx42("div", {
     "data-slot": "table-container",
     className: TABLE_CLASSES.container,
-    children: /* @__PURE__ */ jsx39("table", {
+    children: /* @__PURE__ */ jsx42("table", {
       "data-slot": "table",
       className: cn2(TABLE_CLASSES.root, className),
       ...props
@@ -2587,49 +2746,49 @@ function Table({ className, ...props }) {
   });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("thead", {
+  return /* @__PURE__ */ jsx42("thead", {
     "data-slot": "table-header",
     className: cn2(TABLE_CLASSES.header, className),
     ...props
   });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tbody", {
+  return /* @__PURE__ */ jsx42("tbody", {
     "data-slot": "table-body",
     className: cn2(TABLE_CLASSES.body, className),
     ...props
   });
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tfoot", {
+  return /* @__PURE__ */ jsx42("tfoot", {
     "data-slot": "table-footer",
     className: cn2(TABLE_CLASSES.footer, className),
     ...props
   });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tr", {
+  return /* @__PURE__ */ jsx42("tr", {
     "data-slot": "table-row",
     className: cn2(TABLE_CLASSES.row, className),
     ...props
   });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("th", {
+  return /* @__PURE__ */ jsx42("th", {
     "data-slot": "table-head",
     className: cn2(TABLE_CLASSES.head, className),
     ...props
   });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("td", {
+  return /* @__PURE__ */ jsx42("td", {
     "data-slot": "table-cell",
     className: cn2(TABLE_CLASSES.cell, className),
     ...props
   });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("caption", {
+  return /* @__PURE__ */ jsx42("caption", {
     "data-slot": "table-caption",
     className: cn2(TABLE_CLASSES.caption, className),
     ...props
@@ -2637,9 +2796,9 @@ function TableCaption({ className, ...props }) {
 }
 // packages/exponential-ui-react/src/primitives/textarea.tsx
 import { TEXTAREA_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("textarea", {
+  return /* @__PURE__ */ jsx43("textarea", {
     "data-slot": "textarea",
     className: cn2(TEXTAREA_CLASSES.root, className),
     ...props
@@ -2657,7 +2816,7 @@ import {
   toastStackGeometry
 } from "@exponential_app/eui/web/primitives";
 import { createToastStore as createToastStore2, toastStackGeometry as toastStackGeometry2, toastPlacement as toastPlacement2, TOAST_CONSTANTS, TOAST_KINDS, TOAST_TOUCH_QUERY as TOAST_TOUCH_QUERY2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
 var KIND_ICONS = {
   success: CircleCheck,
   error: CircleX,
@@ -2693,13 +2852,13 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
     setMeasured((prev) => Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([k, v]) => prev[k] === v) ? prev : next);
   }, [toasts]);
   const geometry = toastStackGeometry(toasts.map((t) => t.height ?? measured[t.id] ?? 0), open, anchoredBottom);
-  return /* @__PURE__ */ jsx41("section", {
+  return /* @__PURE__ */ jsx44("section", {
     "aria-label": "Notifications",
     "data-slot": "toaster",
     "data-placement": placement,
     className: cn2(TOAST_CLASSES.region, TOAST_CLASSES.regionPlacement[placement], className),
     ...props,
-    children: /* @__PURE__ */ jsx41("ol", {
+    children: /* @__PURE__ */ jsx44("ol", {
       "data-slot": "toast-list",
       "data-expanded": open ? `true` : `false`,
       className: cn2(TOAST_CLASSES.list, TOAST_CLASSES.listPlacement[placement]),
@@ -2720,7 +2879,7 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
         const item = geometry.items[i];
         const rank = toasts.length - 1 - i;
         const Icon = t.kind ? KIND_ICONS[t.kind] : null;
-        return /* @__PURE__ */ jsxs16("li", {
+        return /* @__PURE__ */ jsxs18("li", {
           ref: (el) => {
             if (el)
               items.current.set(t.id, el);
@@ -2739,29 +2898,29 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
           className: cn2(TOAST_CLASSES.toast, TOAST_CLASSES.toastOrigin[anchoredBottom ? `bottom` : `top`]),
           style: { "--offset": `${item.offset}px`, "--scale": `${item.scale}`, zIndex: i + 1 },
           children: [
-            Icon && /* @__PURE__ */ jsx41("div", {
+            Icon && /* @__PURE__ */ jsx44("div", {
               className: TOAST_CLASSES.iconSlot,
-              children: /* @__PURE__ */ jsx41(Icon, {
+              children: /* @__PURE__ */ jsx44(Icon, {
                 "data-toast-kind": t.kind,
                 className: cn2(TOAST_CLASSES.icon, TOAST_CLASSES.kindIcon[t.kind])
               })
             }),
-            /* @__PURE__ */ jsxs16("div", {
+            /* @__PURE__ */ jsxs18("div", {
               className: TOAST_CLASSES.content,
               children: [
-                /* @__PURE__ */ jsx41("div", {
+                /* @__PURE__ */ jsx44("div", {
                   "data-slot": "toast-title",
                   className: TOAST_CLASSES.title,
                   children: t.title
                 }),
-                t.description !== undefined && /* @__PURE__ */ jsx41("div", {
+                t.description !== undefined && /* @__PURE__ */ jsx44("div", {
                   "data-slot": "toast-description",
                   className: TOAST_CLASSES.description,
                   children: t.description
                 })
               ]
             }),
-            t.action && /* @__PURE__ */ jsx41("button", {
+            t.action && /* @__PURE__ */ jsx44("button", {
               type: "button",
               "data-slot": "toast-action",
               className: TOAST_CLASSES.action,
@@ -2771,13 +2930,13 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
               },
               children: t.action.label
             }),
-            /* @__PURE__ */ jsx41("button", {
+            /* @__PURE__ */ jsx44("button", {
               type: "button",
               "data-slot": "toast-close",
               "aria-label": closeLabel,
               className: TOAST_CLASSES.close,
               onClick: () => store.dismiss(t.id),
-              children: /* @__PURE__ */ jsx41(XIcon3, {})
+              children: /* @__PURE__ */ jsx44(XIcon3, {})
             })
           ]
         }, t.id);
@@ -2788,12 +2947,12 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
 // packages/exponential-ui-react/src/primitives/tooltip.tsx
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { TOOLTIP_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delayDuration,
     ...props
@@ -2802,7 +2961,7 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Root, {
     "data-slot": "tooltip",
     ...props
   });
@@ -2810,7 +2969,7 @@ function Tooltip({
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -2821,8 +2980,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx42(TooltipPrimitive.Content, {
+  return /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx45(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn2(TOOLTIP_CLASSES.content, className),
@@ -2854,7 +3013,7 @@ function useIsMobile() {
   return isMobile;
 }
 // packages/exponential-ui-react/src/primitives/voice-wave.tsx
-import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect4, useRef as useRef8 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect5, useRef as useRef9 } from "react";
 import { voiceWave, voiceWaveChildBox, voiceWavePath } from "@exponential_app/eui";
 import {
   VOICE_WAVE_CLASSES,
@@ -2865,16 +3024,16 @@ import {
   voiceWaveName,
   voiceWaveQuiet
 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
 var hasChild = (c) => c !== undefined && c !== null && c !== false && !(Array.isArray(c) && c.length === 0);
 function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, className, children }) {
   const px = VOICE_WAVE_SIZE_PX[size] ?? VOICE_WAVE_SIZE_PX.md;
   const reducedMotion = useMediaQuery(`(prefers-reduced-motion: reduce)`);
   const input = { size: px, activity, level, bands, reducedMotion };
-  const latest = useRef8(input);
+  const latest = useRef9(input);
   latest.current = input;
-  const elapsed = useRef8(0);
-  const paths = useRef8([]);
+  const elapsed = useRef9(0);
+  const paths = useRef9([]);
   const animates = voiceWaveAnimates(activity) && !reducedMotion;
   useEffect6(() => {
     if (!animates) {
@@ -2886,13 +3045,13 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
       voiceWave({ ...latest.current, elapsed: t }).rings.forEach((ring, k) => paths.current[k]?.setAttribute(`d`, voiceWavePath(ring)));
     });
   }, [animates]);
-  const childEl = useRef8(null);
+  const childEl = useRef9(null);
   const present = hasChild(children);
-  useLayoutEffect4(() => present && childEl.current ? voiceWaveFitChild(childEl.current, (c) => voiceWaveChildBox(px, c).scale) : undefined, [present, px]);
+  useLayoutEffect5(() => present && childEl.current ? voiceWaveFitChild(childEl.current, (c) => voiceWaveChildBox(px, c).scale) : undefined, [present, px]);
   const wave = voiceWave({ ...input, elapsed: elapsed.current });
   const quiet = voiceWaveQuiet(activity);
   const name = voiceWaveName(label, activity);
-  return /* @__PURE__ */ jsxs17("span", {
+  return /* @__PURE__ */ jsxs19("span", {
     "data-slot": "voice-wave",
     "data-activity": activity,
     "data-size": size,
@@ -2901,13 +3060,13 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
     "aria-hidden": name ? undefined : true,
     className: cn2(VOICE_WAVE_CLASSES.root, VOICE_WAVE_CLASSES.size[size], quiet && VOICE_WAVE_CLASSES.quiet, className),
     children: [
-      /* @__PURE__ */ jsx43("svg", {
+      /* @__PURE__ */ jsx46("svg", {
         viewBox: `0 0 ${px} ${px}`,
         width: px,
         height: px,
         "aria-hidden": true,
         className: VOICE_WAVE_CLASSES.svg,
-        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx43("path", {
+        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx46("path", {
           ref: (el) => {
             paths.current[k] = el;
           },
@@ -2923,7 +3082,7 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
           strokeLinejoin: "round"
         }, ring.part))
       }),
-      present ? /* @__PURE__ */ jsx43("span", {
+      present ? /* @__PURE__ */ jsx46("span", {
         ref: childEl,
         "data-slot": "voice-wave-child",
         "aria-hidden": wave.childSize > 0 ? undefined : true,
@@ -2962,6 +3121,7 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  CAROUSEL_GEOMETRY,
   CODE_TOKEN_CLASS,
   Calendar,
   CalendarDayButton,
@@ -2972,6 +3132,8 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CarouselCounter,
+  CarouselThumbnails,
   Checkbox,
   ChoiceTiles2 as ChoiceTiles,
   ChoiceTilesFrame2 as ChoiceTilesFrame,
@@ -3061,7 +3223,11 @@ export {
   MOBILE_PAGE,
   MOBILE_SHEET,
   MOBILE_SHEET_FULL,
+  MOSAIC_GEOMETRY,
   Meter,
+  Mosaic,
+  OUTLINE_GEOMETRY,
+  Outline,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -3129,6 +3295,7 @@ export {
   alertVariants,
   avatarHueIndex,
   buttonVariants,
+  carouselCounterText2 as carouselCounterText,
   choiceColumns2 as choiceColumns,
   choiceToggle2 as choiceToggle,
   choiceValues2 as choiceValues,
@@ -3137,6 +3304,8 @@ export {
   dockPileGeometry2 as dockPileGeometry,
   getInitials2 as getInitials,
   middleTruncate,
+  mosaicTiles2 as mosaicTiles,
+  outlineCountText2 as outlineCountText,
   progressRingPercent2 as progressRingPercent,
   ringGeometry2 as ringGeometry,
   shouldDismissSheet,
@@ -3150,5 +3319,5 @@ export {
   useSheetDragHandleProps
 };
-//# debugId=F72B037A10E5B0A264756E2164756E21
+//# debugId=5F4612A1F030A63764756E2164756E21
 //# sourceMappingURL=index.js.map