@exponential_app/eui-react 0.2.1 → 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,56 +405,114 @@ 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
   });
 }
+// 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 jsx8 } from "react/jsx-runtime";
+function CarouselCounter({ page, total, className, ...props }) {
+  return /* @__PURE__ */ jsx8("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__ */ jsx8("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__ */ jsx8("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__ */ jsx8("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";
@@ -537,7 +597,7 @@ function CodeBlockCopyButton({
   }, [copied]);
   return /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx10(Button, {
+      /* @__PURE__ */ jsx10(Button2, {
         "data-slot": "code-block-copy-button",
         "data-copied": copied || undefined,
         variant,
@@ -946,7 +1006,7 @@ var ContextRing = forwardRef(function ContextRing({ percent, tone, showEmpty = f
   if (value === null && !showEmpty)
     return null;
   const { circumference, dashOffset } = ringGeometry(value ?? 0);
-  return /* @__PURE__ */ jsx13(Button, {
+  return /* @__PURE__ */ jsx13(Button2, {
     ref,
     type: "button",
     variant: "ghost",
@@ -1284,20 +1344,6 @@ function SheetDescription({
   });
 }
 
-// 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 jsx16, jsxs as jsxs7, Fragment as Fragment3 } from "react/jsx-runtime";
 function Dialog({
@@ -1367,7 +1413,7 @@ function DialogContent({
       ref.current = node;
     }
   }, [ref]);
-  const isPhone = useMediaQuery(DIALOG_PHONE_QUERY);
+  const isPhone = useMediaQuery2(DIALOG_PHONE_QUERY);
   if (isSheet && isPhone) {
     return /* @__PURE__ */ jsx16(SheetContent, {
       side: "bottom",
@@ -1468,7 +1514,7 @@ function DialogCancel({
   const keepOnMobile = mobile === `alert` || mobile === `page`;
   return /* @__PURE__ */ jsx16(DialogPrimitive.Close, {
     asChild: true,
-    children: /* @__PURE__ */ jsx16(Button, {
+    children: /* @__PURE__ */ jsx16(Button2, {
       type: "button",
       variant: "ghost",
       "data-dialog-cancel": "",
@@ -1691,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 jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
-"use client";
-function DropdownMenu({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Root, {
-    "data-slot": "dropdown-menu",
-    ...props
-  });
-}
-function DropdownMenuPortal({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
-    "data-slot": "dropdown-menu-portal",
-    ...props
-  });
-}
-function DropdownMenuTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Trigger, {
-    "data-slot": "dropdown-menu-trigger",
-    ...props
-  });
-}
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Content, {
-      "data-slot": "dropdown-menu-content",
-      sideOffset,
-      className: cn2(DROPDOWN_MENU_CLASSES.content, className),
-      ...props
-    })
-  });
-}
-function DropdownMenuGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Group, {
-    "data-slot": "dropdown-menu-group",
-    ...props
-  });
-}
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = `default`,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(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__ */ jsx19("span", {
-        className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx19(CheckIcon2, {
-            className: DROPDOWN_MENU_CLASSES.checkIcon
-          })
-        })
-      }),
-      children
-    ]
-  });
-}
-function DropdownMenuRadioGroup({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(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__ */ jsx19("span", {
-        className: DROPDOWN_MENU_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx19(DropdownMenuPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx19(CircleIcon, {
-            className: DROPDOWN_MENU_CLASSES.radioIcon
-          })
-        })
-      }),
-      children
-    ]
-  });
-}
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Label, {
-    "data-slot": "dropdown-menu-label",
-    "data-inset": inset,
-    className: cn2(DROPDOWN_MENU_CLASSES.label, className),
-    ...props
-  });
-}
-function DropdownMenuSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Separator, {
-    "data-slot": "dropdown-menu-separator",
-    className: cn2(DROPDOWN_MENU_CLASSES.separator, className),
-    ...props
-  });
-}
-function DropdownMenuShortcut({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19("span", {
-    "data-slot": "dropdown-menu-shortcut",
-    className: cn2(DROPDOWN_MENU_CLASSES.shortcut, className),
-    ...props
-  });
-}
-function DropdownMenuSub({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(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__ */ jsx19(ChevronRightIcon2, {
-        className: DROPDOWN_MENU_CLASSES.subChevron
-      })
-    ]
-  });
-}
-function DropdownMenuSubContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx19(DropdownMenuPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx19(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 jsx20 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function IconDisc({
   icon: Icon,
   tone = `primary`,
   strokeWidth,
   className
 }) {
-  return /* @__PURE__ */ jsx20("div", {
+  return /* @__PURE__ */ jsx19("div", {
     "data-slot": "icon-disc",
     className: cn2(ICON_DISC_CLASSES.root, ICON_DISC_CLASSES.tones[tone], className),
-    children: /* @__PURE__ */ jsx20(Icon, {
+    children: /* @__PURE__ */ jsx19(Icon, {
       className: ICON_DISC_CLASSES.icon,
       strokeWidth,
       "aria-hidden": "true",
@@ -1911,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 jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon,
   title,
@@ -1921,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__ */ jsx21(Icon, {
+        Icon && /* @__PURE__ */ jsx20(Icon, {
           "aria-hidden": "true",
           focusable: "false",
           className: EMPTY_STATE_CLASSES.listIcon
         }),
-        /* @__PURE__ */ jsx21("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__ */ jsx21(IconDisc, {
+      Icon && /* @__PURE__ */ jsx20(IconDisc, {
         icon: Icon
       }),
-      /* @__PURE__ */ jsx21("h2", {
+      /* @__PURE__ */ jsx20("h2", {
         className: EMPTY_STATE_CLASSES.pageTitle,
         children: title
       }),
-      description && /* @__PURE__ */ jsx21("p", {
+      description && /* @__PURE__ */ jsx20("p", {
         className: EMPTY_STATE_CLASSES.pageDescription,
         children: description
       }),
-      children && /* @__PURE__ */ jsx21("div", {
+      children && /* @__PURE__ */ jsx20("div", {
         className: EMPTY_STATE_CLASSES.pageActions,
         children
       })
@@ -1967,7 +1820,7 @@ function ListEmpty({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx21("p", {
+  return /* @__PURE__ */ jsx20("p", {
     "data-slot": "list-empty",
     role: "status",
     className: cn2(EMPTY_STATE_CLASSES.listEmpty, className),
@@ -1983,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__ */ jsx21(Icon, {
+          /* @__PURE__ */ jsx20(Icon, {
             className: EMPTY_STATE_CLASSES.ctaIcon
           }),
           title
         ]
       }),
-      /* @__PURE__ */ jsx21("span", {
+      /* @__PURE__ */ jsx20("span", {
         className: EMPTY_STATE_CLASSES.ctaDescription,
         children: description
       })
@@ -2008,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 jsx22 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function GlassCard({ className, ...props }) {
-  return /* @__PURE__ */ jsx22("div", {
+  return /* @__PURE__ */ jsx21("div", {
     "data-slot": "glass-card",
     className: cn2(GLASS_CARD_CLASSES.root, className),
     ...props
@@ -2019,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 jsx23 } 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__ */ jsx23(HoverCardPrimitive.Root, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Root, {
     "data-slot": "hover-card",
     openDelay,
     closeDelay,
@@ -2035,7 +1888,7 @@ function HoverCard({
 function HoverCardTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(HoverCardPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Trigger, {
     "data-slot": "hover-card-trigger",
     ...props
   });
@@ -2046,8 +1899,8 @@ function HoverCardContent({
   sideOffset = 6,
   ...props
 }) {
-  return /* @__PURE__ */ jsx23(HoverCardPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx23(HoverCardPrimitive.Content, {
+  return /* @__PURE__ */ jsx22(HoverCardPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx22(HoverCardPrimitive.Content, {
       "data-slot": "hover-card-content",
       align,
       sideOffset,
@@ -2060,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 jsx24 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Input = React9.forwardRef(({ className, type, ...props }, ref) => {
-  return /* @__PURE__ */ jsx24("input", {
+  return /* @__PURE__ */ jsx23("input", {
     ref,
     type,
     "data-slot": "input",
@@ -2073,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 jsx25 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx25("kbd", {
+  return /* @__PURE__ */ jsx24("kbd", {
     "data-slot": "kbd",
     className: cn2(KBD_CLASSES.root, className),
     ...props
   });
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx25("span", {
+  return /* @__PURE__ */ jsx24("span", {
     "data-slot": "kbd-group",
     className: cn2(KBD_CLASSES.group, className),
     ...props
@@ -2091,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 jsx26 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx26(LabelPrimitive.Root, {
+  return /* @__PURE__ */ jsx25(LabelPrimitive.Root, {
     "data-slot": "label",
     className: cn2(LABEL_CLASSES.root, className),
     ...props
@@ -2110,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 jsx27 } 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__ */ jsx27(ProgressPrimitive.Root, {
+  return /* @__PURE__ */ jsx26(ProgressPrimitive.Root, {
     "data-slot": "progress",
     value,
     className: cn2(PROGRESS_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx27(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) }
@@ -2131,14 +1984,14 @@ function Progress({
 }
 
 // packages/exponential-ui-react/src/primitives/meter.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function Meter({
   value,
   tone = `normal`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(Progress, {
+  return /* @__PURE__ */ jsx27(Progress, {
     "data-slot": "meter",
     "data-tone": tone,
     value,
@@ -2146,14 +1999,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 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__ */ jsxs11("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__ */ jsx28("img", {
+          src: picture.src,
+          alt: "",
+          "aria-hidden": "true",
+          loading: "lazy",
+          decoding: "async",
+          draggable: false,
+          className: MOSAIC_CLASSES.image
+        }),
+        t.more > 0 ? /* @__PURE__ */ jsx28("span", {
+          "aria-hidden": "true",
+          className: MOSAIC_CLASSES.more,
+          children: `+${t.more}`
+        }) : null
+      ]
+    }, t.index);
+  };
+  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__ */ jsxs11(Fragment4, {
+      children: [
+        tile(tiles[0], true),
+        /* @__PURE__ */ jsx28("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 jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
+function Outline({ items, value, caption, onSelect, className, ...props }) {
+  return /* @__PURE__ */ jsxs12("nav", {
+    "data-slot": "outline",
+    "aria-label": caption || `Outline`,
+    className: cn2(OUTLINE_CLASSES.root, className),
+    ...props,
+    children: [
+      caption ? /* @__PURE__ */ jsx29("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__ */ jsxs12("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__ */ jsx29("span", {
+              "data-slot": "outline-bar",
+              "aria-hidden": "true",
+              className: OUTLINE_CLASSES.bar
+            }) : null,
+            /* @__PURE__ */ jsx29("span", {
+              className: OUTLINE_CLASSES.title,
+              children: item.title
+            }),
+            count ? /* @__PURE__ */ jsx29("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 jsx30 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Root, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Root, {
     "data-slot": "popover",
     ...props
   });
@@ -2161,7 +2115,7 @@ function Popover({
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Trigger, {
     "data-slot": "popover-trigger",
     ...props
   });
@@ -2172,8 +2126,8 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx29(PopoverPrimitive.Content, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx30(PopoverPrimitive.Content, {
       "data-slot": "popover-content",
       align,
       sideOffset,
@@ -2185,7 +2139,7 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx29(PopoverPrimitive.Anchor, {
+  return /* @__PURE__ */ jsx30(PopoverPrimitive.Anchor, {
     "data-slot": "popover-anchor",
     ...props
   });
@@ -2193,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 jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 function ProgressRing({
   done,
   total,
@@ -2204,7 +2158,7 @@ function ProgressRing({
 }) {
   const { circumference, dashOffset } = ringGeometry3(progressRingPercent(done, total));
   const centre = RING_SIZE3 / 2;
-  return /* @__PURE__ */ jsxs12("svg", {
+  return /* @__PURE__ */ jsxs13("svg", {
     viewBox: `0 0 ${RING_SIZE3} ${RING_SIZE3}`,
     width: size,
     height: size,
@@ -2215,7 +2169,7 @@ function ProgressRing({
     className: cn2(PROGRESS_RING_CLASSES.root, colorClass, className),
     style: colorHex ? { color: colorHex } : undefined,
     children: [
-      /* @__PURE__ */ jsx30("circle", {
+      /* @__PURE__ */ jsx31("circle", {
         cx: centre,
         cy: centre,
         r: RING_RADIUS3,
@@ -2224,7 +2178,7 @@ function ProgressRing({
         strokeWidth: RING_STROKE3,
         opacity: 0.2
       }),
-      done > 0 && /* @__PURE__ */ jsx30("circle", {
+      done > 0 && /* @__PURE__ */ jsx31("circle", {
         "data-slot": "progress-ring-arc",
         cx: centre,
         cy: centre,
@@ -2242,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 jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 function ScrollArea({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs13(ScrollAreaPrimitive.Root, {
+  return /* @__PURE__ */ jsxs14(ScrollAreaPrimitive.Root, {
     "data-slot": "scroll-area",
     className: cn2(SCROLL_AREA_CLASSES.root, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx31(ScrollAreaPrimitive.Viewport, {
+      /* @__PURE__ */ jsx32(ScrollAreaPrimitive.Viewport, {
         "data-slot": "scroll-area-viewport",
         className: SCROLL_AREA_CLASSES.viewport,
         children
       }),
-      /* @__PURE__ */ jsx31(ScrollBar, {}),
-      /* @__PURE__ */ jsx31(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ jsx32(ScrollBar, {}),
+      /* @__PURE__ */ jsx32(ScrollAreaPrimitive.Corner, {})
     ]
   });
 }
 function ScrollBar({ className, orientation = `vertical`, ...props }) {
-  return /* @__PURE__ */ jsx31(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__ */ jsx31(ScrollAreaPrimitive.ScrollAreaThumb, {
+    children: /* @__PURE__ */ jsx32(ScrollAreaPrimitive.ScrollAreaThumb, {
       "data-slot": "scroll-area-thumb",
       className: SCROLL_AREA_CLASSES.thumb
     })
@@ -2278,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 jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function Tabs({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Root, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Root, {
     "data-slot": "tabs",
     className: cn2(TABS_CLASSES.root, className),
     ...props
@@ -2293,7 +2247,7 @@ function TabsList({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.List, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.List, {
     "data-slot": "tabs-list",
     className: cn2(TABS_CLASSES.list, className),
     ...props
@@ -2303,7 +2257,7 @@ function TabsTrigger({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Trigger, {
     "data-slot": "tabs-trigger",
     className: cn2(TABS_CLASSES.trigger, className),
     ...props
@@ -2313,7 +2267,7 @@ function TabsContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx32(TabsPrimitive.Content, {
+  return /* @__PURE__ */ jsx33(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn2(TABS_CLASSES.content, className),
     ...props
@@ -2321,7 +2275,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 jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
 function SegmentedControl({
   value,
   onValueChange,
@@ -2332,38 +2286,38 @@ function SegmentedControl({
 }) {
   const triggers = options.map((option) => {
     const Glyph = option.icon;
-    return /* @__PURE__ */ jsxs14(TabsTrigger, {
+    return /* @__PURE__ */ jsxs15(TabsTrigger, {
       value: option.value,
       disabled: disabled || option.disabled,
       className: SEGMENTED_CONTROL_CLASSES.trigger,
       children: [
-        Glyph ? /* @__PURE__ */ jsx33(Glyph, {
+        Glyph ? /* @__PURE__ */ jsx34(Glyph, {
           "aria-hidden": true
         }) : null,
         option.label
       ]
     }, option.value);
   });
-  return /* @__PURE__ */ jsx33(Tabs, {
+  return /* @__PURE__ */ jsx34(Tabs, {
     "data-slot": "segmented-control",
     value,
     onValueChange: (next) => onValueChange(next),
-    children: /* @__PURE__ */ jsx33(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 jsx34, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
 "use client";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Root, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Root, {
     "data-slot": "select",
     ...props
   });
@@ -2371,7 +2325,7 @@ function Select({
 function SelectGroup({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Group, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Group, {
     "data-slot": "select-group",
     ...props
   });
@@ -2379,7 +2333,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Value, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Value, {
     "data-slot": "select-value",
     ...props
   });
@@ -2390,16 +2344,16 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ jsxs16(SelectPrimitive.Trigger, {
     "data-slot": "select-trigger",
     "data-size": size,
     className: cn2(SELECT_CLASSES.trigger, className),
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx34(SelectPrimitive.Icon, {
+      /* @__PURE__ */ jsx35(SelectPrimitive.Icon, {
         asChild: true,
-        children: /* @__PURE__ */ jsx34(ChevronDownIcon2, {
+        children: /* @__PURE__ */ jsx35(ChevronDownIcon2, {
           className: SELECT_CLASSES.triggerIcon
         })
       })
@@ -2413,20 +2367,20 @@ function SelectContent({
   align = `center`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Portal, {
-    children: /* @__PURE__ */ jsxs15(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__ */ jsx34(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx34(SelectPrimitive.Viewport, {
+        /* @__PURE__ */ jsx35(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx35(SelectPrimitive.Viewport, {
           className: cn2(SELECT_CLASSES.viewport, position === `popper` && SELECT_CLASSES.viewportPopper),
           children
         }),
-        /* @__PURE__ */ jsx34(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx35(SelectScrollDownButton, {})
       ]
     })
   });
@@ -2435,7 +2389,7 @@ function SelectLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Label, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Label, {
     "data-slot": "select-label",
     className: cn2(SELECT_CLASSES.label, className),
     ...props
@@ -2446,21 +2400,21 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(SelectPrimitive.Item, {
+  return /* @__PURE__ */ jsxs16(SelectPrimitive.Item, {
     "data-slot": "select-item",
     className: cn2(SELECT_CLASSES.item, className),
     ...props,
     children: [
-      /* @__PURE__ */ jsx34("span", {
+      /* @__PURE__ */ jsx35("span", {
         "data-slot": "select-item-indicator",
         className: SELECT_CLASSES.itemIndicator,
-        children: /* @__PURE__ */ jsx34(SelectPrimitive.ItemIndicator, {
-          children: /* @__PURE__ */ jsx34(CheckIcon3, {
+        children: /* @__PURE__ */ jsx35(SelectPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsx35(CheckIcon2, {
             className: SELECT_CLASSES.itemCheck
           })
         })
       }),
-      /* @__PURE__ */ jsx34(SelectPrimitive.ItemText, {
+      /* @__PURE__ */ jsx35(SelectPrimitive.ItemText, {
         children
       })
     ]
@@ -2470,7 +2424,7 @@ function SelectSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.Separator, {
     "data-slot": "select-separator",
     className: cn2(SELECT_CLASSES.separator, className),
     ...props
@@ -2480,11 +2434,11 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.ScrollUpButton, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.ScrollUpButton, {
     "data-slot": "select-scroll-up-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx34(ChevronUpIcon, {
+    children: /* @__PURE__ */ jsx35(ChevronUpIcon, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2493,11 +2447,11 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx34(SelectPrimitive.ScrollDownButton, {
+  return /* @__PURE__ */ jsx35(SelectPrimitive.ScrollDownButton, {
     "data-slot": "select-scroll-down-button",
     className: cn2(SELECT_CLASSES.scrollButton, className),
     ...props,
-    children: /* @__PURE__ */ jsx34(ChevronDownIcon2, {
+    children: /* @__PURE__ */ jsx35(ChevronDownIcon2, {
       className: SELECT_CLASSES.scrollIcon
     })
   });
@@ -2505,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 jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 "use client";
 function Separator({
   className,
@@ -2513,7 +2467,7 @@ function Separator({
   decorative = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx35(SeparatorPrimitive.Root, {
+  return /* @__PURE__ */ jsx36(SeparatorPrimitive.Root, {
     "data-slot": "separator",
     decorative,
     orientation,
@@ -2523,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 jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx36("div", {
+  return /* @__PURE__ */ jsx37("div", {
     "data-slot": "skeleton",
     className: cn2(SKELETON_CLASSES.root, className),
     ...props
@@ -2534,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 jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Spinner({
   size = 10,
   label = `Loading`,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(LoaderCircle, {
+  return /* @__PURE__ */ jsx38(LoaderCircle, {
     "data-slot": "spinner",
     "data-testid": "feedback-spinner",
     "aria-label": label,
@@ -2555,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 jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Switch({
   className,
   size = `default`,
   ...props
 }) {
-  return /* @__PURE__ */ jsx38(SwitchPrimitive.Root, {
+  return /* @__PURE__ */ jsx39(SwitchPrimitive.Root, {
     "data-slot": "switch",
     "data-size": size,
     className: cn2(SWITCH_CLASSES.root, className),
     ...props,
-    children: /* @__PURE__ */ jsx38(SwitchPrimitive.Thumb, {
+    children: /* @__PURE__ */ jsx39(SwitchPrimitive.Thumb, {
       "data-slot": "switch-thumb",
       className: cn2(SWITCH_CLASSES.thumb)
     })
@@ -2574,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 jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx40("div", {
     "data-slot": "table-container",
     className: TABLE_CLASSES.container,
-    children: /* @__PURE__ */ jsx39("table", {
+    children: /* @__PURE__ */ jsx40("table", {
       "data-slot": "table",
       className: cn2(TABLE_CLASSES.root, className),
       ...props
@@ -2587,49 +2541,49 @@ function Table({ className, ...props }) {
   });
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("thead", {
+  return /* @__PURE__ */ jsx40("thead", {
     "data-slot": "table-header",
     className: cn2(TABLE_CLASSES.header, className),
     ...props
   });
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tbody", {
+  return /* @__PURE__ */ jsx40("tbody", {
     "data-slot": "table-body",
     className: cn2(TABLE_CLASSES.body, className),
     ...props
   });
 }
 function TableFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tfoot", {
+  return /* @__PURE__ */ jsx40("tfoot", {
     "data-slot": "table-footer",
     className: cn2(TABLE_CLASSES.footer, className),
     ...props
   });
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("tr", {
+  return /* @__PURE__ */ jsx40("tr", {
     "data-slot": "table-row",
     className: cn2(TABLE_CLASSES.row, className),
     ...props
   });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("th", {
+  return /* @__PURE__ */ jsx40("th", {
     "data-slot": "table-head",
     className: cn2(TABLE_CLASSES.head, className),
     ...props
   });
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("td", {
+  return /* @__PURE__ */ jsx40("td", {
     "data-slot": "table-cell",
     className: cn2(TABLE_CLASSES.cell, className),
     ...props
   });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx39("caption", {
+  return /* @__PURE__ */ jsx40("caption", {
     "data-slot": "table-caption",
     className: cn2(TABLE_CLASSES.caption, className),
     ...props
@@ -2637,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 jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx40("textarea", {
+  return /* @__PURE__ */ jsx41("textarea", {
     "data-slot": "textarea",
     className: cn2(TEXTAREA_CLASSES.root, className),
     ...props
@@ -2657,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 jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs17 } from "react/jsx-runtime";
 var KIND_ICONS = {
   success: CircleCheck,
   error: CircleX,
@@ -2671,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({});
@@ -2693,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__ */ jsx41("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__ */ jsx41("ol", {
+    children: /* @__PURE__ */ jsx42("ol", {
       "data-slot": "toast-list",
       "data-expanded": open ? `true` : `false`,
       className: cn2(TOAST_CLASSES.list, TOAST_CLASSES.listPlacement[placement]),
@@ -2720,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__ */ jsxs16("li", {
+        return /* @__PURE__ */ jsxs17("li", {
           ref: (el) => {
             if (el)
               items.current.set(t.id, el);
@@ -2739,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__ */ jsx41("div", {
+            Icon && /* @__PURE__ */ jsx42("div", {
               className: TOAST_CLASSES.iconSlot,
-              children: /* @__PURE__ */ jsx41(Icon, {
+              children: /* @__PURE__ */ jsx42(Icon, {
                 "data-toast-kind": t.kind,
                 className: cn2(TOAST_CLASSES.icon, TOAST_CLASSES.kindIcon[t.kind])
               })
             }),
-            /* @__PURE__ */ jsxs16("div", {
+            /* @__PURE__ */ jsxs17("div", {
               className: TOAST_CLASSES.content,
               children: [
-                /* @__PURE__ */ jsx41("div", {
+                /* @__PURE__ */ jsx42("div", {
                   "data-slot": "toast-title",
                   className: TOAST_CLASSES.title,
                   children: t.title
                 }),
-                t.description !== undefined && /* @__PURE__ */ jsx41("div", {
+                t.description !== undefined && /* @__PURE__ */ jsx42("div", {
                   "data-slot": "toast-description",
                   className: TOAST_CLASSES.description,
                   children: t.description
                 })
               ]
             }),
-            t.action && /* @__PURE__ */ jsx41("button", {
+            t.action && /* @__PURE__ */ jsx42("button", {
               type: "button",
               "data-slot": "toast-action",
               className: TOAST_CLASSES.action,
@@ -2771,13 +2725,13 @@ function Toaster({ store = toastStore, touch, closeLabel = `Close`, className, .
               },
               children: t.action.label
             }),
-            /* @__PURE__ */ jsx41("button", {
+            /* @__PURE__ */ jsx42("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__ */ jsx42(XIcon3, {})
             })
           ]
         }, t.id);
@@ -2788,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 jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delayDuration,
     ...props
@@ -2802,7 +2756,7 @@ function TooltipProvider({
 function Tooltip({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Root, {
     "data-slot": "tooltip",
     ...props
   });
@@ -2810,7 +2764,7 @@ function Tooltip({
 function TooltipTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -2821,8 +2775,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(TooltipPrimitive.Portal, {
-    children: /* @__PURE__ */ jsx42(TooltipPrimitive.Content, {
+  return /* @__PURE__ */ jsx43(TooltipPrimitive.Portal, {
+    children: /* @__PURE__ */ jsx43(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
       className: cn2(TOOLTIP_CLASSES.content, className),
@@ -2854,7 +2808,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 +2819,16 @@ import {
   voiceWaveName,
   voiceWaveQuiet
 } from "@exponential_app/eui/web/primitives";
-import { jsx as jsx43, jsxs as jsxs17 } 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 = 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 +2840,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__ */ jsxs18("span", {
     "data-slot": "voice-wave",
     "data-activity": activity,
     "data-size": size,
@@ -2901,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__ */ jsx43("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__ */ jsx43("path", {
+        children: wave.rings.map((ring, k) => /* @__PURE__ */ jsx44("path", {
           ref: (el) => {
             paths.current[k] = el;
           },
@@ -2923,7 +2877,7 @@ function VoiceWave({ activity = `idle`, level = 0, bands, size = `md`, label, cl
           strokeLinejoin: "round"
         }, ring.part))
       }),
-      present ? /* @__PURE__ */ jsx43("span", {
+      present ? /* @__PURE__ */ jsx44("span", {
         ref: childEl,
         "data-slot": "voice-wave-child",
         "aria-hidden": wave.childSize > 0 ? undefined : true,
@@ -2961,7 +2915,8 @@ export {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  Button,
+  Button2 as Button,
+  CAROUSEL_GEOMETRY,
   CODE_TOKEN_CLASS,
   Calendar,
   CalendarDayButton,
@@ -2972,6 +2927,8 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CarouselCounter,
+  CarouselThumbnails,
   Checkbox,
   ChoiceTiles2 as ChoiceTiles,
   ChoiceTilesFrame2 as ChoiceTilesFrame,
@@ -3014,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,
@@ -3061,7 +3018,11 @@ export {
   MOBILE_PAGE,
   MOBILE_SHEET,
   MOBILE_SHEET_FULL,
+  MOSAIC_GEOMETRY,
   Meter,
+  Mosaic,
+  OUTLINE_GEOMETRY,
+  Outline,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -3126,9 +3087,13 @@ 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,
   choiceValues2 as choiceValues,
@@ -3137,6 +3102,8 @@ export {
   dockPileGeometry2 as dockPileGeometry,
   getInitials2 as getInitials,
   middleTruncate,
+  mosaicTiles2 as mosaicTiles,
+  outlineCountText2 as outlineCountText,
   progressRingPercent2 as progressRingPercent,
   ringGeometry2 as ringGeometry,
   shouldDismissSheet,
@@ -3145,10 +3112,11 @@ export {
   toastStackGeometry2 as toastStackGeometry,
   toastStore,
   useIsMobile,
-  useMediaQuery,
+  useMediaQuery2 as useMediaQuery,
   useSheetDrag,
-  useSheetDragHandleProps
+  useSheetDragHandleProps,
+  useZoomableImage2 as useZoomableImage
 };
 
-//# debugId=F72B037A10E5B0A264756E2164756E21
+//# debugId=A2DF99790241EFFB64756E2164756E21
 //# sourceMappingURL=index.js.map