@exponential_app/eui-solid 0.2.1 → 0.4.0

package/dist/primitives.js

@@ -1,18 +1,19 @@
-import { spread, mergeProps, template, createComponent, Dynamic, memo, insert, effect, className, delegateEvents, setAttribute, style, use } from "solid-js/web";
-import { splitProps, createContext, createSignal, untrack, Show, onMount, useContext, createEffect, on, onCleanup, children, mergeProps as mergeProps$1, createMemo, For, createUniqueId, from, Index } from "solid-js";
-import { cn, alertVariants, ALERT_CLASSES, ALERT_DIALOG_CLASSES, AVATAR_CLASSES, avatarFallbackColors, avatarFallbackHue, BADGE_CLASSES, badgeLabel, BREADCRUMB_CLASSES, buttonVariants, CALENDAR_CLASSES, CARD_CLASSES, CHECKBOX_CLASSES, choiceValues, CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, codeBlockVariants, CODE_BLOCK_CLASSES, codeBlockLineVariants, CODE_TOKEN_CLASS, COMMAND_LABEL_STYLE, createCommandStore, COMMAND_CLASSES, COMMAND_SELECT_EVENT, commandItemValue, observeCommandListHeight, CONTEXT_RING_CLASSES, RING_TONE_CLASS, RING_SIZE, RING_RADIUS, RING_STROKE, ringGeometry, SHEET_CHROME_CLASSES, isTypeaheadPortalInteraction, SHEET_CLASSES, DIALOG_CLASSES, DIALOG_PHONE_QUERY, MOBILE_ARMS, DISCLOSURE_HEADER_CLASSES, DOCK_CARD_CLASSES, dockPileGeometry, DOCK_PILE_CLASSES, DROPDOWN_MENU_CLASSES, ICON_DISC_CLASSES, EMPTY_STATE_CLASSES, GLASS_CARD_CLASSES, HOVER_CARD_DELAYS, HOVER_CARD_CLASSES, INPUT_CLASSES, KBD_CLASSES, LABEL_CLASSES, PROGRESS_CLASSES, progressIndicatorTransform, METER_CLASSES, POPOVER_CLASSES, PROGRESS_RING_CLASSES, progressRingPercent, SCROLL_AREA_CLASSES, scrollAreaRootStyle, SCROLL_AREA_VIEWPORT_CSS, scrollAreaViewportStyle, SCROLL_AREA_CONTENT_STYLE, scrollAreaVisibility, SCROLL_AREA_SCROLL_INITIAL, scrollAreaCornerStyle, scrollAreaThumbOffset, scrollAreaScrollbarStyle, scrollAreaThumbSize, SCROLL_AREA_THUMB_STYLE, SCROLL_AREA_SCROLL_MACHINE, scrollAreaThumbRatio, scrollAreaScrollFromPointer, TABS_CLASSES, SEGMENTED_CONTROL_CLASSES, SELECT_CLASSES, SELECT_INLINE, selectPopperContentStyle, selectItemAlignedContentStyle, SELECT_VIEWPORT_CSS, SELECT_VIEWPORT_ATTR, SEPARATOR_CLASSES, SKELETON_CLASSES, SPINNER_CLASSES, SWITCH_CLASSES, TABLE_CLASSES, TEXTAREA_CLASSES, createToastStore, TOAST_TOUCH_QUERY, toastPlacement, layoutSize, toastStackGeometry, TOAST_CLASSES, TOOLTIP_CLASSES, voiceWaveAnimates, voiceWaveClock, VOICE_WAVE_CLASSES, voiceWaveFitChild, VOICE_WAVE_SIZE_PX, voiceWaveQuiet, voiceWaveName } from "@exponential_app/eui/web/primitives";
-import { AVATAR_HUE_COUNT, BARE_FIELD_CLASS, CODE_TOKEN_CLASS as CODE_TOKEN_CLASS2, DOCK_CARD_CLASSES as DOCK_CARD_CLASSES2, DOCK_PILE_CLASSES as DOCK_PILE_CLASSES2, DOCK_PILE_CONSTANTS, EMPTY_STATE_SIZES, FIELD_CHROME_CLASS, GLASS_CARD_CLASS, GLASS_CARD_CLASSES as GLASS_CARD_CLASSES2, ICON_DISC_TONES, MENU_CHECK_ITEM_CLASS, MENU_CHEVRON_CLASS, MENU_CONTENT_CLASS, MENU_ITEM_CLASS, MENU_LABEL_CLASS, MENU_SEPARATOR_CLASS, MENU_SHORTCUT_CLASS, MENU_SUB_TRIGGER_CLASS, MENU_SURFACE_CLASS, MENU_VALUE_CLASS, MOBILE_ALERT, MOBILE_ARMS as MOBILE_ARMS2, MOBILE_PAGE, MOBILE_SHEET, MOBILE_SHEET_FULL, RING_RADIUS as RING_RADIUS2, RING_SIZE as RING_SIZE2, RING_STROKE as RING_STROKE2, RING_TONE_CLASS as RING_TONE_CLASS2, SEGMENTED_ITEM, SEGMENTED_LIST, SEGMENTED_ROW, SEGMENTED_ROW_COMPACT, SEGMENTED_TAB, TOAST_CONSTANTS, TOAST_KINDS, TOAST_TOUCH_QUERY as TOAST_TOUCH_QUERY2, alertVariants as alertVariants2, avatarHueIndex, buttonVariants as buttonVariants2, choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2, cn as cn2, createToastStore as createToastStore2, dockPileGeometry as dockPileGeometry2, getInitials, middleTruncate, progressRingPercent as progressRingPercent2, ringGeometry as ringGeometry2, toastPlacement as toastPlacement2, toastStackGeometry as toastStackGeometry2 } from "@exponential_app/eui/web/primitives";
-import { i as createPresence, L as LayerPortal, j as createLayer, l as bindStyle, u as useFocusGuards, s as useModalEffects, q as useScrollLock, p as createFocusScope, g as createImageLoadingStatus, c as css, P as PaintIcon, f as createInForm, e as createElementSize, T as bubbleOnChange, H as createMediaQuery$1, n as useKeyboardTracking, M as MenuContent, v as createMenuRow, w as createSelectable, k as Popper, m as LayerContext, x as popperContentStyle, r as rovingFocusFirst, U as focusIntent, W as wrapArray, N as NativeSelect, G as SELECTION_KEYS, z as radixTypeahead, A as findNextItem, O as OPEN_KEYS, F as mountIn, X as styleWriter, Y as setChecked, V as VisuallyHidden, y as inPolygon, o as graceArea } from "./chunks/image-loading-status--T9ny7b0.js";
+import { spread, mergeProps, template, createComponent, memo, insert, effect, className, Dynamic, delegateEvents, setAttribute, style, use } from "solid-js/web";
+import { splitProps, createContext, useContext, createSignal, createEffect, on, onCleanup, Show, children, mergeProps as mergeProps$1, createMemo, untrack, For, createRenderEffect, createUniqueId, onMount, from, Index } from "solid-js";
+import { cn, alertVariants, ALERT_CLASSES, ALERT_DIALOG_CLASSES, AVATAR_CLASSES, avatarFallbackColors, avatarFallbackHue, BADGE_CLASSES, badgeLabel, BREADCRUMB_CLASSES, CALENDAR_CLASSES, buttonVariants, CARD_CLASSES, CAROUSEL_CLASSES, carouselCounterText, CHECKBOX_CLASSES, choiceValues, CHOICE_TILES_CLASSES, choiceColumns, choiceToggle, codeBlockVariants, CODE_BLOCK_CLASSES, codeBlockLineVariants, CODE_TOKEN_CLASS, COMMAND_LABEL_STYLE, createCommandStore, COMMAND_CLASSES, COMMAND_SELECT_EVENT, commandItemValue, observeCommandListHeight, CONTEXT_RING_CLASSES, RING_TONE_CLASS, RING_SIZE, RING_RADIUS, RING_STROKE, ringGeometry, SHEET_CHROME_CLASSES, isTypeaheadPortalInteraction, SHEET_CLASSES, DIALOG_CLASSES, DIALOG_PHONE_QUERY, MOBILE_ARMS, DISCLOSURE_HEADER_CLASSES, DOCK_CARD_CLASSES, dockPileGeometry, DOCK_PILE_CLASSES, ICON_DISC_CLASSES, EMPTY_STATE_CLASSES, GLASS_CARD_CLASSES, HOVER_CARD_DELAYS, HOVER_CARD_CLASSES, INPUT_CLASSES, KBD_CLASSES, LABEL_CLASSES, PROGRESS_CLASSES, progressIndicatorTransform, METER_CLASSES, MOSAIC_CLASSES, mosaicTiles, OUTLINE_CLASSES, outlineCountText, POPOVER_CLASSES, PROGRESS_RING_CLASSES, progressRingPercent, SCROLL_AREA_CLASSES, scrollAreaRootStyle, SCROLL_AREA_VIEWPORT_CSS, scrollAreaViewportStyle, SCROLL_AREA_CONTENT_STYLE, scrollAreaVisibility, SCROLL_AREA_SCROLL_INITIAL, scrollAreaCornerStyle, scrollAreaThumbOffset, scrollAreaScrollbarStyle, scrollAreaThumbSize, SCROLL_AREA_THUMB_STYLE, SCROLL_AREA_SCROLL_MACHINE, scrollAreaThumbRatio, scrollAreaScrollFromPointer, TABS_CLASSES, SEGMENTED_CONTROL_CLASSES, SELECT_CLASSES, SELECT_INLINE, selectPopperContentStyle, selectItemAlignedContentStyle, SELECT_VIEWPORT_CSS, SELECT_VIEWPORT_ATTR, SEPARATOR_CLASSES, SKELETON_CLASSES, SPINNER_CLASSES, SWITCH_CLASSES, TABLE_CLASSES, TEXTAREA_CLASSES, createToastStore, TOAST_TOUCH_QUERY, toastPlacement, layoutSize, toastStackGeometry, TOAST_CLASSES, TOOLTIP_CLASSES, voiceWaveAnimates, voiceWaveClock, VOICE_WAVE_CLASSES, voiceWaveFitChild, VOICE_WAVE_SIZE_PX, voiceWaveQuiet, voiceWaveName } from "@exponential_app/eui/web/primitives";
+import { AVATAR_HUE_COUNT, BARE_FIELD_CLASS, CAROUSEL_GEOMETRY, CODE_TOKEN_CLASS as CODE_TOKEN_CLASS2, DOCK_CARD_CLASSES as DOCK_CARD_CLASSES2, DOCK_PILE_CLASSES as DOCK_PILE_CLASSES2, DOCK_PILE_CONSTANTS, EMPTY_STATE_SIZES, FIELD_CHROME_CLASS, GLASS_CARD_CLASS, GLASS_CARD_CLASSES as GLASS_CARD_CLASSES2, ICON_DISC_TONES, MENU_CHECK_ITEM_CLASS, MENU_CHEVRON_CLASS, MENU_CONTENT_CLASS, MENU_ITEM_CLASS, MENU_LABEL_CLASS, MENU_SEPARATOR_CLASS, MENU_SHORTCUT_CLASS, MENU_SUB_TRIGGER_CLASS, MENU_SURFACE_CLASS, MENU_VALUE_CLASS, MOBILE_ALERT, MOBILE_ARMS as MOBILE_ARMS2, MOBILE_PAGE, MOBILE_SHEET, MOBILE_SHEET_FULL, MOSAIC_GEOMETRY, OUTLINE_GEOMETRY, RING_RADIUS as RING_RADIUS2, RING_SIZE as RING_SIZE2, RING_STROKE as RING_STROKE2, RING_TONE_CLASS as RING_TONE_CLASS2, SEGMENTED_ITEM, SEGMENTED_LIST, SEGMENTED_ROW, SEGMENTED_ROW_COMPACT, SEGMENTED_TAB, TOAST_CONSTANTS, TOAST_KINDS, TOAST_TOUCH_QUERY as TOAST_TOUCH_QUERY2, alertVariants as alertVariants2, avatarHueIndex, buttonVariants as buttonVariants2, carouselCounterText as carouselCounterText2, choiceColumns as choiceColumns2, choiceToggle as choiceToggle2, choiceValues as choiceValues2, cn as cn2, createToastStore as createToastStore2, dockPileGeometry as dockPileGeometry2, getInitials, middleTruncate, mosaicTiles as mosaicTiles2, outlineCountText as outlineCountText2, progressRingPercent as progressRingPercent2, ringGeometry as ringGeometry2, toastPlacement as toastPlacement2, toastStackGeometry as toastStackGeometry2 } from "@exponential_app/eui/web/primitives";
+import { U as DialogRoot, W as DialogClosePart, X as mergeRefs, Y as DialogContentPart, _ as DialogDescriptionPart, $ as DialogOverlayPart, a0 as DialogPortalPart, a1 as DialogTitlePart, a2 as DialogTriggerPart, g as createImageLoadingStatus, c as css, P as PaintIcon, a3 as Button, f as createInForm, i as createPresence, e as createElementSize, a4 as bubbleOnChange, a5 as useDialogContext, a6 as callRef, J as createMediaQuery, l as bindStyle, a7 as createOpenState, a8 as composeHandlers, j as createLayer, k as Popper, m as LayerContext, x as popperContentStyle, a9 as styleObject, aa as layerPointerEvents, ab as noteLayerMount, ac as layerMountedThisTask, ad as stateOf$1, ae as createId, af as callHandler$2, n as useFocusGuards, s as useModalEffects, p as createFocusScope, r as rovingFocusFirst, ag as focusIntent, ah as wrapArray, N as NativeSelect, G as SELECTION_KEYS, z as radixTypeahead, A as findNextItem, O as OPEN_KEYS, F as mountIn, ai as styleWriter, aj as setChecked, V as VisuallyHidden, y as inPolygon, o as graceArea, ak as createMediaQuery$1 } from "./chunks/zoomable-image-CmoMEUF6.js";
+import { al, am, an, ao, ap, aq, ar, as, at, au, av, aw, ax, ay, az, aA, Z, aB, H } from "./chunks/zoomable-image-CmoMEUF6.js";
 import "aria-hidden";
 import "@floating-ui/dom";
 import "@exponential_app/eui/web";
 import { tokenizeCode, voiceWave, voiceWavePath, voiceWaveChildBox } from "@exponential_app/eui";
-import { Ellipsis, ChevronRight, ChevronLeft, ChevronDown, Check, ImageIcon, Copy, Search, CircleX, X, Circle, ChevronUp, LoaderCircle, TriangleAlert, Info, CircleCheck } from "lucide-solid";
-var _tmpl$$E = /* @__PURE__ */ template(`<div data-slot=alert role=alert>`), _tmpl$2$q = /* @__PURE__ */ template(`<div data-slot=alert-title>`), _tmpl$3$k = /* @__PURE__ */ template(`<div data-slot=alert-description>`);
+import { Ellipsis, ChevronRight, ChevronLeft, ChevronDown, Check, ImageIcon, Copy, Search, CircleX, X, ChevronUp, LoaderCircle, TriangleAlert, Info, CircleCheck } from "lucide-solid";
+var _tmpl$$F = /* @__PURE__ */ template(`<div data-slot=alert role=alert>`), _tmpl$2$r = /* @__PURE__ */ template(`<div data-slot=alert-title>`), _tmpl$3$l = /* @__PURE__ */ template(`<div data-slot=alert-description>`);
 function Alert(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`]);
   return (() => {
-    var _el$ = _tmpl$$E();
+    var _el$ = _tmpl$$F();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(alertVariants({
@@ -26,7 +27,7 @@ function Alert(props) {
 function AlertTitle(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$q();
+    var _el$2 = _tmpl$2$r();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.title, local.class);
@@ -38,7 +39,7 @@ function AlertTitle(props) {
 function AlertDescription(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$k();
+    var _el$3 = _tmpl$3$l();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(ALERT_CLASSES.description, local.class);
@@ -47,313 +48,7 @@ function AlertDescription(props) {
     return _el$3;
   })();
 }
-var _tmpl$$D = /* @__PURE__ */ template(`<div>`), _tmpl$2$p = /* @__PURE__ */ template(`<div tabindex=-1>`), _tmpl$3$j = /* @__PURE__ */ template(`<h2>`), _tmpl$4$e = /* @__PURE__ */ template(`<p>`);
-function callHandler$2(handler, event) {
-  if (typeof handler === `function`) handler(event);
-  else if (Array.isArray(handler) && typeof handler[0] === `function`) handler[0](handler[1], event);
-}
-function composeHandlers(user, ours, checkForDefaultPrevented = true) {
-  return (event) => {
-    callHandler$2(user, event);
-    if (!checkForDefaultPrevented || !event.defaultPrevented) ours(event);
-  };
-}
-function callRef(ref, el) {
-  if (typeof ref === `function`) ref(el);
-}
-function mergeRefs(...refs) {
-  return (el) => {
-    for (const r of refs) if (typeof r === `function`) r(el);
-  };
-}
-function styleObject(style2) {
-  if (!style2 || typeof style2 !== `object`) return {};
-  const out = {};
-  for (const [k, v] of Object.entries(style2)) out[k] = v === void 0 || v === null ? void 0 : String(v);
-  return out;
-}
-function createOpenState(o) {
-  const [inner, setInner] = createSignal(untrack(() => o.defaultOpen) ?? false);
-  const open = () => o.open() ?? inner();
-  const set = (next) => {
-    const prev = untrack(open);
-    if (next !== prev) untrack(o.onOpenChange)?.(next);
-    if (untrack(o.open) === void 0) setInner(next);
-  };
-  return [open, set];
-}
-const stateOf$1 = (open) => open ? `open` : `closed`;
-let layerMounted = false;
-function noteLayerMount() {
-  if (layerMounted) return;
-  layerMounted = true;
-  queueMicrotask(() => layerMounted = false);
-}
-function layerMountedThisTask() {
-  return layerMounted;
-}
-function layerPointerEvents(layer, registered, lag) {
-  return lag && !registered ? void 0 : layer.pointerEvents(registered);
-}
-const DialogContext = createContext();
-function useDialogContext(part2) {
-  const ctx = useContext(DialogContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`Dialog\``);
-  return ctx;
-}
-function DialogRoot(props) {
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  const value = {
-    open,
-    setOpen,
-    modal: untrack(() => props.modal) ?? true,
-    contentId: `radix-${createId()}`,
-    titleId: `radix-${createId()}`,
-    descriptionId: `radix-${createId()}`,
-    trigger,
-    setTrigger
-  };
-  return createComponent(DialogContext.Provider, {
-    value,
-    get children() {
-      return props.children;
-    }
-  });
-}
-let idCounter = 0;
-function createId() {
-  return `s${++idCounter}`;
-}
-function DialogTriggerPart(props) {
-  const ctx = useDialogContext(`DialogTrigger`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    type: "button",
-    "aria-haspopup": "dialog",
-    get ["aria-expanded"]() {
-      return ctx.open() ? `true` : `false`;
-    },
-    get ["aria-controls"]() {
-      return ctx.contentId;
-    },
-    get ["data-state"]() {
-      return stateOf$1(ctx.open());
-    }
-  }, rest, {
-    ref(r$) {
-      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
-      typeof _ref$ === "function" && _ref$(r$);
-    },
-    get onClick() {
-      return composeHandlers(local.onClick, () => ctx.setOpen(!untrack(ctx.open)));
-    }
-  }));
-}
-function DialogClosePart(props) {
-  const ctx = useDialogContext(`DialogClose`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `onClick`]);
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    type: "button"
-  }, rest, {
-    ref(r$) {
-      var _ref$2 = local.ref;
-      typeof _ref$2 === "function" ? _ref$2(r$) : local.ref = r$;
-    },
-    get onClick() {
-      return composeHandlers(local.onClick, () => ctx.setOpen(false));
-    }
-  }));
-}
-function DialogPortalPart(props) {
-  const [mounted, setMounted] = createSignal(false);
-  onMount(() => setMounted(true));
-  return createComponent(LayerPortal, {
-    get mount() {
-      return memo(() => props.container !== void 0)() ? props.container : memo(() => !!mounted())() ? document.body : null;
-    },
-    get children() {
-      return props.children;
-    }
-  });
-}
-function DialogOverlayPart(props) {
-  const ctx = useDialogContext(`DialogOverlay`);
-  const presence = createPresence(ctx.open);
-  const [local, rest] = splitProps(props, [`style`, `ref`]);
-  const Overlay = () => {
-    const el = (() => {
-      var _el$ = _tmpl$$D();
-      spread(_el$, mergeProps({
-        get ["data-state"]() {
-          return stateOf$1(ctx.open());
-        }
-      }, rest), false, false);
-      return _el$;
-    })();
-    presence.ref(el);
-    bindStyle(el, () => ({
-      "pointer-events": `auto`,
-      ...styleObject(local.style)
-    }));
-    callRef(local.ref, el);
-    onMount(() => useScrollLock());
-    return el;
-  };
-  return createComponent(Show, {
-    get when() {
-      return memo(() => !!ctx.modal)() && presence.mounted();
-    },
-    get children() {
-      return createComponent(Overlay, {});
-    }
-  });
-}
-function DialogContentPart(props) {
-  const ctx = useDialogContext(`DialogContent`);
-  const presence = createPresence(ctx.open);
-  const [local, rest] = splitProps(props, [`role`, `style`, `ref`, `children`, `onOpenAutoFocus`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onPointerDownOutside`, `onFocusOutside`, `onInteractOutside`, `onKeyDown`]);
-  const Content = () => {
-    const modal = ctx.modal;
-    let interactedOutside = false;
-    let pointerDownOutside = false;
-    const layer = createLayer({
-      disableOutsidePointerEvents: () => modal,
-      onEscapeKeyDown: (e) => local.onEscapeKeyDown?.(e),
-      onPointerDownOutside: (e) => {
-        local.onPointerDownOutside?.(e);
-        if (!modal || e.defaultPrevented) return;
-        const original = e.detail.originalEvent;
-        const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
-        if (original.button === 2 || ctrlLeftClick) e.preventDefault();
-      },
-      onFocusOutside: (e) => {
-        local.onFocusOutside?.(e);
-        if (modal && !e.defaultPrevented) e.preventDefault();
-      },
-      onInteractOutside: (e) => {
-        local.onInteractOutside?.(e);
-        if (modal) return;
-        if (!e.defaultPrevented) {
-          interactedOutside = true;
-          if (e.detail.originalEvent.type === `pointerdown`) pointerDownOutside = true;
-        }
-        const target = e.target;
-        if (target && ctx.trigger()?.contains(target)) e.preventDefault();
-        if (e.detail.originalEvent.type === `focusin` && pointerDownOutside) e.preventDefault();
-      },
-      onDismiss: () => ctx.setOpen(false)
-    });
-    const scope = createFocusScope({
-      trapped: () => modal && ctx.open(),
-      loop: true,
-      onMountAutoFocus: (e) => local.onOpenAutoFocus?.(e),
-      onUnmountAutoFocus: (e) => {
-        if (modal) {
-          local.onCloseAutoFocus?.(e);
-          if (e.defaultPrevented) return;
-          e.preventDefault();
-          ctx.trigger()?.focus();
-          return;
-        }
-        local.onCloseAutoFocus?.(e);
-        if (!e.defaultPrevented) {
-          if (!interactedOutside) ctx.trigger()?.focus();
-          e.preventDefault();
-        }
-        interactedOutside = false;
-        pointerDownOutside = false;
-      }
-    });
-    const [registered, setRegistered] = createSignal(false);
-    const lag = layerMountedThisTask();
-    const el = (() => {
-      var _el$2 = _tmpl$2$p();
-      spread(_el$2, mergeProps({
-        get role() {
-          return local.role ?? `dialog`;
-        },
-        get id() {
-          return ctx.contentId;
-        },
-        get ["aria-describedby"]() {
-          return ctx.descriptionId;
-        },
-        get ["aria-labelledby"]() {
-          return ctx.titleId;
-        },
-        get ["data-state"]() {
-          return stateOf$1(ctx.open());
-        }
-      }, rest, {
-        "onKeyDown": (e) => {
-          callHandler$2(local.onKeyDown, e);
-          scope.onKeyDown(e);
-        }
-      }), false, true);
-      insert(_el$2, () => local.children);
-      return _el$2;
-    })();
-    presence.ref(el);
-    bindStyle(el, () => ({
-      "pointer-events": layerPointerEvents(layer, registered(), lag),
-      ...styleObject(local.style)
-    }));
-    callRef(local.ref, el);
-    onMount(() => {
-      layer.attach(el);
-      setRegistered(true);
-      noteLayerMount();
-      scope.attach(el);
-      useFocusGuards();
-      if (modal) useModalEffects(el, false);
-    });
-    return el;
-  };
-  return createComponent(Show, {
-    get when() {
-      return presence.mounted();
-    },
-    get children() {
-      return createComponent(Content, {});
-    }
-  });
-}
-function DialogTitlePart(props) {
-  const ctx = useDialogContext(`DialogTitle`);
-  return (() => {
-    var _el$3 = _tmpl$3$j();
-    spread(_el$3, mergeProps({
-      get id() {
-        return ctx.titleId;
-      }
-    }, props), false, false);
-    return _el$3;
-  })();
-}
-function DialogDescriptionPart(props) {
-  const ctx = useDialogContext(`DialogDescription`);
-  return (() => {
-    var _el$4 = _tmpl$4$e();
-    spread(_el$4, mergeProps({
-      get id() {
-        return ctx.descriptionId;
-      }
-    }, props), false, false);
-    return _el$4;
-  })();
-}
-var _tmpl$$C = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$o = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
+var _tmpl$$E = /* @__PURE__ */ template(`<div data-slot=alert-dialog-header>`), _tmpl$2$q = /* @__PURE__ */ template(`<div data-slot=alert-dialog-footer>`);
 const CancelContext = createContext();
 function AlertDialog(props) {
   return createComponent(DialogRoot, mergeProps(props, {
@@ -421,7 +116,7 @@ function AlertDialogContent(props) {
 function AlertDialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$C();
+    var _el$ = _tmpl$$E();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.header, local.class);
@@ -433,7 +128,7 @@ function AlertDialogHeader(props) {
 function AlertDialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$o();
+    var _el$2 = _tmpl$2$q();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(ALERT_DIALOG_CLASSES.footer, local.class);
@@ -482,7 +177,7 @@ function AlertDialogCancel(props) {
     }
   }));
 }
-var _tmpl$$B = /* @__PURE__ */ template(`<span data-slot=avatar>`), _tmpl$2$n = /* @__PURE__ */ template(`<img data-slot=avatar-image>`), _tmpl$3$i = /* @__PURE__ */ template(`<span data-slot=avatar-fallback>`);
+var _tmpl$$D = /* @__PURE__ */ template(`<span data-slot=avatar>`), _tmpl$2$p = /* @__PURE__ */ template(`<img data-slot=avatar-image>`), _tmpl$3$k = /* @__PURE__ */ template(`<span data-slot=avatar-fallback>`);
 const AvatarContext = createContext();
 function Avatar(props) {
   const [local, rest] = splitProps(props, [`class`]);
@@ -493,7 +188,7 @@ function Avatar(props) {
       setStatus
     },
     get children() {
-      var _el$ = _tmpl$$B();
+      var _el$ = _tmpl$$D();
       spread(_el$, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.root, local.class);
@@ -517,7 +212,7 @@ function AvatarImage(props) {
       return status() === `loaded`;
     },
     get children() {
-      var _el$2 = _tmpl$2$n();
+      var _el$2 = _tmpl$2$p();
       spread(_el$2, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.image, local.class);
@@ -553,7 +248,7 @@ function AvatarFallback(props) {
       return memo(() => !!canRender())() && ctx.status() !== `loaded`;
     },
     get children() {
-      var _el$3 = _tmpl$3$i();
+      var _el$3 = _tmpl$3$k();
       spread(_el$3, mergeProps({
         get ["class"]() {
           return cn(AVATAR_CLASSES.fallback, hue() === void 0 && AVATAR_CLASSES.fallbackMuted, local.class);
@@ -566,7 +261,7 @@ function AvatarFallback(props) {
     }
   });
 }
-var _tmpl$$A = /* @__PURE__ */ template(`<span data-slot=badge>`);
+var _tmpl$$C = /* @__PURE__ */ template(`<span data-slot=badge>`);
 function Badge(props) {
   const [local, rest] = splitProps(props, [`count`, `max`, `tone`, `class`]);
   const tone = () => local.tone ?? `muted`;
@@ -575,7 +270,7 @@ function Badge(props) {
       return local.count > 0;
     },
     get children() {
-      var _el$ = _tmpl$$A();
+      var _el$ = _tmpl$$C();
       spread(_el$, mergeProps({
         get ["data-tone"]() {
           return tone();
@@ -589,10 +284,10 @@ function Badge(props) {
     }
   });
 }
-var _tmpl$$z = /* @__PURE__ */ template(`<nav aria-label=breadcrumb data-slot=breadcrumb>`), _tmpl$2$m = /* @__PURE__ */ template(`<ol data-slot=breadcrumb-list>`), _tmpl$3$h = /* @__PURE__ */ template(`<li data-slot=breadcrumb-item>`), _tmpl$4$d = /* @__PURE__ */ template(`<span data-slot=breadcrumb-page role=link aria-disabled=true aria-current=page>`), _tmpl$5$a = /* @__PURE__ */ template(`<li data-slot=breadcrumb-separator role=presentation aria-hidden=true>`), _tmpl$6$8 = /* @__PURE__ */ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span>More`);
+var _tmpl$$B = /* @__PURE__ */ template(`<nav aria-label=breadcrumb data-slot=breadcrumb>`), _tmpl$2$o = /* @__PURE__ */ template(`<ol data-slot=breadcrumb-list>`), _tmpl$3$j = /* @__PURE__ */ template(`<li data-slot=breadcrumb-item>`), _tmpl$4$f = /* @__PURE__ */ template(`<span data-slot=breadcrumb-page role=link aria-disabled=true aria-current=page>`), _tmpl$5$a = /* @__PURE__ */ template(`<li data-slot=breadcrumb-separator role=presentation aria-hidden=true>`), _tmpl$6$7 = /* @__PURE__ */ template(`<span data-slot=breadcrumb-ellipsis role=presentation aria-hidden=true><span>More`);
 function Breadcrumb(props) {
   return (() => {
-    var _el$ = _tmpl$$z();
+    var _el$ = _tmpl$$B();
     spread(_el$, props, false, false);
     return _el$;
   })();
@@ -600,7 +295,7 @@ function Breadcrumb(props) {
 function BreadcrumbList(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$m();
+    var _el$2 = _tmpl$2$o();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.list, local.class);
@@ -612,7 +307,7 @@ function BreadcrumbList(props) {
 function BreadcrumbItem(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$h();
+    var _el$3 = _tmpl$3$j();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.item, local.class);
@@ -636,7 +331,7 @@ function BreadcrumbLink(props) {
 function BreadcrumbPage(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$d();
+    var _el$4 = _tmpl$4$f();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.page, local.class);
@@ -664,7 +359,7 @@ function BreadcrumbSeparator(props) {
 function BreadcrumbEllipsis(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$6 = _tmpl$6$8(), _el$7 = _el$6.firstChild;
+    var _el$6 = _tmpl$6$7(), _el$7 = _el$6.firstChild;
     spread(_el$6, mergeProps({
       get ["class"]() {
         return cn(BREADCRUMB_CLASSES.ellipsis, local.class);
@@ -680,31 +375,7 @@ function BreadcrumbEllipsis(props) {
     return _el$6;
   })();
 }
-function Button(props) {
-  const [local, rest] = splitProps(props, [`class`, `variant`, `size`, `as`]);
-  const variant = () => local.variant ?? `default`;
-  const size = () => local.size ?? `default`;
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    "data-slot": "button",
-    get ["data-variant"]() {
-      return variant();
-    },
-    get ["data-size"]() {
-      return size();
-    },
-    get ["class"]() {
-      return cn(buttonVariants({
-        variant: variant(),
-        size: size(),
-        className: local.class
-      }));
-    }
-  }, rest));
-}
-var _tmpl$$y = /* @__PURE__ */ template(`<span><select></select><span aria-hidden=true>`), _tmpl$2$l = /* @__PURE__ */ template(`<option>`), _tmpl$3$g = /* @__PURE__ */ template(`<nav><button type=button></button><button type=button>`), _tmpl$4$c = /* @__PURE__ */ template(`<div role=status aria-live=polite>`), _tmpl$5$9 = /* @__PURE__ */ template(`<div data-slot=calendar><div>`), _tmpl$6$7 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$7$4 = /* @__PURE__ */ template(`<thead aria-hidden=true><tr>`), _tmpl$8$4 = /* @__PURE__ */ template(`<div><div></div><table role=grid><tbody>`), _tmpl$9$3 = /* @__PURE__ */ template(`<div><span role=status aria-live=polite>`), _tmpl$0$3 = /* @__PURE__ */ template(`<span>`), _tmpl$1$1 = /* @__PURE__ */ template(`<span role=status aria-live=polite>`), _tmpl$10$1 = /* @__PURE__ */ template(`<td><div>`), _tmpl$11$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$12 = /* @__PURE__ */ template(`<td role=gridcell>`);
+var _tmpl$$A = /* @__PURE__ */ template(`<span><select></select><span aria-hidden=true>`), _tmpl$2$n = /* @__PURE__ */ template(`<option>`), _tmpl$3$i = /* @__PURE__ */ template(`<nav><button type=button></button><button type=button>`), _tmpl$4$e = /* @__PURE__ */ template(`<div role=status aria-live=polite>`), _tmpl$5$9 = /* @__PURE__ */ template(`<div data-slot=calendar><div>`), _tmpl$6$6 = /* @__PURE__ */ template(`<th scope=col>`), _tmpl$7$3 = /* @__PURE__ */ template(`<thead aria-hidden=true><tr>`), _tmpl$8$3 = /* @__PURE__ */ template(`<div><div></div><table role=grid><tbody>`), _tmpl$9$2 = /* @__PURE__ */ template(`<div><span role=status aria-live=polite>`), _tmpl$0$2 = /* @__PURE__ */ template(`<span>`), _tmpl$1$1 = /* @__PURE__ */ template(`<span role=status aria-live=polite>`), _tmpl$10$1 = /* @__PURE__ */ template(`<td><div>`), _tmpl$11$1 = /* @__PURE__ */ template(`<tr>`), _tmpl$12 = /* @__PURE__ */ template(`<td role=gridcell>`);
 const clone = (d) => new Date(d.getTime());
 const startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 const startOfMonth = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
@@ -1413,7 +1084,7 @@ function Calendar(input) {
       }
     };
     return (() => {
-      var _el$ = _tmpl$$y(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+      var _el$ = _tmpl$$A(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
       use((el) => queueMicrotask(() => el.value = String(value)), _el$2);
       _el$2.addEventListener("change", onChange);
       insert(_el$2, createComponent(For, {
@@ -1421,7 +1092,7 @@ function Calendar(input) {
           return options();
         },
         children: (o) => (() => {
-          var _el$4 = _tmpl$2$l();
+          var _el$4 = _tmpl$2$n();
           insert(_el$4, () => o.label);
           effect((_p$) => {
             var _v$7 = o.disabled, _v$8 = o.value === value;
@@ -1503,7 +1174,7 @@ function Calendar(input) {
         return !props.hideNavigation;
       },
       get children() {
-        var _el$7 = _tmpl$3$g(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+        var _el$7 = _tmpl$3$i(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
         _el$8.$$click = handlePrevious;
         insert(_el$8, createComponent(Chevron, {
           get disabled() {
@@ -1557,20 +1228,20 @@ function Calendar(input) {
         return calendar().months;
       },
       children: (calendarMonth) => (() => {
-        var _el$1 = _tmpl$8$4(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$15 = _el$11.firstChild;
+        var _el$1 = _tmpl$8$3(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling, _el$15 = _el$11.firstChild;
         insert(_el$10, (() => {
           var _c$ = memo(() => !!props.captionLayout.startsWith(`dropdown`));
           return () => _c$() ? (() => {
-            var _el$16 = _tmpl$9$3(), _el$17 = _el$16.firstChild;
+            var _el$16 = _tmpl$9$2(), _el$17 = _el$16.firstChild;
             insert(_el$16, () => {
               const layout = props.captionLayout;
               const monthControl = layout === `dropdown` || layout === `dropdown-months` ? dropdown(`month`, calendarMonth.date) : (() => {
-                var _el$18 = _tmpl$0$3();
+                var _el$18 = _tmpl$0$2();
                 insert(_el$18, () => formatters().formatMonthDropdown(calendarMonth.date));
                 return _el$18;
               })();
               const yearControl = layout === `dropdown` || layout === `dropdown-years` ? dropdown(`year`, calendarMonth.date) : (() => {
-                var _el$19 = _tmpl$0$3();
+                var _el$19 = _tmpl$0$2();
                 insert(_el$19, () => formatters().formatYearDropdown(calendarMonth.date));
                 return _el$19;
               })();
@@ -1599,13 +1270,13 @@ function Calendar(input) {
             return !props.hideWeekdays;
           },
           get children() {
-            var _el$12 = _tmpl$7$4(), _el$13 = _el$12.firstChild;
+            var _el$12 = _tmpl$7$3(), _el$13 = _el$12.firstChild;
             insert(_el$13, createComponent(Show, {
               get when() {
                 return props.showWeekNumber;
               },
               get children() {
-                var _el$14 = _tmpl$6$7();
+                var _el$14 = _tmpl$6$6();
                 insert(_el$14, () => formatters().formatWeekNumberHeader());
                 effect((_p$) => {
                   var _v$17 = labels().labelWeekNumberHeader(), _v$18 = classNames().week_number_header;
@@ -1626,7 +1297,7 @@ function Calendar(input) {
                 }, (_, i) => addDays(sow(today()), i));
               },
               children: (weekday) => (() => {
-                var _el$21 = _tmpl$6$7();
+                var _el$21 = _tmpl$6$6();
                 insert(_el$21, () => formatters().formatWeekdayName(weekday));
                 effect((_p$) => {
                   var _v$27 = labels().labelWeekday(weekday), _v$28 = classNames().weekday;
@@ -1792,7 +1463,7 @@ function Calendar(input) {
         return props.footer;
       },
       get children() {
-        var _el$0 = _tmpl$4$c();
+        var _el$0 = _tmpl$4$e();
         insert(_el$0, () => props.footer);
         effect(() => className(_el$0, classNames().footer));
         return _el$0;
@@ -1851,11 +1522,11 @@ function CalendarDayButton(props) {
   }, rest));
 }
 delegateEvents(["click"]);
-var _tmpl$$x = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$z = /* @__PURE__ */ template(`<div>`);
 const part = (slot, recipe) => function CardPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$x();
+    var _el$ = _tmpl$$z();
     setAttribute(_el$, "data-slot", slot);
     spread(_el$, mergeProps({
       get ["class"]() {
@@ -1872,49 +1543,143 @@ const CardDescription = part(`card-description`, `description`);
 const CardAction = part(`card-action`, `action`);
 const CardContent = part(`card-content`, `content`);
 const CardFooter = part(`card-footer`, `footer`);
-var _tmpl$$w = /* @__PURE__ */ template(`<span data-slot=checkbox-indicator>`), _tmpl$2$k = /* @__PURE__ */ template(`<button type=button role=checkbox data-slot=checkbox>`), _tmpl$3$f = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true tabindex=-1>`);
-const isIndeterminate = (c) => c === `indeterminate`;
-const stateOf = (c) => isIndeterminate(c) ? `indeterminate` : c ? `checked` : `unchecked`;
-function Checkbox(props) {
-  const [local, rest] = splitProps(props, [`class`, `checked`, `defaultChecked`, `onCheckedChange`, `required`, `name`, `value`, `form`, `disabled`, `onKeyDown`, `onClick`, `ref`]);
-  const [inner, setInner] = createSignal(untrack(() => local.defaultChecked) ?? false);
-  const controlled = () => local.checked !== void 0;
-  const checked = () => controlled() ? local.checked : inner();
-  const setChecked2 = (next) => {
-    const prev = untrack(checked);
-    if (!untrack(controlled)) setInner(() => next);
-    if (next !== prev) local.onCheckedChange?.(next);
-  };
-  const [control, setControl] = createSignal();
-  const inForm = createInForm(control);
-  const value = () => local.value ?? `on`;
-  const initial = untrack(checked);
-  let stopped = false;
-  createEffect(() => {
-    const form = control()?.form;
-    if (!form) return;
-    const reset = () => setChecked2(initial);
-    form.addEventListener(`reset`, reset);
-    onCleanup(() => form.removeEventListener(`reset`, reset));
-  });
-  const presence = createPresence(() => isIndeterminate(checked()) || checked() === true);
-  const call2 = (handler, e) => {
-    if (typeof handler === `function`) handler(e);
-    else if (Array.isArray(handler)) handler[0](handler[1], e);
-  };
-  return [(() => {
-    var _el$ = _tmpl$2$k();
-    use((el) => {
-      setControl(el);
-      if (typeof local.ref === `function`) local.ref(el);
-    }, _el$);
+var _tmpl$$y = /* @__PURE__ */ template(`<span data-slot=carousel-counter aria-hidden=true>`), _tmpl$2$m = /* @__PURE__ */ template(`<div data-slot=carousel-thumbnails>`), _tmpl$3$h = /* @__PURE__ */ template(`<button type=button data-slot=carousel-thumbnail>`), _tmpl$4$d = /* @__PURE__ */ template(`<img alt aria-hidden=true loading=lazy decoding=async>`, true, false, false);
+function CarouselCounter(props) {
+  const [local, rest] = splitProps(props, [`page`, `total`, `class`]);
+  return (() => {
+    var _el$ = _tmpl$$y();
     spread(_el$, mergeProps({
-      get ["aria-checked"]() {
-        return memo(() => !!isIndeterminate(checked()))() ? `mixed` : checked();
-      },
-      get ["aria-required"]() {
-        return local.required;
-      },
+      get ["class"]() {
+        return cn(CAROUSEL_CLASSES.counter, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$, () => carouselCounterText(local.page, local.total));
+    return _el$;
+  })();
+}
+const defaultPageLabel = (page, total) => `Page ${page + 1} of ${total}`;
+function CarouselThumbnails(props) {
+  const [local, rest] = splitProps(props, [`count`, `urls`, `page`, `onPageChange`, `pageLabel`, `class`]);
+  let strip;
+  const n = () => Math.max(0, Math.floor(local.count));
+  const indexes = () => Array.from({
+    length: n()
+  }, (_, i) => i);
+  const label = (i) => (local.pageLabel ?? defaultPageLabel)(i, n());
+  createRenderEffect(() => {
+    const page = local.page;
+    n();
+    queueMicrotask(() => {
+      const el = strip;
+      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;
+    });
+  });
+  return (() => {
+    var _el$2 = _tmpl$2$m();
+    var _ref$ = strip;
+    typeof _ref$ === "function" ? use(_ref$, _el$2) : strip = _el$2;
+    spread(_el$2, mergeProps({
+      get ["class"]() {
+        return cn(CAROUSEL_CLASSES.thumbnails, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$2, createComponent(For, {
+      get each() {
+        return indexes();
+      },
+      children: (i) => {
+        const current = () => i === local.page;
+        return (() => {
+          var _el$3 = _tmpl$3$h();
+          _el$3.$$click = () => local.onPageChange?.(i);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return local.urls[i];
+            },
+            children: (src) => (() => {
+              var _el$4 = _tmpl$4$d();
+              setAttribute(_el$4, "draggable", false);
+              effect((_p$) => {
+                var _v$5 = src(), _v$6 = CAROUSEL_CLASSES.thumbnailImage;
+                _v$5 !== _p$.e && setAttribute(_el$4, "src", _p$.e = _v$5);
+                _v$6 !== _p$.t && className(_el$4, _p$.t = _v$6);
+                return _p$;
+              }, {
+                e: void 0,
+                t: void 0
+              });
+              return _el$4;
+            })()
+          }));
+          effect((_p$) => {
+            var _v$ = current() ? `true` : void 0, _v$2 = current() ? `true` : void 0, _v$3 = label(i), _v$4 = CAROUSEL_CLASSES.thumbnail;
+            _v$ !== _p$.e && setAttribute(_el$3, "data-current", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$3, "aria-current", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0
+          });
+          return _el$3;
+        })();
+      }
+    }));
+    return _el$2;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$$x = /* @__PURE__ */ template(`<span data-slot=checkbox-indicator>`), _tmpl$2$l = /* @__PURE__ */ template(`<button type=button role=checkbox data-slot=checkbox>`), _tmpl$3$g = /* @__PURE__ */ template(`<input type=checkbox aria-hidden=true tabindex=-1>`);
+const isIndeterminate = (c) => c === `indeterminate`;
+const stateOf = (c) => isIndeterminate(c) ? `indeterminate` : c ? `checked` : `unchecked`;
+function Checkbox(props) {
+  const [local, rest] = splitProps(props, [`class`, `checked`, `defaultChecked`, `onCheckedChange`, `required`, `name`, `value`, `form`, `disabled`, `onKeyDown`, `onClick`, `ref`]);
+  const [inner, setInner] = createSignal(untrack(() => local.defaultChecked) ?? false);
+  const controlled = () => local.checked !== void 0;
+  const checked = () => controlled() ? local.checked : inner();
+  const setChecked2 = (next) => {
+    const prev = untrack(checked);
+    if (!untrack(controlled)) setInner(() => next);
+    if (next !== prev) local.onCheckedChange?.(next);
+  };
+  const [control, setControl] = createSignal();
+  const inForm = createInForm(control);
+  const value = () => local.value ?? `on`;
+  const initial = untrack(checked);
+  let stopped = false;
+  createEffect(() => {
+    const form = control()?.form;
+    if (!form) return;
+    const reset = () => setChecked2(initial);
+    form.addEventListener(`reset`, reset);
+    onCleanup(() => form.removeEventListener(`reset`, reset));
+  });
+  const presence = createPresence(() => isIndeterminate(checked()) || checked() === true);
+  const call2 = (handler, e) => {
+    if (typeof handler === `function`) handler(e);
+    else if (Array.isArray(handler)) handler[0](handler[1], e);
+  };
+  return [(() => {
+    var _el$ = _tmpl$2$l();
+    use((el) => {
+      setControl(el);
+      if (typeof local.ref === `function`) local.ref(el);
+    }, _el$);
+    spread(_el$, mergeProps({
+      get ["aria-checked"]() {
+        return memo(() => !!isIndeterminate(checked()))() ? `mixed` : checked();
+      },
+      get ["aria-required"]() {
+        return local.required;
+      },
       get ["data-state"]() {
         return stateOf(checked());
       },
@@ -1951,7 +1716,7 @@ function Checkbox(props) {
         return presence.mounted();
       },
       get children() {
-        var _el$2 = _tmpl$$w();
+        var _el$2 = _tmpl$$x();
         var _ref$ = presence.ref;
         typeof _ref$ === "function" ? use(_ref$, _el$2) : presence.ref = _el$2;
         insert(_el$2, createComponent(PaintIcon, {
@@ -2034,7 +1799,7 @@ function CheckboxBubble(props) {
     });
   };
   return (() => {
-    var _el$3 = _tmpl$3$f();
+    var _el$3 = _tmpl$3$g();
     var _ref$2 = input;
     typeof _ref$2 === "function" ? use(_ref$2, _el$3) : input = _el$3;
     effect((_p$) => {
@@ -2059,7 +1824,7 @@ function CheckboxBubble(props) {
     return _el$3;
   })();
 }
-var _tmpl$$v = /* @__PURE__ */ template(`<div>`), _tmpl$2$j = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$3$e = /* @__PURE__ */ template(`<span>`), _tmpl$4$b = /* @__PURE__ */ template(`<button type=button><span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<img loading=lazy decoding=async>`, true, false, false);
+var _tmpl$$w = /* @__PURE__ */ template(`<div>`), _tmpl$2$k = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$3$f = /* @__PURE__ */ template(`<span>`), _tmpl$4$c = /* @__PURE__ */ template(`<button type=button><span>`), _tmpl$5$8 = /* @__PURE__ */ template(`<img loading=lazy decoding=async>`, true, false, false);
 function ChoiceTilesFrame(props) {
   const buttons = [];
   const order = createMemo(() => props.options.map((o) => o.value));
@@ -2102,7 +1867,7 @@ function ChoiceTilesFrame(props) {
     });
   };
   return (() => {
-    var _el$ = _tmpl$$v();
+    var _el$ = _tmpl$$w();
     var _ref$ = props.rootRef;
     typeof _ref$ === "function" ? use(_ref$, _el$) : props.rootRef = _el$;
     spread(_el$, mergeProps({
@@ -2136,7 +1901,7 @@ function ChoiceTilesFrame(props) {
         });
         const description = o.description ? String(o.description) : ``;
         return (() => {
-          var _el$2 = _tmpl$4$b(), _el$4 = _el$2.firstChild;
+          var _el$2 = _tmpl$4$c(), _el$4 = _el$2.firstChild;
           _el$2.$$keydown = (e) => onKeyDown(i, e);
           _el$2.$$click = () => pick(i);
           use((el) => {
@@ -2170,7 +1935,7 @@ function ChoiceTilesFrame(props) {
               return pictures();
             },
             get children() {
-              var _el$3 = _tmpl$2$j();
+              var _el$3 = _tmpl$2$k();
               spread(_el$3, mergeProps(() => props.pictureProps(state())), false, true);
               insert(_el$3, () => props.renderPicture(o.image ? String(o.image) : null, state()));
               return _el$3;
@@ -2181,7 +1946,7 @@ function ChoiceTilesFrame(props) {
           insert(_el$2, createComponent(Show, {
             when: description,
             get children() {
-              var _el$5 = _tmpl$3$e();
+              var _el$5 = _tmpl$3$f();
               spread(_el$5, mergeProps(() => props.descriptionProps(state())), false, true);
               insert(_el$5, description);
               return _el$5;
@@ -2260,12 +2025,12 @@ function ChoiceTiles(props) {
   });
 }
 delegateEvents(["click", "keydown"]);
-var _tmpl$$u = /* @__PURE__ */ template(`<div data-slot=code-block>`), _tmpl$2$i = /* @__PURE__ */ template(`<div>`), _tmpl$3$d = /* @__PURE__ */ template(`<span aria-live=polite>`), _tmpl$4$a = /* @__PURE__ */ template(`<span>`), _tmpl$5$7 = /* @__PURE__ */ template(`<pre data-slot=code-block-content dir=ltr tabindex=0><code data-slot=code-block-code>`), _tmpl$6$6 = /* @__PURE__ */ template(`<span data-slot=code-block-line><span data-slot=code-block-line-content>`);
+var _tmpl$$v = /* @__PURE__ */ template(`<div data-slot=code-block>`), _tmpl$2$j = /* @__PURE__ */ template(`<div>`), _tmpl$3$e = /* @__PURE__ */ template(`<span aria-live=polite>`), _tmpl$4$b = /* @__PURE__ */ template(`<span>`), _tmpl$5$7 = /* @__PURE__ */ template(`<pre data-slot=code-block-content dir=ltr tabindex=0><code data-slot=code-block-code>`), _tmpl$6$5 = /* @__PURE__ */ template(`<span data-slot=code-block-line><span data-slot=code-block-line-content>`);
 function CodeBlock(props) {
   const [local, rest] = splitProps(props, [`class`, `variant`, `size`]);
   const variant = () => local.variant ?? `default`;
   return (() => {
-    var _el$ = _tmpl$$u();
+    var _el$ = _tmpl$$v();
     spread(_el$, mergeProps({
       get ["data-variant"]() {
         return variant();
@@ -2285,7 +2050,7 @@ function CodeBlock(props) {
 const slotPart = (slot, recipe) => function CodeBlockPart(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$i();
+    var _el$2 = _tmpl$2$j();
     setAttribute(_el$2, "data-slot", slot);
     spread(_el$2, mergeProps({
       get ["class"]() {
@@ -2357,7 +2122,7 @@ function CodeBlockCopyButton(props) {
       });
     }
   })), (() => {
-    var _el$3 = _tmpl$3$d();
+    var _el$3 = _tmpl$3$e();
     insert(_el$3, (() => {
       var _c$ = memo(() => !!copied());
       return () => _c$() ? labels().copied : ``;
@@ -2394,7 +2159,7 @@ function CodeBlockContent(props) {
           return memo(() => tokens.length === 0)() ? null : createComponent(For, {
             each: tokens,
             children: (token) => (() => {
-              var _el$4 = _tmpl$4$a();
+              var _el$4 = _tmpl$4$b();
               insert(_el$4, () => token.text);
               effect((_p$) => {
                 var _v$ = token.kind, _v$2 = cn(CODE_TOKEN_CLASS[token.kind], CODE_BLOCK_CLASSES.token);
@@ -2455,7 +2220,7 @@ function CodeBlockLine(props) {
     return c === void 0 || c === null || c === `` || Array.isArray(c) && c.length === 0;
   };
   return (() => {
-    var _el$7 = _tmpl$6$6(), _el$8 = _el$7.firstChild;
+    var _el$7 = _tmpl$6$5(), _el$8 = _el$7.firstChild;
     spread(_el$7, mergeProps({
       get ["data-variant"]() {
         return local.variant ?? `default`;
@@ -2475,7 +2240,7 @@ function CodeBlockLine(props) {
     return _el$7;
   })();
 }
-var _tmpl$$t = /* @__PURE__ */ template(`<div data-slot=collapsible>`), _tmpl$2$h = /* @__PURE__ */ template(`<button type=button data-slot=collapsible-trigger>`), _tmpl$3$c = /* @__PURE__ */ template(`<div data-slot=collapsible-content>`);
+var _tmpl$$u = /* @__PURE__ */ template(`<div data-slot=collapsible>`), _tmpl$2$i = /* @__PURE__ */ template(`<button type=button data-slot=collapsible-trigger>`), _tmpl$3$d = /* @__PURE__ */ template(`<div data-slot=collapsible-content>`);
 const CollapsibleContext = createContext();
 const call$2 = (handler, e) => {
   if (typeof handler === `function`) handler(e);
@@ -2499,7 +2264,7 @@ function Collapsible(props) {
   return createComponent(CollapsibleContext.Provider, {
     value: state,
     get children() {
-      var _el$ = _tmpl$$t();
+      var _el$ = _tmpl$$u();
       spread(_el$, mergeProps({
         get ["data-state"]() {
           return open() ? `open` : `closed`;
@@ -2516,7 +2281,7 @@ function CollapsibleTrigger(props) {
   const ctx = useContext(CollapsibleContext);
   const [local, rest] = splitProps(props, [`onClick`]);
   return (() => {
-    var _el$2 = _tmpl$2$h();
+    var _el$2 = _tmpl$2$i();
     spread(_el$2, mergeProps({
       get ["aria-controls"]() {
         return ctx.contentId;
@@ -2640,7 +2405,7 @@ function CollapsibleContent(props) {
     };
   };
   return (() => {
-    var _el$3 = _tmpl$3$c();
+    var _el$3 = _tmpl$3$d();
     use((el) => {
       node2 = el;
       if (typeof local.ref === `function`) local.ref(el);
@@ -2674,10 +2439,10 @@ function CollapsibleContent(props) {
     return _el$3;
   })();
 }
-var _tmpl$$s = /* @__PURE__ */ template(`<div data-slot=command tabindex=-1><label data-slot=command-label>`), _tmpl$2$g = /* @__PURE__ */ template(`<button type=button data-slot=command-input-clear>`), _tmpl$3$b = /* @__PURE__ */ template(`<div data-slot=command-input-wrapper><input data-slot=command-input>`), _tmpl$4$9 = /* @__PURE__ */ template(`<div data-slot=command-list><div data-slot=command-list-sizer>`), _tmpl$5$6 = /* @__PURE__ */ template(`<div data-slot=command-empty>`), _tmpl$6$5 = /* @__PURE__ */ template(`<div data-slot=command-group-heading aria-hidden=true>`), _tmpl$7$3 = /* @__PURE__ */ template(`<div data-slot=command-group><div data-slot=command-group-items role=group>`), _tmpl$8$3 = /* @__PURE__ */ template(`<div data-slot=command-item>`), _tmpl$9$2 = /* @__PURE__ */ template(`<div data-slot=command-separator>`), _tmpl$0$2 = /* @__PURE__ */ template(`<span data-slot=command-shortcut>`);
+var _tmpl$$t = /* @__PURE__ */ template(`<div data-slot=command tabindex=-1><label data-slot=command-label>`), _tmpl$2$h = /* @__PURE__ */ template(`<button type=button data-slot=command-input-clear>`), _tmpl$3$c = /* @__PURE__ */ template(`<div data-slot=command-input-wrapper><input data-slot=command-input>`), _tmpl$4$a = /* @__PURE__ */ template(`<div data-slot=command-list><div data-slot=command-list-sizer>`), _tmpl$5$6 = /* @__PURE__ */ template(`<div data-slot=command-empty>`), _tmpl$6$4 = /* @__PURE__ */ template(`<div data-slot=command-group-heading aria-hidden=true>`), _tmpl$7$2 = /* @__PURE__ */ template(`<div data-slot=command-group><div data-slot=command-group-items role=group>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div data-slot=command-item>`), _tmpl$9$1 = /* @__PURE__ */ template(`<div data-slot=command-separator>`), _tmpl$0$1 = /* @__PURE__ */ template(`<span data-slot=command-shortcut>`);
 const CommandContext = createContext();
 const GroupContext$1 = createContext();
-function useRoot$1() {
+function useRoot() {
   const ctx = useContext(CommandContext);
   if (!ctx) throw new Error(`Command parts must sit inside <Command>`);
   return ctx;
@@ -2721,7 +2486,7 @@ function Command(props) {
     labelId: createUniqueId()
   };
   return (() => {
-    var _el$ = _tmpl$$s(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$t(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(COMMAND_CLASSES.root, local.class);
@@ -2761,7 +2526,7 @@ function CommandInput(props) {
     listId,
     inputId,
     labelId
-  } = useRoot$1();
+  } = useRoot();
   let input;
   const controlled = () => local.value !== void 0;
   store.setSearch(local.value ?? local.defaultValue ?? ``, true);
@@ -2783,7 +2548,7 @@ function CommandInput(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$3 = _tmpl$3$b(), _el$4 = _el$3.firstChild;
+    var _el$3 = _tmpl$3$c(), _el$4 = _el$3.firstChild;
     insert(_el$3, createComponent(PaintIcon, {
       icon: Search,
       get ["class"]() {
@@ -2826,7 +2591,7 @@ function CommandInput(props) {
         return shown() !== ``;
       },
       get children() {
-        var _el$5 = _tmpl$2$g();
+        var _el$5 = _tmpl$2$h();
         _el$5.$$click = () => {
           change(``);
           input?.focus();
@@ -2864,7 +2629,7 @@ function CommandList(props) {
     store,
     track,
     listId
-  } = useRoot$1();
+  } = useRoot();
   let list;
   let sizer;
   onMount(() => {
@@ -2876,7 +2641,7 @@ function CommandList(props) {
     return store.selectedId;
   };
   return (() => {
-    var _el$6 = _tmpl$4$9(), _el$7 = _el$6.firstChild;
+    var _el$6 = _tmpl$4$a(), _el$7 = _el$6.firstChild;
     var _ref$ = list;
     typeof _ref$ === "function" ? use(_ref$, _el$6) : list = _el$6;
     spread(_el$6, mergeProps({
@@ -2907,7 +2672,7 @@ function CommandEmpty(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   return createComponent(Show, {
     get when() {
       return track(), store.empty();
@@ -2938,7 +2703,7 @@ function CommandGroup(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const id = createUniqueId();
   const headingId = createUniqueId();
   const seq = store.nextSeq();
@@ -2955,7 +2720,7 @@ function CommandGroup(props) {
   const heading = children(() => local.heading);
   const groupValue = () => local.value ?? (typeof local.heading === `string` ? local.heading : void 0);
   return (() => {
-    var _el$9 = _tmpl$7$3(), _el$1 = _el$9.firstChild;
+    var _el$9 = _tmpl$7$2(), _el$1 = _el$9.firstChild;
     var _ref$2 = el;
     typeof _ref$2 === "function" ? use(_ref$2, _el$9) : el = _el$9;
     spread(_el$9, mergeProps({
@@ -2976,7 +2741,7 @@ function CommandGroup(props) {
         return heading();
       },
       get children() {
-        var _el$0 = _tmpl$6$5();
+        var _el$0 = _tmpl$6$4();
         setAttribute(_el$0, "id", headingId);
         insert(_el$0, heading);
         effect(() => className(_el$0, COMMAND_CLASSES.groupHeading));
@@ -3003,7 +2768,7 @@ function CommandItem(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const group = useContext(GroupContext$1);
   const id = createUniqueId();
   const seq = store.nextSeq();
@@ -3049,7 +2814,7 @@ function CommandItem(props) {
     get children() {
       return (() => {
         const node2 = (() => {
-          var _el$10 = _tmpl$8$3();
+          var _el$10 = _tmpl$8$2();
           spread(_el$10, mergeProps({
             get ["class"]() {
               return cn(COMMAND_CLASSES.item, local.class);
@@ -3109,7 +2874,7 @@ function CommandSeparator(props) {
   const {
     store,
     track
-  } = useRoot$1();
+  } = useRoot();
   const id = createUniqueId();
   const seq = store.nextSeq();
   let el;
@@ -3125,7 +2890,7 @@ function CommandSeparator(props) {
     get children() {
       return (() => {
         const node2 = (() => {
-          var _el$11 = _tmpl$9$2();
+          var _el$11 = _tmpl$9$1();
           spread(_el$11, mergeProps({
             get ["class"]() {
               return cn(COMMAND_CLASSES.separator, local.class);
@@ -3153,7 +2918,7 @@ function CommandSeparator(props) {
 function CommandShortcut(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$12 = _tmpl$0$2();
+    var _el$12 = _tmpl$0$1();
     spread(_el$12, mergeProps({
       get ["class"]() {
         return cn(COMMAND_CLASSES.shortcut, local.class);
@@ -3163,7 +2928,7 @@ function CommandShortcut(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$r = /* @__PURE__ */ template(`<svg><circle fill=none stroke=currentColor stroke-linecap=round></svg>`, false, true, false), _tmpl$2$f = /* @__PURE__ */ template(`<svg aria-hidden=true><circle fill=none stroke=currentColor opacity=0.2>`);
+var _tmpl$$s = /* @__PURE__ */ template(`<svg><circle fill=none stroke=currentColor stroke-linecap=round></svg>`, false, true, false), _tmpl$2$g = /* @__PURE__ */ template(`<svg aria-hidden=true><circle fill=none stroke=currentColor opacity=0.2>`);
 function ContextRing(props) {
   const [local, rest] = splitProps(props, [`percent`, `tone`, `showEmpty`, `class`]);
   const value = () => local.percent ?? null;
@@ -3185,7 +2950,7 @@ function ContextRing(props) {
         }
       }, rest, {
         get children() {
-          var _el$ = _tmpl$2$f(), _el$2 = _el$.firstChild;
+          var _el$ = _tmpl$2$g(), _el$2 = _el$.firstChild;
           setAttribute(_el$, "viewBox", `0 0 ${RING_SIZE} ${RING_SIZE}`);
           setAttribute(_el$, "width", RING_SIZE);
           setAttribute(_el$, "height", RING_SIZE);
@@ -3198,7 +2963,7 @@ function ContextRing(props) {
               return value() !== null;
             },
             get children() {
-              var _el$3 = _tmpl$$r();
+              var _el$3 = _tmpl$$s();
               setAttribute(_el$3, "cx", RING_SIZE / 2);
               setAttribute(_el$3, "cy", RING_SIZE / 2);
               setAttribute(_el$3, "r", RING_RADIUS);
@@ -3222,7 +2987,7 @@ function ContextRing(props) {
     }
   });
 }
-var _tmpl$$q = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
+var _tmpl$$r = /* @__PURE__ */ template(`<div data-slot=sheet-grabber aria-hidden=true>`);
 const SheetDragContext = createContext(null);
 function SheetDragProvider(props) {
   return createComponent(SheetDragContext.Provider, {
@@ -3241,7 +3006,7 @@ function SheetGrabber(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$ = _tmpl$$q();
+    var _el$ = _tmpl$$r();
     spread(_el$, mergeProps(drag ?? {}, rest, {
       get ["class"]() {
         return cn(SHEET_CHROME_CLASSES.grabber, local.class);
@@ -3338,7 +3103,7 @@ function createSheetDrag(opts) {
   };
   return { handleProps };
 }
-var _tmpl$$p = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$e = /* @__PURE__ */ template(`<div data-slot=sheet-header>`), _tmpl$3$a = /* @__PURE__ */ template(`<div data-slot=sheet-footer>`);
+var _tmpl$$q = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$f = /* @__PURE__ */ template(`<div data-slot=sheet-header>`), _tmpl$3$b = /* @__PURE__ */ template(`<div data-slot=sheet-footer>`);
 function Sheet(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3448,7 +3213,7 @@ function SheetContent(props) {
                           return SHEET_CLASSES.closeIcon;
                         }
                       }), (() => {
-                        var _el$ = _tmpl$$p();
+                        var _el$ = _tmpl$$q();
                         effect(() => className(_el$, SHEET_CLASSES.srOnly));
                         return _el$;
                       })()];
@@ -3467,7 +3232,7 @@ function SheetHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$e();
+    var _el$2 = _tmpl$2$f();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(SHEET_CLASSES.header, local.class);
@@ -3479,7 +3244,7 @@ function SheetHeader(props) {
 function SheetFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$a();
+    var _el$3 = _tmpl$3$b();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(SHEET_CLASSES.footer, local.class);
@@ -3506,7 +3271,7 @@ function SheetDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$o = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$d = /* @__PURE__ */ template(`<div data-slot=dialog-header>`), _tmpl$3$9 = /* @__PURE__ */ template(`<div data-slot=dialog-body>`), _tmpl$4$8 = /* @__PURE__ */ template(`<div data-slot=dialog-footer>`);
+var _tmpl$$p = /* @__PURE__ */ template(`<span>Close`), _tmpl$2$e = /* @__PURE__ */ template(`<div data-slot=dialog-header>`), _tmpl$3$a = /* @__PURE__ */ template(`<div data-slot=dialog-body>`), _tmpl$4$9 = /* @__PURE__ */ template(`<div data-slot=dialog-footer>`);
 function Dialog(props) {
   return createComponent(DialogRoot, props);
 }
@@ -3537,7 +3302,7 @@ function DialogContent(props) {
   const [local, rest] = splitProps(props, [`class`, `children`, `showCloseButton`, `mobile`, `ref`, `onInteractOutside`, `container`]);
   const mobile = () => local.mobile ?? `sheet`;
   const isSheet = () => mobile() === `sheet` || mobile() === `sheet-full`;
-  const isPhone = createMediaQuery$1(DIALOG_PHONE_QUERY);
+  const isPhone = createMediaQuery(DIALOG_PHONE_QUERY);
   let panel;
   let dragClose;
   const {
@@ -3626,7 +3391,7 @@ function DialogContent(props) {
                               return [createComponent(PaintIcon, {
                                 icon: X
                               }), (() => {
-                                var _el$ = _tmpl$$o();
+                                var _el$ = _tmpl$$p();
                                 effect(() => className(_el$, DIALOG_CLASSES.srOnly));
                                 return _el$;
                               })()];
@@ -3679,7 +3444,7 @@ function DialogHeader(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const drag = createSheetDragHandleProps();
   return (() => {
-    var _el$2 = _tmpl$2$d();
+    var _el$2 = _tmpl$2$e();
     spread(_el$2, mergeProps(drag ?? {}, {
       get ["class"]() {
         return cn(DIALOG_CLASSES.header, local.class);
@@ -3691,7 +3456,7 @@ function DialogHeader(props) {
 function DialogBody(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$3 = _tmpl$3$9();
+    var _el$3 = _tmpl$3$a();
     spread(_el$3, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.body, local.class);
@@ -3703,7 +3468,7 @@ function DialogBody(props) {
 function DialogFooter(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$4 = _tmpl$4$8();
+    var _el$4 = _tmpl$4$9();
     spread(_el$4, mergeProps({
       get ["class"]() {
         return cn(DIALOG_CLASSES.footer, local.class);
@@ -3748,7 +3513,7 @@ function DialogDescription(props) {
     }
   }, rest));
 }
-var _tmpl$$n = /* @__PURE__ */ template(`<button type=button data-slot=disclosure-header>`);
+var _tmpl$$o = /* @__PURE__ */ template(`<button type=button data-slot=disclosure-header>`);
 function DisclosureHeader(props) {
   const [local, rest] = splitProps(props, [`open`, `onToggle`, `chevron`, `class`, `children`]);
   const chevron = () => local.chevron ?? `leading`;
@@ -3762,7 +3527,7 @@ function DisclosureHeader(props) {
     }
   });
   return (() => {
-    var _el$ = _tmpl$$n();
+    var _el$ = _tmpl$$o();
     _el$.$$click = () => local.onToggle();
     spread(_el$, mergeProps({
       get ["data-chevron"]() {
@@ -3788,14 +3553,14 @@ function DisclosureHeader(props) {
   })();
 }
 delegateEvents(["click"]);
-var _tmpl$$m = /* @__PURE__ */ template(`<span data-slot=dock-card-caption>`), _tmpl$2$c = /* @__PURE__ */ template(`<span data-slot=dock-card-meta>`), _tmpl$3$8 = /* @__PURE__ */ template(`<div data-slot=dock-card><div data-slot=dock-card-body><div><div><span data-slot=dock-card-label></span></div><div><span data-slot=dock-card-title>`), _tmpl$4$7 = /* @__PURE__ */ template(`<span data-slot=dock-card-trailing>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div data-slot=dock-pile>`), _tmpl$6$4 = /* @__PURE__ */ template(`<div data-slot=dock-pile-item>`);
+var _tmpl$$n = /* @__PURE__ */ template(`<span data-slot=dock-card-caption>`), _tmpl$2$d = /* @__PURE__ */ template(`<span data-slot=dock-card-meta>`), _tmpl$3$9 = /* @__PURE__ */ template(`<div data-slot=dock-card><div data-slot=dock-card-body><div><div><span data-slot=dock-card-label></span></div><div><span data-slot=dock-card-title>`), _tmpl$4$8 = /* @__PURE__ */ template(`<span data-slot=dock-card-trailing>`), _tmpl$5$5 = /* @__PURE__ */ template(`<div data-slot=dock-pile>`), _tmpl$6$3 = /* @__PURE__ */ template(`<div data-slot=dock-pile-item>`);
 function DockCard(props) {
   const [local, rest] = splitProps(props, [`tint`, `icon`, `label`, `caption`, `meta`, `title`, `onOpen`, `trailing`, `hidden`, `openLabel`, `class`]);
   const tint = () => local.tint ?? `muted`;
   const pressable = () => local.onOpen !== void 0;
   const has = (value) => value !== void 0 && value !== null;
   return (() => {
-    var _el$ = _tmpl$3$8(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
+    var _el$ = _tmpl$3$9(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$5 = _el$4.firstChild, _el$8 = _el$4.nextSibling, _el$9 = _el$8.firstChild;
     _el$.$$keydown = (event) => {
       if (!pressable() || event.defaultPrevented) return;
       if (event.key === `Enter` || event.key === ` `) {
@@ -3842,7 +3607,7 @@ function DockCard(props) {
         return has(local.caption);
       },
       get children() {
-        var _el$6 = _tmpl$$m();
+        var _el$6 = _tmpl$$n();
         insert(_el$6, () => local.caption);
         effect(() => className(_el$6, DOCK_CARD_CLASSES.caption));
         return _el$6;
@@ -3853,7 +3618,7 @@ function DockCard(props) {
         return has(local.meta);
       },
       get children() {
-        var _el$7 = _tmpl$2$c();
+        var _el$7 = _tmpl$2$d();
         insert(_el$7, () => local.meta);
         effect(() => className(_el$7, DOCK_CARD_CLASSES.meta));
         return _el$7;
@@ -3870,7 +3635,7 @@ function DockCard(props) {
             return has(local.trailing);
           },
           get children() {
-            var _el$0 = _tmpl$4$7();
+            var _el$0 = _tmpl$4$8();
             insert(_el$0, () => local.trailing);
             effect(() => className(_el$0, DOCK_CARD_CLASSES.trailing));
             return _el$0;
@@ -3910,777 +3675,106 @@ function DockCard(props) {
     return _el$;
   })();
 }
-function DockPile(props) {
-  const [local, rest] = splitProps(props, [`items`, `expanded`, `onExpandedChange`, `class`, `style`]);
-  const [measured, setMeasured] = createSignal({});
-  const nodes = /* @__PURE__ */ new Map();
-  const measure = () => {
-    const next = {};
-    for (const item of local.items) {
-      const el = nodes.get(item.id);
-      if (item.height === void 0 && el) next[item.id] = el.offsetHeight;
-    }
-    const prev = measured();
-    if (!(Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([k, v]) => prev[k] === v))) setMeasured(next);
-  };
-  createEffect(() => {
-    void local.items;
-    measure();
-    if (typeof ResizeObserver === `undefined`) return;
-    const observer = new ResizeObserver(measure);
-    for (const el of nodes.values()) observer.observe(el);
-    onCleanup(() => observer.disconnect());
-  });
-  const geometry = createMemo(() => dockPileGeometry(local.items.map((item) => item.height ?? measured()[item.id] ?? 0), local.expanded));
-  return (() => {
-    var _el$1 = _tmpl$5$5();
-    _el$1.$$focusout = (event) => {
-      const next = event.relatedTarget;
-      if (!next || !event.currentTarget.contains(next)) local.onExpandedChange?.(false);
-    };
-    _el$1.$$focusin = () => local.onExpandedChange?.(true);
-    _el$1.addEventListener("pointerleave", (event) => {
-      if (event.pointerType !== `touch`) local.onExpandedChange?.(false);
-    });
-    _el$1.addEventListener("pointerenter", (event) => {
-      if (event.pointerType !== `touch`) local.onExpandedChange?.(true);
-    });
-    use((el) => bindStyle(el, () => ({
-      ...local.style ?? {},
-      height: `${geometry().height}px`
-    })), _el$1);
-    spread(_el$1, mergeProps({
-      get ["data-expanded"]() {
-        return local.expanded ? `true` : `false`;
-      },
-      get ["class"]() {
-        return cn(DOCK_PILE_CLASSES.root, local.class);
-      }
-    }, rest), false, true);
-    insert(_el$1, createComponent(For, {
-      get each() {
-        return local.items;
-      },
-      children: (item, i) => {
-        const placed = () => geometry().items[i()] ?? {
-          offset: 0,
-          scale: 1,
-          visible: true
-        };
-        let node2;
-        onCleanup(() => {
-          if (nodes.get(item.id) === node2) nodes.delete(item.id);
-        });
-        return (() => {
-          var _el$10 = _tmpl$6$4();
-          use((el) => {
-            node2 = el;
-            nodes.set(item.id, el);
-            bindStyle(el, () => css({
-              "--offset": `${placed().offset}px`,
-              "--scale": `${placed().scale}`,
-              zIndex: i() + 1
-            }));
-          }, _el$10);
-          insert(_el$10, () => item.node);
-          effect((_p$) => {
-            var _v$8 = i() === local.items.length - 1 ? `true` : `false`, _v$9 = placed().visible ? `true` : `false`, _v$0 = DOCK_PILE_CLASSES.item;
-            _v$8 !== _p$.e && setAttribute(_el$10, "data-front", _p$.e = _v$8);
-            _v$9 !== _p$.t && setAttribute(_el$10, "data-visible", _p$.t = _v$9);
-            _v$0 !== _p$.a && className(_el$10, _p$.a = _v$0);
-            return _p$;
-          }, {
-            e: void 0,
-            t: void 0,
-            a: void 0
-          });
-          return _el$10;
-        })();
-      }
-    }));
-    return _el$1;
-  })();
-}
-delegateEvents(["click", "keydown", "focusin", "focusout"]);
-var _tmpl$$l = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-group>`), _tmpl$2$b = /* @__PURE__ */ template(`<div role=menuitem>`), _tmpl$3$7 = /* @__PURE__ */ template(`<span>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div role=menuitemcheckbox><span>`), _tmpl$5$4 = /* @__PURE__ */ template(`<div role=group data-slot=dropdown-menu-radio-group>`), _tmpl$6$3 = /* @__PURE__ */ template(`<div role=menuitemradio><span>`), _tmpl$7$2 = /* @__PURE__ */ template(`<div data-slot=dropdown-menu-label>`), _tmpl$8$2 = /* @__PURE__ */ template(`<div role=separator aria-orientation=horizontal data-slot=dropdown-menu-separator>`), _tmpl$9$1 = /* @__PURE__ */ template(`<span data-slot=dropdown-menu-shortcut>`), _tmpl$0$1 = /* @__PURE__ */ template(`<div role=menuitem aria-haspopup=menu>`);
-const RootContext = createContext();
-const useRoot = (part2) => {
-  const ctx = useContext(RootContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`DropdownMenu\``);
-  return ctx;
-};
-const LevelOpenContext = createContext(() => false);
-function DropdownMenu(props) {
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  useKeyboardTracking();
-  const value = {
-    open,
-    setOpen,
-    triggerId: `radix-${createId()}`,
-    contentId: `radix-${createId()}`,
-    trigger,
-    setTrigger,
-    dir: () => props.dir ?? `ltr`
-  };
-  return createComponent(RootContext.Provider, {
-    value,
-    get children() {
-      return createComponent(LevelOpenContext.Provider, {
-        value: open,
-        get children() {
-          return props.children;
-        }
-      });
-    }
-  });
-}
-function DropdownMenuPortal(props) {
-  return createComponent(DialogPortalPart, props);
-}
-function DropdownMenuTrigger(props) {
-  const ctx = useRoot(`DropdownMenuTrigger`);
-  const [local, rest] = splitProps(props, [`as`, `ref`, `disabled`, `onPointerDown`, `onKeyDown`]);
-  const disabled = () => local.disabled ?? false;
-  return createComponent(Dynamic, mergeProps({
-    get component() {
-      return local.as ?? `button`;
-    },
-    "data-slot": "dropdown-menu-trigger",
-    type: "button",
-    get id() {
-      return ctx.triggerId;
-    },
-    "aria-haspopup": "menu",
-    get ["aria-expanded"]() {
-      return ctx.open() ? `true` : `false`;
-    },
-    get ["aria-controls"]() {
-      return memo(() => !!ctx.open())() ? ctx.contentId : void 0;
-    },
-    get ["data-state"]() {
-      return stateOf$1(ctx.open());
-    },
-    get ["data-disabled"]() {
-      return disabled() ? `` : void 0;
-    },
-    get disabled() {
-      return disabled();
-    }
-  }, rest, {
-    ref(r$) {
-      var _ref$ = mergeRefs(local.ref, ctx.setTrigger);
-      typeof _ref$ === "function" && _ref$(r$);
-    },
-    get onPointerDown() {
-      return composeHandlers(local.onPointerDown, (e) => {
-        if (!untrack(disabled) && e.button === 0 && e.ctrlKey === false) {
-          const was = untrack(ctx.open);
-          ctx.setOpen(!was);
-          if (!was) e.preventDefault();
-        }
-      });
-    },
-    get onKeyDown() {
-      return composeHandlers(local.onKeyDown, (e) => {
-        if (untrack(disabled)) return;
-        if ([`Enter`, ` `].includes(e.key)) ctx.setOpen(!untrack(ctx.open));
-        if (e.key === `ArrowDown`) ctx.setOpen(true);
-        if ([`Enter`, ` `, `ArrowDown`].includes(e.key)) e.preventDefault();
-      });
-    }
-  }));
-}
-const CONTENT_KEYS = [`class`, `side`, `align`, `sideOffset`, `alignOffset`, `collisionPadding`, `container`, `children`, `ref`, `onKeyDown`, `onCloseAutoFocus`, `onEscapeKeyDown`, `onFocusOutside`, `onInteractOutside`];
-function DropdownMenuContent(props) {
-  const ctx = useRoot(`DropdownMenuContent`);
-  const [local, rest] = splitProps(props, CONTENT_KEYS);
-  const presence = createPresence(ctx.open);
-  let interactedOutside = false;
-  return createComponent(DropdownMenuPortal, {
-    get container() {
-      return local.container;
-    },
-    get children() {
-      return createComponent(Show, {
-        get when() {
-          return presence.mounted();
-        },
-        children: (_) => {
-          const lag = layerMountedThisTask();
-          return createComponent(MenuContent, {
-            get anchor() {
-              return ctx.trigger();
-            },
-            get side() {
-              return local.side ?? `bottom`;
-            },
-            get align() {
-              return local.align ?? `center`;
-            },
-            get sideOffset() {
-              return local.sideOffset ?? 4;
-            },
-            get alignOffset() {
-              return local.alignOffset;
-            },
-            get collisionPadding() {
-              return local.collisionPadding ?? 0;
-            },
-            get dir() {
-              return ctx.dir();
-            },
-            kind: "dropdown-menu",
-            lagParentLayer: lag,
-            root: true,
-            get id() {
-              return ctx.contentId;
-            },
-            get labelledBy() {
-              return ctx.triggerId;
-            },
-            state: () => stateOf$1(ctx.open()),
-            attrs: () => ({
-              "data-slot": `dropdown-menu-content`,
-              class: cn(DROPDOWN_MENU_CLASSES.content, local.class),
-              ...rest
-            }),
-            setContent: (el) => {
-              if (el) {
-                presence.ref(el);
-                noteLayerMount();
-                callRef(local.ref, el);
-              }
-            },
-            onDismiss: () => ctx.setOpen(false),
-            get onKeyDown() {
-              return local.onKeyDown;
-            },
-            get onEscapeKeyDown() {
-              return local.onEscapeKeyDown;
-            },
-            get onFocusOutside() {
-              return local.onFocusOutside;
-            },
-            onInteractOutside: (e) => {
-              local.onInteractOutside?.(e);
-              if (e.defaultPrevented) return;
-              const original = e.detail.originalEvent;
-              const ctrlLeftClick = original.button === 0 && original.ctrlKey === true;
-              if (original.button === 2 || ctrlLeftClick) interactedOutside = true;
-            },
-            onCloseAutoFocus: (e) => {
-              local.onCloseAutoFocus?.(e);
-              if (e.defaultPrevented) return;
-              if (!interactedOutside) ctx.trigger()?.focus();
-              interactedOutside = false;
-              e.preventDefault();
-            },
-            get children() {
-              return local.children;
-            }
-          });
-        }
-      });
-    }
-  });
-}
-function DropdownMenuGroup(props) {
-  return (() => {
-    var _el$ = _tmpl$$l();
-    spread(_el$, props, false, false);
-    return _el$;
-  })();
-}
-const insetAttr = (inset) => inset === void 0 ? void 0 : String(inset);
-function createItem(local, onSelect) {
-  const root = useRoot(`DropdownMenuItem`);
-  const row = createSelectable(() => local.disabled ?? false, (e) => onSelect(e), () => root.setOpen(false));
-  const h = row.handlers;
-  return {
-    attrs: row.attrs,
-    ref: mergeRefs(row.ref, local.ref),
-    handlers: {
-      onClick: composeHandlers(local.onClick, h.onClick),
-      onPointerDown: composeHandlers(local.onPointerDown, h.onPointerDown, false),
-      onPointerUp: composeHandlers(local.onPointerUp, h.onPointerUp),
-      onPointerMove: composeHandlers(local.onPointerMove, h.onPointerMove),
-      onPointerLeave: composeHandlers(local.onPointerLeave, h.onPointerLeave),
-      onKeyDown: composeHandlers(local.onKeyDown, h.onKeyDown),
-      onFocus: composeHandlers(local.onFocus, h.onFocus),
-      onBlur: composeHandlers(local.onBlur, h.onBlur)
-    }
-  };
-}
-const ITEM_KEYS = [`disabled`, `onSelect`, `ref`, `onClick`, `onPointerDown`, `onPointerUp`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`];
-function DropdownMenuItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `inset`, `variant`], ITEM_KEYS);
-  const item = createItem(handlers, (e) => handlers.onSelect?.(e));
-  return (() => {
-    var _el$2 = _tmpl$2$b();
-    var _ref$2 = item.ref;
-    typeof _ref$2 === "function" ? use(_ref$2, _el$2) : item.ref = _el$2;
-    spread(_el$2, mergeProps(() => item.attrs(), {
-      "data-slot": "dropdown-menu-item",
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
-      },
-      get ["data-variant"]() {
-        return local.variant ?? `default`;
-      },
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.item, local.class);
-      }
-    }, rest, () => item.handlers), false, false);
-    return _el$2;
-  })();
-}
-const checkedState = (c) => c === `indeterminate` ? `indeterminate` : c ? `checked` : `unchecked`;
-const IndicatorContext = createContext(() => false);
-function ItemIndicator(props) {
-  const checked = useContext(IndicatorContext);
-  return createComponent(Show, {
-    get when() {
-      return checked() === true || checked() === `indeterminate`;
-    },
-    get children() {
-      var _el$3 = _tmpl$3$7();
-      insert(_el$3, () => props.children);
-      effect(() => setAttribute(_el$3, "data-state", checkedState(checked())));
-      return _el$3;
-    }
-  });
-}
-function DropdownMenuCheckboxItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `checked`, `onCheckedChange`], ITEM_KEYS);
-  const checked = () => local.checked ?? false;
-  const item = createItem(handlers, (e) => {
-    handlers.onSelect?.(e);
-    const c = untrack(checked);
-    local.onCheckedChange?.(c === `indeterminate` ? true : !c);
-  });
-  return createComponent(IndicatorContext.Provider, {
-    value: checked,
-    get children() {
-      var _el$4 = _tmpl$4$6(), _el$5 = _el$4.firstChild;
-      var _ref$3 = item.ref;
-      typeof _ref$3 === "function" ? use(_ref$3, _el$4) : item.ref = _el$4;
-      spread(_el$4, mergeProps({
-        get ["aria-checked"]() {
-          return memo(() => checked() === `indeterminate`)() ? `mixed` : checked() ? `true` : `false`;
-        }
-      }, () => item.attrs(), {
-        "data-slot": "dropdown-menu-checkbox-item",
-        get ["class"]() {
-          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
-        }
-      }, rest, {
-        get ["data-state"]() {
-          return checkedState(checked());
-        }
-      }, () => item.handlers), false, true);
-      insert(_el$5, createComponent(ItemIndicator, {
-        get children() {
-          return createComponent(PaintIcon, {
-            icon: Check,
-            get ["class"]() {
-              return DROPDOWN_MENU_CLASSES.checkIcon;
-            }
-          });
-        }
-      }));
-      insert(_el$4, () => local.children, null);
-      effect(() => className(_el$5, DROPDOWN_MENU_CLASSES.itemIndicator));
-      return _el$4;
-    }
-  });
-}
-const RadioGroupContext = createContext({
-  value: () => void 0,
-  onValueChange: () => {
-  }
-});
-function DropdownMenuRadioGroup(props) {
-  const [local, rest] = splitProps(props, [`value`, `onValueChange`]);
-  return createComponent(RadioGroupContext.Provider, {
-    value: {
-      value: () => local.value,
-      onValueChange: (v) => local.onValueChange?.(v)
-    },
-    get children() {
-      var _el$6 = _tmpl$5$4();
-      spread(_el$6, rest, false, false);
-      return _el$6;
-    }
-  });
-}
-function DropdownMenuRadioItem(props) {
-  const [local, handlers, rest] = splitProps(props, [`class`, `children`, `value`], ITEM_KEYS);
-  const group = useContext(RadioGroupContext);
-  const checked = () => local.value === group.value();
-  const item = createItem(handlers, (e) => {
-    handlers.onSelect?.(e);
-    group.onValueChange(local.value);
-  });
-  return createComponent(IndicatorContext.Provider, {
-    value: checked,
-    get children() {
-      var _el$7 = _tmpl$6$3(), _el$8 = _el$7.firstChild;
-      var _ref$4 = item.ref;
-      typeof _ref$4 === "function" ? use(_ref$4, _el$7) : item.ref = _el$7;
-      spread(_el$7, mergeProps({
-        get ["aria-checked"]() {
-          return checked() ? `true` : `false`;
-        }
-      }, () => item.attrs(), {
-        "data-slot": "dropdown-menu-radio-item",
-        get ["class"]() {
-          return cn(DROPDOWN_MENU_CLASSES.checkItem, local.class);
-        }
-      }, rest, {
-        get ["data-state"]() {
-          return checkedState(checked());
-        }
-      }, () => item.handlers), false, true);
-      insert(_el$8, createComponent(ItemIndicator, {
-        get children() {
-          return createComponent(PaintIcon, {
-            icon: Circle,
-            get ["class"]() {
-              return DROPDOWN_MENU_CLASSES.radioIcon;
-            }
-          });
-        }
-      }));
-      insert(_el$7, () => local.children, null);
-      effect(() => className(_el$8, DROPDOWN_MENU_CLASSES.itemIndicator));
-      return _el$7;
-    }
-  });
-}
-function DropdownMenuLabel(props) {
-  const [local, rest] = splitProps(props, [`class`, `inset`]);
-  return (() => {
-    var _el$9 = _tmpl$7$2();
-    spread(_el$9, mergeProps({
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
-      },
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.label, local.class);
-      }
-    }, rest), false, false);
-    return _el$9;
-  })();
-}
-function DropdownMenuSeparator(props) {
-  const [local, rest] = splitProps(props, [`class`]);
-  return (() => {
-    var _el$0 = _tmpl$8$2();
-    spread(_el$0, mergeProps({
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.separator, local.class);
-      }
-    }, rest), false, false);
-    return _el$0;
-  })();
-}
-function DropdownMenuShortcut(props) {
-  const [local, rest] = splitProps(props, [`class`]);
-  return (() => {
-    var _el$1 = _tmpl$9$1();
-    spread(_el$1, mergeProps({
-      get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.shortcut, local.class);
-      }
-    }, rest), false, false);
-    return _el$1;
-  })();
-}
-const SubContext = createContext();
-const useSub = (part2) => {
-  const ctx = useContext(SubContext);
-  if (!ctx) throw new Error(`\`${part2}\` must be used within \`DropdownMenuSub\``);
-  return ctx;
-};
-function DropdownMenuSub(props) {
-  const parentOpen = useContext(LevelOpenContext);
-  const [open, setOpen] = createOpenState({
-    open: () => props.open,
-    defaultOpen: props.defaultOpen,
-    onOpenChange: () => props.onOpenChange
-  });
-  const [trigger, setTrigger] = createSignal();
-  const [content, setContent] = createSignal();
-  createEffect(on(parentOpen, (o) => o === false && setOpen(false)));
-  onCleanup(() => setOpen(false));
-  const value = {
-    open,
-    setOpen,
-    triggerId: `radix-${createId()}`,
-    contentId: `radix-${createId()}`,
-    trigger,
-    setTrigger,
-    content,
-    setContent
-  };
-  return createComponent(SubContext.Provider, {
-    value,
-    get children() {
-      return createComponent(LevelOpenContext.Provider, {
-        value: open,
-        get children() {
-          return props.children;
-        }
-      });
-    }
-  });
-}
-function DropdownMenuSubTrigger(props) {
-  const root = useRoot(`DropdownMenuSubTrigger`);
-  const sub = useSub(`DropdownMenuSubTrigger`);
-  const [local, rest] = splitProps(props, [`class`, `inset`, `variant`, `children`, `disabled`, `ref`, `onClick`, `onPointerMove`, `onPointerLeave`, `onKeyDown`, `onFocus`, `onBlur`]);
-  const disabled = () => local.disabled ?? false;
-  const row = createMenuRow(disabled);
-  let openTimer;
-  let graceTimer;
-  const clearOpenTimer = () => {
-    clearTimeout(openTimer);
-    openTimer = void 0;
+function DockPile(props) {
+  const [local, rest] = splitProps(props, [`items`, `expanded`, `onExpandedChange`, `class`, `style`]);
+  const [measured, setMeasured] = createSignal({});
+  const nodes = /* @__PURE__ */ new Map();
+  const measure = () => {
+    const next = {};
+    for (const item of local.items) {
+      const el = nodes.get(item.id);
+      if (item.height === void 0 && el) next[item.id] = el.offsetHeight;
+    }
+    const prev = measured();
+    if (!(Object.keys(next).length === Object.keys(prev).length && Object.entries(next).every(([k, v]) => prev[k] === v))) setMeasured(next);
   };
-  onCleanup(() => {
-    clearOpenTimer();
-    clearTimeout(graceTimer);
-    row.level.setGrace(null);
+  createEffect(() => {
+    void local.items;
+    measure();
+    if (typeof ResizeObserver === `undefined`) return;
+    const observer = new ResizeObserver(measure);
+    for (const el of nodes.values()) observer.observe(el);
+    onCleanup(() => observer.disconnect());
   });
-  const openKey = () => root.dir() === `rtl` ? `ArrowLeft` : `ArrowRight`;
+  const geometry = createMemo(() => dockPileGeometry(local.items.map((item) => item.height ?? measured()[item.id] ?? 0), local.expanded));
   return (() => {
-    var _el$10 = _tmpl$0$1();
-    var _ref$5 = mergeRefs(row.ref, sub.setTrigger, local.ref);
-    typeof _ref$5 === "function" && use(_ref$5, _el$10);
-    spread(_el$10, mergeProps({
-      get id() {
-        return sub.triggerId;
-      },
-      get ["aria-expanded"]() {
-        return sub.open() ? `true` : `false`;
-      },
-      get ["aria-controls"]() {
-        return sub.contentId;
-      },
-      get ["data-state"]() {
-        return stateOf$1(sub.open());
-      }
-    }, () => row.attrs(), {
-      "data-slot": "dropdown-menu-sub-trigger",
-      get ["data-inset"]() {
-        return insetAttr(local.inset);
-      },
-      get ["data-variant"]() {
-        return local.variant ?? `default`;
+    var _el$1 = _tmpl$5$5();
+    _el$1.$$focusout = (event) => {
+      const next = event.relatedTarget;
+      if (!next || !event.currentTarget.contains(next)) local.onExpandedChange?.(false);
+    };
+    _el$1.$$focusin = () => local.onExpandedChange?.(true);
+    _el$1.addEventListener("pointerleave", (event) => {
+      if (event.pointerType !== `touch`) local.onExpandedChange?.(false);
+    });
+    _el$1.addEventListener("pointerenter", (event) => {
+      if (event.pointerType !== `touch`) local.onExpandedChange?.(true);
+    });
+    use((el) => bindStyle(el, () => ({
+      ...local.style ?? {},
+      height: `${geometry().height}px`
+    })), _el$1);
+    spread(_el$1, mergeProps({
+      get ["data-expanded"]() {
+        return local.expanded ? `true` : `false`;
       },
       get ["class"]() {
-        return cn(DROPDOWN_MENU_CLASSES.subTrigger, local.class);
+        return cn(DOCK_PILE_CLASSES.root, local.class);
       }
-    }, rest, {
-      get onClick() {
-        return composeHandlers(local.onClick, (e) => {
-          if (untrack(disabled)) return;
-          e.currentTarget.focus();
-          if (!untrack(sub.open)) sub.setOpen(true);
-        });
-      },
-      get onPointerMove() {
-        return composeHandlers(local.onPointerMove, (e) => {
-          if (e.pointerType !== `mouse`) return;
-          if (row.level.onItemEnter(e)) return;
-          if (!untrack(disabled) && !untrack(sub.open) && !openTimer) {
-            row.level.setGrace(null);
-            openTimer = setTimeout(() => {
-              sub.setOpen(true);
-              clearOpenTimer();
-            }, 100);
-          }
-          row.handlers.onPointerMove(e);
-        });
-      },
-      get onPointerLeave() {
-        return composeHandlers(local.onPointerLeave, (e) => {
-          if (e.pointerType !== `mouse`) return;
-          clearOpenTimer();
-          const content = sub.content();
-          const rect = content?.getBoundingClientRect();
-          if (content && rect) {
-            const side = content.dataset.side;
-            const right = side === `right`;
-            const bleed = right ? -5 : 5;
-            const near = rect[right ? `left` : `right`];
-            const far = rect[right ? `right` : `left`];
-            row.level.setGrace({
-              area: [{
-                x: e.clientX + bleed,
-                y: e.clientY
-              }, {
-                x: near,
-                y: rect.top
-              }, {
-                x: far,
-                y: rect.top
-              }, {
-                x: far,
-                y: rect.bottom
-              }, {
-                x: near,
-                y: rect.bottom
-              }],
-              side
-            });
-            clearTimeout(graceTimer);
-            graceTimer = setTimeout(() => row.level.setGrace(null), 300);
-          } else {
-            if (row.level.onTriggerLeave(e)) return;
-            row.level.setGrace(null);
-            row.handlers.onPointerLeave(e);
-          }
-        });
+    }, rest), false, true);
+    insert(_el$1, createComponent(For, {
+      get each() {
+        return local.items;
       },
-      get onKeyDown() {
-        return composeHandlers(local.onKeyDown, (e) => {
-          const typingAhead = row.level.search() !== ``;
-          if (untrack(disabled) || typingAhead && e.key === ` `) return;
-          if ([`Enter`, ` `, openKey()].includes(e.key)) {
-            sub.setOpen(true);
-            sub.content()?.focus();
-            e.preventDefault();
-            return;
-          }
-          row.handlers.onKeyDown(e);
+      children: (item, i) => {
+        const placed = () => geometry().items[i()] ?? {
+          offset: 0,
+          scale: 1,
+          visible: true
+        };
+        let node2;
+        onCleanup(() => {
+          if (nodes.get(item.id) === node2) nodes.delete(item.id);
         });
-      },
-      get onFocus() {
-        return composeHandlers(local.onFocus, row.handlers.onFocus);
-      },
-      get onBlur() {
-        return composeHandlers(local.onBlur, row.handlers.onBlur);
-      }
-    }), false, true);
-    insert(_el$10, () => local.children, null);
-    insert(_el$10, createComponent(PaintIcon, {
-      icon: ChevronRight,
-      get ["class"]() {
-        return DROPDOWN_MENU_CLASSES.subChevron;
+        return (() => {
+          var _el$10 = _tmpl$6$3();
+          use((el) => {
+            node2 = el;
+            nodes.set(item.id, el);
+            bindStyle(el, () => css({
+              "--offset": `${placed().offset}px`,
+              "--scale": `${placed().scale}`,
+              zIndex: i() + 1
+            }));
+          }, _el$10);
+          insert(_el$10, () => item.node);
+          effect((_p$) => {
+            var _v$8 = i() === local.items.length - 1 ? `true` : `false`, _v$9 = placed().visible ? `true` : `false`, _v$0 = DOCK_PILE_CLASSES.item;
+            _v$8 !== _p$.e && setAttribute(_el$10, "data-front", _p$.e = _v$8);
+            _v$9 !== _p$.t && setAttribute(_el$10, "data-visible", _p$.t = _v$9);
+            _v$0 !== _p$.a && className(_el$10, _p$.a = _v$0);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$10;
+        })();
       }
-    }), null);
-    return _el$10;
+    }));
+    return _el$1;
   })();
 }
-function DropdownMenuSubContent(props) {
-  const root = useRoot(`DropdownMenuSubContent`);
-  const sub = useSub(`DropdownMenuSubContent`);
-  const [local, rest] = splitProps(props, CONTENT_KEYS);
-  const presence = createPresence(sub.open);
-  const closeKey = () => root.dir() === `rtl` ? `ArrowRight` : `ArrowLeft`;
-  return createComponent(DropdownMenuPortal, {
-    get container() {
-      return local.container;
-    },
-    get children() {
-      return createComponent(Show, {
-        get when() {
-          return presence.mounted();
-        },
-        children: (_) => {
-          const lag = layerMountedThisTask();
-          return createComponent(MenuContent, {
-            get anchor() {
-              return sub.trigger();
-            },
-            get side() {
-              return root.dir() === `rtl` ? `left` : `right`;
-            },
-            align: "start",
-            get sideOffset() {
-              return local.sideOffset ?? 0;
-            },
-            get alignOffset() {
-              return local.alignOffset;
-            },
-            get collisionPadding() {
-              return local.collisionPadding ?? 0;
-            },
-            get dir() {
-              return root.dir();
-            },
-            kind: "dropdown-menu",
-            lagParentLayer: lag,
-            root: false,
-            get id() {
-              return sub.contentId;
-            },
-            get labelledBy() {
-              return sub.triggerId;
-            },
-            state: () => stateOf$1(sub.open()),
-            attrs: () => ({
-              "data-slot": `dropdown-menu-sub-content`,
-              class: cn(DROPDOWN_MENU_CLASSES.subContent, local.class),
-              ...rest
-            }),
-            setContent: (el) => {
-              sub.setContent(el);
-              if (el) {
-                presence.ref(el);
-                noteLayerMount();
-                callRef(local.ref, el);
-              }
-            },
-            onDismiss: () => {
-            },
-            onEscapeKeyDown: (e) => {
-              local.onEscapeKeyDown?.(e);
-              if (e.defaultPrevented) return;
-              root.setOpen(false);
-              e.preventDefault();
-            },
-            onFocusOutside: (e) => {
-              local.onFocusOutside?.(e);
-              if (e.defaultPrevented) return;
-              if (e.target !== sub.trigger()) sub.setOpen(false);
-            },
-            get onInteractOutside() {
-              return local.onInteractOutside;
-            },
-            onCloseAutoFocus: (e) => e.preventDefault(),
-            onKeyDown: (e) => {
-              local.onKeyDown?.(e);
-              if (e.defaultPrevented) return;
-              if (sub.content()?.contains(e.target) && e.key === closeKey()) {
-                sub.setOpen(false);
-                sub.trigger()?.focus();
-                e.preventDefault();
-              }
-            },
-            get children() {
-              return local.children;
-            }
-          });
-        }
-      });
-    }
-  });
-}
-var _tmpl$$k = /* @__PURE__ */ template(`<div data-slot=icon-disc>`);
+delegateEvents(["click", "keydown", "focusin", "focusout"]);
+var _tmpl$$m = /* @__PURE__ */ template(`<div data-slot=icon-disc>`);
 const LUCIDE_STROKE = 2;
 const UNFOCUSABLE$1 = {
   focusable: `false`
 };
 function IconDisc(props) {
   return (() => {
-    var _el$ = _tmpl$$k();
+    var _el$ = _tmpl$$m();
     insert(_el$, createComponent(PaintIcon, mergeProps({
       get icon() {
         return props.icon;
@@ -4697,7 +3791,7 @@ function IconDisc(props) {
     return _el$;
   })();
 }
-var _tmpl$$j = /* @__PURE__ */ template(`<p>`), _tmpl$2$a = /* @__PURE__ */ template(`<div>`), _tmpl$3$6 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=page role=status><h2>`), _tmpl$4$5 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=list role=status><span>`), _tmpl$5$3 = /* @__PURE__ */ template(`<p data-slot=list-empty role=status>`), _tmpl$6$2 = /* @__PURE__ */ template(`<button data-slot=empty-cta><span></span><span>`);
+var _tmpl$$l = /* @__PURE__ */ template(`<p>`), _tmpl$2$c = /* @__PURE__ */ template(`<div>`), _tmpl$3$8 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=page role=status><h2>`), _tmpl$4$7 = /* @__PURE__ */ template(`<div data-slot=empty-state data-size=list role=status><span>`), _tmpl$5$4 = /* @__PURE__ */ template(`<p data-slot=list-empty role=status>`), _tmpl$6$2 = /* @__PURE__ */ template(`<button data-slot=empty-cta><span></span><span>`);
 const UNFOCUSABLE = {
   focusable: `false`
 };
@@ -4709,7 +3803,7 @@ function EmptyState(props) {
     },
     get fallback() {
       return (() => {
-        var _el$5 = _tmpl$4$5(), _el$6 = _el$5.firstChild;
+        var _el$5 = _tmpl$4$7(), _el$6 = _el$5.firstChild;
         insert(_el$5, createComponent(Show, {
           get when() {
             return props.icon;
@@ -4731,7 +3825,7 @@ function EmptyState(props) {
       })();
     },
     get children() {
-      var _el$ = _tmpl$3$6(), _el$2 = _el$.firstChild;
+      var _el$ = _tmpl$3$8(), _el$2 = _el$.firstChild;
       insert(_el$, createComponent(Show, {
         get when() {
           return props.icon;
@@ -4748,7 +3842,7 @@ function EmptyState(props) {
           return props.description;
         },
         get children() {
-          var _el$3 = _tmpl$$j();
+          var _el$3 = _tmpl$$l();
           insert(_el$3, () => props.description);
           effect(() => className(_el$3, EMPTY_STATE_CLASSES.pageDescription));
           return _el$3;
@@ -4759,7 +3853,7 @@ function EmptyState(props) {
           return actions();
         },
         get children() {
-          var _el$4 = _tmpl$2$a();
+          var _el$4 = _tmpl$2$c();
           insert(_el$4, actions);
           effect(() => className(_el$4, EMPTY_STATE_CLASSES.pageActions));
           return _el$4;
@@ -4781,7 +3875,7 @@ function EmptyState(props) {
 function ListEmpty(props) {
   const [local, rest] = splitProps(props, [`class`, `children`]);
   return (() => {
-    var _el$7 = _tmpl$5$3();
+    var _el$7 = _tmpl$5$4();
     spread(_el$7, mergeProps({
       get ["class"]() {
         return cn(EMPTY_STATE_CLASSES.listEmpty, local.class);
@@ -4825,11 +3919,11 @@ function EmptyCta(props) {
     return _el$8;
   })();
 }
-var _tmpl$$i = /* @__PURE__ */ template(`<div data-slot=glass-card>`);
+var _tmpl$$k = /* @__PURE__ */ template(`<div data-slot=glass-card>`);
 function GlassCard(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$i();
+    var _el$ = _tmpl$$k();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(GLASS_CARD_CLASSES.root, local.class);
@@ -4838,7 +3932,7 @@ function GlassCard(props) {
     return _el$;
   })();
 }
-var _tmpl$$h = /* @__PURE__ */ template(`<div data-slot=hover-card-content>`);
+var _tmpl$$j = /* @__PURE__ */ template(`<div data-slot=hover-card-content>`);
 const HoverCardContext = createContext();
 const useHoverCard = (part2) => {
   const ctx = useContext(HoverCardContext);
@@ -4968,7 +4062,7 @@ function HoverCardContent(props) {
       },
       children: (popper) => {
         const el = (() => {
-          var _el$ = _tmpl$$h();
+          var _el$ = _tmpl$$j();
           spread(_el$, mergeProps({
             get ["data-side"]() {
               return popper.placedSide();
@@ -5071,12 +4165,12 @@ function HoverCardContent(props) {
     }
   });
 }
-var _tmpl$$g = /* @__PURE__ */ template(`<input data-slot=input>`);
+var _tmpl$$i = /* @__PURE__ */ template(`<input data-slot=input>`);
 function Input(props) {
   const [local, rest] = splitProps(props, [`class`]);
   const valueAttr = () => props.value === void 0 || props.value === null ? void 0 : String(props.value);
   return (() => {
-    var _el$ = _tmpl$$g();
+    var _el$ = _tmpl$$i();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(INPUT_CLASSES.root, local.class);
@@ -5086,11 +4180,11 @@ function Input(props) {
     return _el$;
   })();
 }
-var _tmpl$$f = /* @__PURE__ */ template(`<kbd data-slot=kbd>`), _tmpl$2$9 = /* @__PURE__ */ template(`<span data-slot=kbd-group>`);
+var _tmpl$$h = /* @__PURE__ */ template(`<kbd data-slot=kbd>`), _tmpl$2$b = /* @__PURE__ */ template(`<span data-slot=kbd-group>`);
 function Kbd(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$ = _tmpl$$f();
+    var _el$ = _tmpl$$h();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(KBD_CLASSES.root, local.class);
@@ -5102,7 +4196,7 @@ function Kbd(props) {
 function KbdGroup(props) {
   const [local, rest] = splitProps(props, [`class`]);
   return (() => {
-    var _el$2 = _tmpl$2$9();
+    var _el$2 = _tmpl$2$b();
     spread(_el$2, mergeProps({
       get ["class"]() {
         return cn(KBD_CLASSES.group, local.class);
@@ -5111,7 +4205,7 @@ function KbdGroup(props) {
     return _el$2;
   })();
 }
-var _tmpl$$e = /* @__PURE__ */ template(`<label data-slot=label>`);
+var _tmpl$$g = /* @__PURE__ */ template(`<label data-slot=label>`);
 function Label(props) {
   const [local, rest] = splitProps(props, [`class`, `onMouseDown`]);
   const onMouseDown = (event) => {
@@ -5122,7 +4216,7 @@ function Label(props) {
     if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
   };
   return (() => {
-    var _el$ = _tmpl$$e();
+    var _el$ = _tmpl$$g();
     spread(_el$, mergeProps({
       get ["class"]() {
         return cn(LABEL_CLASSES.root, local.class);
@@ -5133,7 +4227,7 @@ function Label(props) {
     return _el$;
   })();
 }
-var _tmpl$$d = /* @__PURE__ */ template(`<div aria-valuemin=0 role=progressbar data-slot=progress><div data-slot=progress-indicator>`);
+var _tmpl$$f = /* @__PURE__ */ template(`<div aria-valuemin=0 role=progressbar data-slot=progress><div data-slot=progress-indicator>`);
 const isNumber = (v) => typeof v === `number`;
 const validMax = (max) => isNumber(max) && !Number.isNaN(max) && max > 0;
 const validValue = (value, max) => isNumber(value) && !Number.isNaN(value) && value <= max && value >= 0;
@@ -5148,7 +4242,7 @@ function Progress(props) {
   };
   const indeterminate = () => local.value === null || local.value === void 0;
   return (() => {
-    var _el$ = _tmpl$$d(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$f(), _el$2 = _el$.firstChild;
     spread(_el$, mergeProps({
       get ["aria-valuemax"]() {
         return max();
@@ -5208,6 +4302,176 @@ function Meter(props) {
     }
   }, rest));
 }
+var _tmpl$$e = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$2$a = /* @__PURE__ */ template(`<button type=button data-slot=mosaic-tile><img alt aria-hidden=true loading=lazy decoding=async>`, true, false, false), _tmpl$3$7 = /* @__PURE__ */ template(`<div data-slot=mosaic-side>`), _tmpl$4$6 = /* @__PURE__ */ template(`<div data-slot=mosaic role=group>`);
+function Mosaic(props) {
+  const [local, rest] = splitProps(props, [`pictures`, `label`, `onSelect`, `class`]);
+  const tiles = () => mosaicTiles(local.pictures.length);
+  const Tile = (p) => {
+    const picture = () => local.pictures[p.tile.index];
+    const alt = () => picture().alt ?? ``;
+    return (() => {
+      var _el$ = _tmpl$2$a(), _el$2 = _el$.firstChild;
+      _el$.$$click = () => local.onSelect?.(p.tile.index);
+      setAttribute(_el$2, "draggable", false);
+      insert(_el$, createComponent(Show, {
+        get when() {
+          return p.tile.more > 0;
+        },
+        get children() {
+          var _el$3 = _tmpl$$e();
+          insert(_el$3, () => `+${p.tile.more}`);
+          effect(() => className(_el$3, MOSAIC_CLASSES.more));
+          return _el$3;
+        }
+      }), null);
+      effect((_p$) => {
+        var _v$ = p.tile.size, _v$2 = p.tile.more > 0 ? `${alt()}, ${p.tile.more} more` : alt() || void 0, _v$3 = cn(MOSAIC_CLASSES.tile, p.lead ? MOSAIC_CLASSES.lead : MOSAIC_CLASSES.fill), _v$4 = picture().src, _v$5 = MOSAIC_CLASSES.image;
+        _v$ !== _p$.e && setAttribute(_el$, "data-size", _p$.e = _v$);
+        _v$2 !== _p$.t && setAttribute(_el$, "aria-label", _p$.t = _v$2);
+        _v$3 !== _p$.a && className(_el$, _p$.a = _v$3);
+        _v$4 !== _p$.o && setAttribute(_el$2, "src", _p$.o = _v$4);
+        _v$5 !== _p$.i && className(_el$2, _p$.i = _v$5);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0
+      });
+      return _el$;
+    })();
+  };
+  return (() => {
+    var _el$4 = _tmpl$4$6();
+    spread(_el$4, mergeProps({
+      get ["aria-label"]() {
+        return local.label || void 0;
+      },
+      get ["class"]() {
+        return cn(MOSAIC_CLASSES.root, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$4, createComponent(Show, {
+      get when() {
+        return tiles().length >= 3;
+      },
+      get fallback() {
+        return createComponent(For, {
+          get each() {
+            return tiles();
+          },
+          children: (t) => createComponent(Tile, {
+            tile: t,
+            lead: false
+          })
+        });
+      },
+      get children() {
+        return [createComponent(Tile, {
+          get tile() {
+            return tiles()[0];
+          },
+          lead: true
+        }), (() => {
+          var _el$5 = _tmpl$3$7();
+          insert(_el$5, createComponent(For, {
+            get each() {
+              return tiles().slice(1);
+            },
+            children: (t) => createComponent(Tile, {
+              tile: t,
+              lead: false
+            })
+          }));
+          effect(() => className(_el$5, MOSAIC_CLASSES.side));
+          return _el$5;
+        })()];
+      }
+    }));
+    return _el$4;
+  })();
+}
+delegateEvents(["click"]);
+var _tmpl$$d = /* @__PURE__ */ template(`<div data-slot=outline-caption aria-hidden=true>`), _tmpl$2$9 = /* @__PURE__ */ template(`<nav data-slot=outline>`), _tmpl$3$6 = /* @__PURE__ */ template(`<span data-slot=outline-bar aria-hidden=true>`), _tmpl$4$5 = /* @__PURE__ */ template(`<span aria-hidden=true>`), _tmpl$5$3 = /* @__PURE__ */ template(`<button type=button data-slot=outline-row><span>`);
+function Outline(props) {
+  const [local, rest] = splitProps(props, [`items`, `value`, `caption`, `onSelect`, `class`]);
+  return (() => {
+    var _el$ = _tmpl$2$9();
+    spread(_el$, mergeProps({
+      get ["aria-label"]() {
+        return local.caption || `Outline`;
+      },
+      get ["class"]() {
+        return cn(OUTLINE_CLASSES.root, local.class);
+      }
+    }, rest), false, true);
+    insert(_el$, createComponent(Show, {
+      get when() {
+        return local.caption;
+      },
+      get children() {
+        var _el$2 = _tmpl$$d();
+        insert(_el$2, () => local.caption);
+        effect(() => className(_el$2, OUTLINE_CLASSES.caption));
+        return _el$2;
+      }
+    }), null);
+    insert(_el$, createComponent(For, {
+      get each() {
+        return local.items;
+      },
+      children: (item) => {
+        const active = () => local.value != null && item.id === local.value;
+        const count = () => outlineCountText(item.count);
+        return (() => {
+          var _el$3 = _tmpl$5$3(), _el$5 = _el$3.firstChild;
+          _el$3.$$click = () => local.onSelect?.(item.id);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return active();
+            },
+            get children() {
+              var _el$4 = _tmpl$3$6();
+              effect(() => className(_el$4, OUTLINE_CLASSES.bar));
+              return _el$4;
+            }
+          }), _el$5);
+          insert(_el$5, () => item.title);
+          insert(_el$3, createComponent(Show, {
+            get when() {
+              return count();
+            },
+            get children() {
+              var _el$6 = _tmpl$4$5();
+              insert(_el$6, count);
+              effect(() => className(_el$6, OUTLINE_CLASSES.count));
+              return _el$6;
+            }
+          }), null);
+          effect((_p$) => {
+            var _v$ = active() ? `true` : void 0, _v$2 = active() ? `location` : void 0, _v$3 = count() ? `${item.title}, ${item.count}` : void 0, _v$4 = OUTLINE_CLASSES.row, _v$5 = OUTLINE_CLASSES.title;
+            _v$ !== _p$.e && setAttribute(_el$3, "data-active", _p$.e = _v$);
+            _v$2 !== _p$.t && setAttribute(_el$3, "aria-current", _p$.t = _v$2);
+            _v$3 !== _p$.a && setAttribute(_el$3, "aria-label", _p$.a = _v$3);
+            _v$4 !== _p$.o && className(_el$3, _p$.o = _v$4);
+            _v$5 !== _p$.i && className(_el$5, _p$.i = _v$5);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+          });
+          return _el$3;
+        })();
+      }
+    }), null);
+    return _el$;
+  })();
+}
+delegateEvents(["click"]);
 var _tmpl$$c = /* @__PURE__ */ template(`<div data-slot=popover-anchor>`), _tmpl$2$8 = /* @__PURE__ */ template(`<div role=dialog data-slot=popover-content tabindex=-1>`);
 const PopoverContext = createContext();
 const usePopover = (part2) => {
@@ -6247,8 +5511,8 @@ function TabsTrigger(props) {
         if (intent === `last`) candidates.reverse();
         else if (intent === `prev` || intent === `next`) {
           if (intent === `prev`) candidates.reverse();
-          const at = candidates.indexOf(e.currentTarget);
-          candidates = roving.loop() ? wrapArray(candidates, at + 1) : candidates.slice(at + 1);
+          const at2 = candidates.indexOf(e.currentTarget);
+          candidates = roving.loop() ? wrapArray(candidates, at2 + 1) : candidates.slice(at2 + 1);
         }
         setTimeout(() => rovingFocusFirst(candidates));
       },
@@ -6717,10 +5981,10 @@ function ContentImpl(props) {
         y: 0
       };
       const move = (e) => {
-        const at = ctx.triggerPointerDownPos.current;
+        const at2 = ctx.triggerPointerDownPos.current;
         delta = {
-          x: Math.abs(Math.round(e.pageX) - (at?.x ?? 0)),
-          y: Math.abs(Math.round(e.pageY) - (at?.y ?? 0))
+          x: Math.abs(Math.round(e.pageX) - (at2?.x ?? 0)),
+          y: Math.abs(Math.round(e.pageY) - (at2?.y ?? 0))
         };
       };
       const up = (e) => {
@@ -7714,7 +6978,7 @@ function Toaster(props) {
     return store.subscribe((t) => set(t));
   });
   const list = () => toasts() ?? [];
-  const touchQuery = createMediaQuery$1(TOAST_TOUCH_QUERY);
+  const touchQuery = createMediaQuery(TOAST_TOUCH_QUERY);
   const placed = createMemo(() => toastPlacement(local.touch ?? touchQuery()));
   const [expanded, setExpanded] = createSignal(false);
   const [measured, setMeasured] = createSignal({});
@@ -8191,15 +7455,6 @@ function TooltipContent(props) {
     }
   });
 }
-function createMediaQuery(query) {
-  if (typeof window === `undefined` || typeof window.matchMedia !== `function`) return () => false;
-  const mql = window.matchMedia(query);
-  const [matches, setMatches] = createSignal(mql.matches);
-  const onChange = () => setMatches(window.matchMedia(query).matches);
-  mql.addEventListener(`change`, onChange);
-  onCleanup(() => mql.removeEventListener(`change`, onChange));
-  return matches;
-}
 const MOBILE_BREAKPOINT = 768;
 function createIsMobile() {
   const narrow = () => typeof window !== `undefined` && window.innerWidth < MOBILE_BREAKPOINT;
@@ -8219,7 +7474,7 @@ function createIsMobile() {
 }
 var _tmpl$ = /* @__PURE__ */ template(`<span data-slot=voice-wave-child>`), _tmpl$2 = /* @__PURE__ */ template(`<span data-slot=voice-wave><svg aria-hidden=true>`), _tmpl$3 = /* @__PURE__ */ template(`<svg><path data-slot=voice-wave-ring fill=currentColor stroke=currentColor stroke-linejoin=round></svg>`, false, true, false);
 function VoiceWave(props) {
-  const reducedMotion = createMediaQuery(`(prefers-reduced-motion: reduce)`);
+  const reducedMotion = createMediaQuery$1(`(prefers-reduced-motion: reduce)`);
   const activity = () => props.activity ?? `idle`;
   const size = () => props.size ?? `md`;
   const px = () => VOICE_WAVE_SIZE_PX[size()] ?? VOICE_WAVE_SIZE_PX.md;
@@ -8355,6 +7610,7 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   Button,
+  CAROUSEL_GEOMETRY,
   CODE_TOKEN_CLASS2 as CODE_TOKEN_CLASS,
   Calendar,
   CalendarChevron,
@@ -8367,6 +7623,8 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CarouselCounter,
+  CarouselThumbnails,
   Checkbox,
   ChoiceTiles,
   ChoiceTilesFrame,
@@ -8409,21 +7667,21 @@ export {
   DisclosureHeader,
   DockCard,
   DockPile,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
+  al as DropdownMenu,
+  am as DropdownMenuCheckboxItem,
+  an as DropdownMenuContent,
+  ao as DropdownMenuGroup,
+  ap as DropdownMenuItem,
+  aq as DropdownMenuLabel,
+  ar as DropdownMenuPortal,
+  as as DropdownMenuRadioGroup,
+  at as DropdownMenuRadioItem,
+  au as DropdownMenuSeparator,
+  av as DropdownMenuShortcut,
+  aw as DropdownMenuSub,
+  ax as DropdownMenuSubContent,
+  ay as DropdownMenuSubTrigger,
+  az as DropdownMenuTrigger,
   EMPTY_STATE_SIZES,
   EmptyCta,
   EmptyState,
@@ -8456,7 +7714,11 @@ export {
   MOBILE_PAGE,
   MOBILE_SHEET,
   MOBILE_SHEET_FULL,
+  MOSAIC_GEOMETRY,
   Meter,
+  Mosaic,
+  OUTLINE_GEOMETRY,
+  Outline,
   Popover,
   PopoverAnchor,
   PopoverContent,
@@ -8521,23 +7783,30 @@ export {
   TooltipProvider,
   TooltipTrigger,
   VoiceWave,
+  aA as ZOOMABLE_IMAGE_STRINGS,
+  Z as ZOOM_MATH,
+  aB as ZoomableImage,
   alertVariants2 as alertVariants,
   avatarHueIndex,
   buttonVariants2 as buttonVariants,
+  carouselCounterText2 as carouselCounterText,
   choiceColumns2 as choiceColumns,
   choiceToggle2 as choiceToggle,
   choiceValues2 as choiceValues,
   cn2 as cn,
   createIsMobile,
-  createMediaQuery,
+  createMediaQuery$1 as createMediaQuery,
   createSheetDrag,
   createSheetDragHandleProps,
   createToastStore2 as createToastStore,
+  H as createZoomableImage,
   dateMatchModifiers,
   dockPileGeometry2 as dockPileGeometry,
   getDefaultClassNames,
   getInitials,
   middleTruncate,
+  mosaicTiles2 as mosaicTiles,
+  outlineCountText2 as outlineCountText,
   progressRingPercent2 as progressRingPercent,
   ringGeometry2 as ringGeometry,
   shouldDismissSheet,