@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/dist/shared/components-5mkga9hj.js

@@ -0,0 +1,440 @@
+"use client";
+import {
+  useReduceMotion2
+} from "./components-de99ykt7.js";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
+import {
+  useMorphOrigin2,
+  useMorph2
+} from "./components-awra5sff.js";
+import {
+  cn2
+} from "./components-jcnjay5g.js";
+import {
+  GooIndicator2
+} from "./components-pw06rbxq.js";
+import {
+  FluidHoverHighlight2
+} from "./components-qdm3yh26.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
+import {
+  FocusRing2
+} from "./components-8nwsqjn8.js";
+import {
+  useIcon2
+} from "./components-jqpefjsn.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  useSize2
+} from "./components-h83az0bz.js";
+import {
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
+import {
+  useSurface2,
+  SurfaceProvider2
+} from "./components-dhgk6mbt.js";
+import {
+  useControllableState2
+} from "./components-tz1fv35x.js";
+import {
+  useFluidHover2
+} from "./components-yhgq0qxx.js";
+import {
+  useKeyboardNavGate2
+} from "./components-tz4gaf1v.js";
+import {
+  SizeProvider2
+} from "./components-dcc02hs2.js";
+
+// components/navigation/navigation-menu/index.tsx
+import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
+import { motion } from "motion/react";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TARGET = "data-navigation-menu-target";
+var ROW = "data-navigation-menu-row";
+var RootContext = createContext(null);
+function useRoot() {
+  const ctx = useContext(RootContext);
+  if (!ctx)
+    throw new Error("NavigationMenu parts must be used within a NavigationMenu");
+  return ctx;
+}
+var ListContext = createContext(null);
+var ItemContext = createContext("");
+var InContentContext = createContext(false);
+function useRegisterBySelector(container, selector, register) {
+  const registered = useRef([]);
+  const [items, setItems] = useState([]);
+  useLayoutEffect(() => {
+    const root = container.current;
+    if (!root)
+      return;
+    const next = [...root.querySelectorAll(selector)];
+    const previous = registered.current;
+    if (next.length === previous.length && next.every((el, i) => el === previous[i]))
+      return;
+    for (let i = next.length;i < previous.length; i++)
+      register(i, null);
+    next.forEach((el, i) => {
+      if (previous[i] !== el)
+        register(i, el);
+    });
+    registered.current = next;
+    setItems(next);
+  });
+  return items;
+}
+function assignRef(ref, node) {
+  if (typeof ref === "function")
+    ref(node);
+  else if (ref)
+    ref.current = node;
+}
+var NavigationMenuList2 = forwardRef(({ className, children, ...props }, ref) => {
+  const { value, setList } = useRoot();
+  const containerRef = useRef(null);
+  const hover = useFluidHover2(containerRef, { axis: "x" });
+  const shape = useShape2();
+  const items = useRegisterBySelector(containerRef, `[${TARGET}]`, hover.registerItem);
+  const [marked, setMarked] = useState(-1);
+  useLayoutEffect(() => {
+    const open = value === null ? -1 : items.findIndex((el) => el.dataset.navigationMenuValue === value);
+    const next = open >= 0 ? open : items.findIndex((el) => el.hasAttribute("data-active"));
+    setMarked(next);
+  });
+  const indicatorRect = hover.isMeasured && marked >= 0 ? hover.itemRects[marked] : undefined;
+  const ctx = useMemo(() => ({ hover, indicatorRect }), [hover, indicatorRect]);
+  return /* @__PURE__ */ jsx(ListContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxs(NavigationMenuPrimitive.List, {
+      ref: (node) => {
+        containerRef.current = node;
+        setList(node);
+        assignRef(ref, node);
+      },
+      ...hover.handlers,
+      onFocus: (event) => {
+        const index = items.indexOf(event.target.closest(`[${TARGET}]`));
+        if (index >= 0)
+          hover.setActiveIndex(index);
+      },
+      className: cn2("relative m-0 flex list-none items-center p-0", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: shape.bg
+        }),
+        children
+      ]
+    })
+  });
+});
+NavigationMenuList2.displayName = "NavigationMenuList";
+function NavigationMenuIndicator2({ className }) {
+  const ctx = useContext(ListContext);
+  const shape = useShape2();
+  const rect = ctx?.indicatorRect;
+  return /* @__PURE__ */ jsx("li", {
+    "aria-hidden": "true",
+    className: "contents",
+    children: rect && /* @__PURE__ */ jsx(GooIndicator2, {
+      rect,
+      className: cn2("bg-active", shape.bg, className)
+    })
+  });
+}
+var NavigationMenuItem2 = forwardRef(({ value, ...props }, ref) => {
+  const generated = useId();
+  const itemValue = value ?? generated;
+  return /* @__PURE__ */ jsx(ItemContext.Provider, {
+    value: itemValue,
+    children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, {
+      ref,
+      value: itemValue,
+      ...props
+    })
+  });
+});
+NavigationMenuItem2.displayName = "NavigationMenuItem";
+function StripLabel({ emphasized, children }) {
+  const size = useSize2();
+  return /* @__PURE__ */ jsxs("span", {
+    className: cn2("inline-grid whitespace-nowrap", size.text),
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        "aria-hidden": "true",
+        className: "invisible col-start-1 row-start-1 weight-semibold [text-box:trim-both_cap_alphabetic]",
+        children
+      }),
+      /* @__PURE__ */ jsx("span", {
+        className: cn2("col-start-1 row-start-1 transition-[font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", emphasized ? "weight-semibold" : "weight-normal"),
+        children
+      })
+    ]
+  });
+}
+var STRIP_ITEM = "group/item relative z-10 flex cursor-pointer select-none items-center bg-transparent text-muted-foreground no-underline outline-none transition-[color] duration-fast focus-visible:ring-1 focus-visible:ring-focus-ring data-[fluid-hover-active]:text-foreground";
+var NavigationMenuTrigger2 = forwardRef(({ className, children, ...props }, ref) => {
+  const { value, triggers } = useRoot();
+  const itemValue = useContext(ItemContext);
+  const size = useSize2();
+  const shape = useShape2();
+  const reduced = useReduceMotion2();
+  const Chevron = useIcon2("chevron-down");
+  const open = value === itemValue;
+  return /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Trigger, {
+    ref: (node) => {
+      if (node)
+        triggers.current.set(itemValue, node);
+      else
+        triggers.current.delete(itemValue);
+      assignRef(ref, node);
+    },
+    ...{ [TARGET]: "", "data-navigation-menu-value": itemValue },
+    className: cn2(STRIP_ITEM, size.control, size.px, size.gap, shape.button, open && "text-foreground", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(StripLabel, {
+        emphasized: open,
+        children
+      }),
+      /* @__PURE__ */ jsx(motion.span, {
+        "aria-hidden": "true",
+        className: "flex",
+        initial: false,
+        animate: { rotate: open ? 180 : 0 },
+        transition: reduced ? { duration: 0 } : spring2.moderate,
+        children: /* @__PURE__ */ jsx(Chevron, {
+          size: size.icon,
+          strokeWidth: 1.5,
+          className: cn2("transition-[stroke-width] duration-fast group-[[data-fluid-hover-active]]/item:stroke-2", open && "stroke-2")
+        })
+      })
+    ]
+  });
+});
+NavigationMenuTrigger2.displayName = "NavigationMenuTrigger";
+var NavigationMenuContent2 = forwardRef(({ className, children, ...props }, ref) => {
+  const { value, setPanelSize } = useRoot();
+  const itemValue = useContext(ItemContext);
+  const open = value === itemValue;
+  const reduced = useReduceMotion2();
+  const shape = useShape2();
+  const containerRef = useRef(null);
+  const [element, setElement] = useState(null);
+  const hover = useFluidHover2(containerRef, { axis: "xy" });
+  const rows = useRegisterBySelector(containerRef, `[${ROW}]`, hover.registerItem);
+  const { keyboardNavRef, trackKeyboardNav } = useKeyboardNavGate2(open);
+  const [focused, setFocused] = useState(null);
+  useLayoutEffect(() => {
+    if (!open || !element)
+      return;
+    const report = () => setPanelSize({ width: element.offsetWidth, height: element.offsetHeight });
+    report();
+    const observer = new ResizeObserver(report);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [open, element, setPanelSize]);
+  const setRefs = useCallback((node) => {
+    containerRef.current = node;
+    setElement(node);
+    assignRef(ref, node);
+  }, [ref]);
+  return /* @__PURE__ */ jsx(InContentContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Content, {
+      ref: setRefs,
+      ...hover.handlers,
+      onKeyDown: (event) => {
+        if (event.key === "Tab")
+          keyboardNavRef.current = true;
+        trackKeyboardNav(event);
+      },
+      onFocus: (event) => {
+        const target = event.target;
+        const index = rows.indexOf(target.closest(`[${ROW}]`));
+        if (index < 0)
+          return;
+        hover.setActiveIndex(index);
+        setFocused(keyboardNavRef.current || target.matches(":focus-visible") ? index : null);
+      },
+      onBlur: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget))
+          setFocused(null);
+      },
+      className: cn2("relative w-max p-1 transition-[opacity,transform] duration-moderate data-[ending-style]:duration-moderate-exit data-[starting-style]:opacity-0 data-[ending-style]:opacity-0", !reduced && "data-[starting-style]:data-[activation-direction=right]:translate-x-4 data-[starting-style]:data-[activation-direction=left]:-translate-x-4 data-[ending-style]:data-[activation-direction=right]:-translate-x-4 data-[ending-style]:data-[activation-direction=left]:translate-x-4", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(FluidHoverHighlight2, {
+          hover,
+          className: shape.bg
+        }),
+        /* @__PURE__ */ jsx(FocusRing2, {
+          rect: open && focused !== null ? hover.itemRects[focused] : undefined
+        }),
+        children
+      ]
+    })
+  });
+});
+NavigationMenuContent2.displayName = "NavigationMenuContent";
+var NavigationMenuLink2 = forwardRef(({ active = false, icon: Icon, description, className, children, ...props }, ref) => {
+  const inContent = useContext(InContentContext);
+  const size = useSize2();
+  const shape = useShape2();
+  if (!inContent) {
+    return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, {
+      ref,
+      active,
+      ...{ [TARGET]: "" },
+      className: cn2(STRIP_ITEM, size.control, size.px, shape.button, active && "text-foreground", className),
+      ...props,
+      children: /* @__PURE__ */ jsx(StripLabel, {
+        emphasized: active,
+        children
+      })
+    });
+  }
+  const compact = size.variant === "compact";
+  return /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Link, {
+    ref,
+    active,
+    ...{ [ROW]: "" },
+    className: cn2("group/row relative z-10 flex min-w-0 cursor-pointer items-start no-underline outline-none", description ? "py-2" : cn2(size.control, "items-center"), size.itemPx, size.gap, shape.item, className),
+    ...props,
+    children: [
+      Icon && /* @__PURE__ */ jsx(Icon, {
+        size: size.icon,
+        strokeWidth: 1.5,
+        className: cn2("shrink-0 text-muted-foreground transition-[color,stroke-width] duration-fast group-[[data-fluid-hover-active]]/row:stroke-2 group-[[data-fluid-hover-active]]/row:text-foreground", description && "mt-0.5")
+      }),
+      /* @__PURE__ */ jsxs("span", {
+        className: "flex min-w-0 flex-col gap-0.5",
+        children: [
+          /* @__PURE__ */ jsx("span", {
+            className: cn2("truncate text-foreground", active ? "weight-semibold" : "weight-normal", size.text),
+            children
+          }),
+          description && /* @__PURE__ */ jsx("span", {
+            className: cn2("text-muted-foreground", compact ? "text-caption-compact" : "text-caption"),
+            children: description
+          })
+        ]
+      })
+    ]
+  });
+});
+NavigationMenuLink2.displayName = "NavigationMenuLink";
+function NavigationMenu2({
+  value,
+  defaultValue = null,
+  onValueChange,
+  delay,
+  closeDelay,
+  align = "start",
+  sideOffset = 12,
+  from,
+  effect,
+  hideSource,
+  tier,
+  size,
+  className,
+  children
+}) {
+  const [current, setCurrent] = useControllableState2(value, defaultValue, onValueChange);
+  const { origin, capture } = useMorphOrigin2();
+  const triggers = useRef(new Map);
+  const [list, setList] = useState(null);
+  const [panelSize, setPanelSize] = useState(null);
+  const open = current !== null;
+  const morph = useMorph2(open, origin, { from, effect, hideSource, tier });
+  const reduced = useReduceMotion2();
+  const shape = useShape2();
+  const level = Math.min(useSurface2() + 2, 8);
+  if (!open && panelSize)
+    setPanelSize(null);
+  const ctx = useMemo(() => ({ value: current, triggers, setList, setPanelSize }), [current]);
+  const root = /* @__PURE__ */ jsx(RootContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsxs(NavigationMenuPrimitive.Root, {
+      value: current,
+      onValueChange: (next, details) => {
+        const nextValue = next ?? null;
+        if (nextValue !== null)
+          capture({ trigger: triggers.current.get(nextValue), event: details.event });
+        setCurrent(nextValue);
+      },
+      delay,
+      closeDelay,
+      className: cn2("relative", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenuPrimitive.Portal, {
+          children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Positioner, {
+            anchor: list,
+            side: "bottom",
+            align,
+            sideOffset,
+            collisionPadding: 8,
+            className: "z-50 outline-none",
+            children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Popup, {
+              ref: morph.popupRef,
+              className: "relative outline-none",
+              children: /* @__PURE__ */ jsx(SurfaceProvider2, {
+                value: level,
+                children: /* @__PURE__ */ jsx(MorphSurface2, {
+                  morph,
+                  bg: SURFACE_BG2[level],
+                  shadow: SURFACE_SHADOW2[3],
+                  radius: shape.container,
+                  children: /* @__PURE__ */ jsx(motion.div, {
+                    className: "relative overflow-hidden",
+                    initial: false,
+                    animate: panelSize ? { width: panelSize.width, height: panelSize.height } : undefined,
+                    transition: reduced ? { duration: 0 } : spring2.moderate,
+                    children: /* @__PURE__ */ jsx(NavigationMenuPrimitive.Viewport, {
+                      className: "relative"
+                    })
+                  })
+                })
+              })
+            })
+          })
+        })
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx(SizeProvider2, {
+    size,
+    children: root
+  }) : root;
+}
+NavigationMenu2.List = NavigationMenuList2;
+NavigationMenu2.Item = NavigationMenuItem2;
+NavigationMenu2.Trigger = NavigationMenuTrigger2;
+NavigationMenu2.Content = NavigationMenuContent2;
+NavigationMenu2.Link = NavigationMenuLink2;
+NavigationMenu2.Indicator = NavigationMenuIndicator2;
+var navigation_menu_default = NavigationMenu2;
+
+export { NavigationMenuList2, NavigationMenuIndicator2, NavigationMenuItem2, NavigationMenuTrigger2, NavigationMenuContent2, NavigationMenuLink2, NavigationMenu2, navigation_menu_default };

package/dist/shared/{components-kwa6mrf9.js → components-5s0nfqvw.js}

@@ -1,13 +1,14 @@
+"use client";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  useFieldBox,
-  focusControlOnPress
-} from "./components-raknhppb.js";
+  useFieldBox2,
+  focusControlOnPress2
+} from "./components-6zng858q.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 
 // components/inputs/textarea/index.tsx
 import { Field } from "@base-ui/react/field";
@@ -26,13 +27,15 @@ var Textarea2 = forwardRef(({
   variant = "borderless",
   invalid,
   disabled,
+  readOnly,
+  required,
   size,
   className,
   ...props
 }, ref) => {
-  const [value, onChange] = useControllableState(valueProp, defaultValue, onChangeProp);
+  const [value, onChange] = useControllableState2(valueProp, defaultValue, onChangeProp);
   const textareaRef = useRef(null);
-  const box = useFieldBox({ variant, invalid, disabled, size });
+  const box = useFieldBox2({ variant, invalid, disabled, readOnly, required, size });
   const resize = useCallback(() => {
     const el = textareaRef.current;
     if (!el)
@@ -59,7 +62,7 @@ var Textarea2 = forwardRef(({
     return () => observer.disconnect();
   }, [resize]);
   return /* @__PURE__ */ jsx("div", {
-    onMouseDown: focusControlOnPress(textareaRef),
+    onMouseDown: focusControlOnPress2(textareaRef),
     ...box.props,
     className: cn2(box.props.className, "flex", PADDING_Y[box.size.variant], className),
     children: /* @__PURE__ */ jsx(Field.Control, {
@@ -78,6 +81,8 @@ var Textarea2 = forwardRef(({
       value,
       onChange: (e) => onChange(e.target.value),
       disabled: box.disabled,
+      readOnly: box.readOnly,
+      required: box.required,
       "aria-invalid": box.invalid || undefined,
       className: cn2("block w-full resize-none rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", box.size.text, "weight-normal")
     })

package/dist/shared/{components-dk0gjr5a.js → components-60atskhp.js}

@@ -1,27 +1,28 @@
+"use client";
+import {
+  spring2
+} from "./components-3ey0hzpb.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
 import {
-  GooIndicator
-} from "./components-chacnk61.js";
+  GooIndicator2
+} from "./components-pw06rbxq.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  useShape2
+} from "./components-78x40gee.js";
 import {
   useSize2
-} from "./components-0sn7ypjw.js";
+} from "./components-h83az0bz.js";
 import {
-  useControllableState
-} from "./components-n7mjr357.js";
+  useControllableState2
+} from "./components-tz1fv35x.js";
 import {
   useFluidHover2
-} from "./components-59efxjd9.js";
+} from "./components-yhgq0qxx.js";
 import {
   SizeProvider2
-} from "./components-jjw69c4c.js";
-import {
-  spring2
-} from "./components-1v7rxytx.js";
+} from "./components-dcc02hs2.js";
 
 // components/navigation/tabs-subtle/index.tsx
 import { Tabs } from "@base-ui/react/tabs";
@@ -58,7 +59,7 @@ var TabsSubtle2 = forwardRef(({
   className,
   ...props
 }, ref) => {
-  const [selectedIndex, onSelect] = useControllableState(selectedIndexProp, defaultSelectedIndex, onSelectProp);
+  const [selectedIndex, onSelect] = useControllableState2(selectedIndexProp, defaultSelectedIndex, onSelectProp);
   const childList = Children.toArray(children);
   const panels = childList.filter(isPanel);
   const tabs = childList.filter((child) => !isPanel(child));
@@ -66,7 +67,7 @@ var TabsSubtle2 = forwardRef(({
   const resolvedIdPrefix = idPrefix ?? (panels.length > 0 ? generatedIdPrefix : undefined);
   const containerRef = useRef(null);
   const isMouseInside = useRef(false);
-  const shape = useShape();
+  const shape = useShape2();
   const {
     activeIndex: hoveredIndex,
     setActiveIndex: setHoveredIndex,
@@ -154,12 +155,12 @@ var TabsSubtle2 = forwardRef(({
           className: cn2("relative flex items-center select-none overflow-x-auto max-w-[calc(100%_+_8px)] scrollbar-hide -mx-1 px-1 -my-1 py-1", className),
           ...props,
           children: [
-            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
               rect: selectedRect,
               className: cn2("bg-active", shape.bg),
               opacity: isHovering ? 0.8 : 1
             }),
-            selectedRect && /* @__PURE__ */ jsx(GooIndicator, {
+            selectedRect && /* @__PURE__ */ jsx(GooIndicator2, {
               rect: isHovering && hoverRect ? hoverRect : selectedRect,
               className: cn2("bg-active", shape.bg),
               transition: spring2.fast,
@@ -209,7 +210,7 @@ var TabsSubtleItem2 = forwardRef(({ icon: Icon, label, index, className, ...prop
     labelRoRef.current = new ResizeObserver(update);
     labelRoRef.current.observe(el);
   }, []);
-  const shape = useShape();
+  const shape = useShape2();
   const sizeClasses = useSize2();
   const { registerTab, hoveredIndex, selectedIndex, idPrefix, activeLabel } = useTabsSubtle();
   useEffect(() => {

package/dist/shared/{components-rr7a6ja9.js → components-658b26nb.js}

@@ -1,21 +1,24 @@
+"use client";
 import {
-  MorphSurface
-} from "./components-0q0sqfh4.js";
-import {
-  useMorph
-} from "./components-hqeq3w9q.js";
+  useMorph2
+} from "./components-awra5sff.js";
 import {
   cn2
-} from "./components-ezxhrmer.js";
+} from "./components-jcnjay5g.js";
+import {
+  MorphSurface2
+} from "./components-4y816hwp.js";
+import {
+  useShape2
+} from "./components-78x40gee.js";
 import {
-  useShape
-} from "./components-cv16mryv.js";
+  SURFACE_BG2,
+  SURFACE_SHADOW2
+} from "./components-vf45j12c.js";
 import {
-  SURFACE_BG,
-  SURFACE_SHADOW,
   useSurface2,
   SurfaceProvider2
-} from "./components-zx6b6yby.js";
+} from "./components-dhgk6mbt.js";
 import {
   useDialogState2,
   DialogTrigger2,
@@ -25,7 +28,7 @@ import {
   DialogTitle2,
   DialogDescription2,
   DialogState2
-} from "./components-zfnmn5d4.js";
+} from "./components-3sp623ae.js";
 
 // components/overlays/sheet/index.tsx
 import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
@@ -56,7 +59,7 @@ var INDENT_RADIUS = { pill: "data-[active]:rounded-3xl", rounded: "data-[active]
 var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, className, children, ...props }, ref) => {
   const { side, swiped } = useContext(SheetContext);
   const { open, origin } = useDialogState2();
-  const morph = useMorph(open, origin, {
+  const morph = useMorph2(open, origin, {
     from: from ?? side,
     effect,
     hideSource,
@@ -64,7 +67,7 @@ var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, cla
     exit: swiped ? { effect: "slide", from: side } : undefined
   });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
-  const shape = useShape();
+  const shape = useShape2();
   const level = Math.min(useSurface2() + DRAWER_OFFSET, 8);
   const edge = side === "top" || side === "bottom";
   return /* @__PURE__ */ jsxs(DrawerPrimitive.Portal, {
@@ -84,10 +87,10 @@ var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, cla
           className: cn2("absolute flex flex-col focus:outline-none", PLACEMENT[side], "[transform:translate(var(--drawer-swipe-movement-x),calc(var(--drawer-snap-point-offset)_+_var(--drawer-swipe-movement-y)))]", "transition-[transform] duration-slow"),
           children: /* @__PURE__ */ jsx(SurfaceProvider2, {
             value: level,
-            children: /* @__PURE__ */ jsxs(MorphSurface, {
+            children: /* @__PURE__ */ jsxs(MorphSurface2, {
               morph,
-              bg: SURFACE_BG[level],
-              shadow: SURFACE_SHADOW[level],
+              bg: SURFACE_BG2[level],
+              shadow: SURFACE_SHADOW2[level],
               radius: shape.container,
               className: cn2("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-6", edge && "pt-3", className),
               children: [
@@ -106,7 +109,7 @@ var SheetContent2 = forwardRef(({ from, effect, hideSource, tier, container, cla
 });
 SheetContent2.displayName = "SheetContent";
 var SheetIndent2 = forwardRef(({ className, ...props }, ref) => {
-  const shape = useShape();
+  const shape = useShape2();
   return /* @__PURE__ */ jsx(DrawerPrimitive.Indent, {
     ref,
     className: cn2("origin-top transition-[transform] duration-slow data-[active]:scale-[0.96] data-[active]:overflow-hidden", INDENT_RADIUS[shape.variant], className),