@exponential_app/eui-react 0.3.0 → 0.4.0

package/dist/primitives/index.js

@@ -5,8 +5,30 @@ import {
   ChoiceTiles2,
   choiceColumns2,
   choiceToggle2,
-  choiceValues2
-} from "../chunks/index-5yzzfez5.js";
+  choiceValues2,
+  buttonVariants2,
+  Button2,
+  DropdownMenu2,
+  DropdownMenuPortal2,
+  DropdownMenuTrigger2,
+  DropdownMenuContent2,
+  DropdownMenuGroup2,
+  DropdownMenuItem2,
+  DropdownMenuCheckboxItem2,
+  DropdownMenuRadioGroup2,
+  DropdownMenuRadioItem2,
+  DropdownMenuLabel2,
+  DropdownMenuSeparator2,
+  DropdownMenuShortcut2,
+  DropdownMenuSub2,
+  DropdownMenuSubTrigger2,
+  DropdownMenuSubContent2,
+  useMediaQuery2,
+  ZOOM_MATH2,
+  useZoomableImage2,
+  ZOOMABLE_IMAGE_STRINGS2,
+  ZoomableImage2
+} from "../chunks/index-eny7hh6w.js";
 
 // packages/exponential-ui-react/src/primitives/alert.tsx
 import { ALERT_CLASSES, alertVariants } from "@exponential_app/eui/web/primitives";
@@ -253,26 +275,6 @@ function BreadcrumbEllipsis({ className, ...props }) {
     ]
   });
 }
-// packages/exponential-ui-react/src/primitives/button.tsx
-import { Slot as Slot2 } from "radix-ui";
-import { buttonVariants } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Button({
-  className,
-  variant = `default`,
-  size = `default`,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot2.Root : `button`;
-  return /* @__PURE__ */ jsx6(Comp, {
-    "data-slot": "button",
-    "data-variant": variant,
-    "data-size": size,
-    className: cn2(buttonVariants({ variant, size, className })),
-    ...props
-  });
-}
 // packages/exponential-ui-react/src/primitives/calendar.tsx
 import * as React from "react";
 import {
@@ -284,8 +286,8 @@ import {
   DayPicker,
   getDefaultClassNames
 } from "react-day-picker";
-import { CALENDAR_CLASSES, buttonVariants as buttonVariants2 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { CALENDAR_CLASSES, buttonVariants } from "@exponential_app/eui/web/primitives";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Calendar({
   className,
   classNames,
@@ -298,7 +300,7 @@ function Calendar({
 }) {
   const defaultClassNames = getDefaultClassNames();
   const parts = CALENDAR_CLASSES.classNames;
-  return /* @__PURE__ */ jsx7(DayPicker, {
+  return /* @__PURE__ */ jsx6(DayPicker, {
     showOutsideDays,
     className: cn2(CALENDAR_CLASSES.root, className),
     captionLayout,
@@ -311,8 +313,8 @@ function Calendar({
       months: cn2(parts.months, defaultClassNames.months),
       month: cn2(parts.month, defaultClassNames.month),
       nav: cn2(parts.nav, defaultClassNames.nav),
-      button_previous: cn2(buttonVariants2({ variant: buttonVariant }), parts.button_previous, defaultClassNames.button_previous),
-      button_next: cn2(buttonVariants2({ variant: buttonVariant }), parts.button_next, defaultClassNames.button_next),
+      button_previous: cn2(buttonVariants({ variant: buttonVariant }), parts.button_previous, defaultClassNames.button_previous),
+      button_next: cn2(buttonVariants({ variant: buttonVariant }), parts.button_next, defaultClassNames.button_next),
       month_caption: cn2(parts.month_caption, defaultClassNames.month_caption),
       dropdowns: cn2(parts.dropdowns, defaultClassNames.dropdowns),
       dropdown_root: cn2(parts.dropdown_root, defaultClassNames.dropdown_root),
@@ -336,7 +338,7 @@ function Calendar({
     },
     components: {
       Root: ({ className, rootRef, ...props }) => {
-        return /* @__PURE__ */ jsx7("div", {
+        return /* @__PURE__ */ jsx6("div", {
           "data-slot": "calendar",
           ref: rootRef,
           className: cn2(className),
@@ -345,27 +347,27 @@ function Calendar({
       },
       Chevron: ({ className, orientation, ...props }) => {
         if (orientation === `left`) {
-          return /* @__PURE__ */ jsx7(ChevronLeftIcon, {
+          return /* @__PURE__ */ jsx6(ChevronLeftIcon, {
             className: cn2(CALENDAR_CLASSES.chevron, className),
             ...props
           });
         }
         if (orientation === `right`) {
-          return /* @__PURE__ */ jsx7(ChevronRightIcon, {
+          return /* @__PURE__ */ jsx6(ChevronRightIcon, {
             className: cn2(CALENDAR_CLASSES.chevron, className),
             ...props
           });
         }
-        return /* @__PURE__ */ jsx7(ChevronDownIcon, {
+        return /* @__PURE__ */ jsx6(ChevronDownIcon, {
           className: cn2(CALENDAR_CLASSES.chevron, className),
           ...props
         });
       },
       DayButton: CalendarDayButton,
       WeekNumber: ({ children, ...props }) => {
-        return /* @__PURE__ */ jsx7("td", {
+        return /* @__PURE__ */ jsx6("td", {
           ...props,
-          children: /* @__PURE__ */ jsx7("div", {
+          children: /* @__PURE__ */ jsx6("div", {
             className: CALENDAR_CLASSES.weekNumber,
             children
           })
@@ -388,7 +390,7 @@ function CalendarDayButton({
     if (modifiers.focused)
       ref.current?.focus();
   }, [modifiers.focused]);
-  return /* @__PURE__ */ jsx7(Button, {
+  return /* @__PURE__ */ jsx6(Button2, {
     ref,
     variant: "ghost",
     size: "icon",
@@ -403,51 +405,51 @@ function CalendarDayButton({
 }
 // packages/exponential-ui-react/src/primitives/card.tsx
 import { CARD_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card",
     className: cn2(CARD_CLASSES.root, className),
     ...props
   });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-header",
     className: cn2(CARD_CLASSES.header, className),
     ...props
   });
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-title",
     className: cn2(CARD_CLASSES.title, className),
     ...props
   });
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-description",
     className: cn2(CARD_CLASSES.description, className),
     ...props
   });
 }
 function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-action",
     className: cn2(CARD_CLASSES.action, className),
     ...props
   });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-content",
     className: cn2(CARD_CLASSES.content, className),
     ...props
   });
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx8("div", {
+  return /* @__PURE__ */ jsx7("div", {
     "data-slot": "card-footer",
     className: cn2(CARD_CLASSES.footer, className),
     ...props
@@ -457,9 +459,9 @@ function CardFooter({ className, ...props }) {
 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";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function CarouselCounter({ page, total, className, ...props }) {
-  return /* @__PURE__ */ jsx9("span", {
+  return /* @__PURE__ */ jsx8("span", {
     "data-slot": "carousel-counter",
     "aria-hidden": "true",
     className: cn2(CAROUSEL_CLASSES.counter, className),
@@ -482,7 +484,7 @@ function CarouselThumbnails({ count, urls, page, onPageChange, pageLabel = defau
       el.scrollLeft += delta;
   }, [page, count]);
   const n = Math.max(0, Math.floor(count));
-  return /* @__PURE__ */ jsx9("div", {
+  return /* @__PURE__ */ jsx8("div", {
     ref: strip,
     "data-slot": "carousel-thumbnails",
     className: cn2(CAROUSEL_CLASSES.thumbnails, className),
@@ -490,7 +492,7 @@ function CarouselThumbnails({ count, urls, page, onPageChange, pageLabel = defau
     children: Array.from({ length: n }, (_, i) => {
       const current = i === page;
       const src = urls[i];
-      return /* @__PURE__ */ jsx9("button", {
+      return /* @__PURE__ */ jsx8("button", {
         type: "button",
         "data-slot": "carousel-thumbnail",
         "data-current": current ? `true` : undefined,
@@ -498,7 +500,7 @@ function CarouselThumbnails({ count, urls, page, onPageChange, pageLabel = defau
         "aria-label": pageLabel(i, n),
         className: CAROUSEL_CLASSES.thumbnail,
         onClick: () => onPageChange?.(i),
-        children: src ? /* @__PURE__ */ jsx9("img", {
+        children: src ? /* @__PURE__ */ jsx8("img", {
           src,
           alt: "",
           "aria-hidden": "true",
@@ -515,19 +517,19 @@ function CarouselThumbnails({ count, urls, page, onPageChange, pageLabel = defau
 import { CheckIcon } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import { CHECKBOX_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx10(CheckboxPrimitive.Root, {
+  return /* @__PURE__ */ jsx9(CheckboxPrimitive.Root, {
     "data-slot": "checkbox",
     className: cn2(CHECKBOX_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx10(CheckboxPrimitive.Indicator, {
+    children: /* @__PURE__ */ jsx9(CheckboxPrimitive.Indicator, {
       "data-slot": "checkbox-indicator",
       className: CHECKBOX_CLASSES.indicator,
-      children: /* @__PURE__ */ jsx10(CheckIcon, {
+      children: /* @__PURE__ */ jsx9(CheckIcon, {
         className: CHECKBOX_CLASSES.icon
       })
     })
@@ -538,14 +540,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 jsx11, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 function CodeBlock({
   className,
   variant = `default`,
   size = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx10("div", {
     "data-slot": "code-block",
     "data-variant": variant,
     "data-size": size,
@@ -554,14 +556,14 @@ function CodeBlock({
   });
 }
 function CodeBlockHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx10("div", {
     "data-slot": "code-block-header",
     className: cn2(CODE_BLOCK_CLASSES.header, className),
     ...props
   });
 }
 function CodeBlockTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx10("div", {
     "data-slot": "code-block-title",
     className: cn2(CODE_BLOCK_CLASSES.title, className),
     ...props
@@ -571,7 +573,7 @@ function CodeBlockActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx10("div", {
     "data-slot": "code-block-actions",
     className: cn2(CODE_BLOCK_CLASSES.actions, className),
     ...props
@@ -595,7 +597,7 @@ function CodeBlockCopyButton({
   }, [copied]);
   return /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx11(Button, {
+      /* @__PURE__ */ jsx10(Button2, {
         "data-slot": "code-block-copy-button",
         "data-copied": copied || undefined,
         variant,
@@ -610,9 +612,9 @@ function CodeBlockCopyButton({
           clipboard.writeText(value).then(() => setCopied(true)).catch(() => {});
         },
         ...props,
-        children: copied ? /* @__PURE__ */ jsx11(Check, {}) : /* @__PURE__ */ jsx11(Copy, {})
+        children: copied ? /* @__PURE__ */ jsx10(Check, {}) : /* @__PURE__ */ jsx10(Copy, {})
       }),
-      /* @__PURE__ */ jsx11("span", {
+      /* @__PURE__ */ jsx10("span", {
         "aria-live": "polite",
         className: CODE_BLOCK_CLASSES.srOnly,
         children: copied ? labels.copied : ``
@@ -633,7 +635,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__ */ jsx11("pre", {
+  return /* @__PURE__ */ jsx10("pre", {
     "data-slot": "code-block-content",
     "data-wrap": wrap || undefined,
     "data-numbered": lineNumbers || undefined,
@@ -647,17 +649,17 @@ function CodeBlockContent({
     },
     className: cn2(CODE_BLOCK_CLASSES.content, className),
     ...props,
-    children: /* @__PURE__ */ jsx11("code", {
+    children: /* @__PURE__ */ jsx10("code", {
       "data-slot": "code-block-code",
       className: CODE_BLOCK_CLASSES.code,
-      children: lines !== null ? lines.map((tokens, index) => /* @__PURE__ */ jsx11(CodeBlockLine, {
-        children: tokens.length === 0 ? null : tokens.map((token, j) => /* @__PURE__ */ jsx11("span", {
+      children: lines !== null ? lines.map((tokens, index) => /* @__PURE__ */ jsx10(CodeBlockLine, {
+        children: tokens.length === 0 ? null : tokens.map((token, j) => /* @__PURE__ */ jsx10("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__ */ jsx11(CodeBlockLine, {
+`).map((line, index) => /* @__PURE__ */ jsx10(CodeBlockLine, {
         children: line
       }, index)) : children
     })
@@ -670,12 +672,12 @@ function CodeBlockLine({
   ...props
 }) {
   const empty = children === undefined || children === null || children === `` || Array.isArray(children) && children.length === 0;
-  return /* @__PURE__ */ jsx11("span", {
+  return /* @__PURE__ */ jsx10("span", {
     "data-slot": "code-block-line",
     "data-variant": variant,
     className: cn2(codeBlockLineVariants({ variant }), className),
     ...props,
-    children: /* @__PURE__ */ jsx11("span", {
+    children: /* @__PURE__ */ jsx10("span", {
       "data-slot": "code-block-line-content",
       className: CODE_BLOCK_CLASSES.lineContent,
       children: empty ? `
@@ -684,7 +686,7 @@ function CodeBlockLine({
   });
 }
 function CodeBlockFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", {
+  return /* @__PURE__ */ jsx10("div", {
     "data-slot": "code-block-footer",
     className: cn2(CODE_BLOCK_CLASSES.footer, className),
     ...props
@@ -692,11 +694,11 @@ function CodeBlockFooter({ className, ...props }) {
 }
 // packages/exponential-ui-react/src/primitives/collapsible.tsx
 import { Collapsible as CollapsiblePrimitive } from "radix-ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Collapsible({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Root, {
+  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Root, {
     "data-slot": "collapsible",
     ...props
   });
@@ -704,7 +706,7 @@ function Collapsible({
 function CollapsibleTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Trigger, {
+  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Trigger, {
     "data-slot": "collapsible-trigger",
     ...props
   });
@@ -712,7 +714,7 @@ function CollapsibleTrigger({
 function CollapsibleContent({
   ...props
 }) {
-  return /* @__PURE__ */ jsx12(CollapsiblePrimitive.Content, {
+  return /* @__PURE__ */ jsx11(CollapsiblePrimitive.Content, {
     "data-slot": "collapsible-content",
     ...props
   });
@@ -721,7 +723,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 jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 "use client";
 var CommandContext = React3.createContext(null);
 var GroupContext = React3.createContext(null);
@@ -763,14 +765,14 @@ function Command({ className, value, defaultValue, onValueChange, filter, should
       store.onKeyDown(e.nativeEvent);
     },
     children: [
-      /* @__PURE__ */ jsx13("label", {
+      /* @__PURE__ */ jsx12("label", {
         "data-slot": "command-label",
         htmlFor: inputId,
         id: labelId,
         style: COMMAND_LABEL_STYLE,
         children: label
       }),
-      /* @__PURE__ */ jsx13(CommandContext.Provider, {
+      /* @__PURE__ */ jsx12(CommandContext.Provider, {
         value: ctx,
         children
       })
@@ -797,10 +799,10 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
     "data-slot": "command-input-wrapper",
     className: COMMAND_CLASSES.inputWrapper,
     children: [
-      /* @__PURE__ */ jsx13(SearchIcon, {
+      /* @__PURE__ */ jsx12(SearchIcon, {
         className: COMMAND_CLASSES.inputGlyph
       }),
-      /* @__PURE__ */ jsx13("input", {
+      /* @__PURE__ */ jsx12("input", {
         ref: (node) => {
           input.current = node;
           if (typeof ref === `function`)
@@ -825,7 +827,7 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
         value: shown,
         onChange: (e) => change(e.target.value)
       }),
-      shown !== `` ? /* @__PURE__ */ jsx13("button", {
+      shown !== `` ? /* @__PURE__ */ jsx12("button", {
         type: "button",
         "data-slot": "command-input-clear",
         "aria-label": clearLabel ?? `Clear search`,
@@ -834,7 +836,7 @@ function CommandInput({ className, value, defaultValue, onValueChange, clearLabe
           change(``);
           input.current?.focus();
         },
-        children: /* @__PURE__ */ jsx13(CircleXIcon, {})
+        children: /* @__PURE__ */ jsx12(CircleXIcon, {})
       }) : null
     ]
   });
@@ -848,7 +850,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
     if (list.current && sizer.current)
       return observeCommandListHeight(list.current, sizer.current);
   }, []);
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ref: list,
     "data-slot": "command-list",
     className: cn2(COMMAND_CLASSES.list, className),
@@ -858,7 +860,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
     "aria-activedescendant": store.selectedId,
     "aria-label": ariaLabel ?? `Suggestions`,
     id: listId,
-    children: /* @__PURE__ */ jsx13("div", {
+    children: /* @__PURE__ */ jsx12("div", {
       ref: (node) => {
         sizer.current = node;
         store.setSizer(node);
@@ -871,7 +873,7 @@ function CommandList({ className, children, "aria-label": ariaLabel, ...props })
 function CommandEmpty({ className, ...props }) {
   const { store } = useRoot();
   useStore(store);
-  return store.empty() ? /* @__PURE__ */ jsx13("div", {
+  return store.empty() ? /* @__PURE__ */ jsx12("div", {
     "data-slot": "command-empty",
     className: cn2(COMMAND_CLASSES.empty, className),
     ...props,
@@ -899,18 +901,18 @@ function CommandGroup({ className, heading, value, forceMount, children, ...prop
     "data-value": groupValue,
     hidden: visible ? undefined : true,
     children: [
-      heading ? /* @__PURE__ */ jsx13("div", {
+      heading ? /* @__PURE__ */ jsx12("div", {
         "data-slot": "command-group-heading",
         className: COMMAND_CLASSES.groupHeading,
         "aria-hidden": true,
         id: headingId,
         children: heading
       }) : null,
-      /* @__PURE__ */ jsx13("div", {
+      /* @__PURE__ */ jsx12("div", {
         "data-slot": "command-group-items",
         role: "group",
         "aria-labelledby": heading ? headingId : undefined,
-        children: /* @__PURE__ */ jsx13(GroupContext.Provider, {
+        children: /* @__PURE__ */ jsx12(GroupContext.Provider, {
           value: ctx,
           children
         })
@@ -952,7 +954,7 @@ function CommandItem({ className, value, keywords, onSelect, disabled, forceMoun
   if (!visible)
     return null;
   const selected = own !== `` && store.value === own;
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ref: el,
     "data-slot": "command-item",
     className: cn2(COMMAND_CLASSES.item, className),
@@ -979,7 +981,7 @@ function CommandSeparator({ className, alwaysRender, ...props }) {
   React3.useLayoutEffect(() => store.update(id, { el: el.current }));
   if (!alwaysRender && store.search !== ``)
     return null;
-  return /* @__PURE__ */ jsx13("div", {
+  return /* @__PURE__ */ jsx12("div", {
     ref: el,
     "data-slot": "command-separator",
     className: cn2(COMMAND_CLASSES.separator, className),
@@ -988,7 +990,7 @@ function CommandSeparator({ className, alwaysRender, ...props }) {
   });
 }
 function CommandShortcut({ className, ...props }) {
-  return /* @__PURE__ */ jsx13("span", {
+  return /* @__PURE__ */ jsx12("span", {
     "data-slot": "command-shortcut",
     className: cn2(COMMAND_CLASSES.shortcut, className),
     ...props
@@ -998,13 +1000,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 jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx13, 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__ */ jsx14(Button, {
+  return /* @__PURE__ */ jsx13(Button2, {
     ref,
     type: "button",
     variant: "ghost",
@@ -1021,7 +1023,7 @@ var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = f
       "aria-hidden": true,
       className: CONTEXT_RING_CLASSES.svg,
       children: [
-        /* @__PURE__ */ jsx14("circle", {
+        /* @__PURE__ */ jsx13("circle", {
           cx: RING_SIZE / 2,
           cy: RING_SIZE / 2,
           r: RING_RADIUS,
@@ -1030,7 +1032,7 @@ var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = f
           strokeWidth: RING_STROKE,
           opacity: 0.2
         }),
-        value !== null && /* @__PURE__ */ jsx14("circle", {
+        value !== null && /* @__PURE__ */ jsx13("circle", {
           cx: RING_SIZE / 2,
           cy: RING_SIZE / 2,
           r: RING_RADIUS,
@@ -1057,13 +1059,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 jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var SheetDragContext = React4.createContext(null);
 function SheetDragProvider({
   value,
   children
 }) {
-  return /* @__PURE__ */ jsx15(SheetDragContext.Provider, {
+  return /* @__PURE__ */ jsx14(SheetDragContext.Provider, {
     value,
     children
   });
@@ -1076,7 +1078,7 @@ function SheetGrabber({
   ...props
 }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx15("div", {
+  return /* @__PURE__ */ jsx14("div", {
     "data-slot": "sheet-grabber",
     "aria-hidden": true,
     ...drag,
@@ -1189,9 +1191,9 @@ function useSheetDrag({
 }
 
 // packages/exponential-ui-react/src/primitives/sheet.tsx
-import { jsx as jsx16, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Root, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Root, {
     "data-slot": "sheet",
     ...props
   });
@@ -1199,7 +1201,7 @@ function Sheet({ ...props }) {
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Trigger, {
     "data-slot": "sheet-trigger",
     ...props
   });
@@ -1207,7 +1209,7 @@ function SheetTrigger({
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
     "data-slot": "sheet-close",
     ...props
   });
@@ -1215,7 +1217,7 @@ function SheetClose({
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Portal, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Portal, {
     "data-slot": "sheet-portal",
     ...props
   });
@@ -1224,7 +1226,7 @@ function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Overlay, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Overlay, {
     "data-slot": "sheet-overlay",
     className: cn2(SHEET_CLASSES.overlay, className),
     ...props
@@ -1256,11 +1258,11 @@ function SheetContent({
   }, [ref]);
   return /* @__PURE__ */ jsxs6(SheetPortal, {
     children: [
-      /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
+      /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
         asChild: true,
-        children: /* @__PURE__ */ jsx16(SheetOverlay, {})
+        children: /* @__PURE__ */ jsx15(SheetOverlay, {})
       }),
-      /* @__PURE__ */ jsx16(SheetPrimitive.Content, {
+      /* @__PURE__ */ jsx15(SheetPrimitive.Content, {
         "data-slot": "sheet-content",
         "data-side": side,
         ref: setPanel,
@@ -1277,8 +1279,8 @@ function SheetContent({
           children: [
             showGrabber && /* @__PURE__ */ jsxs6(Fragment2, {
               children: [
-                /* @__PURE__ */ jsx16(SheetGrabber, {}),
-                /* @__PURE__ */ jsx16(SheetPrimitive.Close, {
+                /* @__PURE__ */ jsx15(SheetGrabber, {}),
+                /* @__PURE__ */ jsx15(SheetPrimitive.Close, {
                   ref: dragCloseRef,
                   "aria-hidden": true,
                   tabIndex: -1,
@@ -1290,10 +1292,10 @@ function SheetContent({
             showCloseButton && /* @__PURE__ */ jsxs6(SheetPrimitive.Close, {
               className: SHEET_CLASSES.close,
               children: [
-                /* @__PURE__ */ jsx16(XIcon, {
+                /* @__PURE__ */ jsx15(XIcon, {
                   className: SHEET_CLASSES.closeIcon
                 }),
-                /* @__PURE__ */ jsx16("span", {
+                /* @__PURE__ */ jsx15("span", {
                   className: SHEET_CLASSES.srOnly,
                   children: "Close"
                 })
@@ -1307,7 +1309,7 @@ function SheetContent({
 }
 function SheetHeader({ className, ...props }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     "data-slot": "sheet-header",
     ...drag,
     className: cn2(SHEET_CLASSES.header, className),
@@ -1315,7 +1317,7 @@ function SheetHeader({ className, ...props }) {
   });
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     "data-slot": "sheet-footer",
     className: cn2(SHEET_CLASSES.footer, className),
     ...props
@@ -1325,7 +1327,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Title, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Title, {
     "data-slot": "sheet-title",
     className: cn2(SHEET_CLASSES.title, className),
     ...props
@@ -1335,33 +1337,19 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(SheetPrimitive.Description, {
+  return /* @__PURE__ */ jsx15(SheetPrimitive.Description, {
     "data-slot": "sheet-description",
     className: cn2(SHEET_CLASSES.description, className),
     ...props
   });
 }
 
-// packages/exponential-ui-react/src/primitives/use-media-query.ts
-import { useCallback as useCallback3, useSyncExternalStore as useSyncExternalStore2 } from "react";
-function useMediaQuery(query) {
-  const subscribe = useCallback3((onChange) => {
-    if (typeof window === `undefined` || typeof window.matchMedia !== `function`)
-      return () => {};
-    const mql = window.matchMedia(query);
-    mql.addEventListener(`change`, onChange);
-    return () => mql.removeEventListener(`change`, onChange);
-  }, [query]);
-  const read = () => typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(query).matches;
-  return useSyncExternalStore2(subscribe, read, () => false);
-}
-
 // packages/exponential-ui-react/src/primitives/dialog.tsx
-import { jsx as jsx17, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 function Dialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Root, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Root, {
     "data-slot": "dialog",
     ...props
   });
@@ -1369,7 +1357,7 @@ function Dialog({
 function DialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Trigger, {
     "data-slot": "dialog-trigger",
     ...props
   });
@@ -1377,7 +1365,7 @@ function DialogTrigger({
 function DialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Portal, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Portal, {
     "data-slot": "dialog-portal",
     ...props
   });
@@ -1385,7 +1373,7 @@ function DialogPortal({
 function DialogClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
     "data-slot": "dialog-close",
     ...props
   });
@@ -1394,7 +1382,7 @@ function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Overlay, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Overlay, {
     "data-slot": "dialog-overlay",
     className: cn2(DIALOG_CLASSES.overlay, className),
     ...props
@@ -1425,9 +1413,9 @@ function DialogContent({
       ref.current = node;
     }
   }, [ref]);
-  const isPhone = useMediaQuery(DIALOG_PHONE_QUERY);
+  const isPhone = useMediaQuery2(DIALOG_PHONE_QUERY);
   if (isSheet && isPhone) {
-    return /* @__PURE__ */ jsx17(SheetContent, {
+    return /* @__PURE__ */ jsx16(SheetContent, {
       side: "bottom",
       "data-slot": "dialog-content",
       "data-mobile": mobile,
@@ -1435,7 +1423,7 @@ function DialogContent({
       className: cn2(DIALOG_CLASSES.phoneSheet, mobile === `sheet-full` && DIALOG_CLASSES.phoneSheetFull, className),
       onInteractOutside,
       ...props,
-      children: /* @__PURE__ */ jsx17(DialogPresentationContext.Provider, {
+      children: /* @__PURE__ */ jsx16(DialogPresentationContext.Provider, {
         value: mobile,
         children
       })
@@ -1444,8 +1432,8 @@ function DialogContent({
   return /* @__PURE__ */ jsxs7(DialogPortal, {
     "data-slot": "dialog-portal",
     children: [
-      /* @__PURE__ */ jsx17(DialogOverlay, {}),
-      /* @__PURE__ */ jsx17(DialogPrimitive.Content, {
+      /* @__PURE__ */ jsx16(DialogOverlay, {}),
+      /* @__PURE__ */ jsx16(DialogPrimitive.Content, {
         "data-slot": "dialog-content",
         "data-mobile": mobile,
         ref: setPanel,
@@ -1457,17 +1445,17 @@ function DialogContent({
           }
         },
         ...props,
-        children: /* @__PURE__ */ jsx17(DialogPresentationContext.Provider, {
+        children: /* @__PURE__ */ jsx16(DialogPresentationContext.Provider, {
           value: mobile,
           children: /* @__PURE__ */ jsxs7(SheetDragProvider, {
             value: isSheet ? handleProps : null,
             children: [
               isSheet && /* @__PURE__ */ jsxs7(Fragment3, {
                 children: [
-                  /* @__PURE__ */ jsx17(SheetGrabber, {
+                  /* @__PURE__ */ jsx16(SheetGrabber, {
                     className: DIALOG_CLASSES.grabber
                   }),
-                  /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
+                  /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
                     ref: dragCloseRef,
                     "aria-hidden": true,
                     tabIndex: -1,
@@ -1480,8 +1468,8 @@ function DialogContent({
                 "data-slot": "dialog-close",
                 className: cn2(DIALOG_CLASSES.close, mobile !== `page` && DIALOG_CLASSES.closePhoneHidden),
                 children: [
-                  /* @__PURE__ */ jsx17(XIcon2, {}),
-                  /* @__PURE__ */ jsx17("span", {
+                  /* @__PURE__ */ jsx16(XIcon2, {}),
+                  /* @__PURE__ */ jsx16("span", {
                     className: DIALOG_CLASSES.srOnly,
                     children: "Close"
                   })
@@ -1496,7 +1484,7 @@ function DialogContent({
 }
 function DialogHeader({ className, ...props }) {
   const drag = useSheetDragHandleProps();
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-slot": "dialog-header",
     ...drag,
     className: cn2(DIALOG_CLASSES.header, className),
@@ -1504,14 +1492,14 @@ function DialogHeader({ className, ...props }) {
   });
 }
 function DialogBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-slot": "dialog-body",
     className: cn2(DIALOG_CLASSES.body, className),
     ...props
   });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx17("div", {
+  return /* @__PURE__ */ jsx16("div", {
     "data-slot": "dialog-footer",
     className: cn2(DIALOG_CLASSES.footer, className),
     ...props
@@ -1524,9 +1512,9 @@ function DialogCancel({
 }) {
   const mobile = React7.useContext(DialogPresentationContext);
   const keepOnMobile = mobile === `alert` || mobile === `page`;
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Close, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
     asChild: true,
-    children: /* @__PURE__ */ jsx17(Button, {
+    children: /* @__PURE__ */ jsx16(Button2, {
       type: "button",
       variant: "ghost",
       "data-dialog-cancel": "",
@@ -1540,7 +1528,7 @@ function DialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Title, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Title, {
     "data-slot": "dialog-title",
     className: cn2(DIALOG_CLASSES.title, className),
     ...props
@@ -1550,7 +1538,7 @@ function DialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx17(DialogPrimitive.Description, {
+  return /* @__PURE__ */ jsx16(DialogPrimitive.Description, {
     "data-slot": "dialog-description",
     className: cn2(DIALOG_CLASSES.description, className),
     ...props
@@ -1559,7 +1547,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 jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var ChevronRightGlyph = ChevronRight2;
 var ChevronDownGlyph = ChevronDown;
 function DisclosureHeader({
@@ -1571,7 +1559,7 @@ function DisclosureHeader({
   ...props
 }) {
   const Glyph = open ? ChevronDownGlyph : ChevronRightGlyph;
-  const glyph = /* @__PURE__ */ jsx18(Glyph, {
+  const glyph = /* @__PURE__ */ jsx17(Glyph, {
     "data-slot": "disclosure-chevron",
     className: cn2(DISCLOSURE_HEADER_CLASSES.chevron, chevron === `trailing` && DISCLOSURE_HEADER_CLASSES.chevronTrailing)
   });
@@ -1595,7 +1583,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 jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
 function DockCard({
   tint = `muted`,
   icon: Icon,
@@ -1612,7 +1600,7 @@ function DockCard({
   ...props
 }) {
   const pressable = onOpen !== undefined;
-  return /* @__PURE__ */ jsx19("div", {
+  return /* @__PURE__ */ jsx18("div", {
     "data-slot": "dock-card",
     role: pressable ? `button` : undefined,
     tabIndex: pressable && !hidden ? 0 : undefined,
@@ -1635,7 +1623,7 @@ function DockCard({
       "data-hidden": hidden ? `true` : `false`,
       className: DOCK_CARD_CLASSES.body,
       children: [
-        Icon && /* @__PURE__ */ jsx19(Icon, {
+        Icon && /* @__PURE__ */ jsx18(Icon, {
           "aria-hidden": true,
           "data-slot": "dock-card-icon",
           className: cn2(DOCK_CARD_CLASSES.icon, DOCK_CARD_CLASSES.tint[tint])
@@ -1646,17 +1634,17 @@ function DockCard({
             /* @__PURE__ */ jsxs9("div", {
               className: DOCK_CARD_CLASSES.header,
               children: [
-                /* @__PURE__ */ jsx19("span", {
+                /* @__PURE__ */ jsx18("span", {
                   "data-slot": "dock-card-label",
                   className: cn2(DOCK_CARD_CLASSES.label, DOCK_CARD_CLASSES.tint[tint]),
                   children: label
                 }),
-                caption !== undefined && caption !== null && /* @__PURE__ */ jsx19("span", {
+                caption !== undefined && caption !== null && /* @__PURE__ */ jsx18("span", {
                   "data-slot": "dock-card-caption",
                   className: DOCK_CARD_CLASSES.caption,
                   children: caption
                 }),
-                meta !== undefined && meta !== null && /* @__PURE__ */ jsx19("span", {
+                meta !== undefined && meta !== null && /* @__PURE__ */ jsx18("span", {
                   "data-slot": "dock-card-meta",
                   className: DOCK_CARD_CLASSES.meta,
                   children: meta
@@ -1666,16 +1654,16 @@ function DockCard({
             /* @__PURE__ */ jsxs9("div", {
               className: DOCK_CARD_CLASSES.row,
               children: [
-                /* @__PURE__ */ jsx19("span", {
+                /* @__PURE__ */ jsx18("span", {
                   "data-slot": "dock-card-title",
                   className: DOCK_CARD_CLASSES.title,
                   children: title
                 }),
-                pressable ? /* @__PURE__ */ jsx19(ChevronRight3, {
+                pressable ? /* @__PURE__ */ jsx18(ChevronRight3, {
                   "aria-hidden": true,
                   "data-slot": "dock-card-chevron",
                   className: DOCK_CARD_CLASSES.chevron
-                }) : trailing !== undefined && trailing !== null ? /* @__PURE__ */ jsx19("span", {
+                }) : trailing !== undefined && trailing !== null ? /* @__PURE__ */ jsx18("span", {
                   "data-slot": "dock-card-trailing",
                   className: DOCK_CARD_CLASSES.trailing,
                   children: trailing
@@ -1710,7 +1698,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__ */ jsx19("div", {
+  return /* @__PURE__ */ jsx18("div", {
     "data-slot": "dock-pile",
     "data-expanded": expanded ? `true` : `false`,
     className: cn2(DOCK_PILE_CLASSES.root, className),
@@ -1732,7 +1720,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__ */ jsx19("div", {
+      return /* @__PURE__ */ jsx18("div", {
         ref: (el) => {
           if (el)
             nodes.current.set(item.id, el);
@@ -1749,216 +1737,23 @@ function DockPile({ items, expanded, onExpandedChange, className, style, ...prop
     })
   });
 }
-// packages/exponential-ui-react/src/primitives/dropdown-menu.tsx
-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 jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-"use client";
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Root, {
-    "data-slot": "dropdown-menu",
-    ...props
-  });
-}
-function DropdownMenuPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
-    "data-slot": "dropdown-menu-portal",
-    ...props
-  });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Trigger, {
-    "data-slot": "dropdown-menu-trigger",
-    ...props
-  });
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Content, {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn2(DROPDOWN_MENU_CLASSES.content, className),
-      ...props
-    })
-  });
-}
-function DropdownMenuGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Group, {
-    "data-slot": "dropdown-menu-group",
-    ...props
-  });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = `default`,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Item, {
-    "data-slot": "dropdown-menu-item",
-    "data-inset": inset,
-    "data-variant": variant,
-    className: cn2(DROPDOWN_MENU_CLASSES.item, className),
-    ...props
-  });
-}
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs10(DropdownMenuPrimitive.CheckboxItem, {
-    "data-slot": "dropdown-menu-checkbox-item",
-    className: cn2(DROPDOWN_MENU_CLASSES.checkItem, className),
-    checked,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx20("span", {
-        className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx20(CheckIcon2, {
-            className: DROPDOWN_MENU_CLASSES.checkIcon
-          })
-        })
-      }),
-      children
-    ]
-  });
-}
-function DropdownMenuRadioGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.RadioGroup, {
-    "data-slot": "dropdown-menu-radio-group",
-    ...props
-  });
-}
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs10(DropdownMenuPrimitive.RadioItem, {
-    "data-slot": "dropdown-menu-radio-item",
-    className: cn2(DROPDOWN_MENU_CLASSES.checkItem, className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx20("span", {
-        className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx20(CircleIcon, {
-            className: DROPDOWN_MENU_CLASSES.radioIcon
-          })
-        })
-      }),
-      children
-    ]
-  });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Label, {
-    "data-slot": "dropdown-menu-label",
-    "data-inset": inset,
-    className: cn2(DROPDOWN_MENU_CLASSES.label, className),
-    ...props
-  });
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Separator, {
-    "data-slot": "dropdown-menu-separator",
-    className: cn2(DROPDOWN_MENU_CLASSES.separator, className),
-    ...props
-  });
-}
-function DropdownMenuShortcut({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20("span", {
-    "data-slot": "dropdown-menu-shortcut",
-    className: cn2(DROPDOWN_MENU_CLASSES.shortcut, className),
-    ...props
-  });
-}
-function DropdownMenuSub({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Sub, {
-    "data-slot": "dropdown-menu-sub",
-    ...props
-  });
-}
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  variant = `default`,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs10(DropdownMenuPrimitive.SubTrigger, {
-    "data-slot": "dropdown-menu-sub-trigger",
-    "data-inset": inset,
-    "data-variant": variant,
-    className: cn2(DROPDOWN_MENU_CLASSES.subTrigger, className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx20(ChevronRightIcon2, {
-        className: DROPDOWN_MENU_CLASSES.subChevron
-      })
-    ]
-  });
-}
-function DropdownMenuSubContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx20(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx20(DropdownMenuPrimitive.SubContent, {
-      "data-slot": "dropdown-menu-sub-content",
-      className: cn2(DROPDOWN_MENU_CLASSES.subContent, className),
-      ...props
-    })
-  });
-}
 // packages/exponential-ui-react/src/primitives/empty-state.tsx
 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 jsx21 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function IconDisc({
   icon: Icon,
   tone = `primary`,
   strokeWidth,
   className
 }) {
-  return /* @__PURE__ */ jsx21("div", {
+  return /* @__PURE__ */ jsx19("div", {
     "data-slot": "icon-disc",
     className: cn2(ICON_DISC_CLASSES.root, ICON_DISC_CLASSES.tones[tone], className),
-    children: /* @__PURE__ */ jsx21(Icon, {
+    children: /* @__PURE__ */ jsx19(Icon, {
       className: ICON_DISC_CLASSES.icon,
       strokeWidth,
       "aria-hidden": "true",
@@ -1969,7 +1764,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 jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon,
   title,
@@ -1979,41 +1774,41 @@ function EmptyState({
   children
 }) {
   if (size === `list`) {
-    return /* @__PURE__ */ jsxs11("div", {
+    return /* @__PURE__ */ jsxs10("div", {
       "data-slot": "empty-state",
       "data-size": "list",
       role: "status",
       className: cn2(EMPTY_STATE_CLASSES.list, className),
       children: [
-        Icon && /* @__PURE__ */ jsx22(Icon, {
+        Icon && /* @__PURE__ */ jsx20(Icon, {
           "aria-hidden": "true",
           focusable: "false",
           className: EMPTY_STATE_CLASSES.listIcon
         }),
-        /* @__PURE__ */ jsx22("span", {
+        /* @__PURE__ */ jsx20("span", {
           children: title
         })
       ]
     });
   }
-  return /* @__PURE__ */ jsxs11("div", {
+  return /* @__PURE__ */ jsxs10("div", {
     "data-slot": "empty-state",
     "data-size": "page",
     role: "status",
     className: cn2(EMPTY_STATE_CLASSES.page, className),
     children: [
-      Icon && /* @__PURE__ */ jsx22(IconDisc, {
+      Icon && /* @__PURE__ */ jsx20(IconDisc, {
         icon: Icon
       }),
-      /* @__PURE__ */ jsx22("h2", {
+      /* @__PURE__ */ jsx20("h2", {
         className: EMPTY_STATE_CLASSES.pageTitle,
         children: title
       }),
-      description && /* @__PURE__ */ jsx22("p", {
+      description && /* @__PURE__ */ jsx20("p", {
         className: EMPTY_STATE_CLASSES.pageDescription,
         children: description
       }),
-      children && /* @__PURE__ */ jsx22("div", {
+      children && /* @__PURE__ */ jsx20("div", {
         className: EMPTY_STATE_CLASSES.pageActions,
         children
       })
@@ -2025,7 +1820,7 @@ function ListEmpty({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx22("p", {
+  return /* @__PURE__ */ jsx20("p", {
     "data-slot": "list-empty",
     role: "status",
     className: cn2(EMPTY_STATE_CLASSES.listEmpty, className),
@@ -2041,22 +1836,22 @@ function EmptyCta({
   type,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs11("button", {
+  return /* @__PURE__ */ jsxs10("button", {
     type: type ?? `button`,
     "data-slot": "empty-cta",
     className: cn2(EMPTY_STATE_CLASSES.cta, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs11("span", {
+      /* @__PURE__ */ jsxs10("span", {
         className: EMPTY_STATE_CLASSES.ctaTitle,
         children: [
-          /* @__PURE__ */ jsx22(Icon, {
+          /* @__PURE__ */ jsx20(Icon, {
             className: EMPTY_STATE_CLASSES.ctaIcon
           }),
           title
         ]
       }),
-      /* @__PURE__ */ jsx22("span", {
+      /* @__PURE__ */ jsx20("span", {
         className: EMPTY_STATE_CLASSES.ctaDescription,
         children: description
       })
@@ -2066,9 +1861,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 jsx23 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function GlassCard({ className, ...props }) {
-  return /* @__PURE__ */ jsx23("div", {
+  return /* @__PURE__ */ jsx21("div", {
     "data-slot": "glass-card",
     className: cn2(GLASS_CARD_CLASSES.root, className),
     ...props
@@ -2077,13 +1872,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 jsx24 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function HoverCard({
   openDelay = HOVER_CARD_DELAYS.openDelay,
   closeDelay = HOVER_CARD_DELAYS.closeDelay,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Root, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Root, {
     "data-slot": "hover-card",
     openDelay,
     closeDelay,
@@ -2093,7 +1888,7 @@ function HoverCard({
 function HoverCardTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Trigger, {
     "data-slot": "hover-card-trigger",
     ...props
   });
@@ -2104,8 +1899,8 @@ function HoverCardContent({
   sideOffset = 6,
   ...props
 }) {
-  return /* @__PURE__ */ jsx24(HoverCardPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx24(HoverCardPrimitive.Content, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx22(HoverCardPrimitive.Content, {
       "data-slot": "hover-card-content",
       align,
       sideOffset,
@@ -2118,9 +1913,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 jsx25 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Input = React9.forwardRef(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx25("input", {
+  return /* @__PURE__ */ jsx23("input", {
     ref,
     type,
     "data-slot": "input",
@@ -2131,16 +1926,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 jsx26 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx26("kbd", {
+  return /* @__PURE__ */ jsx24("kbd", {
     "data-slot": "kbd",
     className: cn2(KBD_CLASSES.root, className),
     ...props
   });
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx26("span", {
+  return /* @__PURE__ */ jsx24("span", {
     "data-slot": "kbd-group",
     className: cn2(KBD_CLASSES.group, className),
     ...props
@@ -2149,12 +1944,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 jsx27 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx27(LabelPrimitive.Root, {
+  return /* @__PURE__ */ jsx25(LabelPrimitive.Root, {
     "data-slot": "label",
     className: cn2(LABEL_CLASSES.root, className),
     ...props
@@ -2168,19 +1963,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 jsx28 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function Progress({
   className,
   value,
   ...props
 }) {
   const indeterminate = value === null || value === undefined;
-  return /* @__PURE__ */ jsx28(ProgressPrimitive.Root, {
+  return /* @__PURE__ */ jsx26(ProgressPrimitive.Root, {
     "data-slot": "progress",
     value,
     className: cn2(PROGRESS_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx28(ProgressPrimitive.Indicator, {
+    children: /* @__PURE__ */ jsx26(ProgressPrimitive.Indicator, {
       "data-slot": "progress-indicator",
       className: cn2(PROGRESS_CLASSES.indicator, indeterminate ? PROGRESS_CLASSES.indicatorIndeterminate : PROGRESS_CLASSES.indicatorDeterminate),
       style: indeterminate ? undefined : { transform: progressIndicatorTransform(value) }
@@ -2189,14 +1984,14 @@ function Progress({
 }
 
 // packages/exponential-ui-react/src/primitives/meter.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Meter({
   value,
   tone = `normal`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(Progress, {
+  return /* @__PURE__ */ jsx27(Progress, {
     "data-slot": "meter",
     "data-tone": tone,
     value,
@@ -2207,13 +2002,13 @@ function Meter({
 // 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";
+import { jsx as jsx28, jsxs as jsxs11, 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", {
+    return /* @__PURE__ */ jsxs11("button", {
       type: "button",
       "data-slot": "mosaic-tile",
       "data-size": t.size,
@@ -2221,7 +2016,7 @@ function Mosaic({ pictures, label, onSelect, className, ...props }) {
       className: cn2(MOSAIC_CLASSES.tile, lead ? MOSAIC_CLASSES.lead : MOSAIC_CLASSES.fill),
       onClick: () => onSelect?.(t.index),
       children: [
-        /* @__PURE__ */ jsx30("img", {
+        /* @__PURE__ */ jsx28("img", {
           src: picture.src,
           alt: "",
           "aria-hidden": "true",
@@ -2230,7 +2025,7 @@ function Mosaic({ pictures, label, onSelect, className, ...props }) {
           draggable: false,
           className: MOSAIC_CLASSES.image
         }),
-        t.more > 0 ? /* @__PURE__ */ jsx30("span", {
+        t.more > 0 ? /* @__PURE__ */ jsx28("span", {
           "aria-hidden": "true",
           className: MOSAIC_CLASSES.more,
           children: `+${t.more}`
@@ -2238,16 +2033,16 @@ function Mosaic({ pictures, label, onSelect, className, ...props }) {
       ]
     }, t.index);
   };
-  return /* @__PURE__ */ jsx30("div", {
+  return /* @__PURE__ */ jsx28("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: tiles.length >= 3 ? /* @__PURE__ */ jsxs11(Fragment4, {
       children: [
         tile(tiles[0], true),
-        /* @__PURE__ */ jsx30("div", {
+        /* @__PURE__ */ jsx28("div", {
           "data-slot": "mosaic-side",
           className: MOSAIC_CLASSES.side,
           children: tiles.slice(1).map((t) => tile(t, false))
@@ -2259,15 +2054,15 @@ function Mosaic({ pictures, label, onSelect, className, ...props }) {
 // 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";
+import { jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
 function Outline({ items, value, caption, onSelect, className, ...props }) {
-  return /* @__PURE__ */ jsxs13("nav", {
+  return /* @__PURE__ */ jsxs12("nav", {
     "data-slot": "outline",
     "aria-label": caption || `Outline`,
     className: cn2(OUTLINE_CLASSES.root, className),
     ...props,
     children: [
-      caption ? /* @__PURE__ */ jsx31("div", {
+      caption ? /* @__PURE__ */ jsx29("div", {
         "data-slot": "outline-caption",
         "aria-hidden": "true",
         className: OUTLINE_CLASSES.caption,
@@ -2276,7 +2071,7 @@ function Outline({ items, value, caption, onSelect, className, ...props }) {
       items.map((item) => {
         const active = value != null && item.id === value;
         const count = outlineCountText(item.count);
-        return /* @__PURE__ */ jsxs13("button", {
+        return /* @__PURE__ */ jsxs12("button", {
           type: "button",
           "data-slot": "outline-row",
           "data-active": active ? `true` : undefined,
@@ -2285,16 +2080,16 @@ function Outline({ items, value, caption, onSelect, className, ...props }) {
           className: OUTLINE_CLASSES.row,
           onClick: () => onSelect?.(item.id),
           children: [
-            active ? /* @__PURE__ */ jsx31("span", {
+            active ? /* @__PURE__ */ jsx29("span", {
               "data-slot": "outline-bar",
               "aria-hidden": "true",
               className: OUTLINE_CLASSES.bar
             }) : null,
-            /* @__PURE__ */ jsx31("span", {
+            /* @__PURE__ */ jsx29("span", {
               className: OUTLINE_CLASSES.title,
               children: item.title
             }),
-            count ? /* @__PURE__ */ jsx31("span", {
+            count ? /* @__PURE__ */ jsx29("span", {
               "aria-hidden": "true",
               className: OUTLINE_CLASSES.count,
               children: count
@@ -2308,11 +2103,11 @@ function Outline({ items, value, caption, onSelect, className, ...props }) {
 // 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 jsx32 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(PopoverPrimitive.Root, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Root, {
     "data-slot": "popover",
     ...props
   });
@@ -2320,7 +2115,7 @@ function Popover({
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(PopoverPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Trigger, {
     "data-slot": "popover-trigger",
     ...props
   });
@@ -2331,8 +2126,8 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(PopoverPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx32(PopoverPrimitive.Content, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx30(PopoverPrimitive.Content, {
       "data-slot": "popover-content",
       align,
       sideOffset,
@@ -2344,7 +2139,7 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(PopoverPrimitive.Anchor, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Anchor, {
     "data-slot": "popover-anchor",
     ...props
   });
@@ -2352,7 +2147,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 jsx33, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 function ProgressRing({
   done,
   total,
@@ -2363,7 +2158,7 @@ function ProgressRing({
 }) {
   const { circumference, dashOffset } = ringGeometry3(progressRingPercent(done, total));
   const centre = RING_SIZE3 / 2;
-  return /* @__PURE__ */ jsxs14("svg", {
+  return /* @__PURE__ */ jsxs13("svg", {
     viewBox: `0 0 ${RING_SIZE3} ${RING_SIZE3}`,
     width: size,
     height: size,
@@ -2374,7 +2169,7 @@ function ProgressRing({
     className: cn2(PROGRESS_RING_CLASSES.root, colorClass, className),
     style: colorHex ? { color: colorHex } : undefined,
     children: [
-      /* @__PURE__ */ jsx33("circle", {
+      /* @__PURE__ */ jsx31("circle", {
         cx: centre,
         cy: centre,
         r: RING_RADIUS3,
@@ -2383,7 +2178,7 @@ function ProgressRing({
         strokeWidth: RING_STROKE3,
         opacity: 0.2
       }),
-      done > 0 && /* @__PURE__ */ jsx33("circle", {
+      done > 0 && /* @__PURE__ */ jsx31("circle", {
         "data-slot": "progress-ring-arc",
         cx: centre,
         cy: centre,
@@ -2401,30 +2196,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 jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 function ScrollArea({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs15(ScrollAreaPrimitive.Root, {
+  return /* @__PURE__ */ jsxs14(ScrollAreaPrimitive.Root, {
     "data-slot": "scroll-area",
     className: cn2(SCROLL_AREA_CLASSES.root, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx34(ScrollAreaPrimitive.Viewport, {
+      /* @__PURE__ */ jsx32(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
         className: SCROLL_AREA_CLASSES.viewport,
         children
       }),
-      /* @__PURE__ */ jsx34(ScrollBar, {}),
-      /* @__PURE__ */ jsx34(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx32(ScrollBar, {}),
+      /* @__PURE__ */ jsx32(ScrollAreaPrimitive.Corner, {})
     ]
   });
 }
 function ScrollBar({ className, orientation = `vertical`, ...props }) {
-  return /* @__PURE__ */ jsx34(ScrollAreaPrimitive.ScrollAreaScrollbar, {
+  return /* @__PURE__ */ jsx32(ScrollAreaPrimitive.ScrollAreaScrollbar, {
     "data-slot": "scroll-area-scrollbar",
     orientation,
     className: cn2(SCROLL_AREA_CLASSES.scrollbar, SCROLL_AREA_CLASSES.orientations[orientation], className),
     ...props,
-    children: /* @__PURE__ */ jsx34(ScrollAreaPrimitive.ScrollAreaThumb, {
+    children: /* @__PURE__ */ jsx32(ScrollAreaPrimitive.ScrollAreaThumb, {
       "data-slot": "scroll-area-thumb",
       className: SCROLL_AREA_CLASSES.thumb
     })
@@ -2437,12 +2232,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 jsx35 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Tabs({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(TabsPrimitive.Root, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Root, {
     "data-slot": "tabs",
     className: cn2(TABS_CLASSES.root, className),
     ...props
@@ -2452,7 +2247,7 @@ function TabsList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(TabsPrimitive.List, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.List, {
     "data-slot": "tabs-list",
     className: cn2(TABS_CLASSES.list, className),
     ...props
@@ -2462,7 +2257,7 @@ function TabsTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(TabsPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
     className: cn2(TABS_CLASSES.trigger, className),
     ...props
@@ -2472,7 +2267,7 @@ function TabsContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(TabsPrimitive.Content, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn2(TABS_CLASSES.content, className),
     ...props
@@ -2480,7 +2275,7 @@ function TabsContent({
 }
 
 // packages/exponential-ui-react/src/primitives/segmented-control.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -2491,38 +2286,38 @@ function SegmentedControl({
 }) {
   const triggers = options.map((option) => {
     const Glyph = option.icon;
-    return /* @__PURE__ */ jsxs16(TabsTrigger, {
+    return /* @__PURE__ */ jsxs15(TabsTrigger, {
       value: option.value,
       disabled: disabled || option.disabled,
       className: SEGMENTED_CONTROL_CLASSES.trigger,
       children: [
-        Glyph ? /* @__PURE__ */ jsx36(Glyph, {
+        Glyph ? /* @__PURE__ */ jsx34(Glyph, {
           "aria-hidden": true
         }) : null,
         option.label
       ]
     }, option.value);
   });
-  return /* @__PURE__ */ jsx36(Tabs, {
+  return /* @__PURE__ */ jsx34(Tabs, {
     "data-slot": "segmented-control",
     value,
     onValueChange: (next) => onValueChange(next),
-    children: /* @__PURE__ */ jsx36(TabsList, {
+    children: /* @__PURE__ */ jsx34(TabsList, {
       className: cn2(fill && SEGMENTED_CONTROL_CLASSES.fill, className),
       children: triggers
     })
   });
 }
 // packages/exponential-ui-react/src/primitives/select.tsx
-import { CheckIcon as CheckIcon3, ChevronDownIcon as ChevronDownIcon2, ChevronUpIcon } from "lucide-react";
+import { CheckIcon as CheckIcon2, 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 jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 "use client";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Root, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Root, {
     "data-slot": "select",
     ...props
   });
@@ -2530,7 +2325,7 @@ function Select({
 function SelectGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Group, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Group, {
     "data-slot": "select-group",
     ...props
   });
@@ -2538,7 +2333,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Value, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Value, {
     "data-slot": "select-value",
     ...props
   });
@@ -2549,16 +2344,16 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs17(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs16(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
     className: cn2(SELECT_CLASSES.trigger, className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx37(SelectPrimitive.Icon, {
+      /* @__PURE__ */ jsx35(SelectPrimitive.Icon, {
         asChild: true,
-        children: /* @__PURE__ */ jsx37(ChevronDownIcon2, {
+        children: /* @__PURE__ */ jsx35(ChevronDownIcon2, {
           className: SELECT_CLASSES.triggerIcon
         })
       })
@@ -2572,20 +2367,20 @@ function SelectContent({
   align = `center`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Portal, {
-    children: /* @__PURE__ */ jsxs17(SelectPrimitive.Content, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Portal, {
+    children: /* @__PURE__ */ jsxs16(SelectPrimitive.Content, {
       "data-slot": "select-content",
       className: cn2(SELECT_CLASSES.content, position === `popper` && SELECT_CLASSES.contentPopper, className),
       position,
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx37(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx37(SelectPrimitive.Viewport, {
+        /* @__PURE__ */ jsx35(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx35(SelectPrimitive.Viewport, {
           className: cn2(SELECT_CLASSES.viewport, position === `popper` && SELECT_CLASSES.viewportPopper),
           children
         }),
-        /* @__PURE__ */ jsx37(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx35(SelectScrollDownButton, {})
       ]
     })
   });
@@ -2594,7 +2389,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Label, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Label, {
     "data-slot": "select-label",
     className: cn2(SELECT_CLASSES.label, className),
     ...props
@@ -2605,21 +2400,21 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs17(SelectPrimitive.Item, {
+  return /* @__PURE__ */ jsxs16(SelectPrimitive.Item, {
     "data-slot": "select-item",
     className: cn2(SELECT_CLASSES.item, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx37("span", {
+      /* @__PURE__ */ jsx35("span", {
         "data-slot": "select-item-indicator",
         className: SELECT_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx37(SelectPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx37(CheckIcon3, {
+        children: /* @__PURE__ */ jsx35(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx35(CheckIcon2, {
             className: SELECT_CLASSES.itemCheck
           })
         })
       }),
-      /* @__PURE__ */ jsx37(SelectPrimitive.ItemText, {
+      /* @__PURE__ */ jsx35(SelectPrimitive.ItemText, {
         children
       })
     ]
@@ -2629,7 +2424,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Separator, {
     "data-slot": "select-separator",
     className: cn2(SELECT_CLASSES.separator, className),
     ...props
@@ -2639,11 +2434,11 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.ScrollUpButton, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.ScrollUpButton, {
     "data-slot": "select-scroll-up-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx37(ChevronUpIcon, {
+    children: /* @__PURE__ */ jsx35(ChevronUpIcon, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2652,11 +2447,11 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(SelectPrimitive.ScrollDownButton, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.ScrollDownButton, {
     "data-slot": "select-scroll-down-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx37(ChevronDownIcon2, {
+    children: /* @__PURE__ */ jsx35(ChevronDownIcon2, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2664,7 +2459,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 jsx38 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 "use client";
 function Separator({
   className,
@@ -2672,7 +2467,7 @@ function Separator({
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(SeparatorPrimitive.Root, {
+  return /* @__PURE__ */ jsx36(SeparatorPrimitive.Root, {
     "data-slot": "separator",
     decorative,
     orientation,
@@ -2682,9 +2477,9 @@ function Separator({
 }
 // packages/exponential-ui-react/src/primitives/skeleton.tsx
 import { SKELETON_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx37("div", {
     "data-slot": "skeleton",
     className: cn2(SKELETON_CLASSES.root, className),
     ...props
@@ -2693,14 +2488,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 jsx40 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Spinner({
   size = 10,
   label = `Loading`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(LoaderCircle, {
+  return /* @__PURE__ */ jsx38(LoaderCircle, {
     "data-slot": "spinner",
     "data-testid": "feedback-spinner",
     "aria-label": label,
@@ -2714,18 +2509,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 jsx41 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Switch({
   className,
   size = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(SwitchPrimitive.Root, {
+  return /* @__PURE__ */ jsx39(SwitchPrimitive.Root, {
     "data-slot": "switch",
     "data-size": size,
     className: cn2(SWITCH_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx41(SwitchPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx39(SwitchPrimitive.Thumb, {
       "data-slot": "switch-thumb",
       className: cn2(SWITCH_CLASSES.thumb)
     })
@@ -2733,12 +2528,12 @@ function Switch({
 }
 // packages/exponential-ui-react/src/primitives/table.tsx
 import { TABLE_CLASSES } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("div", {
+  return /* @__PURE__ */ jsx40("div", {
     "data-slot": "table-container",
     className: TABLE_CLASSES.container,
-    children: /* @__PURE__ */ jsx42("table", {
+    children: /* @__PURE__ */ jsx40("table", {
       "data-slot": "table",
       className: cn2(TABLE_CLASSES.root, className),
       ...props
@@ -2746,49 +2541,49 @@ function Table({ className, ...props }) {
   });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("thead", {
+  return /* @__PURE__ */ jsx40("thead", {
     "data-slot": "table-header",
     className: cn2(TABLE_CLASSES.header, className),
     ...props
   });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("tbody", {
+  return /* @__PURE__ */ jsx40("tbody", {
     "data-slot": "table-body",
     className: cn2(TABLE_CLASSES.body, className),
     ...props
   });
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("tfoot", {
+  return /* @__PURE__ */ jsx40("tfoot", {
     "data-slot": "table-footer",
     className: cn2(TABLE_CLASSES.footer, className),
     ...props
   });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("tr", {
+  return /* @__PURE__ */ jsx40("tr", {
     "data-slot": "table-row",
     className: cn2(TABLE_CLASSES.row, className),
     ...props
   });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("th", {
+  return /* @__PURE__ */ jsx40("th", {
     "data-slot": "table-head",
     className: cn2(TABLE_CLASSES.head, className),
     ...props
   });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("td", {
+  return /* @__PURE__ */ jsx40("td", {
     "data-slot": "table-cell",
     className: cn2(TABLE_CLASSES.cell, className),
     ...props
   });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx42("caption", {
+  return /* @__PURE__ */ jsx40("caption", {
     "data-slot": "table-caption",
     className: cn2(TABLE_CLASSES.caption, className),
     ...props
@@ -2796,9 +2591,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 jsx43 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx43("textarea", {
+  return /* @__PURE__ */ jsx41("textarea", {
     "data-slot": "textarea",
     className: cn2(TEXTAREA_CLASSES.root, className),
     ...props
@@ -2816,7 +2611,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 jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var KIND_ICONS = {
   success: CircleCheck,
   error: CircleX,
@@ -2830,7 +2625,7 @@ function useToasts(store) {
 }
 function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, ...props }) {
   const toasts = useToasts(store);
-  const touchQuery = useMediaQuery(TOAST_TOUCH_QUERY);
+  const touchQuery = useMediaQuery2(TOAST_TOUCH_QUERY);
   const { placement, anchoredBottom } = toastPlacement(touch ?? touchQuery);
   const [expanded, setExpanded] = React10.useState(false);
   const [measured, setMeasured] = React10.useState({});
@@ -2852,13 +2647,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__ */ jsx44("section", {
+  return /* @__PURE__ */ jsx42("section", {
     "aria-label": "Notifications",
     "data-slot": "toaster",
     "data-placement": placement,
     className: cn2(TOAST_CLASSES.region, TOAST_CLASSES.regionPlacement[placement], className),
     ...props,
-    children: /* @__PURE__ */ jsx44("ol", {
+    children: /* @__PURE__ */ jsx42("ol", {
       "data-slot": "toast-list",
       "data-expanded": open ? `true` : `false`,
       className: cn2(TOAST_CLASSES.list, TOAST_CLASSES.listPlacement[placement]),
@@ -2879,7 +2674,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__ */ jsxs18("li", {
+        return /* @__PURE__ */ jsxs17("li", {
           ref: (el) => {
             if (el)
               items.current.set(t.id, el);
@@ -2898,29 +2693,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__ */ jsx44("div", {
+            Icon && /* @__PURE__ */ jsx42("div", {
               className: TOAST_CLASSES.iconSlot,
-              children: /* @__PURE__ */ jsx44(Icon, {
+              children: /* @__PURE__ */ jsx42(Icon, {
                 "data-toast-kind": t.kind,
                 className: cn2(TOAST_CLASSES.icon, TOAST_CLASSES.kindIcon[t.kind])
               })
             }),
-            /* @__PURE__ */ jsxs18("div", {
+            /* @__PURE__ */ jsxs17("div", {
               className: TOAST_CLASSES.content,
               children: [
-                /* @__PURE__ */ jsx44("div", {
+                /* @__PURE__ */ jsx42("div", {
                   "data-slot": "toast-title",
                   className: TOAST_CLASSES.title,
                   children: t.title
                 }),
-                t.description !== undefined && /* @__PURE__ */ jsx44("div", {
+                t.description !== undefined && /* @__PURE__ */ jsx42("div", {
                   "data-slot": "toast-description",
                   className: TOAST_CLASSES.description,
                   children: t.description
                 })
               ]
             }),
-            t.action && /* @__PURE__ */ jsx44("button", {
+            t.action && /* @__PURE__ */ jsx42("button", {
               type: "button",
               "data-slot": "toast-action",
               className: TOAST_CLASSES.action,
@@ -2930,13 +2725,13 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
               },
               children: t.action.label
             }),
-            /* @__PURE__ */ jsx44("button", {
+            /* @__PURE__ */ jsx42("button", {
               type: "button",
               "data-slot": "toast-close",
               "aria-label": closeLabel,
               className: TOAST_CLASSES.close,
               onClick: () => store.dismiss(t.id),
-              children: /* @__PURE__ */ jsx44(XIcon3, {})
+              children: /* @__PURE__ */ jsx42(XIcon3, {})
             })
           ]
         }, t.id);
@@ -2947,12 +2742,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 jsx45 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delayDuration,
     ...props
@@ -2961,7 +2756,7 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Root, {
     "data-slot": "tooltip",
     ...props
   });
@@ -2969,7 +2764,7 @@ function Tooltip({
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -2980,8 +2775,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(TooltipPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx45(TooltipPrimitive.Content, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx43(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn2(TOOLTIP_CLASSES.content, className),
@@ -3024,11 +2819,11 @@ import {
   voiceWaveName,
   voiceWaveQuiet
 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs18 } 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 reducedMotion = useMediaQuery2(`(prefers-reduced-motion: reduce)`);
   const input = { size: px, activity, level, bands, reducedMotion };
   const latest = useRef9(input);
   latest.current = input;
@@ -3051,7 +2846,7 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
   const wave = voiceWave({ ...input, elapsed: elapsed.current });
   const quiet = voiceWaveQuiet(activity);
   const name = voiceWaveName(label, activity);
-  return /* @__PURE__ */ jsxs19("span", {
+  return /* @__PURE__ */ jsxs18("span", {
     "data-slot": "voice-wave",
     "data-activity": activity,
     "data-size": size,
@@ -3060,13 +2855,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__ */ jsx46("svg", {
+      /* @__PURE__ */ jsx44("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__ */ jsx46("path", {
+        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx44("path", {
           ref: (el) => {
             paths.current[k] = el;
           },
@@ -3082,7 +2877,7 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
           strokeLinejoin: "round"
         }, ring.part))
       }),
-      present ? /* @__PURE__ */ jsx46("span", {
+      present ? /* @__PURE__ */ jsx44("span", {
         ref: childEl,
         "data-slot": "voice-wave-child",
         "aria-hidden": wave.childSize > 0 ? undefined : true,
@@ -3120,7 +2915,7 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  Button,
+  Button2 as Button,
   CAROUSEL_GEOMETRY,
   CODE_TOKEN_CLASS,
   Calendar,
@@ -3176,21 +2971,21 @@ export {
   DisclosureHeader,
   DockCard,
   DockPile,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
+  DropdownMenu2 as DropdownMenu,
+  DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem,
+  DropdownMenuContent2 as DropdownMenuContent,
+  DropdownMenuGroup2 as DropdownMenuGroup,
+  DropdownMenuItem2 as DropdownMenuItem,
+  DropdownMenuLabel2 as DropdownMenuLabel,
+  DropdownMenuPortal2 as DropdownMenuPortal,
+  DropdownMenuRadioGroup2 as DropdownMenuRadioGroup,
+  DropdownMenuRadioItem2 as DropdownMenuRadioItem,
+  DropdownMenuSeparator2 as DropdownMenuSeparator,
+  DropdownMenuShortcut2 as DropdownMenuShortcut,
+  DropdownMenuSub2 as DropdownMenuSub,
+  DropdownMenuSubContent2 as DropdownMenuSubContent,
+  DropdownMenuSubTrigger2 as DropdownMenuSubTrigger,
+  DropdownMenuTrigger2 as DropdownMenuTrigger,
   EMPTY_STATE_SIZES,
   EmptyCta,
   EmptyState,
@@ -3292,9 +3087,12 @@ export {
   TooltipProvider,
   TooltipTrigger,
   VoiceWave,
+  ZOOMABLE_IMAGE_STRINGS2 as ZOOMABLE_IMAGE_STRINGS,
+  ZOOM_MATH2 as ZOOM_MATH,
+  ZoomableImage2 as ZoomableImage,
   alertVariants,
   avatarHueIndex,
-  buttonVariants,
+  buttonVariants2 as buttonVariants,
   carouselCounterText2 as carouselCounterText,
   choiceColumns2 as choiceColumns,
   choiceToggle2 as choiceToggle,
@@ -3314,10 +3112,11 @@ export {
   toastStackGeometry2 as toastStackGeometry,
   toastStore,
   useIsMobile,
-  useMediaQuery,
+  useMediaQuery2 as useMediaQuery,
   useSheetDrag,
-  useSheetDragHandleProps
+  useSheetDragHandleProps,
+  useZoomableImage2 as useZoomableImage
 };
 
-//# debugId=5F4612A1F030A63764756E2164756E21
+//# debugId=A2DF99790241EFFB64756E2164756E21
 //# sourceMappingURL=index.js.map