next-ui-lib 0.1.23 → 0.1.24

package/dist/ui.es.js

@@ -1,4 +1,4 @@
-import { jsx as x, jsxs as R } from "react/jsx-runtime";
+import { jsx as p, jsxs as R } from "react/jsx-runtime";
 import * as ne from "react";
 import Cn, { useRef as si, useEffect as Fn, useState as qi } from "react";
 const Sn = {
@@ -39,7 +39,7 @@ const Sn = {
     large: "px-8 py-3 text-2xl rounded-2xl",
     full: "px-8 py-2 text-xl rounded-2xl w-full"
   }, d = Sn[e];
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ p(
     "button",
     {
       className: `relative flex items-center justify-center cursor-pointer transition duration-150 ease-in-out whitespace-nowrap active:translate-y-[4px] ${o[a]} ${f}`,
@@ -55,7 +55,7 @@ const Sn = {
         r.currentTarget.style.boxShadow = `0 4px 0 ${s == "primary" ? d.primary.dark : d.secondary.dark}`;
       },
       onClick: i,
-      children: /* @__PURE__ */ x("span", { className: "font-bold", children: n })
+      children: /* @__PURE__ */ p("span", { className: "font-bold", children: n })
     }
   );
 };
@@ -70,7 +70,7 @@ function H(e, i, n) {
     writable: !0
   }) : e[i] = n, e;
 }
-var Me, w, Ri, te, Hi, ri, ye = {}, Wi = [], Bn = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
+var Me, w, Ri, te, Hi, ri, ye = {}, Wi = [], $n = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 function V(e, i) {
   for (var n in i) e[n] = i[n];
   return e;
@@ -143,21 +143,21 @@ function _e() {
   });
 }
 function Ai(e, i, n, a, s, f, o, d, r, l) {
-  var t, v, c, m, h, _, C, S = a && a.__k || Wi, B = S.length;
+  var t, v, c, m, h, x, C, S = a && a.__k || Wi, $ = S.length;
   for (n.__k = [], t = 0; t < i.length; t++) if ((m = n.__k[t] = (m = i[t]) == null || typeof m == "boolean" ? null : typeof m == "string" || typeof m == "number" || typeof m == "bigint" ? be(null, m, null, null, m) : Array.isArray(m) ? be(ee, {
     children: m
   }, null, null, null) : m.__b > 0 ? be(m.type, m.props, m.key, null, m.__v) : m) != null) {
     if (m.__ = n, m.__b = n.__b + 1, (c = S[t]) === null || c && m.key == c.key && m.type === c.type) S[t] = void 0;
-    else for (v = 0; v < B; v++) {
+    else for (v = 0; v < $; v++) {
       if ((c = S[v]) && m.key == c.key && m.type === c.type) {
         S[v] = void 0;
         break;
       }
       c = null;
     }
-    Ue(e, m, c = c || ye, s, f, o, d, r, l), h = m.__e, (v = m.ref) && c.ref != v && (C || (C = []), c.ref && C.push(c.ref, null, m), C.push(v, m.__c || h, m)), h != null ? (_ == null && (_ = h), typeof m.type == "function" && m.__k === c.__k ? m.__d = r = Di(m, r, e) : r = Ii(e, m, c, S, h, r), typeof n.type == "function" && (n.__d = r)) : r && c.__e == r && r.parentNode != e && (r = ie(c));
+    Ue(e, m, c = c || ye, s, f, o, d, r, l), h = m.__e, (v = m.ref) && c.ref != v && (C || (C = []), c.ref && C.push(c.ref, null, m), C.push(v, m.__c || h, m)), h != null ? (x == null && (x = h), typeof m.type == "function" && m.__k === c.__k ? m.__d = r = Di(m, r, e) : r = Ii(e, m, c, S, h, r), typeof n.type == "function" && (n.__d = r)) : r && c.__e == r && r.parentNode != e && (r = ie(c));
   }
-  for (n.__e = _, t = B; t--; ) S[t] != null && (typeof n.type == "function" && S[t].__e != null && S[t].__e == n.__d && (n.__d = ie(a, t + 1)), Oi(S[t], S[t]));
+  for (n.__e = x, t = $; t--; ) S[t] != null && (typeof n.type == "function" && S[t].__e != null && S[t].__e == n.__d && (n.__d = ie(a, t + 1)), Oi(S[t], S[t]));
   if (C) for (t = 0; t < C.length; t++) Gi(C[t], C[++t], C[++t]);
 }
 function Di(e, i, n) {
@@ -179,13 +179,13 @@ function Ii(e, i, n, a, s, f) {
   }
   return o !== void 0 ? o : s.nextSibling;
 }
-function $n(e, i, n, a, s) {
+function Bn(e, i, n, a, s) {
   var f;
   for (f in n) f === "children" || f === "key" || f in i || Ce(e, f, null, n[f], a);
   for (f in i) s && typeof i[f] != "function" || f === "children" || f === "key" || f === "value" || f === "checked" || n[f] === i[f] || Ce(e, f, i[f], n[f], a);
 }
 function di(e, i, n) {
-  i[0] === "-" ? e.setProperty(i, n) : e[i] = n == null ? "" : typeof n != "number" || Bn.test(i) ? n : n + "px";
+  i[0] === "-" ? e.setProperty(i, n) : e[i] = n == null ? "" : typeof n != "number" || $n.test(i) ? n : n + "px";
 }
 function Ce(e, i, n, a, s) {
   var f;
@@ -213,28 +213,28 @@ function ui(e) {
   this.l[e.type + !0](w.event ? w.event(e) : e);
 }
 function Ue(e, i, n, a, s, f, o, d, r) {
-  var l, t, v, c, m, h, _, C, S, B, L, z = i.type;
+  var l, t, v, c, m, h, x, C, S, $, L, z = i.type;
   if (i.constructor !== void 0) return null;
   n.__h != null && (r = n.__h, d = i.__e = n.__e, i.__h = null, f = [
     d
   ]), (l = w.__b) && l(i);
   try {
     e: if (typeof z == "function") {
-      if (C = i.props, S = (l = z.contextType) && a[l.__c], B = l ? S ? S.props.value : l.__ : a, n.__c ? _ = (t = i.__c = n.__c).__ = t.__E : ("prototype" in z && z.prototype.render ? i.__c = t = new z(C, B) : (i.__c = t = new E(C, B), t.constructor = z, t.render = jn), S && S.sub(t), t.props = C, t.state || (t.state = {}), t.context = B, t.__n = a, v = t.__d = !0, t.__h = []), t.__s == null && (t.__s = t.state), z.getDerivedStateFromProps != null && (t.__s == t.state && (t.__s = V({}, t.__s)), V(t.__s, z.getDerivedStateFromProps(C, t.__s))), c = t.props, m = t.state, v) z.getDerivedStateFromProps == null && t.componentWillMount != null && t.componentWillMount(), t.componentDidMount != null && t.__h.push(t.componentDidMount);
+      if (C = i.props, S = (l = z.contextType) && a[l.__c], $ = l ? S ? S.props.value : l.__ : a, n.__c ? x = (t = i.__c = n.__c).__ = t.__E : ("prototype" in z && z.prototype.render ? i.__c = t = new z(C, $) : (i.__c = t = new E(C, $), t.constructor = z, t.render = jn), S && S.sub(t), t.props = C, t.state || (t.state = {}), t.context = $, t.__n = a, v = t.__d = !0, t.__h = []), t.__s == null && (t.__s = t.state), z.getDerivedStateFromProps != null && (t.__s == t.state && (t.__s = V({}, t.__s)), V(t.__s, z.getDerivedStateFromProps(C, t.__s))), c = t.props, m = t.state, v) z.getDerivedStateFromProps == null && t.componentWillMount != null && t.componentWillMount(), t.componentDidMount != null && t.__h.push(t.componentDidMount);
       else {
-        if (z.getDerivedStateFromProps == null && C !== c && t.componentWillReceiveProps != null && t.componentWillReceiveProps(C, B), !t.__e && t.shouldComponentUpdate != null && t.shouldComponentUpdate(C, t.__s, B) === !1 || i.__v === n.__v) {
+        if (z.getDerivedStateFromProps == null && C !== c && t.componentWillReceiveProps != null && t.componentWillReceiveProps(C, $), !t.__e && t.shouldComponentUpdate != null && t.shouldComponentUpdate(C, t.__s, $) === !1 || i.__v === n.__v) {
           t.props = C, t.state = t.__s, i.__v !== n.__v && (t.__d = !1), t.__v = i, i.__e = n.__e, i.__k = n.__k, i.__k.forEach(function(W) {
             W && (W.__ = i);
           }), t.__h.length && o.push(t);
           break e;
         }
-        t.componentWillUpdate != null && t.componentWillUpdate(C, t.__s, B), t.componentDidUpdate != null && t.__h.push(function() {
+        t.componentWillUpdate != null && t.componentWillUpdate(C, t.__s, $), t.componentDidUpdate != null && t.__h.push(function() {
           t.componentDidUpdate(c, m, h);
         });
       }
-      t.context = B, t.props = C, t.state = t.__s, (l = w.__r) && l(i), t.__d = !1, t.__v = i, t.__P = e, l = t.render(t.props, t.state, t.context), t.state = t.__s, t.getChildContext != null && (a = V(V({}, a), t.getChildContext())), v || t.getSnapshotBeforeUpdate == null || (h = t.getSnapshotBeforeUpdate(c, m)), L = l != null && l.type === ee && l.key == null ? l.props.children : l, Ai(e, Array.isArray(L) ? L : [
+      t.context = $, t.props = C, t.state = t.__s, (l = w.__r) && l(i), t.__d = !1, t.__v = i, t.__P = e, l = t.render(t.props, t.state, t.context), t.state = t.__s, t.getChildContext != null && (a = V(V({}, a), t.getChildContext())), v || t.getSnapshotBeforeUpdate == null || (h = t.getSnapshotBeforeUpdate(c, m)), L = l != null && l.type === ee && l.key == null ? l.props.children : l, Ai(e, Array.isArray(L) ? L : [
         L
-      ], i, n, a, s, f, o, d, r), t.base = i.__e, i.__h = null, t.__h.length && o.push(t), _ && (t.__E = t.__ = null), t.__e = !1;
+      ], i, n, a, s, f, o, d, r), t.base = i.__e, i.__h = null, t.__h.length && o.push(t), x && (t.__E = t.__ = null), t.__e = !1;
     } else f == null && i.__v === n.__v ? (i.__k = n.__k, i.__e = n.__e) : i.__e = zn(n.__e, i, n, a, s, f, o, r);
     (l = w.diffed) && l(i);
   } catch (W) {
@@ -270,7 +270,7 @@ function zn(e, i, n, a, s, f, o, d) {
       if (f != null) for (v = {}, h = 0; h < e.attributes.length; h++) v[e.attributes[h].name] = e.attributes[h].value;
       (t || l) && (t && (l && t.__html == l.__html || t.__html === e.innerHTML) || (e.innerHTML = t && t.__html || ""));
     }
-    if ($n(e, c, v, s, d), t) i.__k = [];
+    if (Bn(e, c, v, s, d), t) i.__k = [];
     else if (h = i.props.children, Ai(e, Array.isArray(h) ? h : [
       h
     ], i, n, a, s && m !== "foreignObject", f, o, f ? f[0] : n.__k && ie(n, 0), d), f != null) for (h = f.length; h--; ) f[h] != null && Li(f[h]);
@@ -771,23 +771,23 @@ async function Dn(e) {
             c.emoticons,
             !1
           ]
-        ].map(([_, C]) => {
-          if (_)
-            return (Array.isArray(_) ? _ : [
-              _
+        ].map(([x, C]) => {
+          if (x)
+            return (Array.isArray(x) ? x : [
+              x
             ]).map((S) => (C ? S.split(/[-|_|\s]+/) : [
               S
-            ]).map((B) => B.toLowerCase())).flat();
-        }).flat().filter((_) => _ && _.trim()).join(","), c.emoticons) for (const _ of c.emoticons)
-          F.emoticons[_] || (F.emoticons[_] = c.id);
+            ]).map(($) => $.toLowerCase())).flat();
+        }).flat().filter((x) => x && x.trim()).join(","), c.emoticons) for (const x of c.emoticons)
+          F.emoticons[x] || (F.emoticons[x] = c.id);
         let h = 0;
-        for (const _ of c.skins) {
-          if (!_) continue;
+        for (const x of c.skins) {
+          if (!x) continue;
           h++;
-          const { native: C } = _;
+          const { native: C } = x;
           C && (F.natives[C] = c.id, c.search += `,${C}`);
           const S = h == 1 ? "" : `:skin-tone-${h}:`;
-          _.shortcodes = `:${c.id}:${S}`;
+          x.shortcodes = `:${c.id}:${S}`;
         }
       }
     }
@@ -1285,8 +1285,8 @@ w.unmount = function(e) {
       if (a.state.__e) {
         var l = a.state.__e;
         a.__v.__k[0] = (function v(c, m, h) {
-          return c && (c.__v = null, c.__k = c.__k && c.__k.map(function(_) {
-            return v(_, m, h);
+          return c && (c.__v = null, c.__k = c.__k && c.__k.map(function(x) {
+            return v(x, m, h);
           }), c.__c && c.__c.__P === m && (c.__e && h.insertBefore(c.__e, c.__d), c.__c.__e = !0, c.__c.__P = h)), c;
         })(l, l.__c.__P, l.__c.__O);
       }
@@ -1408,9 +1408,9 @@ w.vnode = function(e) {
   }
   e.$$typeof = aa, Mi && Mi(e);
 };
-var Bi = w.__r;
+var $i = w.__r;
 w.__r = function(e) {
-  Bi && Bi(e), e.__c;
+  $i && $i(e), e.__c;
 };
 const la = {
   light: "outline",
@@ -2001,14 +2001,14 @@ class va extends E {
                   style: {
                     top: r * this.props.emojiButtonSize
                   },
-                  children: t && h.map((_, C) => {
-                    if (!_) return /* @__PURE__ */ u("div", {
+                  children: t && h.map((x, C) => {
+                    if (!x) return /* @__PURE__ */ u("div", {
                       style: {
                         width: this.props.emojiButtonSize,
                         height: this.props.emojiButtonSize
                       }
                     });
-                    const S = X.get(_);
+                    const S = X.get(x);
                     return this.renderEmojiButton(S, {
                       pos: [
                         d.index,
@@ -3028,9 +3028,9 @@ const ba = ({
   set: n = "google",
   onEmojiSelect: a
 }) => {
-  const [s, f] = qi(!1), o = /* @__PURE__ */ x("em-emoji", { id: e, set: n, size: i ? "1.6em" : "1.2em" });
+  const [s, f] = qi(!1), o = /* @__PURE__ */ p("em-emoji", { id: e, set: n, size: i ? "1.6em" : "1.2em" });
   return /* @__PURE__ */ R("div", { className: "relative flex items-center", children: [
-    i ? /* @__PURE__ */ x(
+    i ? /* @__PURE__ */ p(
       "button",
       {
         type: "button",
@@ -3039,8 +3039,8 @@ const ba = ({
         "aria-label": "Select icon",
         children: o
       }
-    ) : /* @__PURE__ */ x("div", { className: "p-2 w-12 h-12 rounded-md text-2xl flex items-center justify-center", children: o }),
-    i && s && /* @__PURE__ */ x("div", { className: "absolute z-50 top-full mt-2", children: /* @__PURE__ */ x(
+    ) : /* @__PURE__ */ p("div", { className: "p-2 w-12 h-12 rounded-md text-2xl flex items-center justify-center", children: o }),
+    i && s && /* @__PURE__ */ p("div", { className: "absolute z-50 top-full mt-2", children: /* @__PURE__ */ p(
       ma,
       {
         data: on,
@@ -3060,20 +3060,31 @@ const ba = ({
   onClick: i,
   customClass: n = "",
   iconSrc: a,
-  emojiId: s
+  emojiId: s,
+  loading: f = !1
 }) => {
-  const f = Ve[e];
-  return /* @__PURE__ */ x(
+  const o = Ve[e];
+  return f ? /* @__PURE__ */ p(
+    "div",
+    {
+      className: `w-12 h-12 rounded-lg animate-pulse ${n}`,
+      style: {
+        backgroundColor: "#F1F1F1",
+        boxShadow: "0 4px 0 #d1d1d1"
+        // slightly darker shadow for depth
+      }
+    }
+  ) : /* @__PURE__ */ p(
     "button",
     {
       className: `w-12 h-12 rounded-lg flex items-center justify-center cursor-pointer transition duration-150 ease-in-out whitespace-nowrap active:translate-y-[4px] ${n}`,
       onClick: i,
       style: {
-        backgroundColor: f.value,
-        boxShadow: `0 4px 0 ${f.dark}`
+        backgroundColor: o.value,
+        boxShadow: `0 4px 0 ${o.dark}`
       },
       children: /* @__PURE__ */ R("span", { className: "text-2xl", children: [
-        a && /* @__PURE__ */ x(
+        a && /* @__PURE__ */ p(
           "img",
           {
             style: {
@@ -3084,7 +3095,7 @@ const ba = ({
             src: a
           }
         ),
-        s && /* @__PURE__ */ x(ba, { id: s, set: "google" })
+        s && /* @__PURE__ */ p(ba, { id: s, set: "google" })
       ] })
     }
   );
@@ -3129,9 +3140,9 @@ const Ye = "-", ya = (e) => {
   return i.validators.find(({
     validator: o
   }) => o(f))?.classGroupId;
-}, $i = /^\[(.+)\]$/, _a = (e) => {
-  if ($i.test(e)) {
-    const i = $i.exec(e)[1], n = i?.substring(0, i.indexOf(":"));
+}, Bi = /^\[(.+)\]$/, _a = (e) => {
+  if (Bi.test(e)) {
+    const i = Bi.exec(e)[1], n = i?.substring(0, i.indexOf(":"));
     if (n)
       return "arbitrary.." + n;
   }
@@ -3209,20 +3220,20 @@ const Ye = "-", ya = (e) => {
     const f = [];
     let o = 0, d = 0, r = 0, l;
     for (let h = 0; h < s.length; h++) {
-      let _ = s[h];
+      let x = s[h];
       if (o === 0 && d === 0) {
-        if (_ === Oe) {
+        if (x === Oe) {
           f.push(s.slice(r, h)), r = h + Sa;
           continue;
         }
-        if (_ === "/") {
+        if (x === "/") {
           l = h;
           continue;
         }
       }
-      _ === "[" ? o++ : _ === "]" ? o-- : _ === "(" ? d++ : _ === ")" && d--;
+      x === "[" ? o++ : x === "]" ? o-- : x === "(" ? d++ : x === ")" && d--;
     }
-    const t = f.length === 0 ? s : s.substring(r), v = Ba(t), c = v !== t, m = l && l > r ? l - r : void 0;
+    const t = f.length === 0 ? s : s.substring(r), v = $a(t), c = v !== t, m = l && l > r ? l - r : void 0;
     return {
       modifiers: f,
       hasImportantModifier: c,
@@ -3248,7 +3259,7 @@ const Ye = "-", ya = (e) => {
     });
   }
   return a;
-}, Ba = (e) => e.endsWith(Ge) ? e.substring(0, e.length - 1) : e.startsWith(Ge) ? e.substring(1) : e, $a = (e) => {
+}, $a = (e) => e.endsWith(Ge) ? e.substring(0, e.length - 1) : e.startsWith(Ge) ? e.substring(1) : e, Ba = (e) => {
   const i = Object.fromEntries(e.orderSensitiveModifiers.map((a) => [a, !0]));
   return (a) => {
     if (a.length <= 1)
@@ -3262,7 +3273,7 @@ const Ye = "-", ya = (e) => {
 }, za = (e) => ({
   cache: Fa(e.cacheSize),
   parseClassName: Ma(e),
-  sortModifiers: $a(e),
+  sortModifiers: Ba(e),
   ...ya(e)
 }), ja = /\s+/, Pa = (e, i) => {
   const {
@@ -3278,13 +3289,13 @@ const Ye = "-", ya = (e) => {
       modifiers: c,
       hasImportantModifier: m,
       baseClassName: h,
-      maybePostfixModifierPosition: _
+      maybePostfixModifierPosition: x
     } = n(t);
     if (v) {
       r = t + (r.length > 0 ? " " + r : r);
       continue;
     }
-    let C = !!_, S = a(C ? h.substring(0, _) : h);
+    let C = !!x, S = a(C ? h.substring(0, x) : h);
     if (!S) {
       if (!C) {
         r = t + (r.length > 0 ? " " + r : r);
@@ -3296,7 +3307,7 @@ const Ye = "-", ya = (e) => {
       }
       C = !1;
     }
-    const B = f(c).join(":"), L = m ? B + Ge : B, z = L + S;
+    const $ = f(c).join(":"), L = m ? $ + Ge : $, z = L + S;
     if (o.includes(z))
       continue;
     o.push(z);
@@ -3343,19 +3354,19 @@ function Ta(e, ...i) {
 const M = (e) => {
   const i = (n) => n[e] || [];
   return i.isThemeGetter = !0, i;
-}, ln = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, un = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Ra = /^\d+\/\d+$/, Ha = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Wa = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, La = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Ea = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Aa = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Q = (e) => Ra.test(e), y = (e) => !!e && !Number.isNaN(Number(e)), O = (e) => !!e && Number.isInteger(Number(e)), Re = (e) => e.endsWith("%") && y(e.slice(0, -1)), N = (e) => Ha.test(e), Da = () => !0, Ia = (e) => (
+}, ln = /^\[(?:(\w[\w-]*):)?(.+)\]$/i, un = /^\((?:(\w[\w-]*):)?(.+)\)$/i, Ra = /^\d+\/\d+$/, Ha = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/, Wa = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/, La = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/, Ea = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/, Aa = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/, Q = (e) => Ra.test(e), _ = (e) => !!e && !Number.isNaN(Number(e)), O = (e) => !!e && Number.isInteger(Number(e)), Re = (e) => e.endsWith("%") && _(e.slice(0, -1)), N = (e) => Ha.test(e), Da = () => !0, Ia = (e) => (
   // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
   // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   Wa.test(e) && !La.test(e)
-), cn = () => !1, Na = (e) => Ea.test(e), Ga = (e) => Aa.test(e), Oa = (e) => !k(e) && !g(e), Va = (e) => ae(e, kn, cn), k = (e) => ln.test(e), Y = (e) => ae(e, gn, Ia), He = (e) => ae(e, Za, y), ji = (e) => ae(e, vn, cn), Ua = (e) => ae(e, mn, Ga), he = (e) => ae(e, hn, Na), g = (e) => un.test(e), re = (e) => fe(e, gn), Ka = (e) => fe(e, Qa), Pi = (e) => fe(e, vn), Ja = (e) => fe(e, kn), Ya = (e) => fe(e, mn), we = (e) => fe(e, hn, !0), ae = (e, i, n) => {
+), cn = () => !1, Na = (e) => Ea.test(e), Ga = (e) => Aa.test(e), Oa = (e) => !k(e) && !g(e), Va = (e) => ae(e, kn, cn), k = (e) => ln.test(e), Y = (e) => ae(e, gn, Ia), He = (e) => ae(e, Za, _), ji = (e) => ae(e, vn, cn), Ua = (e) => ae(e, mn, Ga), he = (e) => ae(e, hn, Na), g = (e) => un.test(e), re = (e) => fe(e, gn), Ka = (e) => fe(e, Qa), Pi = (e) => fe(e, vn), Ja = (e) => fe(e, kn), Ya = (e) => fe(e, mn), we = (e) => fe(e, hn, !0), ae = (e, i, n) => {
   const a = ln.exec(e);
   return a ? a[1] ? i(a[1]) : n(a[2]) : !1;
 }, fe = (e, i, n = !1) => {
   const a = un.exec(e);
   return a ? a[1] ? i(a[1]) : n : !1;
 }, vn = (e) => e === "position" || e === "percentage", mn = (e) => e === "image" || e === "url", kn = (e) => e === "length" || e === "size" || e === "bg-size", gn = (e) => e === "length", Za = (e) => e === "number", Qa = (e) => e === "family-name", hn = (e) => e === "shadow", Xa = () => {
-  const e = M("color"), i = M("font"), n = M("text"), a = M("font-weight"), s = M("tracking"), f = M("leading"), o = M("breakpoint"), d = M("container"), r = M("spacing"), l = M("radius"), t = M("shadow"), v = M("inset-shadow"), c = M("text-shadow"), m = M("drop-shadow"), h = M("blur"), _ = M("perspective"), C = M("aspect"), S = M("ease"), B = M("animate"), L = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], z = () => [
+  const e = M("color"), i = M("font"), n = M("text"), a = M("font-weight"), s = M("tracking"), f = M("leading"), o = M("breakpoint"), d = M("container"), r = M("spacing"), l = M("radius"), t = M("shadow"), v = M("inset-shadow"), c = M("text-shadow"), m = M("drop-shadow"), h = M("blur"), x = M("perspective"), C = M("aspect"), S = M("ease"), $ = M("animate"), L = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], z = () => [
     "center",
     "top",
     "bottom",
@@ -3373,15 +3384,15 @@ const M = (e) => {
     "bottom-left",
     // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
     "left-bottom"
-  ], W = () => [...z(), g, k], K = () => ["auto", "hidden", "clip", "visible", "scroll"], oe = () => ["auto", "contain", "none"], p = () => [g, k, r], A = () => [Q, "full", "auto", ...p()], Ze = () => [O, "none", "subgrid", g, k], Qe = () => ["auto", {
+  ], W = () => [...z(), g, k], K = () => ["auto", "hidden", "clip", "visible", "scroll"], oe = () => ["auto", "contain", "none"], y = () => [g, k, r], A = () => [Q, "full", "auto", ...y()], Ze = () => [O, "none", "subgrid", g, k], Qe = () => ["auto", {
     span: ["full", O, g, k]
-  }, O, g, k], le = () => [O, "auto", g, k], Xe = () => ["auto", "min", "max", "fr", g, k], Be = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], Z = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], D = () => ["auto", ...p()], J = () => [Q, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...p()], b = () => [e, g, k], ei = () => [...z(), Pi, ji, {
+  }, O, g, k], le = () => [O, "auto", g, k], Xe = () => ["auto", "min", "max", "fr", g, k], $e = () => ["start", "end", "center", "between", "around", "evenly", "stretch", "baseline", "center-safe", "end-safe"], Z = () => ["start", "end", "center", "stretch", "center-safe", "end-safe"], D = () => ["auto", ...y()], J = () => [Q, "auto", "full", "dvw", "dvh", "lvw", "lvh", "svw", "svh", "min", "max", "fit", ...y()], b = () => [e, g, k], ei = () => [...z(), Pi, ji, {
     position: [g, k]
   }], ii = () => ["no-repeat", {
     repeat: ["", "x", "y", "space", "round"]
   }], ni = () => ["auto", "cover", "contain", Ja, Va, {
     size: [g, k]
-  }], $e = () => [Re, re, Y], q = () => [
+  }], Be = () => [Re, re, Y], q = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
@@ -3389,14 +3400,14 @@ const M = (e) => {
     l,
     g,
     k
-  ], T = () => ["", y, re, Y], ue = () => ["solid", "dashed", "dotted", "double"], ai = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], $ = () => [y, Re, Pi, ji], fi = () => [
+  ], T = () => ["", _, re, Y], ue = () => ["solid", "dashed", "dotted", "double"], ai = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], B = () => [_, Re, Pi, ji], fi = () => [
     // Deprecated since Tailwind CSS v4.0.0
     "",
     "none",
     h,
     g,
     k
-  ], ce = () => ["none", y, g, k], ve = () => ["none", y, g, k], ze = () => [y, g, k], me = () => [Q, "full", ...p()];
+  ], ce = () => ["none", _, g, k], ve = () => ["none", _, g, k], ze = () => [_, g, k], me = () => [Q, "full", ...y()];
   return {
     cacheSize: 500,
     theme: {
@@ -3415,7 +3426,7 @@ const M = (e) => {
       perspective: ["dramatic", "near", "normal", "midrange", "distant", "none"],
       radius: [N],
       shadow: [N],
-      spacing: ["px", y],
+      spacing: ["px", _],
       text: [N],
       "text-shadow": [N],
       tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"]
@@ -3442,7 +3453,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/columns
        */
       columns: [{
-        columns: [y, k, g, d]
+        columns: [_, k, g, d]
       }],
       /**
        * Break After
@@ -3652,7 +3663,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/flex-basis
        */
       basis: [{
-        basis: [Q, "full", "auto", d, ...p()]
+        basis: [Q, "full", "auto", d, ...y()]
       }],
       /**
        * Flex Direction
@@ -3673,21 +3684,21 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/flex
        */
       flex: [{
-        flex: [y, Q, "auto", "initial", "none", k]
+        flex: [_, Q, "auto", "initial", "none", k]
       }],
       /**
        * Flex Grow
        * @see https://tailwindcss.com/docs/flex-grow
        */
       grow: [{
-        grow: ["", y, g, k]
+        grow: ["", _, g, k]
       }],
       /**
        * Flex Shrink
        * @see https://tailwindcss.com/docs/flex-shrink
        */
       shrink: [{
-        shrink: ["", y, g, k]
+        shrink: ["", _, g, k]
       }],
       /**
        * Order
@@ -3778,28 +3789,28 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/gap
        */
       gap: [{
-        gap: p()
+        gap: y()
       }],
       /**
        * Gap X
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-x": [{
-        "gap-x": p()
+        "gap-x": y()
       }],
       /**
        * Gap Y
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-y": [{
-        "gap-y": p()
+        "gap-y": y()
       }],
       /**
        * Justify Content
        * @see https://tailwindcss.com/docs/justify-content
        */
       "justify-content": [{
-        justify: [...Be(), "normal"]
+        justify: [...$e(), "normal"]
       }],
       /**
        * Justify Items
@@ -3820,7 +3831,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/align-content
        */
       "align-content": [{
-        content: ["normal", ...Be()]
+        content: ["normal", ...$e()]
       }],
       /**
        * Align Items
@@ -3845,7 +3856,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/place-content
        */
       "place-content": [{
-        "place-content": Be()
+        "place-content": $e()
       }],
       /**
        * Place Items
@@ -3867,63 +3878,63 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/padding
        */
       p: [{
-        p: p()
+        p: y()
       }],
       /**
        * Padding X
        * @see https://tailwindcss.com/docs/padding
        */
       px: [{
-        px: p()
+        px: y()
       }],
       /**
        * Padding Y
        * @see https://tailwindcss.com/docs/padding
        */
       py: [{
-        py: p()
+        py: y()
       }],
       /**
        * Padding Start
        * @see https://tailwindcss.com/docs/padding
        */
       ps: [{
-        ps: p()
+        ps: y()
       }],
       /**
        * Padding End
        * @see https://tailwindcss.com/docs/padding
        */
       pe: [{
-        pe: p()
+        pe: y()
       }],
       /**
        * Padding Top
        * @see https://tailwindcss.com/docs/padding
        */
       pt: [{
-        pt: p()
+        pt: y()
       }],
       /**
        * Padding Right
        * @see https://tailwindcss.com/docs/padding
        */
       pr: [{
-        pr: p()
+        pr: y()
       }],
       /**
        * Padding Bottom
        * @see https://tailwindcss.com/docs/padding
        */
       pb: [{
-        pb: p()
+        pb: y()
       }],
       /**
        * Padding Left
        * @see https://tailwindcss.com/docs/padding
        */
       pl: [{
-        pl: p()
+        pl: y()
       }],
       /**
        * Margin
@@ -3993,7 +4004,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/margin#adding-space-between-children
        */
       "space-x": [{
-        "space-x": p()
+        "space-x": y()
       }],
       /**
        * Space Between X Reverse
@@ -4005,7 +4016,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/margin#adding-space-between-children
        */
       "space-y": [{
-        "space-y": p()
+        "space-y": y()
       }],
       /**
        * Space Between Y Reverse
@@ -4164,7 +4175,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": [y, "none", g, He]
+        "line-clamp": [_, "none", g, He]
       }],
       /**
        * Line Height
@@ -4174,7 +4185,7 @@ const M = (e) => {
         leading: [
           /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
           f,
-          ...p()
+          ...y()
         ]
       }],
       /**
@@ -4237,7 +4248,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/text-decoration-thickness
        */
       "text-decoration-thickness": [{
-        decoration: [y, "from-font", "auto", g, Y]
+        decoration: [_, "from-font", "auto", g, Y]
       }],
       /**
        * Text Decoration Color
@@ -4251,7 +4262,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/text-underline-offset
        */
       "underline-offset": [{
-        "underline-offset": [y, "auto", g, k]
+        "underline-offset": [_, "auto", g, k]
       }],
       /**
        * Text Transform
@@ -4275,7 +4286,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/text-indent
        */
       indent: [{
-        indent: p()
+        indent: y()
       }],
       /**
        * Vertical Alignment
@@ -4389,21 +4400,21 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-from-pos": [{
-        from: $e()
+        from: Be()
       }],
       /**
        * Gradient Color Stops Via Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-via-pos": [{
-        via: $e()
+        via: Be()
       }],
       /**
        * Gradient Color Stops To Position
        * @see https://tailwindcss.com/docs/gradient-color-stops
        */
       "gradient-to-pos": [{
-        to: $e()
+        to: Be()
       }],
       /**
        * Gradient Color Stops From
@@ -4717,14 +4728,14 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/outline-offset
        */
       "outline-offset": [{
-        "outline-offset": [y, g, k]
+        "outline-offset": [_, g, k]
       }],
       /**
        * Outline Width
        * @see https://tailwindcss.com/docs/outline-width
        */
       "outline-w": [{
-        outline: ["", y, re, Y]
+        outline: ["", _, re, Y]
       }],
       /**
        * Outline Color
@@ -4799,7 +4810,7 @@ const M = (e) => {
        * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
        */
       "ring-offset-w": [{
-        "ring-offset": [y, Y]
+        "ring-offset": [_, Y]
       }],
       /**
        * Ring Offset Color
@@ -4843,7 +4854,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/opacity
        */
       opacity: [{
-        opacity: [y, g, k]
+        opacity: [_, g, k]
       }],
       /**
        * Mix Blend Mode
@@ -4878,13 +4889,13 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/mask-image
        */
       "mask-image-linear-pos": [{
-        "mask-linear": [y]
+        "mask-linear": [_]
       }],
       "mask-image-linear-from-pos": [{
-        "mask-linear-from": $()
+        "mask-linear-from": B()
       }],
       "mask-image-linear-to-pos": [{
-        "mask-linear-to": $()
+        "mask-linear-to": B()
       }],
       "mask-image-linear-from-color": [{
         "mask-linear-from": b()
@@ -4893,10 +4904,10 @@ const M = (e) => {
         "mask-linear-to": b()
       }],
       "mask-image-t-from-pos": [{
-        "mask-t-from": $()
+        "mask-t-from": B()
       }],
       "mask-image-t-to-pos": [{
-        "mask-t-to": $()
+        "mask-t-to": B()
       }],
       "mask-image-t-from-color": [{
         "mask-t-from": b()
@@ -4905,10 +4916,10 @@ const M = (e) => {
         "mask-t-to": b()
       }],
       "mask-image-r-from-pos": [{
-        "mask-r-from": $()
+        "mask-r-from": B()
       }],
       "mask-image-r-to-pos": [{
-        "mask-r-to": $()
+        "mask-r-to": B()
       }],
       "mask-image-r-from-color": [{
         "mask-r-from": b()
@@ -4917,10 +4928,10 @@ const M = (e) => {
         "mask-r-to": b()
       }],
       "mask-image-b-from-pos": [{
-        "mask-b-from": $()
+        "mask-b-from": B()
       }],
       "mask-image-b-to-pos": [{
-        "mask-b-to": $()
+        "mask-b-to": B()
       }],
       "mask-image-b-from-color": [{
         "mask-b-from": b()
@@ -4929,10 +4940,10 @@ const M = (e) => {
         "mask-b-to": b()
       }],
       "mask-image-l-from-pos": [{
-        "mask-l-from": $()
+        "mask-l-from": B()
       }],
       "mask-image-l-to-pos": [{
-        "mask-l-to": $()
+        "mask-l-to": B()
       }],
       "mask-image-l-from-color": [{
         "mask-l-from": b()
@@ -4941,10 +4952,10 @@ const M = (e) => {
         "mask-l-to": b()
       }],
       "mask-image-x-from-pos": [{
-        "mask-x-from": $()
+        "mask-x-from": B()
       }],
       "mask-image-x-to-pos": [{
-        "mask-x-to": $()
+        "mask-x-to": B()
       }],
       "mask-image-x-from-color": [{
         "mask-x-from": b()
@@ -4953,10 +4964,10 @@ const M = (e) => {
         "mask-x-to": b()
       }],
       "mask-image-y-from-pos": [{
-        "mask-y-from": $()
+        "mask-y-from": B()
       }],
       "mask-image-y-to-pos": [{
-        "mask-y-to": $()
+        "mask-y-to": B()
       }],
       "mask-image-y-from-color": [{
         "mask-y-from": b()
@@ -4968,10 +4979,10 @@ const M = (e) => {
         "mask-radial": [g, k]
       }],
       "mask-image-radial-from-pos": [{
-        "mask-radial-from": $()
+        "mask-radial-from": B()
       }],
       "mask-image-radial-to-pos": [{
-        "mask-radial-to": $()
+        "mask-radial-to": B()
       }],
       "mask-image-radial-from-color": [{
         "mask-radial-from": b()
@@ -4992,13 +5003,13 @@ const M = (e) => {
         "mask-radial-at": z()
       }],
       "mask-image-conic-pos": [{
-        "mask-conic": [y]
+        "mask-conic": [_]
       }],
       "mask-image-conic-from-pos": [{
-        "mask-conic-from": $()
+        "mask-conic-from": B()
       }],
       "mask-image-conic-to-pos": [{
-        "mask-conic-to": $()
+        "mask-conic-to": B()
       }],
       "mask-image-conic-from-color": [{
         "mask-conic-from": b()
@@ -5083,14 +5094,14 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/brightness
        */
       brightness: [{
-        brightness: [y, g, k]
+        brightness: [_, g, k]
       }],
       /**
        * Contrast
        * @see https://tailwindcss.com/docs/contrast
        */
       contrast: [{
-        contrast: [y, g, k]
+        contrast: [_, g, k]
       }],
       /**
        * Drop Shadow
@@ -5118,35 +5129,35 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/grayscale
        */
       grayscale: [{
-        grayscale: ["", y, g, k]
+        grayscale: ["", _, g, k]
       }],
       /**
        * Hue Rotate
        * @see https://tailwindcss.com/docs/hue-rotate
        */
       "hue-rotate": [{
-        "hue-rotate": [y, g, k]
+        "hue-rotate": [_, g, k]
       }],
       /**
        * Invert
        * @see https://tailwindcss.com/docs/invert
        */
       invert: [{
-        invert: ["", y, g, k]
+        invert: ["", _, g, k]
       }],
       /**
        * Saturate
        * @see https://tailwindcss.com/docs/saturate
        */
       saturate: [{
-        saturate: [y, g, k]
+        saturate: [_, g, k]
       }],
       /**
        * Sepia
        * @see https://tailwindcss.com/docs/sepia
        */
       sepia: [{
-        sepia: ["", y, g, k]
+        sepia: ["", _, g, k]
       }],
       /**
        * Backdrop Filter
@@ -5173,56 +5184,56 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/backdrop-brightness
        */
       "backdrop-brightness": [{
-        "backdrop-brightness": [y, g, k]
+        "backdrop-brightness": [_, g, k]
       }],
       /**
        * Backdrop Contrast
        * @see https://tailwindcss.com/docs/backdrop-contrast
        */
       "backdrop-contrast": [{
-        "backdrop-contrast": [y, g, k]
+        "backdrop-contrast": [_, g, k]
       }],
       /**
        * Backdrop Grayscale
        * @see https://tailwindcss.com/docs/backdrop-grayscale
        */
       "backdrop-grayscale": [{
-        "backdrop-grayscale": ["", y, g, k]
+        "backdrop-grayscale": ["", _, g, k]
       }],
       /**
        * Backdrop Hue Rotate
        * @see https://tailwindcss.com/docs/backdrop-hue-rotate
        */
       "backdrop-hue-rotate": [{
-        "backdrop-hue-rotate": [y, g, k]
+        "backdrop-hue-rotate": [_, g, k]
       }],
       /**
        * Backdrop Invert
        * @see https://tailwindcss.com/docs/backdrop-invert
        */
       "backdrop-invert": [{
-        "backdrop-invert": ["", y, g, k]
+        "backdrop-invert": ["", _, g, k]
       }],
       /**
        * Backdrop Opacity
        * @see https://tailwindcss.com/docs/backdrop-opacity
        */
       "backdrop-opacity": [{
-        "backdrop-opacity": [y, g, k]
+        "backdrop-opacity": [_, g, k]
       }],
       /**
        * Backdrop Saturate
        * @see https://tailwindcss.com/docs/backdrop-saturate
        */
       "backdrop-saturate": [{
-        "backdrop-saturate": [y, g, k]
+        "backdrop-saturate": [_, g, k]
       }],
       /**
        * Backdrop Sepia
        * @see https://tailwindcss.com/docs/backdrop-sepia
        */
       "backdrop-sepia": [{
-        "backdrop-sepia": ["", y, g, k]
+        "backdrop-sepia": ["", _, g, k]
       }],
       // --------------
       // --- Tables ---
@@ -5239,21 +5250,21 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing": [{
-        "border-spacing": p()
+        "border-spacing": y()
       }],
       /**
        * Border Spacing X
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-x": [{
-        "border-spacing-x": p()
+        "border-spacing-x": y()
       }],
       /**
        * Border Spacing Y
        * @see https://tailwindcss.com/docs/border-spacing
        */
       "border-spacing-y": [{
-        "border-spacing-y": p()
+        "border-spacing-y": y()
       }],
       /**
        * Table Layout
@@ -5291,7 +5302,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/transition-duration
        */
       duration: [{
-        duration: [y, "initial", g, k]
+        duration: [_, "initial", g, k]
       }],
       /**
        * Transition Timing Function
@@ -5305,14 +5316,14 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/transition-delay
        */
       delay: [{
-        delay: [y, g, k]
+        delay: [_, g, k]
       }],
       /**
        * Animation
        * @see https://tailwindcss.com/docs/animation
        */
       animate: [{
-        animate: ["none", B, g, k]
+        animate: ["none", $, g, k]
       }],
       // ------------------
       // --- Transforms ---
@@ -5329,7 +5340,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/perspective
        */
       perspective: [{
-        perspective: [_, g, k]
+        perspective: [x, g, k]
       }],
       /**
        * Perspective Origin
@@ -5545,126 +5556,126 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-m": [{
-        "scroll-m": p()
+        "scroll-m": y()
       }],
       /**
        * Scroll Margin X
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mx": [{
-        "scroll-mx": p()
+        "scroll-mx": y()
       }],
       /**
        * Scroll Margin Y
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-my": [{
-        "scroll-my": p()
+        "scroll-my": y()
       }],
       /**
        * Scroll Margin Start
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ms": [{
-        "scroll-ms": p()
+        "scroll-ms": y()
       }],
       /**
        * Scroll Margin End
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-me": [{
-        "scroll-me": p()
+        "scroll-me": y()
       }],
       /**
        * Scroll Margin Top
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mt": [{
-        "scroll-mt": p()
+        "scroll-mt": y()
       }],
       /**
        * Scroll Margin Right
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mr": [{
-        "scroll-mr": p()
+        "scroll-mr": y()
       }],
       /**
        * Scroll Margin Bottom
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-mb": [{
-        "scroll-mb": p()
+        "scroll-mb": y()
       }],
       /**
        * Scroll Margin Left
        * @see https://tailwindcss.com/docs/scroll-margin
        */
       "scroll-ml": [{
-        "scroll-ml": p()
+        "scroll-ml": y()
       }],
       /**
        * Scroll Padding
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-p": [{
-        "scroll-p": p()
+        "scroll-p": y()
       }],
       /**
        * Scroll Padding X
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-px": [{
-        "scroll-px": p()
+        "scroll-px": y()
       }],
       /**
        * Scroll Padding Y
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-py": [{
-        "scroll-py": p()
+        "scroll-py": y()
       }],
       /**
        * Scroll Padding Start
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-ps": [{
-        "scroll-ps": p()
+        "scroll-ps": y()
       }],
       /**
        * Scroll Padding End
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pe": [{
-        "scroll-pe": p()
+        "scroll-pe": y()
       }],
       /**
        * Scroll Padding Top
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pt": [{
-        "scroll-pt": p()
+        "scroll-pt": y()
       }],
       /**
        * Scroll Padding Right
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pr": [{
-        "scroll-pr": p()
+        "scroll-pr": y()
       }],
       /**
        * Scroll Padding Bottom
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pb": [{
-        "scroll-pb": p()
+        "scroll-pb": y()
       }],
       /**
        * Scroll Padding Left
        * @see https://tailwindcss.com/docs/scroll-padding
        */
       "scroll-pl": [{
-        "scroll-pl": p()
+        "scroll-pl": y()
       }],
       /**
        * Scroll Snap Align
@@ -5749,7 +5760,7 @@ const M = (e) => {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [y, re, Y, He]
+        stroke: [_, re, Y, He]
       }],
       /**
        * Stroke
@@ -5828,7 +5839,7 @@ const M = (e) => {
 function se(...e) {
   return ef(pa(e));
 }
-const wn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
+const wn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p(
   "div",
   {
     ref: n,
@@ -5840,9 +5851,9 @@ const wn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
   }
 ));
 wn.displayName = "Card";
-const bn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x("div", { ref: n, className: se("flex", e), ...i }));
+const bn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p("div", { ref: n, className: se("flex", e), ...i }));
 bn.displayName = "CardHeader";
-const pn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
+const pn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p(
   "div",
   {
     ref: n,
@@ -5851,7 +5862,7 @@ const pn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
   }
 ));
 pn.displayName = "CardTitle";
-const yn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
+const yn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p(
   "div",
   {
     ref: n,
@@ -5860,9 +5871,9 @@ const yn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
   }
 ));
 yn.displayName = "CardDescription";
-const _n = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x("div", { ref: n, className: se("pt-0", e), ...i }));
+const _n = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p("div", { ref: n, className: se("pt-0", e), ...i }));
 _n.displayName = "CardContent";
-const xn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ x(
+const xn = ne.forwardRef(({ className: e, ...i }, n) => /* @__PURE__ */ p(
   "div",
   {
     ref: n,
@@ -5901,7 +5912,7 @@ const nf = ({
       children: [
         (e || i || f && d === "top-right") && /* @__PURE__ */ R(bn, { className: "mb-4 flex items-start justify-between", children: [
           /* @__PURE__ */ R("div", { className: "flex items-center gap-3", children: [
-            a && /* @__PURE__ */ x(
+            a && /* @__PURE__ */ p(
               Je,
               {
                 color: r,
@@ -5911,11 +5922,11 @@ const nf = ({
               }
             ),
             /* @__PURE__ */ R("div", { children: [
-              e && /* @__PURE__ */ x(pn, { className: "text-main text-xl font-gabaritoBold font-medium leading-5 sm:text-lg md:text-xl", children: e }),
-              i && /* @__PURE__ */ x(yn, { className: "text-sm sm:text-base text-gray-600", children: i })
+              e && /* @__PURE__ */ p(pn, { className: "text-main text-xl font-gabaritoBold font-medium leading-5 sm:text-lg md:text-xl", children: e }),
+              i && /* @__PURE__ */ p(yn, { className: "text-sm sm:text-base text-gray-600", children: i })
             ] })
           ] }),
-          f && d === "top-right" && /* @__PURE__ */ x(
+          f && d === "top-right" && /* @__PURE__ */ p(
             oi,
             {
               label: o,
@@ -5926,8 +5937,8 @@ const nf = ({
             }
           )
         ] }),
-        n && /* @__PURE__ */ x(_n, { className: "flex flex-col gap-4 font-regular", children: n }),
-        f && d === "bottom-right" && /* @__PURE__ */ x(xn, { className: "flex justify-end pt-2", children: /* @__PURE__ */ x(
+        n && /* @__PURE__ */ p(_n, { className: "flex flex-col gap-4 font-regular", children: n }),
+        f && d === "bottom-right" && /* @__PURE__ */ p(xn, { className: "flex justify-end pt-2", children: /* @__PURE__ */ p(
           oi,
           {
             label: o,
@@ -5946,32 +5957,56 @@ const nf = ({
   label: n = "",
   percentage: a = 0,
   showCard: s = !1,
-  showPercentage: f = !1
+  showPercentage: f = !1,
+  loading: o = !1
 }) => {
-  const o = Ve[e], d = /* @__PURE__ */ R("div", { className: "flex w-full items-center", children: [
-    /* @__PURE__ */ x(Je, { color: e, iconSrc: i, onClick: () => {
-    } }),
+  const d = Ve[e], r = /* @__PURE__ */ R("div", { className: "flex w-full items-center py-3", children: [
+    /* @__PURE__ */ p(
+      Je,
+      {
+        color: e,
+        iconSrc: i,
+        loading: o,
+        onClick: () => {
+        }
+      }
+    ),
     /* @__PURE__ */ R("div", { className: "flex flex-col ml-3 flex-1", children: [
       /* @__PURE__ */ R("div", { className: "flex justify-between mb-1 items-end", children: [
-        n && /* @__PURE__ */ x("p", { className: "font-medium text-sec text-md", children: n }),
+        n && (o ? /* @__PURE__ */ p(
+          "p",
+          {
+            className: "h-4 w-16 font-gabaritoMedium my-1 rounded-sm animate-pulse",
+            style: {
+              backgroundColor: "#F1F1F1",
+              border: "1px solid #e9e9e9"
+            }
+          }
+        ) : /* @__PURE__ */ p("p", { className: "font-medium text-sec text-md", children: n })),
         f && /* @__PURE__ */ R("span", { className: "text-base text-gray-500", children: [
           a,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ x(
+      o ? /* @__PURE__ */ p(
+        "div",
+        {
+          className: "relative w-full h-4 rounded-2xl overflow-hidden animate-pulse",
+          style: { backgroundColor: "#F1F1F1" }
+        }
+      ) : /* @__PURE__ */ p(
         "div",
         {
           className: "relative w-full h-4 rounded-2xl overflow-hidden",
           style: { backgroundColor: Mn.Gray.value },
-          children: /* @__PURE__ */ x(
+          children: /* @__PURE__ */ p(
             "div",
             {
               className: "absolute top-0 left-0 h-full rounded-2xl transition-all duration-300",
               style: {
                 width: `${a}%`,
                 background: "linear-gradient(to right, #FFC801, #FFC801)",
-                boxShadow: `0 1px 2px ${o.dark}`
+                boxShadow: `0 1px 2px ${d.dark}`
               }
             }
           )
@@ -5979,7 +6014,7 @@ const nf = ({
       )
     ] })
   ] });
-  return s ? /* @__PURE__ */ x(nf, { children: d }) : d;
+  return s ? /* @__PURE__ */ p(nf, { children: r }) : r;
 }, rf = ({
   color: e = "lightBlue"
 }) => {
@@ -5989,7 +6024,7 @@ const nf = ({
     cyan: "bg-cyan-500"
   };
   return /* @__PURE__ */ R("div", { className: "inline-block relative w-12 h-6", children: [
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ p(
       "input",
       {
         checked: i,
@@ -6001,12 +6036,12 @@ const nf = ({
         type: "checkbox"
       }
     ),
-    /* @__PURE__ */ x(
+    /* @__PURE__ */ p(
       "label",
       {
         className: "block overflow-hidden h-6 rounded-full cursor-pointer bg-gray-300",
         htmlFor: `react-switch-${e}`,
-        children: /* @__PURE__ */ x(
+        children: /* @__PURE__ */ p(
           "span",
           {
             className: `block h-6 w-6 rounded-full shadow transform transition-transform duration-200 ${i ? `translate-x-full ${a[e]}` : "bg-white"}`
@@ -6015,19 +6050,35 @@ const nf = ({
       }
     )
   ] });
-}, af = ({ color: e = "amber", completed: i, size: n = 20 }) => {
-  const a = Ve[e];
-  return i ? /* @__PURE__ */ x(
+}, af = ({
+  color: e = "amber",
+  completed: i,
+  size: n = 20,
+  loading: a = !1
+}) => {
+  const s = Ve[e];
+  return a ? /* @__PURE__ */ p(
+    "div",
+    {
+      className: "rounded-full animate-pulse",
+      style: {
+        width: n,
+        height: n,
+        backgroundColor: "#F1F1F1",
+        border: "1px solid #e9e9e9"
+      }
+    }
+  ) : i ? /* @__PURE__ */ p(
     "div",
     {
       className: "flex items-center justify-center border-[1px] rounded-full",
       style: {
         width: n,
         height: n,
-        backgroundColor: a?.value,
-        borderColor: a?.dark
+        backgroundColor: s?.value,
+        borderColor: s?.dark
       },
-      children: /* @__PURE__ */ x(
+      children: /* @__PURE__ */ p(
         "img",
         {
           src: "src/assets/icons/check.svg",
@@ -6038,7 +6089,7 @@ const nf = ({
         }
       )
     }
-  ) : /* @__PURE__ */ x(
+  ) : /* @__PURE__ */ p(
     "div",
     {
       className: "border-[1px] rounded-full",
@@ -6054,13 +6105,38 @@ const nf = ({
   label: e = "",
   color: i = "amber",
   records: n = {},
-  emojiId: a = "pancakes"
-}) => /* @__PURE__ */ R("div", { className: "flex w-full rounded-lg h-14", children: [
-  /* @__PURE__ */ x(Je, { emojiId: a, color: i, onClick: () => {
-  } }),
-  /* @__PURE__ */ R("div", { className: "w-3/4 h-full rounded-lg ml-2 flex flex-col justify-start", children: [
-    /* @__PURE__ */ x("p", { className: "font-gabaritoMedium text-sec mb-1", children: e }),
-    /* @__PURE__ */ x("div", { className: "flex space-x-2", children: Object.entries(n).map(([s, f]) => /* @__PURE__ */ x(af, { color: i, completed: f })) })
+  emojiId: a = "pancakes",
+  loading: s = !1
+}) => /* @__PURE__ */ R("div", { className: "flex w-full rounded-lg py-3", children: [
+  /* @__PURE__ */ p(
+    Je,
+    {
+      emojiId: a,
+      color: i,
+      loading: s,
+      onClick: () => {
+      }
+    }
+  ),
+  /* @__PURE__ */ R("div", { className: "w-3/4 h-12 rounded-lg ml-2 flex flex-col justify-between", children: [
+    s ? /* @__PURE__ */ p(
+      "p",
+      {
+        className: "h-4 w-16 font-gabaritoMedium mt-1 rounded-sm",
+        style: {
+          backgroundColor: "#F1F1F1",
+          border: "1px solid #e9e9e9"
+        }
+      }
+    ) : /* @__PURE__ */ p("p", { className: "font-gabaritoMedium text-sec mb-1", children: e }),
+    /* @__PURE__ */ p("div", { className: "flex space-x-2", children: Object.entries(n).map(([f, o]) => /* @__PURE__ */ p(
+      af,
+      {
+        color: i,
+        completed: o,
+        loading: s
+      }
+    )) })
   ] })
 ] });
 export {