@justanarthur/modo-ui 0.1.0 → 0.2.0

package/dist/shared/{components-r22vtgqc.js → components-kvr7f9hy.js}

@@ -1,12 +1,12 @@
 import {
-  GooIndicator
-} from "./components-kf2ehztc.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  GooIndicator
+} from "./components-chacnk61.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // lib/fluid-hover-highlight.tsx
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
@@ -20,7 +20,7 @@ function resolveHighlightSource(props) {
   }
   return { rect: props.rect, session: props.session };
 }
-function FluidHoverHighlight(props) {
+function FluidHoverHighlight2(props) {
   const { from, className, transition } = props;
   const { rect, session } = resolveHighlightSource(props);
   const reduceMotion = useReducedMotion() ?? false;
@@ -30,16 +30,16 @@ function FluidHoverHighlight(props) {
       className: "pointer-events-none absolute top-0 left-0",
       initial: { opacity: 0 },
       animate: { opacity: 1 },
-      exit: { opacity: 0, transition: spring.fast.exit },
+      exit: { opacity: 0, transition: spring2.fast.exit },
       transition: fade,
       children: /* @__PURE__ */ jsx(GooIndicator, {
         rect,
         from,
-        className: cn("bg-hover", className),
-        transition: transition === false || reduceMotion ? false : transition ?? spring.fast
+        className: cn2("bg-hover", className),
+        transition: transition === false || reduceMotion ? false : transition ?? spring2.fast
       })
     }, session)
   });
 }
 
-export { FluidHoverHighlight };
+export { FluidHoverHighlight2 };

package/dist/shared/{components-gndm6am4.js → components-ng72k97e.js}

@@ -1,16 +1,16 @@
 import {
   MorphSurface
-} from "./components-jxgznftn.js";
+} from "./components-0q0sqfh4.js";
 import {
-  useShape
-} from "./components-7zp99w5d.js";
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  useShape
+} from "./components-cv16mryv.js";
 
 // components/overlays/tooltip/index.tsx
 import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
@@ -18,7 +18,7 @@ import { motion, useMotionValue } from "motion/react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var TooltipPortalContainerContext = createContext(null);
-function TooltipPortalContainer({ value, children }) {
+function TooltipPortalContainer2({ value, children }) {
   return /* @__PURE__ */ jsx(TooltipPortalContainerContext.Provider, {
     value,
     children
@@ -26,7 +26,7 @@ function TooltipPortalContainer({ value, children }) {
 }
 var DEFAULT_DELAY = 200;
 var TooltipGroupContext = createContext(false);
-function TooltipProvider({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
+function TooltipProvider2({ children, delayDuration = DEFAULT_DELAY, skipDelayDuration = 300 }) {
   return /* @__PURE__ */ jsx(TooltipGroupContext.Provider, {
     value: true,
     children: /* @__PURE__ */ jsx(TooltipPrimitive.Provider, {
@@ -36,7 +36,7 @@ function TooltipProvider({ children, delayDuration = DEFAULT_DELAY, skipDelayDur
     })
   });
 }
-function Tooltip({
+function Tooltip2({
   content,
   children,
   side = "top",
@@ -95,7 +95,7 @@ function Tooltip({
         children: /* @__PURE__ */ jsx(TooltipPrimitive.Positioner, {
           side,
           sideOffset,
-          className: cn("z-50", contentClassName),
+          className: cn2("z-50", contentClassName),
           children: /* @__PURE__ */ jsx(TooltipPrimitive.Popup, {
             ref: morph.popupRef,
             className: "relative outline-none",
@@ -106,7 +106,7 @@ function Tooltip({
               morph,
               bg: "bg-foreground",
               radius: shape.bg,
-              className: cn("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
+              className: cn2("text-background text-caption px-2 py-1", "[text-box:trim-both_cap_alphabetic] supports-[text-box:trim-both]:py-2", "weight-medium", className),
               children: content
             })
           })
@@ -121,8 +121,8 @@ function Tooltip({
     children: tooltip
   });
 }
-Tooltip.Provider = TooltipProvider;
-Tooltip.PortalContainer = TooltipPortalContainer;
-var tooltip_default = Tooltip;
+Tooltip2.Provider = TooltipProvider2;
+Tooltip2.PortalContainer = TooltipPortalContainer2;
+var tooltip_default = Tooltip2;
 
-export { TooltipPortalContainer, TooltipProvider, Tooltip, tooltip_default };
+export { TooltipPortalContainer2, TooltipProvider2, Tooltip2, tooltip_default };

package/dist/shared/{components-40j34hdb.js → components-nh8tma1n.js}

@@ -1,62 +1,62 @@
 import {
-  Elevated
-} from "./components-74c20v2f.js";
+  opensInPlace,
+  inPlaceOffset,
+  useMorphOrigin,
+  useMorph
+} from "./components-hqeq3w9q.js";
 import {
-  SelectionBackgrounds,
-  useMergeSplitBlocks,
-  useSelectionRuns
-} from "./components-rc63qsy6.js";
+  cn2
+} from "./components-ezxhrmer.js";
 import {
-  SizeProvider
-} from "./components-vb033rns.js";
+  FluidHoverHighlight2
+} from "./components-kvr7f9hy.js";
 import {
-  useIcon
-} from "./components-m5br529r.js";
+  MorphSurface
+} from "./components-0q0sqfh4.js";
 import {
-  isDisabledRow,
-  popupScrollAreaClass,
-  popupViewportClass
-} from "./components-jw16snbn.js";
+  shapeMap
+} from "./components-cv16mryv.js";
 import {
-  ScrollArea
-} from "./components-ed7cmssr.js";
+  useSize2
+} from "./components-0sn7ypjw.js";
 import {
   SURFACE_BG,
   SURFACE_SHADOW,
-  SurfaceProvider,
-  useSurface
-} from "./components-csxz9f52.js";
+  useSurface2,
+  SurfaceProvider2
+} from "./components-zx6b6yby.js";
 import {
-  MorphSurface
-} from "./components-jxgznftn.js";
+  useControllableState
+} from "./components-n7mjr357.js";
 import {
-  FluidHoverHighlight
-} from "./components-r22vtgqc.js";
+  useFluidHover2,
+  useRegisterFluidHoverItem2
+} from "./components-59efxjd9.js";
 import {
-  useFluidHover,
-  useRegisterFluidHoverItem
-} from "./components-e46kf6cp.js";
+  useSelectionRuns,
+  useMergeSplitBlocks,
+  SelectionBackgrounds
+} from "./components-5xc2j8jz.js";
 import {
-  shapeMap
-} from "./components-7zp99w5d.js";
+  ScrollArea2
+} from "./components-hawvy2qz.js";
 import {
-  useControllableState
-} from "./components-dg0w8g5p.js";
+  SizeProvider2
+} from "./components-jjw69c4c.js";
 import {
-  inPlaceOffset,
-  opensInPlace,
-  useMorph,
-  useMorphOrigin
-} from "./components-7nww01w4.js";
+  Elevated2
+} from "./components-vc7vq5nz.js";
 import {
-  spring
-} from "./components-vc1k7yv2.js";
+  useIcon
+} from "./components-zrkzcayz.js";
 import {
-  useSize
-} from "./components-x3rz4cyn.js";
+  popupScrollAreaClass,
+  popupViewportClass,
+  isDisabledRow
+} from "./components-vynjtrk6.js";
 import {
-  cn
-} from "./components-0f0as45n.js";
+  spring2
+} from "./components-1v7rxytx.js";
 
 // components/overlays/dropdown/index.tsx
 import { Menu } from "@base-ui/react/menu";
@@ -149,7 +149,7 @@ function useDropdownSearchHost(open, { containerRef, setActiveIndex }) {
     highlightFirst
   };
 }
-var DropdownSearch = forwardRef(({
+var DropdownSearch2 = forwardRef(({
   value,
   onValueChange,
   filter = false,
@@ -161,7 +161,7 @@ var DropdownSearch = forwardRef(({
   ...props
 }, ref) => {
   const SearchIcon = useIcon("search");
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const compact = sizeClasses.variant === "compact";
   const host = useContext(DropdownSearchHostContext);
   const open = host?.open ?? true;
@@ -172,7 +172,7 @@ var DropdownSearch = forwardRef(({
     managed?.setQuery(next);
     onValueChange?.(next);
   }, [managed, onValueChange]);
-  const surface = useSurface();
+  const surface = useSurface2();
   const inputRef = useRef(null);
   const valueRef = useRef(query);
   valueRef.current = query;
@@ -238,7 +238,7 @@ var DropdownSearch = forwardRef(({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    className: cn("group/search sticky top-0 z-20 -mx-1 -mt-1 mb-0.5 flex shrink-0 items-center border-b border-border/60", SURFACE_BG[surface], sizeClasses.control, sizeClasses.gap, compact ? "px-2.5" : "px-3", className),
+    className: cn2("group/search sticky top-0 z-20 -mx-1 -mt-1 mb-0.5 flex shrink-0 items-center border-b border-border/60", SURFACE_BG[surface], sizeClasses.control, sizeClasses.gap, compact ? "px-2.5" : "px-3", className),
     children: [
       /* @__PURE__ */ jsx(SearchIcon, {
         size: sizeClasses.icon,
@@ -262,24 +262,24 @@ var DropdownSearch = forwardRef(({
         onChange: (e) => setQuery(e.target.value),
         onKeyDown: handleKeyDown,
         placeholder,
-        className: cn("min-w-0 flex-1 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, compact ? "leading-5" : "leading-6"),
+        className: cn2("min-w-0 flex-1 rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text, compact ? "leading-5" : "leading-6"),
         ...props
       })
     ]
   });
 });
-DropdownSearch.displayName = "DropdownSearch";
-var DropdownEmpty = forwardRef(({ className, ...props }, ref) => {
-  const sizeClasses = useSize();
+DropdownSearch2.displayName = "DropdownSearch";
+var DropdownEmpty2 = forwardRef(({ className, ...props }, ref) => {
+  const sizeClasses = useSize2();
   return /* @__PURE__ */ jsx("div", {
     ref,
     role: "status",
     "aria-live": "polite",
-    className: cn("px-2 py-6 text-center text-muted-foreground", sizeClasses.text, className),
+    className: cn2("px-2 py-6 text-center text-muted-foreground", sizeClasses.text, className),
     ...props
   });
 });
-DropdownEmpty.displayName = "DropdownEmpty";
+DropdownEmpty2.displayName = "DropdownEmpty";
 
 // components/overlays/dropdown/menu-item.tsx
 import { AnimatePresence, motion } from "motion/react";
@@ -293,16 +293,16 @@ import {
 import { jsx as jsx2, jsxs as jsxs2, Fragment } from "react/jsx-runtime";
 var shape = shapeMap.rounded;
 var DropdownContext = createContext2(null);
-function useDropdown() {
+function useDropdown2() {
   const ctx = useContext2(DropdownContext);
   if (!ctx)
     throw new Error("useDropdown must be used within a Dropdown");
   return ctx;
 }
-function useDropdownMaybe() {
+function useDropdownMaybe2() {
   return useContext2(DropdownContext);
 }
-var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disabled, closeOnClick, sourceIndex, className, onClick, ...props }, ref) => {
+var MenuItem2 = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disabled, closeOnClick, sourceIndex, className, onClick, ...props }, ref) => {
   const internalRef = useRef2(null);
   const hasMounted = useRef2(false);
   const {
@@ -314,17 +314,17 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
     renderMenuItem,
     selfManaged,
     toggleIndex
-  } = useDropdown();
+  } = useDropdown2();
   const panelChecked = multiple ? checkedIndices?.includes(index) ?? false : checkedIndex === index;
   const isChecked = checked ?? (selfManaged ? panelChecked : undefined);
   const isCheckbox = !!multiple && typeof isChecked === "boolean";
-  useRegisterFluidHoverItem(registerItem, index, internalRef);
+  useRegisterFluidHoverItem2(registerItem, index, internalRef);
   useEffect2(() => {
     hasMounted.current = true;
   }, []);
   const isActive = activeIndex === index;
   const skipAnimation = !hasMounted.current;
-  const sizeClasses = useSize();
+  const sizeClasses = useSize2();
   const mergeRef = (node) => {
     internalRef.current = node;
     if (typeof ref === "function")
@@ -341,7 +341,7 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
     onClick?.(e);
     activate();
   };
-  const itemClassName = cn(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} cursor-pointer outline-none`, disabled && "opacity-50 pointer-events-none", className);
+  const itemClassName = cn2(`relative z-10 flex ${sizeClasses.control} shrink-0 items-center ${sizeClasses.gap} ${shape.item} ${sizeClasses.itemPx} cursor-pointer outline-none`, disabled && "opacity-50 pointer-events-none", className);
   const content = /* @__PURE__ */ jsxs2(Fragment, {
     children: [
       Icon && /* @__PURE__ */ jsxs2("span", {
@@ -357,12 +357,12 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
           /* @__PURE__ */ jsx2(Icon, {
             size: sizeClasses.icon,
             strokeWidth: isActive || isChecked ? 2 : 1.5,
-            className: cn("col-start-1 row-start-1 transition-[color,stroke-width] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground")
+            className: cn2("col-start-1 row-start-1 transition-[color,stroke-width] duration-fast", isActive || isChecked ? "text-foreground" : "text-muted-foreground")
           })
         ]
       }),
       /* @__PURE__ */ jsxs2("span", {
-        className: cn("inline-grid flex-1", sizeClasses.text),
+        className: cn2("inline-grid flex-1", sizeClasses.text),
         children: [
           /* @__PURE__ */ jsx2("span", {
             className: "col-start-1 row-start-1 invisible [text-box:trim-both_cap_alphabetic] weight-semibold",
@@ -370,7 +370,7 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
             children: label
           }),
           /* @__PURE__ */ jsx2("span", {
-            className: cn("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive || isChecked ? "text-foreground" : "text-muted-foreground", isChecked ? "weight-semibold" : "weight-normal"),
+            className: cn2("col-start-1 row-start-1 transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", isActive || isChecked ? "text-foreground" : "text-muted-foreground", isChecked ? "weight-semibold" : "weight-normal"),
             children: label
           })
         ]
@@ -394,7 +394,7 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
             initial: { pathLength: skipAnimation ? 1 : 0 },
             animate: {
               pathLength: 1,
-              transition: { duration: spring.fast.duration, ease: "easeOut" }
+              transition: { duration: spring2.fast.duration, ease: "easeOut" }
             },
             exit: {
               pathLength: 0,
@@ -447,7 +447,7 @@ var MenuItem = forwardRef2(({ icon: Icon, label, index, checked, onSelect, disab
     children: content
   });
 });
-MenuItem.displayName = "MenuItem";
+MenuItem2.displayName = "MenuItem";
 
 // components/overlays/dropdown/index.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -497,7 +497,7 @@ function usePanelSelection({
 }
 function usePanelRows(children) {
   const [query, setQuery] = useState2("");
-  const filtering = useMemo2(() => Children.toArray(children).some((child) => isValidElement(child) && child.type === DropdownSearch && child.props.filter), [children]);
+  const filtering = useMemo2(() => Children.toArray(children).some((child) => isValidElement(child) && child.type === DropdownSearch2 && child.props.filter), [children]);
   const filterCtx = useMemo2(() => ({ query, setQuery }), [query]);
   const { content, sourceOf } = useMemo2(() => {
     if (!filtering)
@@ -511,7 +511,7 @@ function usePanelRows(children) {
         rendered.push(child);
         continue;
       }
-      if (child.type === DropdownEmpty) {
+      if (child.type === DropdownEmpty2) {
         empties.push(child);
         continue;
       }
@@ -534,7 +534,7 @@ function usePanelRows(children) {
   }, [children, filtering, query]);
   return { content, sourceOf, filtering, filterCtx: filtering ? filterCtx : null };
 }
-var Dropdown = forwardRef3(({
+var Dropdown2 = forwardRef3(({
   children,
   checkedIndex,
   defaultCheckedIndex,
@@ -547,7 +547,7 @@ var Dropdown = forwardRef3(({
   ...props
 }, ref) => {
   const containerRef = useRef3(null);
-  const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem } = hover;
   const [focusedIndex, setFocusedIndex] = useState2(null);
   const rows = usePanelRows(children);
@@ -585,7 +585,7 @@ var Dropdown = forwardRef3(({
     value: panelCtx,
     children: /* @__PURE__ */ jsx3(DropdownFilterContext.Provider, {
       value: rows.filterCtx,
-      children: /* @__PURE__ */ jsxs3(Elevated, {
+      children: /* @__PURE__ */ jsxs3(Elevated2, {
         offset: 2,
         shadowLevel: 3,
         ref: (node) => {
@@ -631,7 +631,7 @@ var Dropdown = forwardRef3(({
           }
         },
         role: "group",
-        className: cn(`relative flex flex-col w-72 max-w-full  p-1 select-none`, className),
+        className: cn2(`relative flex flex-col w-72 max-w-full  p-1 select-none`, className),
         ...props,
         children: [
           multiple && /* @__PURE__ */ jsx3(SelectionBackgrounds, {
@@ -648,14 +648,14 @@ var Dropdown = forwardRef3(({
                 height: checkedRect.height,
                 opacity: 1
               },
-              exit: { opacity: 0, transition: spring.moderate.exit },
+              exit: { opacity: 0, transition: spring2.moderate.exit },
               transition: {
-                ...spring.moderate,
-                opacity: { duration: spring.fast.duration }
+                ...spring2.moderate,
+                opacity: { duration: spring2.fast.duration }
               }
             })
           }),
-          /* @__PURE__ */ jsx3(FluidHoverHighlight, {
+          /* @__PURE__ */ jsx3(FluidHoverHighlight2, {
             hover,
             from: checkedRect,
             className: shape2.bg
@@ -670,10 +670,10 @@ var Dropdown = forwardRef3(({
                 width: focusRect.width + 4,
                 height: focusRect.height + 4
               },
-              exit: { opacity: 0, transition: spring.fast.exit },
+              exit: { opacity: 0, transition: spring2.fast.exit },
               transition: {
-                ...spring.fast,
-                opacity: { duration: spring.fast.duration }
+                ...spring2.fast,
+                opacity: { duration: spring2.fast.duration }
               }
             })
           }),
@@ -682,12 +682,12 @@ var Dropdown = forwardRef3(({
       })
     })
   });
-  return size ? /* @__PURE__ */ jsx3(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx3(SizeProvider2, {
     size,
     children: panel
   }) : panel;
 });
-Dropdown.displayName = "Dropdown";
+Dropdown2.displayName = "Dropdown";
 var DropdownMenuContext = createContext3(null);
 function useDropdownMenuContext() {
   const ctx = useContext3(DropdownMenuContext);
@@ -695,7 +695,7 @@ function useDropdownMenuContext() {
     throw new Error("DropdownMenu compound components must be inside <DropdownMenu>");
   return ctx;
 }
-function DropdownMenu({
+function DropdownMenu2({
   children,
   open: openProp,
   defaultOpen = false,
@@ -724,14 +724,14 @@ function DropdownMenu({
       children
     })
   });
-  return size ? /* @__PURE__ */ jsx3(SizeProvider, {
+  return size ? /* @__PURE__ */ jsx3(SizeProvider2, {
     size,
     children: root
   }) : root;
 }
-DropdownMenu.displayName = "DropdownMenu";
-var DropdownTrigger = Menu.Trigger;
-var DropdownContent = forwardRef3(({
+DropdownMenu2.displayName = "DropdownMenu";
+var DropdownTrigger2 = Menu.Trigger;
+var DropdownContent2 = forwardRef3(({
   className,
   children,
   checkedIndex,
@@ -751,9 +751,9 @@ var DropdownContent = forwardRef3(({
   const { open, origin } = useDropdownMenuContext();
   const morph = useMorph(open, origin, { from, effect, hideSource, tier });
   useImperativeHandle(ref, () => morph.popup, [morph.popup]);
-  const level = Math.min(useSurface() + 2, 8);
+  const level = Math.min(useSurface2() + 2, 8);
   const containerRef = useRef3(null);
-  const hover = useFluidHover(containerRef, { isItemDisabled: isDisabledRow });
+  const hover = useFluidHover2(containerRef, { isItemDisabled: isDisabledRow });
   const { activeIndex, setActiveIndex, itemRects, handlers, registerItem, remeasure } = hover;
   const rows = usePanelRows(children);
   const selection = usePanelSelection({
@@ -812,7 +812,7 @@ var DropdownContent = forwardRef3(({
     closeOnClick,
     onClick,
     element,
-    children: children2
+    children
   }) => checkbox ? /* @__PURE__ */ jsx3(Menu.CheckboxItem, {
     checked: !!checked,
     disabled,
@@ -820,7 +820,7 @@ var DropdownContent = forwardRef3(({
     closeOnClick,
     onClick,
     render: element,
-    children: children2
+    children
   }) : radio ? /* @__PURE__ */ jsx3(Menu.RadioItem, {
     value,
     disabled,
@@ -828,14 +828,14 @@ var DropdownContent = forwardRef3(({
     closeOnClick,
     onClick,
     render: element,
-    children: children2
+    children
   }) : /* @__PURE__ */ jsx3(Menu.Item, {
     disabled,
     label,
     closeOnClick,
     onClick,
     render: element,
-    children: children2
+    children
   }), []);
   const contentCtx = useMemo2(() => ({
     registerItem,
@@ -896,17 +896,17 @@ var DropdownContent = forwardRef3(({
                 setActiveIndex(null);
               },
               className: "relative select-none outline-none",
-              children: /* @__PURE__ */ jsx3(SurfaceProvider, {
+              children: /* @__PURE__ */ jsx3(SurfaceProvider2, {
                 value: level,
                 children: /* @__PURE__ */ jsx3(MorphSurface, {
                   morph,
                   bg: SURFACE_BG[level],
                   shadow: SURFACE_SHADOW[3],
                   radius: shape2.container,
-                  className: cn(`flex flex-col w-72 max-w-full min-w-[var(--anchor-width)] max-h-[min(480px,var(--available-height))] overflow-hidden ${shape2.container}`, className),
-                  children: /* @__PURE__ */ jsx3(ScrollArea, {
+                  className: cn2(`flex flex-col w-72 max-w-full min-w-[var(--anchor-width)] max-h-[min(480px,var(--available-height))] overflow-hidden ${shape2.container}`, className),
+                  children: /* @__PURE__ */ jsx3(ScrollArea2, {
                     className: popupScrollAreaClass,
-                    viewportClassName: cn(popupViewportClass, !searchMounted && "scroll-fade"),
+                    viewportClassName: cn2(popupViewportClass, !searchMounted && "scroll-fade"),
                     children: /* @__PURE__ */ jsxs3("div", {
                       ref: containerRef,
                       className: "relative flex flex-col p-1",
@@ -925,14 +925,14 @@ var DropdownContent = forwardRef3(({
                               height: checkedRect.height,
                               opacity: 1
                             },
-                            exit: { opacity: 0, transition: spring.moderate.exit },
+                            exit: { opacity: 0, transition: spring2.moderate.exit },
                             transition: {
-                              ...spring.moderate,
-                              opacity: { duration: spring.fast.duration }
+                              ...spring2.moderate,
+                              opacity: { duration: spring2.fast.duration }
                             }
                           })
                         }),
-                        /* @__PURE__ */ jsx3(FluidHoverHighlight, {
+                        /* @__PURE__ */ jsx3(FluidHoverHighlight2, {
                           hover,
                           from: checkedRect,
                           className: shape2.bg
@@ -954,33 +954,33 @@ var DropdownContent = forwardRef3(({
     })
   });
 });
-DropdownContent.displayName = "DropdownContent";
-var DropdownLabel = forwardRef3(({ className, ...props }, ref) => {
-  const compact = useSize().variant === "compact";
+DropdownContent2.displayName = "DropdownContent";
+var DropdownLabel2 = forwardRef3(({ className, ...props }, ref) => {
+  const compact = useSize2().variant === "compact";
   return /* @__PURE__ */ jsx3("div", {
     ref,
-    className: cn("px-2 py-1.5 shrink-0 text-muted-foreground", compact ? "text-caption-compact" : "text-caption", className),
+    className: cn2("px-2 py-1.5 shrink-0 text-muted-foreground", compact ? "text-caption-compact" : "text-caption", className),
     ...props
   });
 });
-DropdownLabel.displayName = "DropdownLabel";
-var DropdownSeparator = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
+DropdownLabel2.displayName = "DropdownLabel";
+var DropdownSeparator2 = forwardRef3(({ className, ...props }, ref) => /* @__PURE__ */ jsx3("div", {
   ref,
   role: "separator",
-  className: cn("my-1 -mx-1 h-px shrink-0 bg-border/60", className),
+  className: cn2("my-1 -mx-1 h-px shrink-0 bg-border/60", className),
   ...props
 }));
-DropdownSeparator.displayName = "DropdownSeparator";
-Object.assign(Dropdown, {
-  Menu: DropdownMenu,
-  Trigger: DropdownTrigger,
-  Content: DropdownContent,
-  Item: MenuItem,
-  Label: DropdownLabel,
-  Separator: DropdownSeparator,
-  Search: DropdownSearch,
-  Empty: DropdownEmpty
+DropdownSeparator2.displayName = "DropdownSeparator";
+Object.assign(Dropdown2, {
+  Menu: DropdownMenu2,
+  Trigger: DropdownTrigger2,
+  Content: DropdownContent2,
+  Item: MenuItem2,
+  Label: DropdownLabel2,
+  Separator: DropdownSeparator2,
+  Search: DropdownSearch2,
+  Empty: DropdownEmpty2
 });
-var dropdown_default = Dropdown;
+var dropdown_default = Dropdown2;
 
-export { DropdownSearch, DropdownEmpty, DropdownContext, useDropdown, useDropdownMaybe, MenuItem, Dropdown, DropdownMenu, DropdownTrigger, DropdownContent, DropdownLabel, DropdownSeparator, dropdown_default };
+export { DropdownSearch2, DropdownEmpty2, DropdownContext, useDropdown2, useDropdownMaybe2, MenuItem2, Dropdown2, DropdownMenu2, DropdownTrigger2, DropdownContent2, DropdownLabel2, DropdownSeparator2, dropdown_default };