@sudobility/components 2.0.12 → 2.0.13

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 import { clsx as Hn } from "clsx";
 import { twMerge as Un } from "tailwind-merge";
 import * as x from "react";
-import P, { lazy as ve, Suspense as He, useEffect as V, useState as R, useCallback as re, useRef as U, useLayoutEffect as Nr, Component as Er, memo as Ue, useMemo as $t } from "react";
-import { jsx as i, Fragment as q, jsxs as h } from "react/jsx-runtime";
+import P, { lazy as ve, Suspense as He, useEffect as V, useState as R, useCallback as re, useRef as q, useLayoutEffect as Nr, Component as Er, memo as Ue, useMemo as $t } from "react";
+import { jsx as i, Fragment as H, jsxs as h } from "react/jsx-runtime";
 import { onCLS as qn, onINP as Gn, onFCP as Kn, onLCP as Yn, onTTFB as Qn } from "web-vitals";
 import { XCircleIcon as Ar, ExclamationTriangleIcon as Pr, CheckCircleIcon as Tr, InformationCircleIcon as Je, ArrowPathIcon as Xn, ChevronRightIcon as Lt, Cog6ToothIcon as Qt, CurrencyDollarIcon as Zn, AdjustmentsHorizontalIcon as Jn, LinkIcon as ea, FunnelIcon as ta, ChatBubbleLeftRightIcon as ra, ShieldCheckIcon as na, ArrowRightIcon as $r, ChevronUpIcon as aa, ChevronDownIcon as oa, ExclamationCircleIcon as ia, XMarkIcon as sa, CheckIcon as Lr, ClipboardDocumentIcon as la, ClipboardIcon as ca, EnvelopeIcon as da, LanguageIcon as ua } from "@heroicons/react/24/outline";
 import { ArrowLeftIcon as M0, ArrowRightIcon as O0, Bars3Icon as D0, BellIcon as z0, BellSlashIcon as W0, ChartBarIcon as B0, CheckCircleIcon as j0, CheckIcon as F0, ChevronDownIcon as _0, ChevronLeftIcon as V0, ChevronRightIcon as H0, ChevronUpIcon as U0, ClockIcon as q0, CodeBracketIcon as G0, Cog6ToothIcon as K0, CreditCardIcon as Y0, DocumentTextIcon as Q0, EnvelopeIcon as X0, ExclamationTriangleIcon as Z0, EyeSlashIcon as J0, GlobeAltIcon as eg, HomeIcon as tg, InboxIcon as rg, InformationCircleIcon as ng, KeyIcon as ag, MegaphoneIcon as og, MinusIcon as ig, PaperAirplaneIcon as sg, PaperClipIcon as lg, PlusIcon as cg, RocketLaunchIcon as dg, ShieldCheckIcon as ug, SparklesIcon as mg, StarIcon as gg, TrashIcon as pg, UserGroupIcon as fg, XMarkIcon as hg } from "@heroicons/react/24/outline";
@@ -674,7 +674,7 @@ function fd(e, t = {}) {
         d(!0);
       }, a);
       return () => clearTimeout(u);
-    }, []), c ? /* @__PURE__ */ i(q, { children: r }) : null;
+    }, []), c ? /* @__PURE__ */ i(H, { children: r }) : null;
   };
   return P.forwardRef((c, d) => /* @__PURE__ */ i(He, { fallback: /* @__PURE__ */ i(l, {}), children: /* @__PURE__ */ i(s, { ...c, ref: d }) }));
 }
@@ -1361,7 +1361,7 @@ const Ya = (e) => {
   onError: r,
   className: n = ""
 }) => {
-  const a = U(null), o = U(null);
+  const a = q(null), o = q(null);
   return V(() => {
     if (!e)
       return;
@@ -2076,7 +2076,7 @@ const Ya = (e) => {
   className: o = "",
   threshold: s = 0.1
 }) => {
-  const [l, c] = R(!1), [d, u] = R(!1), m = U(null);
+  const [l, c] = R(!1), [d, u] = R(!1), m = q(null);
   V(() => {
     if (!Xt() || typeof IntersectionObserver > "u") {
       c(!0), n && u(!0);
@@ -2722,7 +2722,7 @@ const so = {
     emerald: "bg-emerald-100 dark:bg-emerald-900/20",
     pink: "bg-pink-100 dark:bg-pink-900/20",
     gray: "bg-gray-100 dark:bg-gray-900/20"
-  }, w = g[o], k = typeof e == "string", C = () => /* @__PURE__ */ h(q, { children: [
+  }, w = g[o], k = typeof e == "string", C = () => /* @__PURE__ */ h(H, { children: [
     k ? (
       // Emoji or text icon
       /* @__PURE__ */ i("div", { className: "text-4xl mb-4", children: e })
@@ -3328,7 +3328,7 @@ const iu = ({
   maxPullDistance: l = 120,
   className: c = ""
 }) => {
-  const [d, u] = R(0), [m, p] = R(!1), [g, f] = R(!1), b = U(0), w = U(null);
+  const [d, u] = R(0), [m, p] = R(!1), [g, f] = R(!1), b = q(0), w = q(null);
   V(() => {
     const N = w.current;
     if (!N) return;
@@ -3339,8 +3339,8 @@ const iu = ({
       if (!g) return;
       const z = D.touches[0].clientY - b.current;
       if (z > 0 && N.scrollTop <= 0) {
-        const H = Math.min(z / l, 1), W = Math.min(
-          z * (1 - H * 0.5),
+        const U = Math.min(z / l, 1), W = Math.min(
+          z * (1 - U * 0.5),
           l
         );
         u(W), z > 10 && D.preventDefault();
@@ -3629,7 +3629,7 @@ const du = ({
   parentSectionId: n,
   onSubsectionSelect: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return V(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -3800,7 +3800,7 @@ const du = ({
   onAccountSelect: n,
   onAccountSettings: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return V(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -5102,7 +5102,7 @@ const xi = (e) => ({
     }, g = zt(a), f = Dt(g), b = await s.getDimensions(d), w = g === "y", k = w ? "top" : "left", C = w ? "bottom" : "right", S = w ? "clientHeight" : "clientWidth", E = o.reference[f] + o.reference[g] - p[g] - o.floating[f], N = p[g] - o.reference[g], $ = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(d));
     let A = $ ? $[S] : 0;
     (!A || !await (s.isElement == null ? void 0 : s.isElement($))) && (A = l.floating[S] || o.floating[f]);
-    const O = E / 2 - N / 2, D = A / 2 - b[f] / 2 - 1, M = pe(m[k], D), z = pe(m[C], D), H = M, W = A - b[f] - z, B = A / 2 - b[f] / 2 + O, G = Nt(H, B, W), j = !c.arrow && Te(a) != null && B !== G && o.reference[f] / 2 - (B < H ? M : z) - b[f] / 2 < 0, K = j ? B < H ? B - H : B - W : 0;
+    const O = E / 2 - N / 2, D = A / 2 - b[f] / 2 - 1, M = pe(m[k], D), z = pe(m[C], D), U = M, W = A - b[f] - z, B = A / 2 - b[f] / 2 + O, G = Nt(U, B, W), j = !c.arrow && Te(a) != null && B !== G && o.reference[f] / 2 - (B < U ? M : z) - b[f] / 2 < 0, K = j ? B < U ? B - U : B - W : 0;
     return {
       [g]: p[g] + K,
       data: {
@@ -5151,7 +5151,7 @@ const xi = (e) => ({
         placement: a,
         overflows: D
       }], !D.every((B) => B <= 0)) {
-        var z, H;
+        var z, U;
         const B = (((z = o.flip) == null ? void 0 : z.index) || 0) + 1, G = A[B];
         if (G && (!(m === "alignment" ? C !== te(G) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
@@ -5165,7 +5165,7 @@ const xi = (e) => ({
               placement: G
             }
           };
-        let j = (H = M.filter((K) => K.overflows[0] <= 0).sort((K, L) => K.overflows[1] - L.overflows[1])[0]) == null ? void 0 : H.placement;
+        let j = (U = M.filter((K) => K.overflows[0] <= 0).sort((K, L) => K.overflows[1] - L.overflows[1])[0]) == null ? void 0 : U.placement;
         if (!j)
           switch (g) {
             case "bestFit": {
@@ -5421,8 +5421,8 @@ const Ci = function(e) {
       const C = b - u.top - u.bottom, S = f - u.left - u.right, E = pe(b - u[w], C), N = pe(f - u[k], S), $ = !t.middlewareData.shift;
       let A = E, O = N;
       if ((r = t.middlewareData.shift) != null && r.enabled.x && (O = S), (n = t.middlewareData.shift) != null && n.enabled.y && (A = C), $ && !p) {
-        const M = Q(u.left, 0), z = Q(u.right, 0), H = Q(u.top, 0), W = Q(u.bottom, 0);
-        g ? O = f - 2 * (M !== 0 || z !== 0 ? M + z : Q(u.left, u.right)) : A = b - 2 * (H !== 0 || W !== 0 ? H + W : Q(u.top, u.bottom));
+        const M = Q(u.left, 0), z = Q(u.right, 0), U = Q(u.top, 0), W = Q(u.bottom, 0);
+        g ? O = f - 2 * (M !== 0 || z !== 0 ? M + z : Q(u.left, u.right)) : A = b - 2 * (U !== 0 || W !== 0 ? U + W : Q(u.top, u.bottom));
       }
       await c({
         ...t,
@@ -6010,7 +6010,7 @@ function ls(e) {
     L !== $.current && ($.current = L, b(L));
   }, []), S = x.useCallback((L) => {
     L !== A.current && (A.current = L, k(L));
-  }, []), E = o || f, N = s || w, $ = x.useRef(null), A = x.useRef(null), O = x.useRef(u), D = c != null, M = yt(c), z = yt(a), H = yt(d), W = x.useCallback(() => {
+  }, []), E = o || f, N = s || w, $ = x.useRef(null), A = x.useRef(null), O = x.useRef(u), D = c != null, M = yt(c), z = yt(a), U = yt(d), W = x.useCallback(() => {
     if (!$.current || !A.current)
       return;
     const L = {
@@ -6025,13 +6025,13 @@ function ls(e) {
         // but still mounted (such as when transitioning out). To ensure
         // `isPositioned` will be `false` initially on the next open, avoid
         // setting it to `true` when `open === false` (must be specified).
-        isPositioned: H.current !== !1
+        isPositioned: U.current !== !1
       };
       B.current && !nt(O.current, ee) && (O.current = ee, Wr.flushSync(() => {
         m(ee);
       }));
     });
-  }, [p, t, r, z, H]);
+  }, [p, t, r, z, U]);
   Ze(() => {
     d === !1 && O.current.isPositioned && (O.current.isPositioned = !1, m((L) => ({
       ...L,
@@ -6199,11 +6199,11 @@ var _t = "PopperContent", [ws, ks] = dn(_t), hn = x.forwardRef(
       updatePositionStrategy: g = "optimized",
       onPlaced: f,
       ...b
-    } = e, w = mn(_t, r), [k, C] = x.useState(null), S = we(t, (Le) => C(Le)), [E, N] = x.useState(null), $ = xs(E), A = $?.width ?? 0, O = $?.height ?? 0, D = n + (o !== "center" ? "-" + o : ""), M = typeof u == "number" ? u : { top: 0, right: 0, bottom: 0, left: 0, ...u }, z = Array.isArray(d) ? d : [d], H = z.length > 0, W = {
+    } = e, w = mn(_t, r), [k, C] = x.useState(null), S = we(t, (Le) => C(Le)), [E, N] = x.useState(null), $ = xs(E), A = $?.width ?? 0, O = $?.height ?? 0, D = n + (o !== "center" ? "-" + o : ""), M = typeof u == "number" ? u : { top: 0, right: 0, bottom: 0, left: 0, ...u }, z = Array.isArray(d) ? d : [d], U = z.length > 0, W = {
       padding: M,
       boundary: z.filter(Ss),
       // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
-      altBoundary: H
+      altBoundary: U
     }, { refs: B, floatingStyles: G, placement: j, isPositioned: K, middlewareData: L } = ls({
       // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
       strategy: "fixed",
@@ -6843,72 +6843,85 @@ const ll = {
   size: n = "sm",
   className: a,
   version: o,
-  onStatusChange: s
+  onStatusChange: s,
+  isNetworkOnline: l = !0
 }) => {
-  const [l, c] = R({
+  const [c, d] = R({
     status: "operational",
     version: o || "1.0.0",
     message: "All systems operational"
-  }), [d, u] = R(!1);
+  }), [u, m] = R(!1);
   V(() => {
-    const f = async () => {
+    const w = async () => {
       if (t) {
-        u(!0);
+        m(!0);
         try {
-          const b = await fetch(t);
-          if (b.ok) {
-            const w = await b.json();
-            let k;
-            w.status?.indicator ? k = {
+          const k = await fetch(t);
+          if (k.ok) {
+            const C = await k.json();
+            let S;
+            C.status?.indicator ? S = {
               status: {
                 none: "operational",
                 minor: "degraded",
                 major: "major-outage",
                 critical: "major-outage"
-              }[w.status.indicator] || "operational",
+              }[C.status.indicator] || "operational",
               version: o,
-              message: w.status.description
-            } : k = w, c(k), s?.(k);
+              message: C.status.description
+            } : S = C, d(S), s?.(S);
           }
         } catch {
         } finally {
-          u(!1);
+          m(!1);
         }
       }
     };
-    if (f(), r > 0) {
-      const b = setInterval(f, r);
-      return () => clearInterval(b);
+    if (w(), r > 0) {
+      const k = setInterval(w, r);
+      return () => clearInterval(k);
     }
   }, [t, r, s, o]);
-  const m = ll[l.status], p = (f) => {
-    f.preventDefault(), window.open(e, "_blank", "noopener,noreferrer");
-  }, g = /* @__PURE__ */ h("div", { className: "text-xs", children: [
-    l.version && /* @__PURE__ */ h("div", { className: "font-semibold mb-1", children: [
-      "Version ",
-      l.version
-    ] }),
-    /* @__PURE__ */ i("div", { children: l.message || m.label }),
-    l.incidents && l.incidents.length > 0 && /* @__PURE__ */ h("div", { className: "mt-2 text-[10px] opacity-90", children: [
-      /* @__PURE__ */ i("div", { className: "font-medium", children: "Current incidents:" }),
-      /* @__PURE__ */ i("ul", { className: "list-disc list-inside", children: l.incidents.map((f, b) => /* @__PURE__ */ i("li", { children: f }, b)) })
+  const p = l ? c.status : "major-outage", g = ll[p], f = (w) => {
+    if (w.preventDefault(), !l) {
+      window.alert(
+        "Network is not available. Please check your internet connection and try again later."
+      );
+      return;
+    }
+    window.open(e, "_blank", "noopener,noreferrer");
+  }, b = /* @__PURE__ */ i("div", { className: "text-xs", children: l ? (
+    // Normal system status
+    /* @__PURE__ */ h(H, { children: [
+      c.version && /* @__PURE__ */ h("div", { className: "font-semibold mb-1", children: [
+        "Version ",
+        c.version
+      ] }),
+      /* @__PURE__ */ i("div", { children: c.message || g.label }),
+      c.incidents && c.incidents.length > 0 && /* @__PURE__ */ h("div", { className: "mt-2 text-[10px] opacity-90", children: [
+        /* @__PURE__ */ i("div", { className: "font-medium", children: "Current incidents:" }),
+        /* @__PURE__ */ i("ul", { className: "list-disc list-inside", children: c.incidents.map((w, k) => /* @__PURE__ */ i("li", { children: w }, k)) })
+      ] })
     ] })
-  ] });
+  ) : (
+    // Network offline message
+    /* @__PURE__ */ i("div", { children: "Network unavailable" })
+  ) });
   return /* @__PURE__ */ i(rl, { delayDuration: 200, children: /* @__PURE__ */ h(nl, { children: [
     /* @__PURE__ */ i(al, { asChild: !0, children: /* @__PURE__ */ i(
       "button",
       {
-        onClick: p,
+        onClick: f,
         className: v(
           "rounded-full flex-shrink-0 transition-all duration-200 cursor-pointer",
           "ring-offset-2 focus:outline-none focus:ring-2 focus:ring-offset-2",
-          m.color,
-          m.hoverColor,
+          g.color,
+          g.hoverColor,
           cl[n],
-          d && "animate-pulse",
+          (u || !l) && "animate-pulse",
           a
         ),
-        "aria-label": `System status: ${m.label}`
+        "aria-label": `System status: ${g.label}`
       }
     ) }),
     /* @__PURE__ */ i(ol, { children: /* @__PURE__ */ h(
@@ -6917,7 +6930,7 @@ const ll = {
         className: "z-50 overflow-hidden rounded-md bg-gray-900 dark:bg-gray-800 px-3 py-2 text-white shadow-md animate-in fade-in-0 zoom-in-95",
         sideOffset: 5,
         children: [
-          g,
+          b,
           /* @__PURE__ */ i(sl, { className: "fill-gray-900 dark:fill-gray-800" })
         ]
       }
@@ -7347,7 +7360,7 @@ const Ru = (e, t) => x.useMemo(() => {
   "aria-describedby": p,
   closeAriaLabel: g = "Close modal"
 }) => {
-  const f = U(null), b = U(null);
+  const f = q(null), b = q(null);
   if (V(() => {
     if (!e || !c) return;
     const S = (E) => {
@@ -7365,7 +7378,7 @@ const Ru = (e, t) => x.useMemo(() => {
     return v(S, E);
   }, k = (S) => {
     l && S.target === S.currentTarget && t();
-  }, C = /* @__PURE__ */ h(q, { children: [
+  }, C = /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -7971,7 +7984,7 @@ const Ru = (e, t) => x.useMemo(() => {
           text: "text-2xl"
         };
     }
-  })(), u = /* @__PURE__ */ h(q, { children: [
+  })(), u = /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i("img", { src: a, alt: o, className: d.image }),
     r && /* @__PURE__ */ i(
       "div",
@@ -8090,7 +8103,7 @@ ${e.description}`
         )
       }
     ),
-    t && /* @__PURE__ */ h(q, { children: [
+    t && /* @__PURE__ */ h(H, { children: [
       /* @__PURE__ */ i(
         "div",
         {
@@ -8098,7 +8111,7 @@ ${e.description}`
           onClick: () => r(!1)
         }
       ),
-      /* @__PURE__ */ i("div", { className: "absolute right-0 top-10 z-[999999] w-32 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: o ? /* @__PURE__ */ i("div", { className: "flex items-center justify-center px-3 py-2", children: /* @__PURE__ */ i("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) }) : /* @__PURE__ */ h(q, { children: [
+      /* @__PURE__ */ i("div", { className: "absolute right-0 top-10 z-[999999] w-32 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 py-1", children: o ? /* @__PURE__ */ i("div", { className: "flex items-center justify-center px-3 py-2", children: /* @__PURE__ */ i("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }) }) : /* @__PURE__ */ h(H, { children: [
         c.map((u, m) => {
           const p = u.component, g = u.icon;
           return /* @__PURE__ */ i(
@@ -8315,10 +8328,10 @@ ${e.description}`
             onClick: () => d(r, u),
             className: "flex items-center space-x-1 text-gray-300 hover:text-white transition-colors text-sm",
             "aria-label": m ? "Copied!" : "Copy code",
-            children: m ? /* @__PURE__ */ h(q, { children: [
+            children: m ? /* @__PURE__ */ h(H, { children: [
               /* @__PURE__ */ i(Lr, { className: "h-4 w-4" }),
               /* @__PURE__ */ i("span", { children: "Copied!" })
-            ] }) : /* @__PURE__ */ h(q, { children: [
+            ] }) : /* @__PURE__ */ h(H, { children: [
               /* @__PURE__ */ i(ca, { className: "h-4 w-4" }),
               /* @__PURE__ */ i("span", { children: "Copy" })
             ] })
@@ -8335,7 +8348,7 @@ ${e.description}`
   parentSectionId: n,
   onSubsectionSelect: a
 }) => {
-  const o = U(null), [s, l] = R(void 0);
+  const o = q(null), [s, l] = R(void 0);
   return Nr(() => {
     if (o.current) {
       const c = o.current.scrollHeight;
@@ -8818,7 +8831,7 @@ class tm extends Er {
     ] }) }) : t;
   }
 }
-const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), am = (e, t, r) => {
+const rm = ({ children: e }) => /* @__PURE__ */ i(H, { children: e }), nm = ({ children: e }) => /* @__PURE__ */ i(H, { children: e }), am = (e, t, r) => {
   const n = Ue(e, t);
   return r && (n.displayName = `Memo(${r})`), process.env.NODE_ENV === "development" ? (a) => ($t(() => {
     let s = 0;
@@ -8834,13 +8847,13 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       }
       return o.current;
     }, [t, r]);
-    return /* @__PURE__ */ i(q, { children: e(s) });
+    return /* @__PURE__ */ i(H, { children: e(s) });
   }
 ), sm = Ue(
   ({ item: e, index: t, style: r, renderItem: n }) => /* @__PURE__ */ i("div", { style: r, children: n(e, t) }),
   (e, t) => e.index === t.index && e.item === t.item && e.style.height === t.style.height && e.style.top === t.style.top
 ), lm = Ue(
-  ({ condition: e, children: t, fallback: r = null }) => e ? /* @__PURE__ */ i(q, { children: t }) : /* @__PURE__ */ i(q, { children: r })
+  ({ condition: e, children: t, fallback: r = null }) => e ? /* @__PURE__ */ i(H, { children: t }) : /* @__PURE__ */ i(H, { children: r })
 ), cm = ({
   children: e,
   threshold: t = 0.1,
@@ -8869,7 +8882,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   }), P.useEffect(() => {
     const a = performance.now() - n.current;
     a > t && r?.(a);
-  }), /* @__PURE__ */ i(q, { children: e });
+  }), /* @__PURE__ */ i(H, { children: e });
 }, um = ({
   children: e,
   batchSize: t = 5,
@@ -8883,7 +8896,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
       }, r);
       return () => clearTimeout(o);
     }
-  }, [n, e.length, t, r]), /* @__PURE__ */ i(q, { children: e.slice(0, n) });
+  }, [n, e.length, t, r]), /* @__PURE__ */ i(H, { children: e.slice(0, n) });
 }, mm = ({
   src: e,
   alt: t,
@@ -8894,7 +8907,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   className: s = "",
   ...l
 }) => {
-  const [c, d] = R(!1), [u, m] = R(o), [p, g] = R(!1), f = U(null), b = U(null);
+  const [c, d] = R(!1), [u, m] = R(o), [p, g] = R(!1), f = q(null), b = q(null);
   V(() => {
     if (o) {
       m(!0);
@@ -9082,7 +9095,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   animationDuration: k = 300,
   animationRef: C
 }) => {
-  const S = `gap-${Math.round(f / 4)}` || "gap-8", E = (G) => G ? G.split("-")[0].trim() : "Back", N = r ? E(r) : e ? E(e) : "Back", [$, A] = R(!1), [O, D] = R("auto"), M = U(null), z = U(
+  const S = `gap-${Math.round(f / 4)}` || "gap-8", E = (G) => G ? G.split("-")[0].trim() : "Back", N = r ? E(r) : e ? E(e) : "Back", [$, A] = R(!1), [O, D] = R("auto"), M = q(null), z = q(
     null
   );
   V(() => (C && (C.current = {
@@ -9109,7 +9122,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   }), () => {
     z.current && clearTimeout(z.current);
   }), [w, k, C]);
-  const H = w ? {
+  const U = w ? {
     height: O === "auto" ? "auto" : `${O}px`,
     transition: `height ${k}ms cubic-bezier(0.4, 0, 0.2, 1)`,
     width: "100%",
@@ -9117,7 +9130,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   } : { width: "100%", maxWidth: "100%" }, W = w ? `${$ ? "opacity-0 transform translate-y-2" : "opacity-100 transform translate-y-0"}` : "", B = w ? {
     transition: `opacity ${k}ms ease-in-out, transform ${k}ms ease-in-out`
   } : {};
-  return /* @__PURE__ */ h(q, { children: [
+  return /* @__PURE__ */ h(H, { children: [
     /* @__PURE__ */ i(
       "div",
       {
@@ -9159,7 +9172,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
               {
                 ref: M,
                 className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-8 overflow-hidden ${d}`,
-                style: H,
+                style: U,
                 children: /* @__PURE__ */ h("div", { className: W, style: B, children: [
                   o && /* @__PURE__ */ i(
                     "h1",
@@ -9216,7 +9229,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
                   {
                     ref: M,
                     className: `bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-8 overflow-hidden ${d}`,
-                    style: H,
+                    style: U,
                     children: /* @__PURE__ */ h("div", { className: W, style: B, children: [
                       o && /* @__PURE__ */ i(
                         "h1",
@@ -9378,7 +9391,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   };
   return t(), r(), n(), a(), s(), l(), c(), d(), setTimeout(o, 2e3), () => {
   };
-}, []), /* @__PURE__ */ i(q, { children: e })), bm = () => (V(() => {
+}, []), /* @__PURE__ */ i(H, { children: e })), bm = () => (V(() => {
   if (typeof window > "u" || typeof document > "u" || !document.documentElement)
     return;
   const e = () => {
@@ -9476,7 +9489,7 @@ const rm = ({ children: e }) => /* @__PURE__ */ i(q, { children: e }), nm = ({ c
   };
 }, []), null), xm = ({
   children: e
-}) => /* @__PURE__ */ i(q, { children: e }), Wl = {
+}) => /* @__PURE__ */ i(H, { children: e }), Wl = {
   // Static/rarely changing data - longer cache durations
   user: { duration: 300 * 1e3, maxSize: 100, staleWhileRevalidate: !0 },
   // 5 minutes
@@ -10782,7 +10795,7 @@ function Zm({
   return t.filter((r) => r.priority <= 2 && r.detected).forEach((r) => {
     setTimeout(() => {
     }, 1e3);
-  }), /* @__PURE__ */ h(q, { children: [
+  }), /* @__PURE__ */ h(H, { children: [
     t.map((r) => {
       const n = Rn(r.name);
       return /* @__PURE__ */ i(n, {}, r.name);
@@ -11084,13 +11097,13 @@ const vt = {
     vt.mark(`${e}-end`), vt.measure(e, `${e}-start`, `${e}-end`);
   }), [e, t]);
 }, n0 = (e) => {
-  const t = U(e);
+  const t = q(e);
   return t.current = e, re(
     (...r) => t.current(...r),
     []
   );
 }, a0 = (e, t, r) => {
-  const n = U(t), a = U(void 0);
+  const n = q(t), a = q(void 0);
   return $t(() => (r && process.env.NODE_ENV === "development" && t.some(
     (o, s) => o !== n.current[s]
   ), n.current = t, a.current = e(), a.current), [e, r, t]);
@@ -11100,7 +11113,7 @@ const vt = {
     process.env.NODE_ENV;
   });
 }, i0 = () => Object.fromEntries(it), s0 = () => it.clear(), l0 = (e) => P.lazy(e), c0 = (e = 0.1) => {
-  const [t, r] = R(/* @__PURE__ */ new Set()), n = U(null);
+  const [t, r] = R(/* @__PURE__ */ new Set()), n = q(null);
   V(() => (n.current = new IntersectionObserver(
     (o) => {
       o.forEach((s) => {
@@ -11139,7 +11152,7 @@ const vt = {
     n.rel = "preload", n.href = e, n.as = t, r && (n.crossOrigin = "anonymous"), document.head.appendChild(n);
   }
 }, f0 = (e) => {
-  const t = U(/* @__PURE__ */ new Set()), r = U(/* @__PURE__ */ new Set()), n = re((o, s) => {
+  const t = q(/* @__PURE__ */ new Set()), r = q(/* @__PURE__ */ new Set()), n = re((o, s) => {
     const l = setTimeout(() => {
       t.current.delete(l), o();
     }, s);
@@ -11194,7 +11207,7 @@ const vt = {
   ...r
 }) => /* @__PURE__ */ i("main", { className: t, ...r, role: "main", children: e }), b0 = ({
   children: e
-}) => /* @__PURE__ */ i(q, { children: e }), Pe = (e) => Array.isArray(e) ? e : typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : [], kr = (e) => {
+}) => /* @__PURE__ */ i(H, { children: e }), Pe = (e) => Array.isArray(e) ? e : typeof e == "string" ? e.split(",").map((t) => t.trim()).filter(Boolean) : [], kr = (e) => {
   const t = Pe(e.audience);
   return {
     "@context": "https://schema.org",