@sudobility/marketing-components 2.0.1 → 2.0.4

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import * as u from "react";
+import * as c from "react";
 import fe from "react";
 import { cn as R } from "@sudobility/components";
 import { textVariants as Y, ui as Ze } from "@sudobility/design";
@@ -12,8 +12,8 @@ function Qe() {
     var l = null;
     if (o !== void 0 && (l = "" + o), a.key !== void 0 && (l = "" + a.key), "key" in a) {
       o = {};
-      for (var i in a)
-        i !== "key" && (o[i] = a[i]);
+      for (var u in a)
+        u !== "key" && (o[u] = a[u]);
     } else o = a;
     return a = o.ref, {
       $$typeof: e,
@@ -117,7 +117,7 @@ function et() {
       }
       return s.key !== void 0;
     }
-    function i(s, x) {
+    function u(s, x) {
       function C() {
         ke || (ke = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
@@ -129,7 +129,7 @@ function et() {
         configurable: !0
       });
     }
-    function c() {
+    function i() {
       var s = e(this.type);
       return Ee[s] || (Ee[s] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
@@ -145,7 +145,7 @@ function et() {
         _owner: S
       }, (N !== void 0 ? N : null) !== null ? Object.defineProperty(s, "ref", {
         enumerable: !1,
-        get: c
+        get: i
       }) : Object.defineProperty(s, "ref", { enumerable: !1, value: null }), s._store = {}, Object.defineProperty(s._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -204,7 +204,7 @@ React keys must be passed directly to JSX without using spread:
         for (var se in x)
           se !== "key" && (C[se] = x[se]);
       } else C = x;
-      return N && i(
+      return N && u(
         C,
         typeof s == "function" ? s.displayName || s.name || "Unknown" : s
       ), f(
@@ -309,7 +309,7 @@ function rt({
   titleId: r,
   ...t
 }, n) {
-  return /* @__PURE__ */ u.createElement("svg", Object.assign({
+  return /* @__PURE__ */ c.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -319,15 +319,15 @@ function rt({
     "data-slot": "icon",
     ref: n,
     "aria-labelledby": r
-  }, t), e ? /* @__PURE__ */ u.createElement("title", {
+  }, t), e ? /* @__PURE__ */ c.createElement("title", {
     id: r
-  }, e) : null, /* @__PURE__ */ u.createElement("path", {
+  }, e) : null, /* @__PURE__ */ c.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
     d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
   }));
 }
-const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
+const nt = /* @__PURE__ */ c.forwardRef(rt), Pr = ({
   title: e,
   description: r,
   icon: t = nt,
@@ -341,7 +341,7 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
     warning: "bg-yellow-400 text-yellow-900",
     info: "bg-cyan-400 text-cyan-900",
     gradient: "bg-gradient-to-br from-blue-400 to-purple-500 text-white"
-  }, c = {
+  }, i = {
     sm: {
       container: "gap-2",
       icon: "p-1.5",
@@ -364,25 +364,25 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
       description: Y.body.md()
     }
   }[a];
-  return /* @__PURE__ */ h.jsxs("div", { className: R("flex items-start", c.container, o), children: [
+  return /* @__PURE__ */ h.jsxs("div", { className: R("flex items-start", i.container, o), children: [
     /* @__PURE__ */ h.jsx(
       "div",
       {
         className: R(
           "rounded-full flex-shrink-0",
-          c.icon,
+          i.icon,
           l[n]
         ),
-        children: /* @__PURE__ */ h.jsx(t, { className: c.iconSize })
+        children: /* @__PURE__ */ h.jsx(t, { className: i.iconSize })
       }
     ),
     /* @__PURE__ */ h.jsxs("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ h.jsx("h4", { className: c.title, children: e }),
+      /* @__PURE__ */ h.jsx("h4", { className: i.title, children: e }),
       r && /* @__PURE__ */ h.jsx(
         "p",
         {
           className: R(
-            c.description,
+            i.description,
             "mt-1 text-gray-600 dark:text-gray-300"
           ),
           children: r
@@ -420,11 +420,11 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
   subtitle: a,
   description: o,
   primaryButton: l,
-  secondaryButton: i,
-  className: c,
+  secondaryButton: u,
+  className: i,
   children: f
 }) => {
-  const d = {
+  const m = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", p = {
     blue: "bg-blue-100 dark:bg-blue-900/30 border-blue-300 dark:border-blue-700 text-blue-800 dark:text-blue-200",
     green: "bg-green-100 dark:bg-green-900/30 border-green-300 dark:border-green-700 text-green-800 dark:text-green-200",
     purple: "bg-purple-100 dark:bg-purple-900/30 border-purple-300 dark:border-purple-700 text-purple-800 dark:text-purple-200",
@@ -432,13 +432,13 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
     pink: "bg-pink-100 dark:bg-pink-900/30 border-pink-300 dark:border-pink-700 text-pink-800 dark:text-pink-200",
     gray: "bg-gray-100 dark:bg-gray-900/30 border-gray-300 dark:border-gray-700 text-gray-800 dark:text-gray-200"
   }[t];
-  return /* @__PURE__ */ h.jsx("section", { className: R("py-20", c), children: /* @__PURE__ */ h.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center", children: [
+  return /* @__PURE__ */ h.jsx("section", { className: R("py-20", i), children: /* @__PURE__ */ h.jsxs("div", { className: `${m} text-center`, children: [
     /* @__PURE__ */ h.jsxs(
       "div",
       {
         className: R(
           "inline-flex items-center border px-6 py-3 rounded-full mb-6",
-          d
+          p
         ),
         children: [
           e && /* @__PURE__ */ h.jsx("span", { className: "mr-3", children: e }),
@@ -451,7 +451,7 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
       a && /* @__PURE__ */ h.jsx("span", { className: "text-blue-600 dark:text-blue-400 block", children: a })
     ] }),
     /* @__PURE__ */ h.jsx("p", { className: "text-xl text-gray-600 dark:text-gray-300 mb-8 max-w-4xl mx-auto leading-relaxed", children: o }),
-    (l || i) && /* @__PURE__ */ h.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center mb-8", children: [
+    (l || u) && /* @__PURE__ */ h.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 justify-center mb-8", children: [
       l && (l.href ? /* @__PURE__ */ h.jsx(
         "a",
         {
@@ -473,25 +473,25 @@ const nt = /* @__PURE__ */ u.forwardRef(rt), Pr = ({
           children: l.text
         }
       )),
-      i && (i.href ? /* @__PURE__ */ h.jsx(
+      u && (u.href ? /* @__PURE__ */ h.jsx(
         "a",
         {
-          href: i.href,
+          href: u.href,
           className: R(
             "px-8 py-3 rounded-md border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 transition-colors inline-block",
-            i.className
+            u.className
           ),
-          children: i.text
+          children: u.text
         }
       ) : /* @__PURE__ */ h.jsx(
         "button",
         {
-          onClick: i.onClick,
+          onClick: u.onClick,
           className: R(
             "px-8 py-3 rounded-md border-2 border-gray-300 dark:border-gray-600 hover:border-gray-400 transition-colors",
-            i.className
+            u.className
           ),
-          children: i.text
+          children: u.text
         }
       ))
     ] }),
@@ -537,27 +537,27 @@ function at(e, r, t, n) {
     return null;
   let l = Oe(e);
   ot(l);
-  let i = null;
-  for (let c = 0; i == null && c < l.length; ++c) {
+  let u = null;
+  for (let i = 0; u == null && i < l.length; ++i) {
     let f = gt(o);
-    i = ht(
-      l[c],
+    u = ht(
+      l[i],
       f,
       n
     );
   }
-  return i;
+  return u;
 }
 function Oe(e, r = [], t = [], n = "", a = !1) {
-  let o = (l, i, c = a, f) => {
+  let o = (l, u, i = a, f) => {
     let m = {
       relativePath: f === void 0 ? l.path || "" : f,
       caseSensitive: l.caseSensitive === !0,
-      childrenIndex: i,
+      childrenIndex: u,
       route: l
     };
     if (m.relativePath.startsWith("/")) {
-      if (!m.relativePath.startsWith(n) && c)
+      if (!m.relativePath.startsWith(n) && i)
         return;
       P(
         m.relativePath.startsWith(n),
@@ -575,19 +575,19 @@ function Oe(e, r = [], t = [], n = "", a = !1) {
       r,
       p,
       d,
-      c
+      i
     )), !(l.path == null && !l.index) && r.push({
       path: d,
       score: ft(d, l.index),
       routesMeta: p
     });
   };
-  return e.forEach((l, i) => {
+  return e.forEach((l, u) => {
     if (l.path === "" || !l.path?.includes("?"))
-      o(l, i);
+      o(l, u);
     else
-      for (let c of Ue(l.path))
-        o(l, i, !0, c);
+      for (let i of Ue(l.path))
+        o(l, u, !0, i);
   }), r;
 }
 function Ue(e) {
@@ -596,13 +596,13 @@ function Ue(e) {
   let [t, ...n] = r, a = t.endsWith("?"), o = t.replace(/\?$/, "");
   if (n.length === 0)
     return a ? [o, ""] : [o];
-  let l = Ue(n.join("/")), i = [];
-  return i.push(
+  let l = Ue(n.join("/")), u = [];
+  return u.push(
     ...l.map(
-      (c) => c === "" ? o : [o, c].join("/")
+      (i) => i === "" ? o : [o, i].join("/")
     )
-  ), a && i.push(...l), i.map(
-    (c) => e.startsWith("/") && c === "" ? "/" : c
+  ), a && u.push(...l), u.map(
+    (i) => e.startsWith("/") && i === "" ? "/" : i
   );
 }
 function ot(e) {
@@ -636,15 +636,15 @@ function mt(e, r) {
 }
 function ht(e, r, t = !1) {
   let { routesMeta: n } = e, a = {}, o = "/", l = [];
-  for (let i = 0; i < n.length; ++i) {
-    let c = n[i], f = i === n.length - 1, m = o === "/" ? r : r.slice(o.length) || "/", d = te(
-      { path: c.relativePath, caseSensitive: c.caseSensitive, end: f },
+  for (let u = 0; u < n.length; ++u) {
+    let i = n[u], f = u === n.length - 1, m = o === "/" ? r : r.slice(o.length) || "/", d = te(
+      { path: i.relativePath, caseSensitive: i.caseSensitive, end: f },
       m
-    ), p = c.route;
+    ), p = i.route;
     if (!d && f && t && !n[n.length - 1].route.index && (d = te(
       {
-        path: c.relativePath,
-        caseSensitive: c.caseSensitive,
+        path: i.relativePath,
+        caseSensitive: i.caseSensitive,
         end: !1
       },
       m
@@ -670,15 +670,15 @@ function te(e, r) {
     e.end
   ), a = r.match(t);
   if (!a) return null;
-  let o = a[0], l = o.replace(/(.)\/+$/, "$1"), i = a.slice(1);
+  let o = a[0], l = o.replace(/(.)\/+$/, "$1"), u = a.slice(1);
   return {
     params: n.reduce(
       (f, { paramName: m, isOptional: d }, p) => {
         if (m === "*") {
-          let y = i[p] || "";
+          let y = u[p] || "";
           l = o.slice(0, o.length - y.length).replace(/(.)\/+$/, "$1");
         }
-        const g = i[p];
+        const g = u[p];
         return d && !g ? f[m] = void 0 : f[m] = (g || "").replace(/%2F/g, "/"), f;
       },
       {}
@@ -695,7 +695,7 @@ function pt(e, r = !1, t = !0) {
   );
   let n = [], a = "^" + e.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(
     /\/:([\w-]+)(\?)?/g,
-    (l, i, c) => (n.push({ paramName: i, isOptional: c != null }), c ? "/?([^\\/]+)?" : "/([^\\/]+)")
+    (l, u, i) => (n.push({ paramName: u, isOptional: i != null }), i ? "/?([^\\/]+)?" : "/([^\\/]+)")
   ).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
   return e.endsWith("*") ? (n.push({ paramName: "*" }), a += e === "*" || e === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$") : t ? a += "\\/*$" : e !== "" && e !== "/" && (a += "(?:(?=\\/|$))"), [new RegExp(a, r ? void 0 : "i"), n];
 }
@@ -778,9 +778,9 @@ function Ie(e, r, t, n = !1) {
     !a.search || !a.search.includes("#"),
     ue("#", "search", "hash", a)
   ));
-  let o = e === "" || a.pathname === "", l = o ? "/" : a.pathname, i;
+  let o = e === "" || a.pathname === "", l = o ? "/" : a.pathname, u;
   if (l == null)
-    i = t;
+    u = t;
   else {
     let d = r.length - 1;
     if (!n && l.startsWith("..")) {
@@ -789,10 +789,10 @@ function Ie(e, r, t, n = !1) {
         p.shift(), d -= 1;
       a.pathname = p.join("/");
     }
-    i = d >= 0 ? r[d] : "/";
+    u = d >= 0 ? r[d] : "/";
   }
-  let c = yt(a, i), f = l && l !== "/" && l.endsWith("/"), m = (o || l === ".") && t.endsWith("/");
-  return !c.pathname.endsWith("/") && (f || m) && (c.pathname += "/"), c;
+  let i = yt(a, u), f = l && l !== "/" && l.endsWith("/"), m = (o || l === ".") && t.endsWith("/");
+  return !i.pathname.endsWith("/") && (f || m) && (i.pathname += "/"), i;
 }
 var L = (e) => e.join("/").replace(/\/\/+/g, "/"), wt = (e) => e.replace(/\/+$/, "").replace(/^\/*/, "/"), kt = (e) => !e || e === "?" ? "" : e.startsWith("?") ? e : "?" + e, Et = (e) => !e || e === "#" ? "" : e.startsWith("#") ? e : "#" + e;
 function Rt(e) {
@@ -813,36 +813,36 @@ var Ct = [
   ...De
 ];
 new Set(Ct);
-var H = u.createContext(null);
+var H = c.createContext(null);
 H.displayName = "DataRouter";
-var re = u.createContext(null);
+var re = c.createContext(null);
 re.displayName = "DataRouterState";
-u.createContext(!1);
-var Me = u.createContext({
+c.createContext(!1);
+var Me = c.createContext({
   isTransitioning: !1
 });
 Me.displayName = "ViewTransition";
-var St = u.createContext(
+var St = c.createContext(
   /* @__PURE__ */ new Map()
 );
 St.displayName = "Fetchers";
-var Nt = u.createContext(null);
+var Nt = c.createContext(null);
 Nt.displayName = "Await";
-var $ = u.createContext(
+var $ = c.createContext(
   null
 );
 $.displayName = "Navigation";
-var he = u.createContext(
+var he = c.createContext(
   null
 );
 he.displayName = "Location";
-var A = u.createContext({
+var A = c.createContext({
   outlet: null,
   matches: [],
   isDataRoute: !1
 });
 A.displayName = "Route";
-var pe = u.createContext(null);
+var pe = c.createContext(null);
 pe.displayName = "RouteError";
 function Pt(e, { relative: r } = {}) {
   P(
@@ -851,11 +851,11 @@ function Pt(e, { relative: r } = {}) {
     // router loaded. We can help them understand how to avoid that.
     "useHref() may be used only in the context of a <Router> component."
   );
-  let { basename: t, navigator: n } = u.useContext($), { hash: a, pathname: o, search: l } = G(e, { relative: r }), i = o;
-  return t !== "/" && (i = o === "/" ? t : L([t, o])), n.createHref({ pathname: i, search: l, hash: a });
+  let { basename: t, navigator: n } = c.useContext($), { hash: a, pathname: o, search: l } = G(e, { relative: r }), u = o;
+  return t !== "/" && (u = o === "/" ? t : L([t, o])), n.createHref({ pathname: u, search: l, hash: a });
 }
 function ne() {
-  return u.useContext(he) != null;
+  return c.useContext(he) != null;
 }
 function D() {
   return P(
@@ -863,14 +863,14 @@ function D() {
     // TODO: This error is probably because they somehow have 2 versions of the
     // router loaded. We can help them understand how to avoid that.
     "useLocation() may be used only in the context of a <Router> component."
-  ), u.useContext(he).location;
+  ), c.useContext(he).location;
 }
 var We = "You should call navigate() in a React.useEffect(), not when your component is first rendered.";
 function ze(e) {
-  u.useContext($).static || u.useLayoutEffect(e);
+  c.useContext($).static || c.useLayoutEffect(e);
 }
 function jt() {
-  let { isDataRoute: e } = u.useContext(A);
+  let { isDataRoute: e } = c.useContext(A);
   return e ? zt() : _t();
 }
 function _t() {
@@ -880,18 +880,18 @@ function _t() {
     // router loaded. We can help them understand how to avoid that.
     "useNavigate() may be used only in the context of a <Router> component."
   );
-  let e = u.useContext(H), { basename: r, navigator: t } = u.useContext($), { matches: n } = u.useContext(A), { pathname: a } = D(), o = JSON.stringify(Fe(n)), l = u.useRef(!1);
+  let e = c.useContext(H), { basename: r, navigator: t } = c.useContext($), { matches: n } = c.useContext(A), { pathname: a } = D(), o = JSON.stringify(Fe(n)), l = c.useRef(!1);
   return ze(() => {
     l.current = !0;
-  }), u.useCallback(
-    (c, f = {}) => {
+  }), c.useCallback(
+    (i, f = {}) => {
       if (_(l.current, We), !l.current) return;
-      if (typeof c == "number") {
-        t.go(c);
+      if (typeof i == "number") {
+        t.go(i);
         return;
       }
       let m = Ie(
-        c,
+        i,
         JSON.parse(o),
         a,
         f.relative === "path"
@@ -911,10 +911,10 @@ function _t() {
     ]
   );
 }
-u.createContext(null);
+c.createContext(null);
 function G(e, { relative: r } = {}) {
-  let { matches: t } = u.useContext(A), { pathname: n } = D(), a = JSON.stringify(Fe(t));
-  return u.useMemo(
+  let { matches: t } = c.useContext(A), { pathname: n } = D(), a = JSON.stringify(Fe(t));
+  return c.useMemo(
     () => Ie(
       e,
       JSON.parse(a),
@@ -931,7 +931,7 @@ function Tt(e, r, t, n, a) {
     // router loaded. We can help them understand how to avoid that.
     "useRoutes() may be used only in the context of a <Router> component."
   );
-  let { navigator: o } = u.useContext($), { matches: l } = u.useContext(A), i = l[l.length - 1], c = i ? i.params : {}, f = i ? i.pathname : "/", m = i ? i.pathnameBase : "/", d = i && i.route;
+  let { navigator: o } = c.useContext($), { matches: l } = c.useContext(A), u = l[l.length - 1], i = u ? u.params : {}, f = u ? u.pathname : "/", m = u ? u.pathnameBase : "/", d = u && u.route;
   {
     let b = d && d.path || "";
     Ye(
@@ -959,7 +959,7 @@ Please change the parent <Route path="${b}"> to <Route path="${b === "/" ? "*" :
   ), Ut(
     w && w.map(
       (b) => Object.assign({}, b, {
-        params: Object.assign({}, c, b.params),
+        params: Object.assign({}, i, b.params),
         pathname: L([
           m,
           // Re-encode pathnames that were decoded inside matchRoutes.
@@ -993,9 +993,9 @@ function Lt() {
   return console.error(
     "Error handled by React Router default ErrorBoundary:",
     e
-  ), l = /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("p", null, "💿 Hey developer 👋"), /* @__PURE__ */ u.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ u.createElement("code", { style: o }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ u.createElement("code", { style: o }, "errorElement"), " prop on your route.")), /* @__PURE__ */ u.createElement(u.Fragment, null, /* @__PURE__ */ u.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ u.createElement("h3", { style: { fontStyle: "italic" } }, r), t ? /* @__PURE__ */ u.createElement("pre", { style: a }, t) : null, l);
+  ), l = /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement("p", null, "💿 Hey developer 👋"), /* @__PURE__ */ c.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ c.createElement("code", { style: o }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ c.createElement("code", { style: o }, "errorElement"), " prop on your route.")), /* @__PURE__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ c.createElement("h3", { style: { fontStyle: "italic" } }, r), t ? /* @__PURE__ */ c.createElement("pre", { style: a }, t) : null, l);
 }
-var $t = /* @__PURE__ */ u.createElement(Lt, null), At = class extends u.Component {
+var $t = /* @__PURE__ */ c.createElement(Lt, null), At = class extends c.Component {
   constructor(e) {
     super(e), this.state = {
       location: e.location,
@@ -1024,7 +1024,7 @@ var $t = /* @__PURE__ */ u.createElement(Lt, null), At = class extends u.Compone
     );
   }
   render() {
-    return this.state.error !== void 0 ? /* @__PURE__ */ u.createElement(A.Provider, { value: this.props.routeContext }, /* @__PURE__ */ u.createElement(
+    return this.state.error !== void 0 ? /* @__PURE__ */ c.createElement(A.Provider, { value: this.props.routeContext }, /* @__PURE__ */ c.createElement(
       pe.Provider,
       {
         value: this.state.error,
@@ -1034,8 +1034,8 @@ var $t = /* @__PURE__ */ u.createElement(Lt, null), At = class extends u.Compone
   }
 };
 function Ot({ routeContext: e, match: r, children: t }) {
-  let n = u.useContext(H);
-  return n && n.static && n.staticContext && (r.route.errorElement || r.route.ErrorBoundary) && (n.staticContext._deepestRenderedBoundaryId = r.route.id), /* @__PURE__ */ u.createElement(A.Provider, { value: e }, t);
+  let n = c.useContext(H);
+  return n && n.static && n.staticContext && (r.route.errorElement || r.route.ErrorBoundary) && (n.staticContext._deepestRenderedBoundaryId = r.route.id), /* @__PURE__ */ c.createElement(A.Provider, { value: e }, t);
 }
 function Ut(e, r = [], t = null, n = null, a = null) {
   if (e == null) {
@@ -1063,14 +1063,14 @@ function Ut(e, r = [], t = null, n = null, a = null) {
       Math.min(o.length, m + 1)
     );
   }
-  let i = !1, c = -1;
+  let u = !1, i = -1;
   if (t)
     for (let m = 0; m < o.length; m++) {
       let d = o[m];
-      if ((d.route.HydrateFallback || d.route.hydrateFallbackElement) && (c = m), d.route.id) {
+      if ((d.route.HydrateFallback || d.route.hydrateFallbackElement) && (i = m), d.route.id) {
         let { loaderData: p, errors: g } = t, y = d.route.loader && !p.hasOwnProperty(d.route.id) && (!g || g[d.route.id] === void 0);
         if (d.route.lazy || y) {
-          i = !0, c >= 0 ? o = o.slice(0, c + 1) : o = [o[0]];
+          u = !0, i >= 0 ? o = o.slice(0, i + 1) : o = [o[0]];
           break;
         }
       }
@@ -1085,14 +1085,14 @@ function Ut(e, r = [], t = null, n = null, a = null) {
   return o.reduceRight(
     (m, d, p) => {
       let g, y = !1, E = null, w = null;
-      t && (g = l && d.route.id ? l[d.route.id] : void 0, E = d.route.errorElement || $t, i && (c < 0 && p === 0 ? (Ye(
+      t && (g = l && d.route.id ? l[d.route.id] : void 0, E = d.route.errorElement || $t, u && (i < 0 && p === 0 ? (Ye(
         "route-fallback",
         !1,
         "No `HydrateFallback` element provided to render during initial hydration"
-      ), y = !0, w = null) : c === p && (y = !0, w = d.route.hydrateFallbackElement || null)));
+      ), y = !0, w = null) : i === p && (y = !0, w = d.route.hydrateFallbackElement || null)));
       let v = r.concat(o.slice(0, p + 1)), b = () => {
         let k;
-        return g ? k = E : y ? k = w : d.route.Component ? k = /* @__PURE__ */ u.createElement(d.route.Component, null) : d.route.element ? k = d.route.element : k = m, /* @__PURE__ */ u.createElement(
+        return g ? k = E : y ? k = w : d.route.Component ? k = /* @__PURE__ */ c.createElement(d.route.Component, null) : d.route.element ? k = d.route.element : k = m, /* @__PURE__ */ c.createElement(
           Ot,
           {
             match: d,
@@ -1105,7 +1105,7 @@ function Ut(e, r = [], t = null, n = null, a = null) {
           }
         );
       };
-      return t && (d.route.ErrorBoundary || d.route.errorElement || p === 0) ? /* @__PURE__ */ u.createElement(
+      return t && (d.route.ErrorBoundary || d.route.errorElement || p === 0) ? /* @__PURE__ */ c.createElement(
         At,
         {
           location: t.location,
@@ -1125,15 +1125,15 @@ function ge(e) {
   return `${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
 }
 function Ft(e) {
-  let r = u.useContext(H);
+  let r = c.useContext(H);
   return P(r, ge(e)), r;
 }
 function It(e) {
-  let r = u.useContext(re);
+  let r = c.useContext(re);
   return P(r, ge(e)), r;
 }
 function Dt(e) {
-  let r = u.useContext(A);
+  let r = c.useContext(A);
   return P(r, ge(e)), r;
 }
 function be(e) {
@@ -1150,7 +1150,7 @@ function Mt() {
   );
 }
 function Wt() {
-  let e = u.useContext(pe), r = It(
+  let e = c.useContext(pe), r = It(
     "useRouteError"
     /* UseRouteError */
   ), t = be(
@@ -1166,10 +1166,10 @@ function zt() {
   ), r = be(
     "useNavigate"
     /* UseNavigateStable */
-  ), t = u.useRef(!1);
+  ), t = c.useRef(!1);
   return ze(() => {
     t.current = !0;
-  }), u.useCallback(
+  }), c.useCallback(
     async (a, o = {}) => {
       _(t.current, We), t.current && (typeof a == "number" ? e.navigate(a) : await e.navigate(a, { fromRouteId: r, ...o }));
     },
@@ -1180,7 +1180,7 @@ var Le = {};
 function Ye(e, r, t) {
   !r && !Le[e] && (Le[e] = !0, _(!1, t));
 }
-u.memo(Yt);
+c.memo(Yt);
 function Yt({
   routes: e,
   future: r,
@@ -1238,16 +1238,16 @@ function ce(e) {
 function Kt(e, r) {
   let t, n, a, o, l;
   if (Vt(e)) {
-    let i = e.getAttribute("action");
-    n = i ? F(i, r) : null, t = e.getAttribute("method") || Q, a = ce(e.getAttribute("enctype")) || ee, o = new FormData(e);
+    let u = e.getAttribute("action");
+    n = u ? F(u, r) : null, t = e.getAttribute("method") || Q, a = ce(e.getAttribute("enctype")) || ee, o = new FormData(e);
   } else if (Ht(e) || Bt(e) && (e.type === "submit" || e.type === "image")) {
-    let i = e.form;
-    if (i == null)
+    let u = e.form;
+    if (u == null)
       throw new Error(
         'Cannot submit a <button> or <input type="submit"> without a <form>'
       );
-    let c = e.getAttribute("formaction") || i.getAttribute("action");
-    if (n = c ? F(c, r) : null, t = e.getAttribute("formmethod") || i.getAttribute("method") || Q, a = ce(e.getAttribute("formenctype")) || ce(i.getAttribute("enctype")) || ee, o = new FormData(i, e), !qt()) {
+    let i = e.getAttribute("formaction") || u.getAttribute("action");
+    if (n = i ? F(i, r) : null, t = e.getAttribute("formmethod") || u.getAttribute("method") || Q, a = ce(e.getAttribute("formenctype")) || ce(u.getAttribute("enctype")) || ee, o = new FormData(u, e), !qt()) {
       let { name: f, type: m, value: d } = e;
       if (m === "image") {
         let p = f ? `${f}.` : "";
@@ -1315,29 +1315,29 @@ async function tr(e, r, t) {
   );
 }
 function $e(e, r, t, n, a, o) {
-  let l = (c, f) => t[f] ? c.route.id !== t[f].route.id : !0, i = (c, f) => (
+  let l = (i, f) => t[f] ? i.route.id !== t[f].route.id : !0, u = (i, f) => (
     // param change, /users/123 -> /users/456
-    t[f].pathname !== c.pathname || // splat param changed, which is not present in match.path
+    t[f].pathname !== i.pathname || // splat param changed, which is not present in match.path
     // e.g. /files/images/avatar.jpg -> files/finances.xls
-    t[f].route.path?.endsWith("*") && t[f].params["*"] !== c.params["*"]
+    t[f].route.path?.endsWith("*") && t[f].params["*"] !== i.params["*"]
   );
   return o === "assets" ? r.filter(
-    (c, f) => l(c, f) || i(c, f)
-  ) : o === "data" ? r.filter((c, f) => {
-    let m = n.routes[c.route.id];
+    (i, f) => l(i, f) || u(i, f)
+  ) : o === "data" ? r.filter((i, f) => {
+    let m = n.routes[i.route.id];
     if (!m || !m.hasLoader)
       return !1;
-    if (l(c, f) || i(c, f))
+    if (l(i, f) || u(i, f))
       return !0;
-    if (c.route.shouldRevalidate) {
-      let d = c.route.shouldRevalidate({
+    if (i.route.shouldRevalidate) {
+      let d = i.route.shouldRevalidate({
         currentUrl: new URL(
           a.pathname + a.search + a.hash,
           window.origin
         ),
         currentParams: t[0]?.params || {},
         nextUrl: new URL(e, window.origin),
-        nextParams: c.params,
+        nextParams: i.params,
         defaultShouldRevalidate: !0
       });
       if (typeof d == "boolean")
@@ -1373,31 +1373,31 @@ function or(e, r) {
   }, []);
 }
 function He() {
-  let e = u.useContext(H);
+  let e = c.useContext(H);
   return xe(
     e,
     "You must render this element inside a <DataRouterContext.Provider> element"
   ), e;
 }
 function lr() {
-  let e = u.useContext(re);
+  let e = c.useContext(re);
   return xe(
     e,
     "You must render this element inside a <DataRouterStateContext.Provider> element"
   ), e;
 }
-var ye = u.createContext(void 0);
+var ye = c.createContext(void 0);
 ye.displayName = "FrameworkContext";
 function Ve() {
-  let e = u.useContext(ye);
+  let e = c.useContext(ye);
   return xe(
     e,
     "You must render this element inside a <HydratedRouter> element"
   ), e;
 }
 function ir(e, r) {
-  let t = u.useContext(ye), [n, a] = u.useState(!1), [o, l] = u.useState(!1), { onFocus: i, onBlur: c, onMouseEnter: f, onMouseLeave: m, onTouchStart: d } = r, p = u.useRef(null);
-  u.useEffect(() => {
+  let t = c.useContext(ye), [n, a] = c.useState(!1), [o, l] = c.useState(!1), { onFocus: u, onBlur: i, onMouseEnter: f, onMouseLeave: m, onTouchStart: d } = r, p = c.useRef(null);
+  c.useEffect(() => {
     if (e === "render" && l(!0), e === "viewport") {
       let E = (v) => {
         v.forEach((b) => {
@@ -1408,7 +1408,7 @@ function ir(e, r) {
         w.disconnect();
       };
     }
-  }, [e]), u.useEffect(() => {
+  }, [e]), c.useEffect(() => {
     if (n) {
       let E = setTimeout(() => {
         l(!0);
@@ -1427,8 +1427,8 @@ function ir(e, r) {
     o,
     p,
     {
-      onFocus: J(i, g),
-      onBlur: J(c, y),
+      onFocus: J(u, g),
+      onBlur: J(i, y),
       onMouseEnter: J(f, g),
       onMouseLeave: J(m, y),
       onTouchStart: J(d, g)
@@ -1441,15 +1441,15 @@ function J(e, r) {
   };
 }
 function sr({ page: e, ...r }) {
-  let { router: t } = He(), n = u.useMemo(
+  let { router: t } = He(), n = c.useMemo(
     () => Ae(t.routes, e, t.basename),
     [t.routes, e, t.basename]
   );
-  return n ? /* @__PURE__ */ u.createElement(cr, { page: e, matches: n, ...r }) : null;
+  return n ? /* @__PURE__ */ c.createElement(cr, { page: e, matches: n, ...r }) : null;
 }
 function ur(e) {
-  let { manifest: r, routeModules: t } = Ve(), [n, a] = u.useState([]);
-  return u.useEffect(() => {
+  let { manifest: r, routeModules: t } = Ve(), [n, a] = c.useState([]);
+  return c.useEffect(() => {
     let o = !1;
     return tr(e, r, t).then(
       (l) => {
@@ -1465,33 +1465,33 @@ function cr({
   matches: r,
   ...t
 }) {
-  let n = D(), { manifest: a, routeModules: o } = Ve(), { basename: l } = He(), { loaderData: i, matches: c } = lr(), f = u.useMemo(
+  let n = D(), { manifest: a, routeModules: o } = Ve(), { basename: l } = He(), { loaderData: u, matches: i } = lr(), f = c.useMemo(
     () => $e(
       e,
       r,
-      c,
+      i,
       a,
       n,
       "data"
     ),
-    [e, r, c, a, n]
-  ), m = u.useMemo(
+    [e, r, i, a, n]
+  ), m = c.useMemo(
     () => $e(
       e,
       r,
-      c,
+      i,
       a,
       n,
       "assets"
     ),
-    [e, r, c, a, n]
-  ), d = u.useMemo(() => {
+    [e, r, i, a, n]
+  ), d = c.useMemo(() => {
     if (e === n.pathname + n.search + n.hash)
       return [];
     let y = /* @__PURE__ */ new Set(), E = !1;
     if (r.forEach((v) => {
       let b = a.routes[v.route.id];
-      !b || !b.hasLoader || (!f.some((k) => k.route.id === v.route.id) && v.route.id in i && o[v.route.id]?.shouldRevalidate || b.hasClientLoader ? E = !0 : y.add(v.route.id));
+      !b || !b.hasLoader || (!f.some((k) => k.route.id === v.route.id) && v.route.id in u && o[v.route.id]?.shouldRevalidate || b.hasClientLoader ? E = !0 : y.add(v.route.id));
     }), y.size === 0)
       return [];
     let w = Zt(e, l, "data");
@@ -1501,21 +1501,21 @@ function cr({
     ), [w.pathname + w.search];
   }, [
     l,
-    i,
+    u,
     n,
     a,
     f,
     r,
     e,
     o
-  ]), p = u.useMemo(
+  ]), p = c.useMemo(
     () => rr(m, a),
     [m, a]
   ), g = ur(m);
-  return /* @__PURE__ */ u.createElement(u.Fragment, null, d.map((y) => /* @__PURE__ */ u.createElement("link", { key: y, rel: "prefetch", as: "fetch", href: y, ...t })), p.map((y) => /* @__PURE__ */ u.createElement("link", { key: y, rel: "modulepreload", href: y, ...t })), g.map(({ key: y, link: E }) => (
+  return /* @__PURE__ */ c.createElement(c.Fragment, null, d.map((y) => /* @__PURE__ */ c.createElement("link", { key: y, rel: "prefetch", as: "fetch", href: y, ...t })), p.map((y) => /* @__PURE__ */ c.createElement("link", { key: y, rel: "modulepreload", href: y, ...t })), g.map(({ key: y, link: E }) => (
     // these don't spread `linkProps` because they are full link descriptors
     // already with their own props
-    /* @__PURE__ */ u.createElement("link", { key: y, nonce: t.nonce, ...E })
+    /* @__PURE__ */ c.createElement("link", { key: y, nonce: t.nonce, ...E })
   )));
 }
 function dr(...e) {
@@ -1531,7 +1531,7 @@ try {
   "7.9.6");
 } catch {
 }
-var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = u.forwardRef(
+var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = c.forwardRef(
   function({
     onClick: r,
     discover: t = "render",
@@ -1539,14 +1539,14 @@ var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = u.forwardRef(
     relative: a,
     reloadDocument: o,
     replace: l,
-    state: i,
-    target: c,
+    state: u,
+    target: i,
     to: f,
     preventScrollReset: m,
     viewTransition: d,
     ...p
   }, g) {
-    let { basename: y } = u.useContext($), E = typeof f == "string" && Je.test(f), w, v = !1;
+    let { basename: y } = c.useContext($), E = typeof f == "string" && Je.test(f), w, v = !1;
     if (typeof f == "string" && E && (w = f, Be))
       try {
         let j = new URL(window.location.href), U = f.startsWith("//") ? new URL(j.protocol + f) : new URL(f), q = F(U.pathname, y);
@@ -1562,8 +1562,8 @@ var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = u.forwardRef(
       p
     ), M = pr(f, {
       replace: l,
-      state: i,
-      target: c,
+      state: u,
+      target: i,
       preventScrollReset: m,
       relative: a,
       viewTransition: d
@@ -1573,7 +1573,7 @@ var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = u.forwardRef(
     }
     let W = (
       // eslint-disable-next-line jsx-a11y/anchor-has-content
-      /* @__PURE__ */ u.createElement(
+      /* @__PURE__ */ c.createElement(
         "a",
         {
           ...p,
@@ -1581,16 +1581,16 @@ var Je = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i, ve = u.forwardRef(
           href: w || b,
           onClick: v || o ? r : I,
           ref: dr(g, O),
-          target: c,
+          target: i,
           "data-discover": !E && t === "render" ? "true" : void 0
         }
       )
     );
-    return k && !E ? /* @__PURE__ */ u.createElement(u.Fragment, null, W, /* @__PURE__ */ u.createElement(sr, { page: b })) : W;
+    return k && !E ? /* @__PURE__ */ c.createElement(c.Fragment, null, W, /* @__PURE__ */ c.createElement(sr, { page: b })) : W;
   }
 );
 ve.displayName = "Link";
-var fr = u.forwardRef(
+var fr = c.forwardRef(
   function({
     "aria-current": r = "page",
     caseSensitive: t = !1,
@@ -1598,13 +1598,13 @@ var fr = u.forwardRef(
     end: a = !1,
     style: o,
     to: l,
-    viewTransition: i,
-    children: c,
+    viewTransition: u,
+    children: i,
     ...f
   }, m) {
-    let d = G(l, { relative: f.relative }), p = D(), g = u.useContext(re), { navigator: y, basename: E } = u.useContext($), w = g != null && // Conditional usage is OK here because the usage of a data router is static
+    let d = G(l, { relative: f.relative }), p = D(), g = c.useContext(re), { navigator: y, basename: E } = c.useContext($), w = g != null && // Conditional usage is OK here because the usage of a data router is static
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    vr(d) && i === !0, v = y.encodeLocation ? y.encodeLocation(d).pathname : d.pathname, b = p.pathname, k = g && g.navigation && g.navigation.location ? g.navigation.location.pathname : null;
+    vr(d) && u === !0, v = y.encodeLocation ? y.encodeLocation(d).pathname : d.pathname, b = p.pathname, k = g && g.navigation && g.navigation.location ? g.navigation.location.pathname : null;
     t || (b = b.toLowerCase(), k = k ? k.toLowerCase() : null, v = v.toLowerCase()), k && E && (k = F(k, E) || k);
     const O = v !== "/" && v.endsWith("/") ? v.length - 1 : v.length;
     let T = b === v || !a && b.startsWith(v) && b.charAt(O) === "/", M = k != null && (k === v || !a && k.startsWith(v) && k.charAt(v.length) === "/"), I = {
@@ -1619,7 +1619,7 @@ var fr = u.forwardRef(
       w ? "transitioning" : null
     ].filter(Boolean).join(" ");
     let U = typeof o == "function" ? o(I) : o;
-    return /* @__PURE__ */ u.createElement(
+    return /* @__PURE__ */ c.createElement(
       ve,
       {
         ...f,
@@ -1628,14 +1628,14 @@ var fr = u.forwardRef(
         ref: m,
         style: U,
         to: l,
-        viewTransition: i
+        viewTransition: u
       },
-      typeof c == "function" ? c(I) : c
+      typeof i == "function" ? i(I) : i
     );
   }
 );
 fr.displayName = "NavLink";
-var mr = u.forwardRef(
+var mr = c.forwardRef(
   ({
     discover: e = "render",
     fetcherKey: r,
@@ -1644,15 +1644,15 @@ var mr = u.forwardRef(
     replace: a,
     state: o,
     method: l = Q,
-    action: i,
-    onSubmit: c,
+    action: u,
+    onSubmit: i,
     relative: f,
     preventScrollReset: m,
     viewTransition: d,
     ...p
   }, g) => {
-    let y = xr(), E = yr(i, { relative: f }), w = l.toLowerCase() === "get" ? "get" : "post", v = typeof i == "string" && Je.test(i), b = (k) => {
-      if (c && c(k), k.defaultPrevented) return;
+    let y = xr(), E = yr(u, { relative: f }), w = l.toLowerCase() === "get" ? "get" : "post", v = typeof u == "string" && Je.test(u), b = (k) => {
+      if (i && i(k), k.defaultPrevented) return;
       k.preventDefault();
       let O = k.nativeEvent.submitter, T = O?.getAttribute("formmethod") || l;
       y(O || k.currentTarget, {
@@ -1666,13 +1666,13 @@ var mr = u.forwardRef(
         viewTransition: d
       });
     };
-    return /* @__PURE__ */ u.createElement(
+    return /* @__PURE__ */ c.createElement(
       "form",
       {
         ref: g,
         method: w,
         action: E,
-        onSubmit: n ? c : b,
+        onSubmit: n ? i : b,
         ...p,
         "data-discover": !v && e === "render" ? "true" : void 0
       }
@@ -1684,7 +1684,7 @@ function hr(e) {
   return `${e} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
 }
 function Ge(e) {
-  let r = u.useContext(H);
+  let r = c.useContext(H);
   return P(r, hr(e)), r;
 }
 function pr(e, {
@@ -1695,13 +1695,13 @@ function pr(e, {
   relative: o,
   viewTransition: l
 } = {}) {
-  let i = jt(), c = D(), f = G(e, { relative: o });
-  return u.useCallback(
+  let u = jt(), i = D(), f = G(e, { relative: o });
+  return c.useCallback(
     (m) => {
       if (Gt(m, r)) {
         m.preventDefault();
-        let d = t !== void 0 ? t : de(c) === de(f);
-        i(e, {
+        let d = t !== void 0 ? t : de(i) === de(f);
+        u(e, {
           replace: d,
           state: n,
           preventScrollReset: a,
@@ -1711,8 +1711,8 @@ function pr(e, {
       }
     },
     [
-      c,
       i,
+      u,
       f,
       t,
       n,
@@ -1729,10 +1729,10 @@ function xr() {
   let { router: e } = Ge(
     "useSubmit"
     /* UseSubmit */
-  ), { basename: r } = u.useContext($), t = Mt();
-  return u.useCallback(
+  ), { basename: r } = c.useContext($), t = Mt();
+  return c.useCallback(
     async (n, a = {}) => {
-      let { action: o, method: l, encType: i, formData: c, body: f } = Kt(
+      let { action: o, method: l, encType: u, formData: i, body: f } = Kt(
         n,
         r
       );
@@ -1740,19 +1740,19 @@ function xr() {
         let m = a.fetcherKey || br();
         await e.fetch(m, t, a.action || o, {
           preventScrollReset: a.preventScrollReset,
-          formData: c,
+          formData: i,
           body: f,
           formMethod: a.method || l,
-          formEncType: a.encType || i,
+          formEncType: a.encType || u,
           flushSync: a.flushSync
         });
       } else
         await e.navigate(a.action || o, {
           preventScrollReset: a.preventScrollReset,
-          formData: c,
+          formData: i,
           body: f,
           formMethod: a.method || l,
-          formEncType: a.encType || i,
+          formEncType: a.encType || u,
           replace: a.replace,
           state: a.state,
           fromRouteId: t,
@@ -1764,22 +1764,22 @@ function xr() {
   );
 }
 function yr(e, { relative: r } = {}) {
-  let { basename: t } = u.useContext($), n = u.useContext(A);
+  let { basename: t } = c.useContext($), n = c.useContext(A);
   P(n, "useFormAction must be used inside a RouteContext");
   let [a] = n.matches.slice(-1), o = { ...G(e || ".", { relative: r }) }, l = D();
   if (e == null) {
     o.search = l.search;
-    let i = new URLSearchParams(o.search), c = i.getAll("index");
-    if (c.some((m) => m === "")) {
-      i.delete("index"), c.filter((d) => d).forEach((d) => i.append("index", d));
-      let m = i.toString();
+    let u = new URLSearchParams(o.search), i = u.getAll("index");
+    if (i.some((m) => m === "")) {
+      u.delete("index"), i.filter((d) => d).forEach((d) => u.append("index", d));
+      let m = u.toString();
       o.search = m ? `?${m}` : "";
     }
   }
   return (!e || e === ".") && a.route.index && (o.search = o.search ? o.search.replace(/^\?/, "?index&") : "?index"), t !== "/" && (o.pathname = o.pathname === "/" ? t : L([t, o.pathname])), de(o);
 }
 function vr(e, { relative: r } = {}) {
-  let t = u.useContext(Me);
+  let t = c.useContext(Me);
   P(
     t != null,
     "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"
@@ -1868,9 +1868,9 @@ const wr = {
       troubleshooting: "Troubleshooting guide"
     }
   };
-  return /* @__PURE__ */ h.jsx("span", { className: R("text-sm text-gray-600 dark:text-gray-400", t), children: Object.entries(n).map(([o, l], i) => /* @__PURE__ */ h.jsxs(fe.Fragment, { children: [
+  return /* @__PURE__ */ h.jsx("span", { className: R("text-sm text-gray-600 dark:text-gray-400", t), children: Object.entries(n).map(([o, l], u) => /* @__PURE__ */ h.jsxs(fe.Fragment, { children: [
     /* @__PURE__ */ h.jsx(qe, { to: l, variant: "primary", children: a[e][o] }),
-    i < Object.keys(n).length - 1 && " • "
+    u < Object.keys(n).length - 1 && " • "
   ] }, o)) });
 }, Lr = ({
   title: e = "Related:",
@@ -2023,36 +2023,36 @@ const wr = {
   columns: n = 3,
   className: a
 }) => {
-  const o = {
+  const o = "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", l = {
     blue: "text-blue-600 dark:text-blue-400",
     green: "text-green-600 dark:text-green-400",
     purple: "text-purple-600 dark:text-purple-400",
     orange: "text-orange-600 dark:text-orange-400",
     pink: "text-pink-600 dark:text-pink-400",
     gray: "text-gray-600 dark:text-gray-400"
-  }, l = {
+  }, u = {
     2: "grid-cols-1 md:grid-cols-2",
     3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
     4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
   };
-  return /* @__PURE__ */ h.jsx("section", { className: R(Ze.section.gradient, a), children: /* @__PURE__ */ h.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+  return /* @__PURE__ */ h.jsx("section", { className: R(Ze.section.gradient, a), children: /* @__PURE__ */ h.jsxs("div", { className: o, children: [
     (e || r) && /* @__PURE__ */ h.jsxs("div", { className: "text-center mb-12", children: [
       e && /* @__PURE__ */ h.jsx("h2", { className: "text-3xl font-bold text-gray-900 dark:text-white mb-4", children: e }),
       r && /* @__PURE__ */ h.jsx("p", { className: "text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto", children: r })
     ] }),
-    /* @__PURE__ */ h.jsx("div", { className: R("grid gap-8", l[n]), children: t.map((i, c) => {
-      const f = i.color ? o[i.color] : o.blue;
+    /* @__PURE__ */ h.jsx("div", { className: R("grid gap-8", u[n]), children: t.map((i, f) => {
+      const m = i.color ? l[i.color] : l.blue;
       return /* @__PURE__ */ h.jsxs(
         "div",
         {
           className: "bg-white dark:bg-gray-800 rounded-xl p-6 border border-gray-200 dark:border-gray-700 hover:shadow-lg transition-shadow",
           children: [
-            /* @__PURE__ */ h.jsx("div", { className: R("flex-shrink-0 mb-4", f), children: i.icon }),
+            /* @__PURE__ */ h.jsx("div", { className: R("flex-shrink-0 mb-4", m), children: i.icon }),
             /* @__PURE__ */ h.jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-3", children: i.title }),
             /* @__PURE__ */ h.jsx("p", { className: "text-gray-600 dark:text-gray-300 mb-4", children: i.description }),
             i.examples && i.examples.length > 0 && /* @__PURE__ */ h.jsxs("div", { children: [
               /* @__PURE__ */ h.jsx("h4", { className: "text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2", children: "Examples:" }),
-              /* @__PURE__ */ h.jsx("ul", { className: "space-y-1", children: i.examples.map((m, d) => /* @__PURE__ */ h.jsxs("li", { className: "flex items-start", children: [
+              /* @__PURE__ */ h.jsx("ul", { className: "space-y-1", children: i.examples.map((d, p) => /* @__PURE__ */ h.jsxs("li", { className: "flex items-start", children: [
                 /* @__PURE__ */ h.jsx(
                   "div",
                   {
@@ -2062,12 +2062,12 @@ const wr = {
                     )
                   }
                 ),
-                /* @__PURE__ */ h.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: m })
-              ] }, d)) })
+                /* @__PURE__ */ h.jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: d })
+              ] }, p)) })
             ] })
           ]
         },
-        c
+        f
       );
     }) })
   ] }) });