commerce-toolkit 0.4.0 → 0.6.0

package/dist/navigation-menu.js

@@ -1,45 +1,25 @@
-import { jsx as i, jsxs as Z, Fragment as ee } from "react/jsx-runtime";
+import { jsx as i, jsxs as ee, Fragment as te } from "react/jsx-runtime";
 import * as s from "react";
-import Ee from "react-dom";
-import { c as Te, P as K } from "./index-Df-2-3xv.js";
-import { c as y } from "./index-B695uy69.js";
-import { P as E, u as z, d as te } from "./index-BzgbBl8b.js";
-import { u as re } from "./index-Cn_ZXVPF.js";
-import { u as O, c as Ie } from "./index-DLcqcWxM.js";
-import { u as _e } from "./index-ByaXH_ih.js";
-import { u as ae } from "./index-9BYBSfjb.js";
-import { c as ie } from "./index-Aj7AU26N.js";
-import { D as Pe } from "./index-DoAIVWjZ.js";
-import { u as ke } from "./index-BZPx6jYI.js";
-import { u as L } from "./index-0ioNhtNM.js";
-import { c as T } from "./utils-BOGlfttm.js";
-var Se = Object.freeze({
-  // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-  position: "absolute",
-  border: 0,
-  width: 1,
-  height: 1,
-  padding: 0,
-  margin: -1,
-  overflow: "hidden",
-  clip: "rect(0, 0, 0, 0)",
-  whiteSpace: "nowrap",
-  wordWrap: "normal"
-}), Le = "VisuallyHidden", se = s.forwardRef(
-  (e, t) => /* @__PURE__ */ i(
-    E.span,
-    {
-      ...e,
-      ref: t,
-      style: { ...Se, ...e.style }
-    }
-  )
-);
-se.displayName = Le;
-var De = se, D = "NavigationMenu", [j, ue, Ae] = ie(D), [U, Oe, Fe] = ie(D), [Y] = Te(
+import Re from "react-dom";
+import { c as Ee } from "./index-DFZozV_h.js";
+import { c as R } from "./index-B695uy69.js";
+import { P as k, d as ne } from "./index-DYM6xIoO.js";
+import { u as ae } from "./index-437EL2iq.js";
+import { u as O, c as Te } from "./index-DLcqcWxM.js";
+import { u as ke } from "./index-ByaXH_ih.js";
+import { P as V } from "./index-BpWB3aFK.js";
+import { u as ie } from "./index-Cv867SGx.js";
+import { c as se } from "./index-CFzSulqY.js";
+import { D as Ie } from "./index-BybPvee-.js";
+import { u as _e } from "./index-BZPx6jYI.js";
+import { u as z } from "./index-CCKe-Mpx.js";
+import { u as S } from "./index-0ioNhtNM.js";
+import { R as Pe } from "./index-Baakt2Nc.js";
+import { c as E } from "./utils-CRiPKpXj.js";
+var D = "NavigationMenu", [j, ue, Le] = se(D), [$, Se, De] = se(D), [Y] = Ee(
   D,
-  [Ae, Fe]
-), [Ve, I] = Y(D), [Ke, Ge] = Y(D), ce = s.forwardRef(
+  [Le, De]
+), [Ae, T] = Y(D), [Oe, Fe] = Y(D), ce = s.forwardRef(
   (e, t) => {
     const {
       __scopeNavigationMenu: n,
@@ -51,34 +31,34 @@ var De = se, D = "NavigationMenu", [j, ue, Ae] = ie(D), [U, Oe, Fe] = ie(D), [Y]
       orientation: l = "horizontal",
       dir: b,
       ...c
-    } = e, [g, M] = s.useState(null), x = O(t, (N) => M(N)), p = _e(b), w = s.useRef(0), C = s.useRef(0), R = s.useRef(0), [_, d] = s.useState(!0), [m, f] = re({
+    } = e, [g, C] = s.useState(null), M = O(t, (x) => C(x)), p = ke(b), h = s.useRef(0), N = s.useRef(0), y = s.useRef(0), [I, d] = s.useState(!0), [m, f] = ae({
       prop: r,
-      onChange: (N) => {
-        const k = N !== "", G = v > 0;
-        k ? (window.clearTimeout(R.current), G && d(!1)) : (window.clearTimeout(R.current), R.current = window.setTimeout(
+      onChange: (x) => {
+        const P = x !== "", G = v > 0;
+        P ? (window.clearTimeout(y.current), G && d(!1)) : (window.clearTimeout(y.current), y.current = window.setTimeout(
           () => d(!0),
           v
-        )), o?.(N);
+        )), o?.(x);
       },
       defaultProp: a ?? "",
       caller: D
-    }), h = s.useCallback(() => {
-      window.clearTimeout(C.current), C.current = window.setTimeout(() => f(""), 150);
-    }, [f]), P = s.useCallback(
-      (N) => {
-        window.clearTimeout(C.current), f(N);
+    }), w = s.useCallback(() => {
+      window.clearTimeout(N.current), N.current = window.setTimeout(() => f(""), 150);
+    }, [f]), _ = s.useCallback(
+      (x) => {
+        window.clearTimeout(N.current), f(x);
       },
       [f]
-    ), S = s.useCallback(
-      (N) => {
-        m === N ? window.clearTimeout(C.current) : w.current = window.setTimeout(() => {
-          window.clearTimeout(C.current), f(N);
+    ), L = s.useCallback(
+      (x) => {
+        m === x ? window.clearTimeout(N.current) : h.current = window.setTimeout(() => {
+          window.clearTimeout(N.current), f(x);
         }, u);
       },
       [m, f, u]
     );
     return s.useEffect(() => () => {
-      window.clearTimeout(w.current), window.clearTimeout(C.current), window.clearTimeout(R.current);
+      window.clearTimeout(h.current), window.clearTimeout(N.current), window.clearTimeout(y.current);
     }, []), /* @__PURE__ */ i(
       le,
       {
@@ -88,26 +68,26 @@ var De = se, D = "NavigationMenu", [j, ue, Ae] = ie(D), [U, Oe, Fe] = ie(D), [Y]
         dir: p,
         orientation: l,
         rootNavigationMenu: g,
-        onTriggerEnter: (N) => {
-          window.clearTimeout(w.current), _ ? S(N) : P(N);
+        onTriggerEnter: (x) => {
+          window.clearTimeout(h.current), I ? L(x) : _(x);
         },
         onTriggerLeave: () => {
-          window.clearTimeout(w.current), h();
+          window.clearTimeout(h.current), w();
         },
-        onContentEnter: () => window.clearTimeout(C.current),
-        onContentLeave: h,
-        onItemSelect: (N) => {
-          f((k) => k === N ? "" : N);
+        onContentEnter: () => window.clearTimeout(N.current),
+        onContentLeave: w,
+        onItemSelect: (x) => {
+          f((P) => P === x ? "" : x);
         },
         onItemDismiss: () => f(""),
         children: /* @__PURE__ */ i(
-          E.nav,
+          k.nav,
           {
             "aria-label": "Main",
             "data-orientation": l,
             dir: p,
             ...c,
-            ref: x
+            ref: M
           }
         )
       }
@@ -115,7 +95,7 @@ var De = se, D = "NavigationMenu", [j, ue, Ae] = ie(D), [U, Oe, Fe] = ie(D), [Y]
   }
 );
 ce.displayName = D;
-var H = "NavigationMenuSub", ze = s.forwardRef(
+var U = "NavigationMenuSub", Ke = s.forwardRef(
   (e, t) => {
     const {
       __scopeNavigationMenu: n,
@@ -124,11 +104,11 @@ var H = "NavigationMenuSub", ze = s.forwardRef(
       defaultValue: a,
       orientation: u = "horizontal",
       ...v
-    } = e, l = I(H, n), [b, c] = re({
+    } = e, l = T(U, n), [b, c] = ae({
       prop: r,
       onChange: o,
       defaultProp: a ?? "",
-      caller: H
+      caller: U
     });
     return /* @__PURE__ */ i(
       le,
@@ -142,12 +122,12 @@ var H = "NavigationMenuSub", ze = s.forwardRef(
         onTriggerEnter: (g) => c(g),
         onItemSelect: (g) => c(g),
         onItemDismiss: () => c(""),
-        children: /* @__PURE__ */ i(E.div, { "data-orientation": u, ...v, ref: t })
+        children: /* @__PURE__ */ i(k.div, { "data-orientation": u, ...v, ref: t })
       }
     );
   }
 );
-ze.displayName = H;
+Ke.displayName = U;
 var le = (e) => {
   const {
     scope: t,
@@ -161,63 +141,63 @@ var le = (e) => {
     onItemDismiss: b,
     onTriggerEnter: c,
     onTriggerLeave: g,
-    onContentEnter: M,
-    onContentLeave: x
-  } = e, [p, w] = s.useState(null), [C, R] = s.useState(/* @__PURE__ */ new Map()), [_, d] = s.useState(null);
+    onContentEnter: C,
+    onContentLeave: M
+  } = e, [p, h] = s.useState(null), [N, y] = s.useState(/* @__PURE__ */ new Map()), [I, d] = s.useState(null);
   return /* @__PURE__ */ i(
-    Ve,
+    Ae,
     {
       scope: t,
       isRootMenu: n,
       rootNavigationMenu: r,
       value: v,
-      previousValue: ke(v),
-      baseId: ae(),
+      previousValue: _e(v),
+      baseId: ie(),
       dir: o,
       orientation: a,
       viewport: p,
-      onViewportChange: w,
-      indicatorTrack: _,
+      onViewportChange: h,
+      indicatorTrack: I,
       onIndicatorTrackChange: d,
-      onTriggerEnter: L(c),
-      onTriggerLeave: L(g),
-      onContentEnter: L(M),
-      onContentLeave: L(x),
-      onItemSelect: L(l),
-      onItemDismiss: L(b),
+      onTriggerEnter: S(c),
+      onTriggerLeave: S(g),
+      onContentEnter: S(C),
+      onContentLeave: S(M),
+      onItemSelect: S(l),
+      onItemDismiss: S(b),
       onViewportContentChange: s.useCallback((m, f) => {
-        R((h) => (h.set(m, f), new Map(h)));
+        y((w) => (w.set(m, f), new Map(w)));
       }, []),
       onViewportContentRemove: s.useCallback((m) => {
-        R((f) => f.has(m) ? (f.delete(m), new Map(f)) : f);
+        y((f) => f.has(m) ? (f.delete(m), new Map(f)) : f);
       }, []),
-      children: /* @__PURE__ */ i(j.Provider, { scope: t, children: /* @__PURE__ */ i(Ke, { scope: t, items: C, children: u }) })
+      children: /* @__PURE__ */ i(j.Provider, { scope: t, children: /* @__PURE__ */ i(Oe, { scope: t, items: N, children: u }) })
     }
   );
 }, ve = "NavigationMenuList", de = s.forwardRef(
   (e, t) => {
-    const { __scopeNavigationMenu: n, ...r } = e, o = I(ve, n), a = /* @__PURE__ */ i(E.ul, { "data-orientation": o.orientation, ...r, ref: t });
-    return /* @__PURE__ */ i(E.div, { style: { position: "relative" }, ref: o.onIndicatorTrackChange, children: /* @__PURE__ */ i(j.Slot, { scope: n, children: o.isRootMenu ? /* @__PURE__ */ i(Ce, { asChild: !0, children: a }) : a }) });
+    const { __scopeNavigationMenu: n, ...r } = e, o = T(ve, n), a = /* @__PURE__ */ i(k.ul, { "data-orientation": o.orientation, ...r, ref: t });
+    return /* @__PURE__ */ i(k.div, { style: { position: "relative" }, ref: o.onIndicatorTrackChange, children: /* @__PURE__ */ i(j.Slot, { scope: n, children: o.isRootMenu ? /* @__PURE__ */ i(Ne, { asChild: !0, children: a }) : a }) });
   }
 );
 de.displayName = ve;
-var fe = "NavigationMenuItem", [Ue, ge] = Y(fe), me = s.forwardRef(
+var fe = "NavigationMenuItem", [Ve, ge] = Y(fe), me = s.forwardRef(
   (e, t) => {
-    const { __scopeNavigationMenu: n, value: r, ...o } = e, a = ae(), u = r || a || "LEGACY_REACT_AUTO_VALUE", v = s.useRef(null), l = s.useRef(null), b = s.useRef(null), c = s.useRef(() => {
-    }), g = s.useRef(!1), M = s.useCallback((p = "start") => {
+    const { __scopeNavigationMenu: n, value: r, ...o } = e, a = ie(), u = r || a || "LEGACY_REACT_AUTO_VALUE", v = s.useRef(null), l = s.useRef(null), b = s.useRef(null), c = s.useRef(() => {
+    }), g = s.useRef(!1), C = s.useCallback((p = "start") => {
       if (v.current) {
         c.current();
-        const w = W(v.current);
-        w.length && J(p === "start" ? w : w.reverse());
+        const h = B(v.current);
+        h.length && J(p === "start" ? h : h.reverse());
       }
-    }, []), x = s.useCallback(() => {
+    }, []), M = s.useCallback(() => {
       if (v.current) {
-        const p = W(v.current);
-        p.length && (c.current = Xe(p));
+        const p = B(v.current);
+        p.length && (c.current = je(p));
       }
     }, []);
     return /* @__PURE__ */ i(
-      Ue,
+      Ve,
       {
         scope: n,
         value: u,
@@ -225,64 +205,64 @@ var fe = "NavigationMenuItem", [Ue, ge] = Y(fe), me = s.forwardRef(
         contentRef: v,
         focusProxyRef: b,
         wasEscapeCloseRef: g,
-        onEntryKeyDown: M,
-        onFocusProxyEnter: M,
-        onRootContentClose: x,
-        onContentFocusOutside: x,
-        children: /* @__PURE__ */ i(E.li, { ...o, ref: t })
+        onEntryKeyDown: C,
+        onFocusProxyEnter: C,
+        onRootContentClose: M,
+        onContentFocusOutside: M,
+        children: /* @__PURE__ */ i(k.li, { ...o, ref: t })
       }
     );
   }
 );
 me.displayName = fe;
-var $ = "NavigationMenuTrigger", pe = s.forwardRef((e, t) => {
-  const { __scopeNavigationMenu: n, disabled: r, ...o } = e, a = I($, e.__scopeNavigationMenu), u = ge($, e.__scopeNavigationMenu), v = s.useRef(null), l = O(v, u.triggerRef, t), b = xe(a.baseId, u.value), c = Re(a.baseId, u.value), g = s.useRef(!1), M = s.useRef(!1), x = u.value === a.value;
-  return /* @__PURE__ */ Z(ee, { children: [
-    /* @__PURE__ */ i(j.ItemSlot, { scope: n, value: u.value, children: /* @__PURE__ */ i(Me, { asChild: !0, children: /* @__PURE__ */ i(
-      E.button,
+var H = "NavigationMenuTrigger", pe = s.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: n, disabled: r, ...o } = e, a = T(H, e.__scopeNavigationMenu), u = ge(H, e.__scopeNavigationMenu), v = s.useRef(null), l = O(v, u.triggerRef, t), b = Me(a.baseId, u.value), c = ye(a.baseId, u.value), g = s.useRef(!1), C = s.useRef(!1), M = u.value === a.value;
+  return /* @__PURE__ */ ee(te, { children: [
+    /* @__PURE__ */ i(j.ItemSlot, { scope: n, value: u.value, children: /* @__PURE__ */ i(Ce, { asChild: !0, children: /* @__PURE__ */ i(
+      k.button,
       {
         id: b,
         disabled: r,
         "data-disabled": r ? "" : void 0,
-        "data-state": Q(x),
-        "aria-expanded": x,
+        "data-state": Q(M),
+        "aria-expanded": M,
         "aria-controls": c,
         ...o,
         ref: l,
-        onPointerEnter: y(e.onPointerEnter, () => {
-          M.current = !1, u.wasEscapeCloseRef.current = !1;
+        onPointerEnter: R(e.onPointerEnter, () => {
+          C.current = !1, u.wasEscapeCloseRef.current = !1;
         }),
-        onPointerMove: y(
+        onPointerMove: R(
           e.onPointerMove,
-          V(() => {
-            r || M.current || u.wasEscapeCloseRef.current || g.current || (a.onTriggerEnter(u.value), g.current = !0);
+          K(() => {
+            r || C.current || u.wasEscapeCloseRef.current || g.current || (a.onTriggerEnter(u.value), g.current = !0);
           })
         ),
-        onPointerLeave: y(
+        onPointerLeave: R(
           e.onPointerLeave,
-          V(() => {
+          K(() => {
             r || (a.onTriggerLeave(), g.current = !1);
           })
         ),
-        onClick: y(e.onClick, () => {
-          a.onItemSelect(u.value), M.current = x;
+        onClick: R(e.onClick, () => {
+          a.onItemSelect(u.value), C.current = M;
         }),
-        onKeyDown: y(e.onKeyDown, (p) => {
-          const C = { horizontal: "ArrowDown", vertical: a.dir === "rtl" ? "ArrowLeft" : "ArrowRight" }[a.orientation];
-          x && p.key === C && (u.onEntryKeyDown(), p.preventDefault());
+        onKeyDown: R(e.onKeyDown, (p) => {
+          const N = { horizontal: "ArrowDown", vertical: a.dir === "rtl" ? "ArrowLeft" : "ArrowRight" }[a.orientation];
+          M && p.key === N && (u.onEntryKeyDown(), p.preventDefault());
         })
       }
     ) }) }),
-    x && /* @__PURE__ */ Z(ee, { children: [
+    M && /* @__PURE__ */ ee(te, { children: [
       /* @__PURE__ */ i(
-        De,
+        Pe,
         {
           "aria-hidden": !0,
           tabIndex: 0,
           ref: u.focusProxyRef,
           onFocus: (p) => {
-            const w = u.contentRef.current, C = p.relatedTarget, R = C === v.current, _ = w?.contains(C);
-            (R || !_) && u.onFocusProxyEnter(R ? "start" : "end");
+            const h = u.contentRef.current, N = p.relatedTarget, y = N === v.current, I = h?.contains(N);
+            (y || !I) && u.onFocusProxyEnter(y ? "start" : "end");
           }
         }
       ),
@@ -290,30 +270,30 @@ var $ = "NavigationMenuTrigger", pe = s.forwardRef((e, t) => {
     ] })
   ] });
 });
-pe.displayName = $;
-var He = "NavigationMenuLink", ne = "navigationMenu.linkSelect", we = s.forwardRef(
+pe.displayName = H;
+var Ge = "NavigationMenuLink", oe = "navigationMenu.linkSelect", he = s.forwardRef(
   (e, t) => {
     const { __scopeNavigationMenu: n, active: r, onSelect: o, ...a } = e;
-    return /* @__PURE__ */ i(Me, { asChild: !0, children: /* @__PURE__ */ i(
-      E.a,
+    return /* @__PURE__ */ i(Ce, { asChild: !0, children: /* @__PURE__ */ i(
+      k.a,
       {
         "data-active": r ? "" : void 0,
         "aria-current": r ? "page" : void 0,
         ...a,
         ref: t,
-        onClick: y(
+        onClick: R(
           e.onClick,
           (u) => {
-            const v = u.target, l = new CustomEvent(ne, {
+            const v = u.target, l = new CustomEvent(oe, {
               bubbles: !0,
               cancelable: !0
             });
-            if (v.addEventListener(ne, (b) => o?.(b), { once: !0 }), te(v, l), !l.defaultPrevented && !u.metaKey) {
+            if (v.addEventListener(oe, (b) => o?.(b), { once: !0 }), ne(v, l), !l.defaultPrevented && !u.metaKey) {
               const b = new CustomEvent(F, {
                 bubbles: !0,
                 cancelable: !0
               });
-              te(v, b);
+              ne(v, b);
             }
           },
           { checkForDefaultPrevented: !1 }
@@ -322,31 +302,31 @@ var He = "NavigationMenuLink", ne = "navigationMenu.linkSelect", we = s.forwardR
     ) });
   }
 );
-we.displayName = He;
-var q = "NavigationMenuIndicator", $e = s.forwardRef((e, t) => {
-  const { forceMount: n, ...r } = e, o = I(q, e.__scopeNavigationMenu), a = !!o.value;
-  return o.indicatorTrack ? Ee.createPortal(
-    /* @__PURE__ */ i(K, { present: n || a, children: /* @__PURE__ */ i(We, { ...r, ref: t }) }),
+he.displayName = Ge;
+var q = "NavigationMenuIndicator", ze = s.forwardRef((e, t) => {
+  const { forceMount: n, ...r } = e, o = T(q, e.__scopeNavigationMenu), a = !!o.value;
+  return o.indicatorTrack ? Re.createPortal(
+    /* @__PURE__ */ i(V, { present: n || a, children: /* @__PURE__ */ i($e, { ...r, ref: t }) }),
     o.indicatorTrack
   ) : null;
 });
-$e.displayName = q;
-var We = s.forwardRef((e, t) => {
-  const { __scopeNavigationMenu: n, ...r } = e, o = I(q, n), a = ue(n), [u, v] = s.useState(
+ze.displayName = q;
+var $e = s.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: n, ...r } = e, o = T(q, n), a = ue(n), [u, v] = s.useState(
     null
   ), [l, b] = s.useState(null), c = o.orientation === "horizontal", g = !!o.value;
   s.useEffect(() => {
-    const p = a().find((w) => w.value === o.value)?.ref.current;
+    const p = a().find((h) => h.value === o.value)?.ref.current;
     p && v(p);
   }, [a, o.value]);
-  const M = () => {
+  const C = () => {
     u && b({
       size: c ? u.offsetWidth : u.offsetHeight,
       offset: c ? u.offsetLeft : u.offsetTop
     });
   };
-  return B(u, M), B(o.indicatorTrack, M), l ? /* @__PURE__ */ i(
-    E.div,
+  return W(u, C), W(o.indicatorTrack, C), l ? /* @__PURE__ */ i(
+    k.div,
     {
       "aria-hidden": !0,
       "data-state": g ? "visible" : "hidden",
@@ -368,8 +348,8 @@ var We = s.forwardRef((e, t) => {
       }
     }
   ) : null;
-}), A = "NavigationMenuContent", he = s.forwardRef((e, t) => {
-  const { forceMount: n, ...r } = e, o = I(A, e.__scopeNavigationMenu), a = ge(A, e.__scopeNavigationMenu), u = O(a.contentRef, t), v = a.value === o.value, l = {
+}), A = "NavigationMenuContent", we = s.forwardRef((e, t) => {
+  const { forceMount: n, ...r } = e, o = T(A, e.__scopeNavigationMenu), a = ge(A, e.__scopeNavigationMenu), u = O(a.contentRef, t), v = a.value === o.value, l = {
     value: a.value,
     triggerRef: a.triggerRef,
     focusProxyRef: a.focusProxyRef,
@@ -378,16 +358,16 @@ var We = s.forwardRef((e, t) => {
     onRootContentClose: a.onRootContentClose,
     ...r
   };
-  return o.viewport ? /* @__PURE__ */ i(Be, { forceMount: n, ...l, ref: u }) : /* @__PURE__ */ i(K, { present: n || v, children: /* @__PURE__ */ i(
+  return o.viewport ? /* @__PURE__ */ i(Ue, { forceMount: n, ...l, ref: u }) : /* @__PURE__ */ i(V, { present: n || v, children: /* @__PURE__ */ i(
     be,
     {
       "data-state": Q(v),
       ...l,
       ref: u,
-      onPointerEnter: y(e.onPointerEnter, o.onContentEnter),
-      onPointerLeave: y(
+      onPointerEnter: R(e.onPointerEnter, o.onContentEnter),
+      onPointerLeave: R(
         e.onPointerLeave,
-        V(o.onContentLeave)
+        K(o.onContentLeave)
       ),
       style: {
         // Prevent interaction when animating out
@@ -397,9 +377,9 @@ var We = s.forwardRef((e, t) => {
     }
   ) });
 });
-he.displayName = A;
-var Be = s.forwardRef((e, t) => {
-  const n = I(A, e.__scopeNavigationMenu), { onViewportContentChange: r, onViewportContentRemove: o } = n;
+we.displayName = A;
+var Ue = s.forwardRef((e, t) => {
+  const n = T(A, e.__scopeNavigationMenu), { onViewportContentChange: r, onViewportContentRemove: o } = n;
   return z(() => {
     r(e.value, {
       ref: t,
@@ -416,39 +396,39 @@ var Be = s.forwardRef((e, t) => {
     onRootContentClose: v,
     onContentFocusOutside: l,
     ...b
-  } = e, c = I(A, n), g = s.useRef(null), M = O(g, t), x = xe(c.baseId, r), p = Re(c.baseId, r), w = ue(n), C = s.useRef(null), { onItemDismiss: R } = c;
+  } = e, c = T(A, n), g = s.useRef(null), C = O(g, t), M = Me(c.baseId, r), p = ye(c.baseId, r), h = ue(n), N = s.useRef(null), { onItemDismiss: y } = c;
   s.useEffect(() => {
     const d = g.current;
     if (c.isRootMenu && d) {
       const m = () => {
-        R(), v(), d.contains(document.activeElement) && o.current?.focus();
+        y(), v(), d.contains(document.activeElement) && o.current?.focus();
       };
       return d.addEventListener(F, m), () => d.removeEventListener(F, m);
     }
-  }, [c.isRootMenu, e.value, o, R, v]);
-  const _ = s.useMemo(() => {
-    const m = w().map((k) => k.value);
+  }, [c.isRootMenu, e.value, o, y, v]);
+  const I = s.useMemo(() => {
+    const m = h().map((P) => P.value);
     c.dir === "rtl" && m.reverse();
-    const f = m.indexOf(c.value), h = m.indexOf(c.previousValue), P = r === c.value, S = h === m.indexOf(r);
-    if (!P && !S) return C.current;
-    const N = (() => {
-      if (f !== h) {
-        if (P && h !== -1) return f > h ? "from-end" : "from-start";
-        if (S && f !== -1) return f > h ? "to-start" : "to-end";
+    const f = m.indexOf(c.value), w = m.indexOf(c.previousValue), _ = r === c.value, L = w === m.indexOf(r);
+    if (!_ && !L) return N.current;
+    const x = (() => {
+      if (f !== w) {
+        if (_ && w !== -1) return f > w ? "from-end" : "from-start";
+        if (L && f !== -1) return f > w ? "to-start" : "to-end";
       }
       return null;
     })();
-    return C.current = N, N;
-  }, [c.previousValue, c.value, c.dir, w, r]);
-  return /* @__PURE__ */ i(Ce, { asChild: !0, children: /* @__PURE__ */ i(
-    Pe,
+    return N.current = x, x;
+  }, [c.previousValue, c.value, c.dir, h, r]);
+  return /* @__PURE__ */ i(Ne, { asChild: !0, children: /* @__PURE__ */ i(
+    Ie,
     {
       id: p,
-      "aria-labelledby": x,
-      "data-motion": _,
+      "aria-labelledby": M,
+      "data-motion": I,
       "data-orientation": c.orientation,
       ...b,
-      ref: M,
+      ref: C,
       disableOutsidePointerEvents: !1,
       onDismiss: () => {
         const d = new Event(F, {
@@ -457,41 +437,41 @@ var Be = s.forwardRef((e, t) => {
         });
         g.current?.dispatchEvent(d);
       },
-      onFocusOutside: y(e.onFocusOutside, (d) => {
+      onFocusOutside: R(e.onFocusOutside, (d) => {
         l();
         const m = d.target;
         c.rootNavigationMenu?.contains(m) && d.preventDefault();
       }),
-      onPointerDownOutside: y(e.onPointerDownOutside, (d) => {
-        const m = d.target, f = w().some((P) => P.ref.current?.contains(m)), h = c.isRootMenu && c.viewport?.contains(m);
-        (f || h || !c.isRootMenu) && d.preventDefault();
+      onPointerDownOutside: R(e.onPointerDownOutside, (d) => {
+        const m = d.target, f = h().some((_) => _.ref.current?.contains(m)), w = c.isRootMenu && c.viewport?.contains(m);
+        (f || w || !c.isRootMenu) && d.preventDefault();
       }),
-      onKeyDown: y(e.onKeyDown, (d) => {
+      onKeyDown: R(e.onKeyDown, (d) => {
         const m = d.altKey || d.ctrlKey || d.metaKey;
         if (d.key === "Tab" && !m) {
-          const h = W(d.currentTarget), P = document.activeElement, S = h.findIndex((G) => G === P), k = d.shiftKey ? h.slice(0, S).reverse() : h.slice(S + 1, h.length);
-          J(k) ? d.preventDefault() : a.current?.focus();
+          const w = B(d.currentTarget), _ = document.activeElement, L = w.findIndex((G) => G === _), P = d.shiftKey ? w.slice(0, L).reverse() : w.slice(L + 1, w.length);
+          J(P) ? d.preventDefault() : a.current?.focus();
         }
       }),
-      onEscapeKeyDown: y(e.onEscapeKeyDown, (d) => {
+      onEscapeKeyDown: R(e.onEscapeKeyDown, (d) => {
         u.current = !0;
       })
     }
   ) });
-}), X = "NavigationMenuViewport", Ne = s.forwardRef((e, t) => {
-  const { forceMount: n, ...r } = e, a = !!I(X, e.__scopeNavigationMenu).value;
-  return /* @__PURE__ */ i(K, { present: n || a, children: /* @__PURE__ */ i(je, { ...r, ref: t }) });
+}), X = "NavigationMenuViewport", xe = s.forwardRef((e, t) => {
+  const { forceMount: n, ...r } = e, a = !!T(X, e.__scopeNavigationMenu).value;
+  return /* @__PURE__ */ i(V, { present: n || a, children: /* @__PURE__ */ i(He, { ...r, ref: t }) });
 });
-Ne.displayName = X;
-var je = s.forwardRef((e, t) => {
-  const { __scopeNavigationMenu: n, children: r, ...o } = e, a = I(X, n), u = O(t, a.onViewportChange), v = Ge(
+xe.displayName = X;
+var He = s.forwardRef((e, t) => {
+  const { __scopeNavigationMenu: n, children: r, ...o } = e, a = T(X, n), u = O(t, a.onViewportChange), v = Fe(
     A,
     e.__scopeNavigationMenu
-  ), [l, b] = s.useState(null), [c, g] = s.useState(null), M = l ? l?.width + "px" : void 0, x = l ? l?.height + "px" : void 0, p = !!a.value, w = p ? a.value : a.previousValue;
-  return B(c, () => {
+  ), [l, b] = s.useState(null), [c, g] = s.useState(null), C = l ? l?.width + "px" : void 0, M = l ? l?.height + "px" : void 0, p = !!a.value, h = p ? a.value : a.previousValue;
+  return W(c, () => {
     c && b({ width: c.offsetWidth, height: c.offsetHeight });
   }), /* @__PURE__ */ i(
-    E.div,
+    k.div,
     {
       "data-state": Q(p),
       "data-orientation": a.orientation,
@@ -500,43 +480,43 @@ var je = s.forwardRef((e, t) => {
       style: {
         // Prevent interaction when animating out
         pointerEvents: !p && a.isRootMenu ? "none" : void 0,
-        "--radix-navigation-menu-viewport-width": M,
-        "--radix-navigation-menu-viewport-height": x,
+        "--radix-navigation-menu-viewport-width": C,
+        "--radix-navigation-menu-viewport-height": M,
         ...o.style
       },
-      onPointerEnter: y(e.onPointerEnter, a.onContentEnter),
-      onPointerLeave: y(e.onPointerLeave, V(a.onContentLeave)),
-      children: Array.from(v.items).map(([R, { ref: _, forceMount: d, ...m }]) => {
-        const f = w === R;
-        return /* @__PURE__ */ i(K, { present: d || f, children: /* @__PURE__ */ i(
+      onPointerEnter: R(e.onPointerEnter, a.onContentEnter),
+      onPointerLeave: R(e.onPointerLeave, K(a.onContentLeave)),
+      children: Array.from(v.items).map(([y, { ref: I, forceMount: d, ...m }]) => {
+        const f = h === y;
+        return /* @__PURE__ */ i(V, { present: d || f, children: /* @__PURE__ */ i(
           be,
           {
             ...m,
-            ref: Ie(_, (h) => {
-              f && h && g(h);
+            ref: Te(I, (w) => {
+              f && w && g(w);
             })
           }
-        ) }, R);
+        ) }, y);
       })
     }
   );
-}), Ye = "FocusGroup", Ce = s.forwardRef(
+}), Be = "FocusGroup", Ne = s.forwardRef(
   (e, t) => {
-    const { __scopeNavigationMenu: n, ...r } = e, o = I(Ye, n);
-    return /* @__PURE__ */ i(U.Provider, { scope: n, children: /* @__PURE__ */ i(U.Slot, { scope: n, children: /* @__PURE__ */ i(E.div, { dir: o.dir, ...r, ref: t }) }) });
+    const { __scopeNavigationMenu: n, ...r } = e, o = T(Be, n);
+    return /* @__PURE__ */ i($.Provider, { scope: n, children: /* @__PURE__ */ i($.Slot, { scope: n, children: /* @__PURE__ */ i(k.div, { dir: o.dir, ...r, ref: t }) }) });
   }
-), oe = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"], qe = "FocusGroupItem", Me = s.forwardRef(
+), re = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"], We = "FocusGroupItem", Ce = s.forwardRef(
   (e, t) => {
-    const { __scopeNavigationMenu: n, ...r } = e, o = Oe(n), a = I(qe, n);
-    return /* @__PURE__ */ i(U.ItemSlot, { scope: n, children: /* @__PURE__ */ i(
-      E.button,
+    const { __scopeNavigationMenu: n, ...r } = e, o = Se(n), a = T(We, n);
+    return /* @__PURE__ */ i($.ItemSlot, { scope: n, children: /* @__PURE__ */ i(
+      k.button,
       {
         ...r,
         ref: t,
-        onKeyDown: y(e.onKeyDown, (u) => {
-          if (["Home", "End", ...oe].includes(u.key)) {
+        onKeyDown: R(e.onKeyDown, (u) => {
+          if (["Home", "End", ...re].includes(u.key)) {
             let l = o().map((g) => g.ref.current);
-            if ([a.dir === "rtl" ? "ArrowRight" : "ArrowLeft", "ArrowUp", "End"].includes(u.key) && l.reverse(), oe.includes(u.key)) {
+            if ([a.dir === "rtl" ? "ArrowRight" : "ArrowLeft", "ArrowUp", "End"].includes(u.key) && l.reverse(), re.includes(u.key)) {
               const g = l.indexOf(u.currentTarget);
               l = l.slice(g + 1);
             }
@@ -547,7 +527,7 @@ var je = s.forwardRef((e, t) => {
     ) });
   }
 );
-function W(e) {
+function B(e) {
   const t = [], n = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
     acceptNode: (r) => {
       const o = r.tagName === "INPUT" && r.type === "hidden";
@@ -561,7 +541,7 @@ function J(e) {
   const t = document.activeElement;
   return e.some((n) => n === t ? !0 : (n.focus(), document.activeElement !== t));
 }
-function Xe(e) {
+function je(e) {
   return e.forEach((t) => {
     t.dataset.tabindex = t.getAttribute("tabindex") || "", t.setAttribute("tabindex", "-1");
   }), () => {
@@ -571,8 +551,8 @@ function Xe(e) {
     });
   };
 }
-function B(e, t) {
-  const n = L(t);
+function W(e, t) {
+  const n = S(t);
   z(() => {
     let r = 0;
     if (e) {
@@ -588,17 +568,17 @@ function B(e, t) {
 function Q(e) {
   return e ? "open" : "closed";
 }
-function xe(e, t) {
+function Me(e, t) {
   return `${e}-trigger-${t}`;
 }
-function Re(e, t) {
+function ye(e, t) {
   return `${e}-content-${t}`;
 }
-function V(e) {
+function K(e) {
   return (t) => t.pointerType === "mouse" ? e(t) : void 0;
 }
-var Je = ce, Qe = de, Ze = me, et = pe, ye = we, tt = he, nt = Ne;
-function wt({
+var Ye = ce, qe = de, Xe = me, Je = pe, Z = he, Qe = we, Ze = xe;
+function ht({
   children: e,
   className: t,
   viewport: n,
@@ -606,11 +586,10 @@ function wt({
   ...o
 }) {
   return /* @__PURE__ */ i(
-    Je,
+    Ye,
     {
-      className: T(
-        // Base layout
-        "group/navigation-menu relative flex w-full flex-1 items-center justify-center",
+      className: E(
+        "group/navigation-menu relative mx-auto flex w-full max-w-7xl flex-1 items-center justify-center",
         t
       ),
       "data-columns": r,
@@ -621,27 +600,22 @@ function wt({
     }
   );
 }
-function ht({
+function wt({
   className: e,
   children: t,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    nt,
+    Ze,
     {
-      className: T(
-        // Base layout
-        "origin-top-center relative mt-2 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden",
-        // Colors
-        "bg-[var(--nav-viewport-background,hsl(var(--background)))] text-[var(--nav-text,hsl(var(--foreground)))]",
-        // Borders & rounded
-        "rounded-3xl border border-[var(--nav-viewport-border,color-mix(in_oklab,hsl(var(--foreground))_15%,transparent))]",
-        // Effects
-        "shadow",
+      className: E(
+        "origin-top-center relative mt-2 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-2xl bg-[var(--nav-viewport-background,hsl(var(--background)))] text-[var(--nav-text,hsl(var(--foreground)))] shadow-xl ring-1 ring-black/5 @container [transition:height_200ms_ease-in-out,opacity_75ms_ease-in-out]",
         // Closed state
-        "data-[state=closed]:animate-out data-[state=closed]:zoom-out-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out",
         // Open state
-        "data-[state=open]:animate-in data-[state=open]:zoom-in-90",
+        "data-[state=open]:animate-in data-[state=open]:fade-in",
+        // Responsive
+        "md:rounded-3xl",
         e
       ),
       "data-slot": "navigation-menu-viewport",
@@ -654,64 +628,45 @@ function bt({ children: e, className: t, ...n }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: T(
-        // Base layout
-        "absolute left-0 right-0 top-full z-50 mx-auto w-full max-w-5xl",
-        t
-      ),
+      className: E("absolute left-0 right-0 top-full z-50 mx-auto w-full", t),
       "data-slot": "navigation-menu-panel",
       ...n,
       children: e
     }
   );
 }
-function Nt({ children: e, className: t, ...n }) {
+function xt({ children: e, className: t, ...n }) {
   return /* @__PURE__ */ i(
-    Qe,
+    qe,
     {
-      className: T(
-        // Base layout
-        "group flex w-full flex-1 list-none items-center justify-center gap-1",
-        t
-      ),
+      className: E("group flex w-full flex-1 list-none items-center justify-center", t),
       "data-slot": "navigation-menu-list",
       ...n,
       children: e
     }
   );
 }
-function Ct({ children: e, className: t, ...n }) {
+function Nt({ children: e, className: t, ...n }) {
   return /* @__PURE__ */ i(
-    Ze,
+    Xe,
     {
-      className: T(
-        // Base layout
-        "relative",
-        t
-      ),
+      className: E("relative", t),
       "data-slot": "navigation-menu-item",
       ...n,
       children: e
     }
   );
 }
-function Mt({
+function Ct({
   children: e,
   className: t,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    et,
+    Je,
     {
-      className: T(
-        // Base layout
-        "group inline-flex h-9 w-max items-center justify-center rounded-full bg-[var(--nav-link-background,transparent)] px-4 py-2",
-        // Typography
-        "text-sm font-semibold text-[var(--nav-link-text,hsl(var(--foreground)))] outline-none transition-colors duration-200 [font-family:var(--nav-link-font-family,var(--font-family-body))]",
-        // Background
-        "bg-background",
-        // Transitions
-        "outline-none transition-[color,box-shadow]",
+      className: E(
+        "group inline-flex h-9 w-max items-center justify-center rounded-full bg-background px-4 py-2 text-sm font-semibold text-[var(--nav-link-text,hsl(var(--foreground)))] outline-none transition-[color,box-shadow] duration-200 [font-family:var(--nav-link-font-family,var(--font-family-body))]",
         // Hover state
         "hover:bg-[var(--nav-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-link-text-hover,hsl(var(--foreground)))]",
         // Focus state
@@ -731,19 +686,41 @@ function Mt({
     }
   );
 }
-function xt({
+function Mt({ className: e, children: t, ...n }) {
+  return /* @__PURE__ */ i(
+    Z,
+    {
+      className: E(
+        "group inline-flex h-9 w-max items-center justify-center rounded-full bg-background px-4 py-2 text-sm font-semibold text-[var(--nav-link-text,hsl(var(--foreground)))] outline-none transition-[color,box-shadow] duration-200 [font-family:var(--nav-link-font-family,var(--font-family-body))]",
+        // Hover state
+        "hover:bg-[var(--nav-link-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-link-text-hover,hsl(var(--foreground)))]",
+        // Focus state
+        "focus:bg-[var(--nav-link-background-hover,hsl(var(--contrast-100)))] focus:text-[var(--nav-link-text-hover,hsl(var(--foreground)))]",
+        // Focus-visible state
+        "focus-visible:outline-2 focus-visible:outline-[var(--nav-focus,hsl(var(--primary)))]",
+        e
+      ),
+      "data-slot": "navigation-menu-link",
+      ...n,
+      children: t
+    }
+  );
+}
+function yt({
   className: e,
   children: t,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    tt,
+    Qe,
     {
-      className: T(
-        // Base layout
-        "flex w-full gap-5 @container",
-        // Spacing
-        "p-5",
+      className: E(
+        "absolute left-0 top-0 flex w-full flex-col gap-4 p-3 duration-75 ease-linear",
+        // Motion state
+        "data-[motion=from-end]:animate-in data-[motion=from-start]:animate-in data-[motion=from-end]:fade-in data-[motion=from-start]:fade-in",
+        "data-[motion=to-end]:animate-out data-[motion=to-start]:animate-out data-[motion=to-end]:fade-out data-[motion=to-start]:fade-out",
+        // Container queries
+        "@lg:flex-row @xl:gap-6 @2xl:gap-8 @2xl:p-5 @4xl:gap-10",
         e
       ),
       "data-slot": "navigation-menu-content",
@@ -756,9 +733,10 @@ function Rt({ className: e, children: t, ...n }) {
   return /* @__PURE__ */ i(
     "ul",
     {
-      className: T(
-        // Base layout
-        "flex flex-1 flex-wrap gap-5",
+      className: E(
+        "grid flex-1 grid-cols-1 gap-3",
+        // Container queries
+        "@md:grid-cols-2 @xl:gap-5 @4xl:grid-cols-3 @6xl:grid-cols-4",
         e
       ),
       "data-slot": "navigation-menu-grid",
@@ -767,44 +745,23 @@ function Rt({ className: e, children: t, ...n }) {
     }
   );
 }
-function yt({
+function Et({
   className: e,
   children: t,
   ...n
 }) {
-  return /* @__PURE__ */ i(
-    "li",
-    {
-      className: T(
-        // Base layout - fixed width, no shrinking
-        "flex w-40 shrink-0 flex-col gap-0.5",
-        e
-      ),
-      "data-slot": "navigation-menu-grid-column",
-      ...n,
-      children: t
-    }
-  );
+  return /* @__PURE__ */ i("li", { className: E("w-full", e), "data-slot": "navigation-menu-grid-column", ...n, children: t });
 }
-function Et({
+function Tt({
   className: e,
   children: t,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    ye,
+    Z,
     {
-      className: T(
-        // Base layout
-        "rounded-lg",
-        // Spacing
-        "px-3 py-2",
-        // Typography
-        "font-[family-name:var(--nav-grid-label-font-family,var(--font-family-body))] font-medium",
-        // Colors
-        "bg-[var(--nav-grid-label-background,transparent)] text-[var(--nav-grid-label-text,hsl(var(--foreground)))]",
-        // Transitions
-        "transition-colors",
+      className: E(
+        "block rounded-lg bg-[var(--nav-grid-label-background,transparent)] px-3 py-2 font-[family-name:var(--nav-grid-label-font-family,var(--font-family-body))] text-sm font-semibold text-[var(--nav-grid-label-text,hsl(var(--foreground)))] transition-colors",
         // Hover state
         "hover:bg-[var(--nav-grid-label-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-grid-label-text-hover,hsl(var(--foreground)))]",
         // Focus-visible state
@@ -817,25 +774,16 @@ function Et({
     }
   );
 }
-function Tt({
+function kt({
   className: e,
   children: t,
   ...n
 }) {
   return /* @__PURE__ */ i(
-    ye,
+    Z,
     {
-      className: T(
-        // Base layout
-        "rounded-lg",
-        // Spacing
-        "px-3 py-2",
-        // Typography
-        "font-[family-name:var(--nav-grid-link-font-family,var(--font-family-body))] text-sm font-semibold",
-        // Colors
-        "bg-[var(--nav-grid-link-background,transparent)] text-[var(--nav-grid-link-text,hsl(var(--contrast-500)))]",
-        // Transitions
-        "transition-colors",
+      className: E(
+        "block rounded-lg bg-[var(--nav-grid-link-background,transparent)] px-3 py-2 font-[family-name:var(--nav-grid-link-font-family,var(--font-family-body))] text-sm font-medium text-[var(--nav-grid-link-text,hsl(var(--contrast-500)))] transition-colors",
         // Hover state
         "hover:bg-[var(--nav-grid-label-background-hover,hsl(var(--contrast-100)))] hover:text-[var(--nav-grid-label-text-hover,hsl(var(--foreground)))]",
         // Focus-visible state
@@ -852,9 +800,10 @@ function It({ className: e, children: t, ...n }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: T(
-        // Base layout
-        "w-full max-w-72 flex-auto",
+      className: E(
+        "w-full flex-auto",
+        // Container queries
+        "@lg:max-w-56 @2xl:max-w-72",
         e
       ),
       "data-slot": "navigation-menu-slot",
@@ -864,17 +813,18 @@ function It({ className: e, children: t, ...n }) {
   );
 }
 export {
-  xt as Content,
+  yt as Content,
   Rt as Grid,
-  yt as GridColumn,
-  Et as GridLabel,
-  Tt as GridLink,
-  Ct as Item,
-  Nt as List,
+  Et as GridColumn,
+  Tt as GridLabel,
+  kt as GridLink,
+  Nt as Item,
+  Mt as Link,
+  xt as List,
   bt as Panel,
-  wt as Root,
+  ht as Root,
   It as Slot,
-  Mt as Trigger,
-  ht as Viewport
+  Ct as Trigger,
+  wt as Viewport
 };
 //# sourceMappingURL=navigation-menu.js.map