ddingdong-design-system 0.2.15 → 0.2.16

package/dist/ddingdong-design-system.es.js

@@ -8,13 +8,13 @@ function JA(A) {
   var E, I, Q = "";
   if (typeof A == "string" || typeof A == "number") Q += A;
   else if (typeof A == "object") if (Array.isArray(A)) {
-    var g = A.length;
-    for (E = 0; E < g; E++) A[E] && (I = JA(A[E])) && (Q && (Q += " "), Q += I);
+    var C = A.length;
+    for (E = 0; E < C; E++) A[E] && (I = JA(A[E])) && (Q && (Q += " "), Q += I);
   } else for (I in A) A[I] && (Q && (Q += " "), Q += I);
   return Q;
 }
 function fA() {
-  for (var A, E, I = 0, Q = "", g = arguments.length; I < g; I++) (A = arguments[I]) && (E = JA(A)) && (Q && (Q += " "), Q += E);
+  for (var A, E, I = 0, Q = "", C = arguments.length; I < C; I++) (A = arguments[I]) && (E = JA(A)) && (Q && (Q += " "), Q += E);
   return Q;
 }
 const DA = "-", ZA = (A) => {
@@ -36,15 +36,15 @@ const DA = "-", ZA = (A) => {
   var h;
   if (A.length === 0)
     return E.classGroupId;
-  const I = A[0], Q = E.nextPart.get(I), g = Q ? aA(A.slice(1), Q) : void 0;
-  if (g)
-    return g;
+  const I = A[0], Q = E.nextPart.get(I), C = Q ? aA(A.slice(1), Q) : void 0;
+  if (C)
+    return C;
   if (E.validators.length === 0)
     return;
-  const C = A.join(DA);
+  const g = A.join(DA);
   return (h = E.validators.find(({
     validator: B
-  }) => B(C))) == null ? void 0 : h.classGroupId;
+  }) => B(g))) == null ? void 0 : h.classGroupId;
 }, PA = /^\[(.+)\]$/, qA = (A) => {
   if (PA.test(A)) {
     const E = PA.exec(A)[1], I = E == null ? void 0 : E.substring(0, E.indexOf(":"));
@@ -59,29 +59,29 @@ const DA = "-", ZA = (A) => {
     nextPart: /* @__PURE__ */ new Map(),
     validators: []
   };
-  return AI(Object.entries(A.classGroups), I).forEach(([C, h]) => {
-    BA(h, Q, C, E);
+  return AI(Object.entries(A.classGroups), I).forEach(([g, h]) => {
+    BA(h, Q, g, E);
   }), Q;
 }, BA = (A, E, I, Q) => {
-  A.forEach((g) => {
-    if (typeof g == "string") {
-      const C = g === "" ? E : SA(E, g);
-      C.classGroupId = I;
+  A.forEach((C) => {
+    if (typeof C == "string") {
+      const g = C === "" ? E : SA(E, C);
+      g.classGroupId = I;
       return;
     }
-    if (typeof g == "function") {
-      if ($A(g)) {
-        BA(g(Q), E, I, Q);
+    if (typeof C == "function") {
+      if ($A(C)) {
+        BA(C(Q), E, I, Q);
         return;
       }
       E.validators.push({
-        validator: g,
+        validator: C,
         classGroupId: I
       });
       return;
     }
-    Object.entries(g).forEach(([C, h]) => {
-      BA(h, SA(E, C), I, Q);
+    Object.entries(C).forEach(([g, h]) => {
+      BA(h, SA(E, g), I, Q);
     });
   });
 }, SA = (A, E) => {
@@ -93,8 +93,8 @@ const DA = "-", ZA = (A) => {
     }), I = I.nextPart.get(Q);
   }), I;
 }, $A = (A) => A.isThemeGetter, AI = (A, E) => E ? A.map(([I, Q]) => {
-  const g = Q.map((C) => typeof C == "string" ? E + C : typeof C == "object" ? Object.fromEntries(Object.entries(C).map(([h, B]) => [E + h, B])) : C);
-  return [I, g];
+  const C = Q.map((g) => typeof g == "string" ? E + g : typeof g == "object" ? Object.fromEntries(Object.entries(g).map(([h, B]) => [E + h, B])) : g);
+  return [I, C];
 }) : A, II = (A) => {
   if (A < 1)
     return {
@@ -104,33 +104,33 @@ const DA = "-", ZA = (A) => {
       }
     };
   let E = 0, I = /* @__PURE__ */ new Map(), Q = /* @__PURE__ */ new Map();
-  const g = (C, h) => {
-    I.set(C, h), E++, E > A && (E = 0, Q = I, I = /* @__PURE__ */ new Map());
+  const C = (g, h) => {
+    I.set(g, h), E++, E > A && (E = 0, Q = I, I = /* @__PURE__ */ new Map());
   };
   return {
-    get(C) {
-      let h = I.get(C);
+    get(g) {
+      let h = I.get(g);
       if (h !== void 0)
         return h;
-      if ((h = Q.get(C)) !== void 0)
-        return g(C, h), h;
+      if ((h = Q.get(g)) !== void 0)
+        return C(g, h), h;
     },
-    set(C, h) {
-      I.has(C) ? I.set(C, h) : g(C, h);
+    set(g, h) {
+      I.has(g) ? I.set(g, h) : C(g, h);
     }
   };
 }, nA = "!", EI = (A) => {
   const {
     separator: E,
     experimentalParseClassName: I
-  } = A, Q = E.length === 1, g = E[0], C = E.length, h = (B) => {
+  } = A, Q = E.length === 1, C = E[0], g = E.length, h = (B) => {
     const H = [];
     let w = 0, R = 0, k;
     for (let e = 0; e < B.length; e++) {
       let Y = B[e];
       if (w === 0) {
-        if (Y === g && (Q || B.slice(e, e + C) === E)) {
-          H.push(B.slice(R, e)), R = e + C;
+        if (Y === C && (Q || B.slice(e, e + g) === E)) {
+          H.push(B.slice(R, e)), R = e + g;
           continue;
         }
         if (Y === "/") {
@@ -140,12 +140,12 @@ const DA = "-", ZA = (A) => {
       }
       Y === "[" ? w++ : Y === "]" && w--;
     }
-    const c = H.length === 0 ? B : B.substring(R), S = c.startsWith(nA), P = S ? c.substring(1) : c, r = k && k > R ? k - R : void 0;
+    const r = H.length === 0 ? B : B.substring(R), S = r.startsWith(nA), P = S ? r.substring(1) : r, x = k && k > R ? k - R : void 0;
     return {
       modifiers: H,
       hasImportantModifier: S,
       baseClassName: P,
-      maybePostfixModifierPosition: r
+      maybePostfixModifierPosition: x
     };
   };
   return I ? (B) => I({
@@ -168,36 +168,36 @@ const DA = "-", ZA = (A) => {
   const {
     parseClassName: I,
     getClassGroupId: Q,
-    getConflictingClassGroupIds: g
-  } = E, C = [], h = A.trim().split(CI);
+    getConflictingClassGroupIds: C
+  } = E, g = [], h = A.trim().split(CI);
   let B = "";
   for (let H = h.length - 1; H >= 0; H -= 1) {
     const w = h[H], {
       modifiers: R,
       hasImportantModifier: k,
-      baseClassName: c,
+      baseClassName: r,
       maybePostfixModifierPosition: S
     } = I(w);
-    let P = !!S, r = Q(P ? c.substring(0, S) : c);
-    if (!r) {
+    let P = !!S, x = Q(P ? r.substring(0, S) : r);
+    if (!x) {
       if (!P) {
         B = w + (B.length > 0 ? " " + B : B);
         continue;
       }
-      if (r = Q(c), !r) {
+      if (x = Q(r), !x) {
         B = w + (B.length > 0 ? " " + B : B);
         continue;
       }
       P = !1;
     }
-    const e = QI(R).join(":"), Y = k ? e + nA : e, F = Y + r;
-    if (C.includes(F))
+    const e = QI(R).join(":"), Y = k ? e + nA : e, F = Y + x;
+    if (g.includes(F))
       continue;
-    C.push(F);
-    const u = g(r, P);
+    g.push(F);
+    const u = C(x, P);
     for (let O = 0; O < u.length; ++O) {
       const b = u[O];
-      C.push(Y + b);
+      g.push(Y + b);
     }
     B = w + (B.length > 0 ? " " + B : B);
   }
@@ -218,20 +218,20 @@ const dA = (A) => {
   return I;
 };
 function iI(A, ...E) {
-  let I, Q, g, C = h;
+  let I, Q, C, g = h;
   function h(H) {
     const w = E.reduce((R, k) => k(R), A());
-    return I = gI(w), Q = I.cache.get, g = I.cache.set, C = B, B(H);
+    return I = gI(w), Q = I.cache.get, C = I.cache.set, g = B, B(H);
   }
   function B(H) {
     const w = Q(H);
     if (w)
       return w;
     const R = BI(H, I);
-    return g(H, R), R;
+    return C(H, R), R;
   }
   return function() {
-    return C(hI.apply(null, arguments));
+    return g(hI.apply(null, arguments));
   };
 }
 const s = (A) => {
@@ -246,7 +246,7 @@ const s = (A) => {
   // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
   oI.test(A) && !eI.test(A)
 ), KA = () => !1, SI = (A) => RI.test(A), FI = (A) => kI.test(A), MI = () => {
-  const A = s("colors"), E = s("spacing"), I = s("blur"), Q = s("brightness"), g = s("borderColor"), C = s("borderRadius"), h = s("borderSpacing"), B = s("borderWidth"), H = s("contrast"), w = s("grayscale"), R = s("hueRotate"), k = s("invert"), c = s("gap"), S = s("gradientColorStops"), P = s("gradientColorStopPositions"), r = s("inset"), e = s("margin"), Y = s("opacity"), F = s("padding"), u = s("saturate"), O = s("scale"), b = s("sepia"), RA = s("skew"), kA = s("space"), sA = s("translate"), $ = () => ["auto", "contain", "none"], AA = () => ["auto", "hidden", "clip", "visible", "scroll"], IA = () => ["auto", o, E], t = () => [o, E], tA = () => ["", f, a], T = () => ["auto", N, o], YA = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], W = () => ["solid", "dashed", "dotted", "double", "none"], cA = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], EA = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], y = () => ["", "0", o], rA = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], J = () => [N, o];
+  const A = s("colors"), E = s("spacing"), I = s("blur"), Q = s("brightness"), C = s("borderColor"), g = s("borderRadius"), h = s("borderSpacing"), B = s("borderWidth"), H = s("contrast"), w = s("grayscale"), R = s("hueRotate"), k = s("invert"), r = s("gap"), S = s("gradientColorStops"), P = s("gradientColorStopPositions"), x = s("inset"), e = s("margin"), Y = s("opacity"), F = s("padding"), u = s("saturate"), O = s("scale"), b = s("sepia"), RA = s("skew"), kA = s("space"), sA = s("translate"), $ = () => ["auto", "contain", "none"], AA = () => ["auto", "hidden", "clip", "visible", "scroll"], IA = () => ["auto", o, E], t = () => [o, E], tA = () => ["", f, a], T = () => ["auto", N, o], YA = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], W = () => ["solid", "dashed", "dotted", "double", "none"], cA = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], EA = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], y = () => ["", "0", o], rA = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], J = () => [N, o];
   return {
     cacheSize: 500,
     separator: ":",
@@ -423,63 +423,63 @@ const s = (A) => {
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       inset: [{
-        inset: [r]
+        inset: [x]
       }],
       /**
        * Right / Left
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       "inset-x": [{
-        "inset-x": [r]
+        "inset-x": [x]
       }],
       /**
        * Top / Bottom
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       "inset-y": [{
-        "inset-y": [r]
+        "inset-y": [x]
       }],
       /**
        * Start
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       start: [{
-        start: [r]
+        start: [x]
       }],
       /**
        * End
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       end: [{
-        end: [r]
+        end: [x]
       }],
       /**
        * Top
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       top: [{
-        top: [r]
+        top: [x]
       }],
       /**
        * Right
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       right: [{
-        right: [r]
+        right: [x]
       }],
       /**
        * Bottom
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       bottom: [{
-        bottom: [r]
+        bottom: [x]
       }],
       /**
        * Left
        * @see https://tailwindcss.com/docs/top-right-bottom-left
        */
       left: [{
-        left: [r]
+        left: [x]
       }],
       /**
        * Visibility
@@ -629,21 +629,21 @@ const s = (A) => {
        * @see https://tailwindcss.com/docs/gap
        */
       gap: [{
-        gap: [c]
+        gap: [r]
       }],
       /**
        * Gap X
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-x": [{
-        "gap-x": [c]
+        "gap-x": [r]
       }],
       /**
        * Gap Y
        * @see https://tailwindcss.com/docs/gap
        */
       "gap-y": [{
-        "gap-y": [c]
+        "gap-y": [r]
       }],
       /**
        * Justify Content
@@ -1260,105 +1260,105 @@ const s = (A) => {
        * @see https://tailwindcss.com/docs/border-radius
        */
       rounded: [{
-        rounded: [C]
+        rounded: [g]
       }],
       /**
        * Border Radius Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-s": [{
-        "rounded-s": [C]
+        "rounded-s": [g]
       }],
       /**
        * Border Radius End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-e": [{
-        "rounded-e": [C]
+        "rounded-e": [g]
       }],
       /**
        * Border Radius Top
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-t": [{
-        "rounded-t": [C]
+        "rounded-t": [g]
       }],
       /**
        * Border Radius Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-r": [{
-        "rounded-r": [C]
+        "rounded-r": [g]
       }],
       /**
        * Border Radius Bottom
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-b": [{
-        "rounded-b": [C]
+        "rounded-b": [g]
       }],
       /**
        * Border Radius Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-l": [{
-        "rounded-l": [C]
+        "rounded-l": [g]
       }],
       /**
        * Border Radius Start Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ss": [{
-        "rounded-ss": [C]
+        "rounded-ss": [g]
       }],
       /**
        * Border Radius Start End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-se": [{
-        "rounded-se": [C]
+        "rounded-se": [g]
       }],
       /**
        * Border Radius End End
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-ee": [{
-        "rounded-ee": [C]
+        "rounded-ee": [g]
       }],
       /**
        * Border Radius End Start
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-es": [{
-        "rounded-es": [C]
+        "rounded-es": [g]
       }],
       /**
        * Border Radius Top Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tl": [{
-        "rounded-tl": [C]
+        "rounded-tl": [g]
       }],
       /**
        * Border Radius Top Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-tr": [{
-        "rounded-tr": [C]
+        "rounded-tr": [g]
       }],
       /**
        * Border Radius Bottom Right
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-br": [{
-        "rounded-br": [C]
+        "rounded-br": [g]
       }],
       /**
        * Border Radius Bottom Left
        * @see https://tailwindcss.com/docs/border-radius
        */
       "rounded-bl": [{
-        "rounded-bl": [C]
+        "rounded-bl": [g]
       }],
       /**
        * Border Width
@@ -1480,70 +1480,70 @@ const s = (A) => {
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color": [{
-        border: [g]
+        border: [C]
       }],
       /**
        * Border Color X
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-x": [{
-        "border-x": [g]
+        "border-x": [C]
       }],
       /**
        * Border Color Y
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-y": [{
-        "border-y": [g]
+        "border-y": [C]
       }],
       /**
        * Border Color S
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-s": [{
-        "border-s": [g]
+        "border-s": [C]
       }],
       /**
        * Border Color E
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-e": [{
-        "border-e": [g]
+        "border-e": [C]
       }],
       /**
        * Border Color Top
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-t": [{
-        "border-t": [g]
+        "border-t": [C]
       }],
       /**
        * Border Color Right
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-r": [{
-        "border-r": [g]
+        "border-r": [C]
       }],
       /**
        * Border Color Bottom
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-b": [{
-        "border-b": [g]
+        "border-b": [C]
       }],
       /**
        * Border Color Left
        * @see https://tailwindcss.com/docs/border-color
        */
       "border-color-l": [{
-        "border-l": [g]
+        "border-l": [C]
       }],
       /**
        * Divide Color
        * @see https://tailwindcss.com/docs/divide-color
        */
       "divide-color": [{
-        divide: [g]
+        divide: [C]
       }],
       /**
        * Outline Style
@@ -2274,7 +2274,7 @@ const s = (A) => {
       "font-size": ["leading"]
     }
   };
-}, jI = /* @__PURE__ */ iI(MI), x = (...A) => jI(fA(A)), UA = q(null), JI = () => {
+}, jI = /* @__PURE__ */ iI(MI), c = (...A) => jI(fA(A)), UA = q(null), JI = () => {
   const A = hA(UA);
   if (!A)
     throw new Error("useAccordion must be used within an AccordionProvider");
@@ -2342,8 +2342,8 @@ const s = (A) => {
   youtube: XI
 }, fE = Object.keys(lA);
 function M({ name: A, color: E = "gray", size: I = 25, ...Q }) {
-  const g = lA[A];
-  return /* @__PURE__ */ i(g, { width: `${I}px`, height: `${I}px`, style: { color: NA[E] }, ...Q });
+  const C = lA[A];
+  return /* @__PURE__ */ i(C, { width: `${I}px`, height: `${I}px`, style: { color: NA[E] }, ...Q });
 }
 function aE({
   type: A = "single",
@@ -2351,16 +2351,16 @@ function aE({
   children: I,
   ...Q
 }) {
-  const [g, C] = j([]), h = (B) => {
+  const [C, g] = j([]), h = (B) => {
     if (A === "single") {
-      C((H) => H.includes(B) ? [] : [B]);
+      g((H) => H.includes(B) ? [] : [B]);
       return;
     }
-    C(
+    g(
       (H) => H.includes(B) ? H.filter((w) => w !== B) : [...H, B]
     );
   };
-  return /* @__PURE__ */ i(UA.Provider, { value: { openItems: g, toggleItem: h, type: A }, children: /* @__PURE__ */ i("div", { className: x("w-full", E), ...Q, children: I }) });
+  return /* @__PURE__ */ i(UA.Provider, { value: { openItems: C, toggleItem: h, type: A }, children: /* @__PURE__ */ i("div", { className: c("w-full", E), ...Q, children: I }) });
 }
 const V = {
   initial: { height: 0, opacity: 0 },
@@ -2376,11 +2376,11 @@ function nE({
   isArrow: E = !0,
   value: I,
   btnClassName: Q,
-  contentClassName: g,
-  children: C,
+  contentClassName: C,
+  children: g,
   ...h
 }) {
-  const B = JI(), H = iA(), w = `accordion-trigger-${H}`, R = `accordion-content-${H}`, k = XA(), { openItems: c, toggleItem: S } = B, P = c.includes(I);
+  const B = JI(), H = iA(), w = `accordion-trigger-${H}`, R = `accordion-content-${H}`, k = XA(), { openItems: r, toggleItem: S } = B, P = r.includes(I);
   return /* @__PURE__ */ G("div", { className: "border-b border-gray-200", "data-state": P ? "open" : "closed", ...h, children: [
     /* @__PURE__ */ G(
       "button",
@@ -2390,7 +2390,7 @@ function nE({
         "aria-expanded": P,
         type: "button",
         onClick: () => S(I),
-        className: x(
+        className: c(
           "flex w-full cursor-pointer items-center justify-between px-6 py-4 text-left hover:bg-gray-50",
           Q
         ),
@@ -2418,7 +2418,7 @@ function nE({
         exit: k ? void 0 : V.exit,
         transition: k ? void 0 : V.transition,
         className: "overflow-hidden",
-        children: /* @__PURE__ */ i("div", { className: x("bg-gray-50 px-6 py-4", g), children: C })
+        children: /* @__PURE__ */ i("div", { className: c("bg-gray-50 px-6 py-4", C), children: g })
       }
     ) })
   ] });
@@ -2429,8 +2429,8 @@ const zI = {
   lg: { class: "size-18", width: 72, height: 72 },
   xl: { class: "size-20", width: 80, height: 80 }
 };
-function dE({ size: A = "lg", src: E, alt: I, className: Q, ...g }) {
-  const { class: C, width: h, height: B } = zI[A];
+function dE({ size: A = "lg", src: E, alt: I, className: Q, ...C }) {
+  const { class: g, width: h, height: B } = zI[A];
   return /* @__PURE__ */ i(
     "img",
     {
@@ -2439,8 +2439,8 @@ function dE({ size: A = "lg", src: E, alt: I, className: Q, ...g }) {
       width: h,
       height: B,
       loading: "lazy",
-      className: x("rounded-full border border-gray-200 object-cover", C, Q),
-      ...g
+      className: c("rounded-full border border-gray-200 object-cover", g, Q),
+      ...C
     }
   );
 }
@@ -2454,7 +2454,7 @@ function OE({ variant: A = "neutral", text: E, ...I }) {
   return /* @__PURE__ */ i(
     "div",
     {
-      className: x(
+      className: c(
         "w-min rounded-lg px-2 py-1 text-sm font-semibold whitespace-nowrap",
         Q
       ),
@@ -2466,29 +2466,29 @@ function OE({ variant: A = "neutral", text: E, ...I }) {
 const FA = (A) => typeof A == "boolean" ? `${A}` : A === 0 ? "0" : A, MA = fA, _ = (A, E) => (I) => {
   var Q;
   if ((E == null ? void 0 : E.variants) == null) return MA(A, I == null ? void 0 : I.class, I == null ? void 0 : I.className);
-  const { variants: g, defaultVariants: C } = E, h = Object.keys(g).map((w) => {
-    const R = I == null ? void 0 : I[w], k = C == null ? void 0 : C[w];
+  const { variants: C, defaultVariants: g } = E, h = Object.keys(C).map((w) => {
+    const R = I == null ? void 0 : I[w], k = g == null ? void 0 : g[w];
     if (R === null) return null;
-    const c = FA(R) || FA(k);
-    return g[w][c];
+    const r = FA(R) || FA(k);
+    return C[w][r];
   }), B = I && Object.entries(I).reduce((w, R) => {
-    let [k, c] = R;
-    return c === void 0 || (w[k] = c), w;
+    let [k, r] = R;
+    return r === void 0 || (w[k] = r), w;
   }, {}), H = E == null || (Q = E.compoundVariants) === null || Q === void 0 ? void 0 : Q.reduce((w, R) => {
-    let { class: k, className: c, ...S } = R;
+    let { class: k, className: r, ...S } = R;
     return Object.entries(S).every((P) => {
-      let [r, e] = P;
+      let [x, e] = P;
       return Array.isArray(e) ? e.includes({
-        ...C,
+        ...g,
         ...B
-      }[r]) : {
-        ...C,
+      }[x]) : {
+        ...g,
         ...B
-      }[r] === e;
+      }[x] === e;
     }) ? [
       ...w,
       k,
-      c
+      r
     ] : w;
   }, []);
   return MA(A, h, H, I == null ? void 0 : I.class, I == null ? void 0 : I.className);
@@ -2539,27 +2539,27 @@ function KE({
   variant: E,
   color: I,
   size: Q = "md",
-  rounded: g = !1,
-  isLoading: C = !1,
+  rounded: C = !1,
+  isLoading: g = !1,
   disabled: h,
   className: B,
   ...H
 }) {
-  const w = C || h;
+  const w = g || h;
   return /* @__PURE__ */ G(
     "button",
     {
       type: "button",
-      className: x(
+      className: c(
         qI({ variant: E, color: I, size: Q }),
         w && "cursor-not-allowed bg-gray-100 text-gray-400 hover:bg-gray-100",
-        g ? "rounded-full" : "rounded-[10px] md:rounded-xl",
+        C ? "rounded-full" : "rounded-[10px] md:rounded-xl",
         B
       ),
       disabled: w,
       ...H,
       children: [
-        C && /* @__PURE__ */ i(M, { name: "loading", size: 25, className: "mr-1.5 -ml-1 animate-spin max-md:h-[20px]" }),
+        g && /* @__PURE__ */ i(M, { name: "loading", size: 25, className: "mr-1.5 -ml-1 animate-spin max-md:h-[20px]" }),
         A
       ]
     }
@@ -2571,7 +2571,7 @@ const uA = q(null), HA = () => {
     throw new Error("useCarousel must be used within a CarouselProvider");
   return A;
 }, _I = () => {
-  const [A, E] = j(0), [I, Q] = j(0), [g, C] = j(!1), h = CA(null), B = CA(null);
+  const [A, E] = j(0), [I, Q] = j(0), [C, g] = j(!1), h = CA(null), B = CA(null);
   Z(() => {
     if (h.current) {
       const Y = h.current.children.length;
@@ -2586,10 +2586,10 @@ const uA = q(null), HA = () => {
       behavior: "smooth"
     }), E(e);
   }, []), w = v(() => {
-    if (g || I === 0) return;
+    if (C || I === 0) return;
     const e = A >= I - 1 ? 0 : A + 1;
     H(e);
-  }, [H, g, A, I]), R = v(() => {
+  }, [H, C, A, I]), R = v(() => {
     const e = I - 1, Y = Math.min(A + 1, e);
     H(Y);
   }, [A, I, H]), k = v(() => {
@@ -2597,21 +2597,21 @@ const uA = q(null), HA = () => {
     H(e);
   }, [A, H]);
   Z(() => {
-    if (!(I === 0 || g))
+    if (!(I === 0 || C))
       return B.current = setInterval(w, 3e3), () => {
         B.current && clearInterval(B.current);
       };
-  }, [w, I, g]);
-  const c = () => C(!0), S = () => C(!1), P = A < I - 1, r = A > 0;
+  }, [w, I, C]);
+  const r = () => g(!0), S = () => g(!1), P = A < I - 1, x = A > 0;
   return {
     currentIndex: A,
     totalItems: I,
     goToNext: R,
     goToPrevious: k,
     canGoNext: P,
-    canGoPrevious: r,
+    canGoPrevious: x,
     scrollContainerRef: h,
-    handleMouseEnter: c,
+    handleMouseEnter: r,
     handleMouseLeave: S
   };
 };
@@ -2620,7 +2620,7 @@ function UE({ className: A = "", children: E }) {
   return /* @__PURE__ */ i(uA.Provider, { value: I, children: /* @__PURE__ */ G(
     "div",
     {
-      className: x("relative", A),
+      className: c("relative", A),
       onMouseEnter: I.handleMouseEnter,
       onMouseLeave: I.handleMouseLeave,
       role: "region",
@@ -2639,7 +2639,7 @@ function NE({ children: A, className: E = "" }) {
     "div",
     {
       ref: I,
-      className: x(
+      className: c(
         "scroll no-scrollbar flex overflow-x-auto overflow-y-hidden scroll-smooth",
         E
       ),
@@ -2648,7 +2648,7 @@ function NE({ children: A, className: E = "" }) {
   );
 }
 function lE({ children: A, className: E = "" }) {
-  return /* @__PURE__ */ i("div", { className: x("w-full min-w-full flex-shrink-0", E), children: A });
+  return /* @__PURE__ */ i("div", { className: c("w-full min-w-full flex-shrink-0", E), children: A });
 }
 function $I() {
   const { goToPrevious: A, canGoNext: E, canGoPrevious: I } = HA();
@@ -2685,7 +2685,7 @@ function uE({
   return /* @__PURE__ */ i(
     A || "div",
     {
-      className: x(
+      className: c(
         "box-border rounded-xl border border-gray-200 bg-white px-[22px] py-6 transition-colors hover:bg-gray-50",
         E
       ),
@@ -2724,8 +2724,8 @@ function m({
   dir: E = "row",
   alignItems: I = "stretch",
   justifyContent: Q = "start",
-  wrap: g = "nowrap",
-  gap: C = 0,
+  wrap: C = "nowrap",
+  gap: g = 0,
   className: h = "",
   children: B,
   ...H
@@ -2733,13 +2733,13 @@ function m({
   return /* @__PURE__ */ i(
     A,
     {
-      className: x(
+      className: c(
         "flex",
         IE[E],
         EE[I],
         QE[Q],
-        gE[g],
-        `gap-${C}`,
+        gE[C],
+        `gap-${g}`,
         h
       ),
       ...H,
@@ -2820,13 +2820,13 @@ function BE({
   weight: E,
   className: I,
   children: Q,
-  ...g
+  ...C
 }) {
   return TA(
     A || "p",
     {
-      className: x(CE({ type: g.variant, weight: E }), I),
-      ...g
+      className: c(CE({ type: C.variant, weight: E }), I),
+      ...C
     },
     Q
   );
@@ -2838,12 +2838,12 @@ const K = (A) => {
   return E;
 }, hE = K("Title1"), pE = K("Title2"), iE = K("Title3"), mE = K("Body1"), bE = K("Body2"), DE = K("Body3"), yA = K("Caption1");
 function TE({ id: A, mode: E, ...I }) {
-  const Q = iA(), g = A || Q;
+  const Q = iA(), C = A || Q;
   return /* @__PURE__ */ G(
     "label",
     {
       className: "focus-within:bg-primary-50 block w-full cursor-pointer rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 transition-colors hover:bg-gray-100 md:py-3.5",
-      htmlFor: g,
+      htmlFor: C,
       children: [
         /* @__PURE__ */ G(m, { alignItems: "center", children: [
           /* @__PURE__ */ i(M, { name: "file", size: 25, color: "gray" }),
@@ -2852,7 +2852,7 @@ function TE({ id: A, mode: E, ...I }) {
         /* @__PURE__ */ i(
           "input",
           {
-            id: g,
+            id: C,
             name: "uploadFile",
             type: "file",
             multiple: E === "multiple",
@@ -2876,14 +2876,14 @@ function wE({
   color: E = "gray",
   size: I,
   className: Q,
-  ...g
+  ...C
 }) {
   return /* @__PURE__ */ i(
     "button",
     {
       type: "button",
-      className: x("cursor-pointer rounded-md p-1 transition", HE[E], Q),
-      ...g,
+      className: c("cursor-pointer rounded-md p-1 transition", HE[E], Q),
+      ...C,
       children: /* @__PURE__ */ i(M, { name: A, color: E, size: I })
     }
   );
@@ -2918,8 +2918,8 @@ const z = {
   exit: { opacity: 0 },
   transition: { duration: 0.3 }
 };
-function vE({ isOpen: A, closeModal: E, children: I }) {
-  const Q = (g) => {
+function vE({ isOpen: A, closeModal: E, children: I, className: Q }) {
+  const C = (g) => {
     g.target instanceof HTMLElement && g.target === g.currentTarget && E && E();
   };
   return /* @__PURE__ */ i(wA, { isOpen: A, children: /* @__PURE__ */ G(
@@ -2929,9 +2929,9 @@ function vE({ isOpen: A, closeModal: E, children: I }) {
       animate: z.animate,
       exit: z.exit,
       transition: z.transition,
-      className: "fixed inset-0 z-30 flex w-full items-center justify-center",
+      className: c("fixed inset-0 z-30 flex w-full items-center justify-center", Q),
       children: [
-        /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-black/50", onClick: Q }),
+        /* @__PURE__ */ i("div", { className: "absolute inset-0 bg-black/50", onClick: C }),
         /* @__PURE__ */ i(oE, { children: I })
       ]
     }
@@ -2978,7 +2978,7 @@ function eE({ className: A, ...E }) {
     {
       role: "navigation",
       "aria-label": "pagination",
-      className: x("flex cursor-pointer items-center justify-center gap-1", A),
+      className: c("flex cursor-pointer items-center justify-center gap-1", A),
       ...E
     }
   );
@@ -2994,9 +2994,9 @@ function RE({ page: A, isActive: E, onClick: I }) {
   );
 }
 function XE({ currentPage: A, totalPages: E, onPageChange: I, className: Q = "" }) {
-  const g = () => {
+  const C = () => {
     A > 1 && I(A - 1);
-  }, C = () => {
+  }, g = () => {
     A < E && I(A + 1);
   };
   return /* @__PURE__ */ G(eE, { className: Q, children: [
@@ -3006,7 +3006,7 @@ function XE({ currentPage: A, totalPages: E, onPageChange: I, className: Q = ""
         name: "arrowLeft",
         size: 35,
         className: "size-9 rounded-md px-2 py-1 hover:bg-gray-100",
-        onClickCapture: g
+        onClickCapture: C
       }
     ),
     Array.from({ length: E }, (h, B) => /* @__PURE__ */ i(
@@ -3024,7 +3024,7 @@ function XE({ currentPage: A, totalPages: E, onPageChange: I, className: Q = ""
         name: "arrowRight",
         size: 35,
         className: "size-9 rounded-md px-2 py-1 hover:bg-gray-100",
-        onClickCapture: C
+        onClickCapture: g
       }
     )
   ] });
@@ -3048,18 +3048,18 @@ const LA = q(null), pA = () => {
   }
 );
 function mA({ name: A, size: E, className: I }) {
-  const { onSelect: Q, size: g, selected: C } = pA();
+  const { onSelect: Q, size: C, selected: g } = pA();
   return /* @__PURE__ */ i(
     "div",
     {
       role: "option",
       tabIndex: 0,
-      "aria-selected": C === A,
+      "aria-selected": g === A,
       onClick: () => Q(A),
       onKeyDown: (h) => {
         (h.key === "Enter" || h.key === " ") && (h.preventDefault(), Q(A));
       },
-      className: x(kE({ size: E || g }), I),
+      className: c(kE({ size: E || C }), I),
       children: A
     }
   );
@@ -3083,7 +3083,7 @@ const tE = _(
 );
 function oA({ children: A, size: E }) {
   const { size: I } = pA();
-  return /* @__PURE__ */ i("div", { className: x(tE({ size: E || I })), children: A });
+  return /* @__PURE__ */ i("div", { className: c(tE({ size: E || I })), children: A });
 }
 const YE = {
   md: "px-3 py-1 text-sm w-fit min-w-24",
@@ -3094,14 +3094,14 @@ function eA({ selected: A, onClick: E, isOpen: I, size: Q = "lg" }) {
     "div",
     {
       onClick: E,
-      className: x(
+      className: c(
         YE[Q],
         "flex cursor-pointer items-center rounded-lg border border-gray-200 bg-white text-start font-semibold text-gray-400"
       ),
       children: /* @__PURE__ */ G(
         "button",
         {
-          className: x(
+          className: c(
             "flex w-full items-center justify-between rounded-lg align-middle hover:rounded-lg",
             I && "hover:rounded-b-none"
           ),
@@ -3111,7 +3111,7 @@ function eA({ selected: A, onClick: E, isOpen: I, size: Q = "lg" }) {
               M,
               {
                 name: "arrowDown",
-                className: x(
+                className: c(
                   "transform transition-transform duration-300",
                   I && "rotate-180",
                   Q === "md" && "w-5"
@@ -3125,8 +3125,8 @@ function eA({ selected: A, onClick: E, isOpen: I, size: Q = "lg" }) {
   );
 }
 function bA({ value: A, onChange: E, size: I = "lg", children: Q }) {
-  const [g, C] = j(!1), h = (B) => {
-    C(!1), E == null || E(B);
+  const [C, g] = j(!1), h = (B) => {
+    g(!1), E == null || E(B);
   };
   return /* @__PURE__ */ i(
     LA.Provider,
@@ -3141,12 +3141,12 @@ function bA({ value: A, onChange: E, size: I = "lg", children: Q }) {
           eA,
           {
             selected: A,
-            onClick: () => C(!g),
+            onClick: () => g(!C),
             size: I,
-            isOpen: g
+            isOpen: C
           }
         ),
-        g && /* @__PURE__ */ i(oA, { children: Q })
+        C && /* @__PURE__ */ i(oA, { children: Q })
       ] })
     }
   );
@@ -3163,7 +3163,7 @@ Object.assign(bA, {
   Group: sE
 });
 function ZE({ className: A, ...E }) {
-  return /* @__PURE__ */ i("div", { className: x("w-full animate-pulse rounded-md bg-gray-200", A), ...E });
+  return /* @__PURE__ */ i("div", { className: c("w-full animate-pulse rounded-md bg-gray-200", A), ...E });
 }
 function qE({ color: A = "primary", ...E }) {
   return /* @__PURE__ */ i(
@@ -3181,16 +3181,16 @@ function _E({ children: A, defaultIndex: E = 0, ...I }) {
   const Q = WA(
     () => vA.toArray(A).filter((h) => VA(h)).map((h) => h.props.label),
     [A]
-  ), [g, C] = j(Q[E]);
-  return /* @__PURE__ */ i(cE.Provider, { value: { activeLabel: g }, children: /* @__PURE__ */ G("div", { ...I, children: [
+  ), [C, g] = j(Q[E]);
+  return /* @__PURE__ */ i(cE.Provider, { value: { activeLabel: C }, children: /* @__PURE__ */ G("div", { ...I, children: [
     /* @__PURE__ */ i("nav", { className: "flex w-full", children: Q.map((h) => /* @__PURE__ */ G(
       d.button,
       {
-        className: `relative grow transform p-3 font-semibold ${g === h ? "text-primary-300 hover:bg-primary-50" : "text-gray-500 hover:bg-gray-50"} md:p-4 md:text-xl`,
-        onClick: () => C(h),
+        className: `relative grow transform p-3 font-semibold ${C === h ? "text-primary-300 hover:bg-primary-50" : "text-gray-500 hover:bg-gray-50"} md:p-4 md:text-xl`,
+        onClick: () => g(h),
         children: [
           h,
-          h === g && /* @__PURE__ */ i(
+          h === C && /* @__PURE__ */ i(
             d.div,
             {
               className: "bg-primary-300 absolute right-0 -bottom-0.5 left-0 h-0.5",
@@ -3214,26 +3214,26 @@ function $E({
   variant: E = "gray",
   rows: I = 3,
   showCounter: Q = !1,
-  className: g,
-  ...C
+  className: C,
+  ...g
 }) {
   return /* @__PURE__ */ G(m, { dir: "col", gap: 2, children: [
     /* @__PURE__ */ i(
       "textarea",
       {
         rows: I,
-        className: x(
+        className: c(
           "focus:border-primary-100 w-full resize-none rounded-xl border-none px-4 py-3 text-gray-900 outline-1 outline-gray-200 transition-colors placeholder:text-gray-400 focus:border-1",
           rE[E],
-          g
+          C
         ),
-        ...C
+        ...g
       }
     ),
-    Q && C.maxLength && /* @__PURE__ */ G(yA, { weight: "normal", className: "text-right text-gray-500", children: [
+    Q && g.maxLength && /* @__PURE__ */ G(yA, { weight: "normal", className: "text-right text-gray-500", children: [
       A.length ?? 0,
       "/",
-      C.maxLength
+      g.maxLength
     ] })
   ] });
 }
@@ -3330,16 +3330,16 @@ const xE = {
     text: "text-white"
   }
 }, PE = () => {
-  const [A, E] = j(!1), [I, Q] = j(null), g = CA(null), C = () => E(!0), h = () => E(!1);
+  const [A, E] = j(!1), [I, Q] = j(null), C = CA(null), g = () => E(!0), h = () => E(!1);
   return Z(() => {
-    if (g.current && A) {
-      const B = g.current.getBoundingClientRect();
+    if (C.current && A) {
+      const B = C.current.getBoundingClientRect();
       Q({ top: B.top, left: B.left + B.width / 2 });
     }
   }, [A]), {
     open: A,
-    ref: g,
-    show: C,
+    ref: C,
+    show: g,
     hide: h,
     position: I
   };
@@ -3350,7 +3350,7 @@ function AQ({
   animationMode: I = "SPRING",
   children: Q
 }) {
-  const g = iA(), { open: C, ref: h, show: B, hide: H, position: w } = PE(), R = GE[E], k = xE[I];
+  const C = iA(), { open: g, ref: h, show: B, hide: H, position: w } = PE(), R = GE[E], k = xE[I];
   return /* @__PURE__ */ G(
     "div",
     {
@@ -3360,20 +3360,20 @@ function AQ({
       onMouseLeave: H,
       onFocus: B,
       onBlur: H,
-      onClick: () => C ? H() : B(),
-      "aria-describedby": C ? g : void 0,
+      onClick: () => g ? H() : B(),
+      "aria-describedby": g ? C : void 0,
       children: [
         Q,
-        /* @__PURE__ */ i(wA, { isOpen: C, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i(wA, { isOpen: g, children: /* @__PURE__ */ i(
           d.div,
           {
-            id: g,
+            id: C,
             role: "tooltip",
             "aria-live": "polite",
             initial: k.initial,
             animate: k.animate,
             exit: k.exit,
-            className: x(
+            className: c(
               "fixed -translate-x-1/2 -translate-y-full rounded px-2 py-1 whitespace-nowrap shadow-lg",
               R.bg
             ),
@@ -3432,7 +3432,7 @@ export {
   pE as Title2,
   iE as Title3,
   AQ as Tooltip,
-  x as cn,
+  c as cn,
   JE as colorNames,
   U as colors,
   fE as iconNames,