shekel-fe-shared-lib 1.0.9 → 1.0.10

package/dist/index.mjs

@@ -5,11 +5,11 @@ const ee = ({
   size: a = "md",
   fullWidth: n = !1,
   icon: t,
-  iconPosition: c = "left",
+  iconPosition: i = "left",
   loading: u = !1,
   hoverColor: $,
-  bgColor: i,
-  textColor: o,
+  bgColor: d,
+  textColor: l,
   borderColor: m,
   hoverBgColor: g,
   hoverTextColor: x,
@@ -17,10 +17,10 @@ const ee = ({
   style: h,
   className: r = "",
   children: w,
-  disabled: d,
+  disabled: c,
   ...y
 }) => {
-  const l = "inline-flex items-center justify-center font-normal transition-all duration-300 ease-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95", f = {
+  const o = "inline-flex items-center justify-center font-normal transition-all duration-300 ease-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95", f = {
     primary: "bg-[#EC615B] hover:bg-[#D4554F] text-white focus:ring-[#EC615B] shadow-sm hover:shadow-md",
     outlined: "border border-gray-300 bg-white hover:bg-gray-50 text-[#181918] focus:ring-gray-300",
     ghost: "bg-gray-100 hover:bg-gray-200 text-[#181918] focus:ring-gray-300",
@@ -38,8 +38,8 @@ const ee = ({
     full: "rounded-full"
   }, B = n ? "w-full" : "";
   let k = f[s];
-  (i || o || m) && (k = "");
-  const T = `${l} ${k} ${N[a]} ${p[b]} ${B} ${r}`, P = () => u ? /* @__PURE__ */ C(
+  (d || l || m) && (k = "");
+  const T = `${o} ${k} ${N[a]} ${p[b]} ${B} ${r}`, P = () => u ? /* @__PURE__ */ C(
     "svg",
     {
       className: "animate-spin h-4 w-4",
@@ -71,23 +71,23 @@ const ee = ({
   ) : t, L = {
     ...h
   };
-  return i && (L.backgroundColor = i), o && (L.color = o), m && (L.borderColor = m), /* @__PURE__ */ C(
+  return d && (L.backgroundColor = d), l && (L.color = l), m && (L.borderColor = m), /* @__PURE__ */ C(
     "button",
     {
       className: T,
-      disabled: d || u,
+      disabled: c || u,
       style: L,
       onMouseEnter: (M) => {
-        !d && !u && (g ? M.currentTarget.style.backgroundColor = g : $ && (M.currentTarget.style.backgroundColor = $), x && (M.currentTarget.style.color = x));
+        !c && !u && (g ? M.currentTarget.style.backgroundColor = g : $ && (M.currentTarget.style.backgroundColor = $), x && (M.currentTarget.style.color = x));
       },
       onMouseLeave: (M) => {
-        !d && !u && ((i || g || $) && (M.currentTarget.style.backgroundColor = i || ""), (o || x) && (M.currentTarget.style.color = o || ""));
+        !c && !u && ((d || g || $) && (M.currentTarget.style.backgroundColor = d || ""), (l || x) && (M.currentTarget.style.color = l || ""));
       },
       ...y,
       children: [
-        c === "left" && P(),
+        i === "left" && P(),
         w,
-        c === "right" && P()
+        i === "right" && P()
       ]
     }
   );
@@ -96,11 +96,11 @@ const ee = ({
   value: a,
   selected: n = !1,
   onClick: t,
-  className: c = "",
+  className: i = "",
   size: u = "responsive",
   rounded: $ = "md",
-  bgColor: i,
-  borderColor: o,
+  bgColor: d,
+  borderColor: l,
   labelColor: m,
   valueColor: g,
   selectedBgColor: x,
@@ -109,7 +109,7 @@ const ee = ({
   selectedValueColor: r,
   style: w
 }) => {
-  const d = () => {
+  const c = () => {
     switch (u) {
       case "sm":
         return "p-2 sm:p-3";
@@ -139,7 +139,7 @@ const ee = ({
       default:
         return "rounded-md";
     }
-  }, l = () => {
+  }, o = () => {
     switch (u) {
       case "sm":
         return "text-xs sm:text-xs";
@@ -165,16 +165,16 @@ const ee = ({
       default:
         return "text-3xl";
     }
-  }, P = `${`stat-card relative flex flex-col ${d()} ${y()} border transition-all duration-500 ease-in-out cursor-pointer overflow-hidden`} ${n ? "border-[#181918] bg-[#F4F4F4] shadow-sm scale-[1.02]" : `${o ? "" : "border-gray-200"} ${i ? "" : "bg-white"} ${!i && !o ? "hover:border-gray-300 hover:shadow-sm" : ""}`} ${c}`, L = {
+  }, P = `${`stat-card relative flex flex-col ${c()} ${y()} border transition-all duration-500 ease-in-out cursor-pointer overflow-hidden`} ${n ? "border-[#181918] bg-[#F4F4F4] shadow-sm scale-[1.02]" : `${l ? "" : "border-gray-200"} ${d ? "" : "bg-white"} ${!d && !l ? "hover:border-gray-300 hover:shadow-sm" : ""}`} ${i}`, L = {
     ...w
   };
-  return n && x ? L.backgroundColor = x : !n && i && (L.backgroundColor = i), n && b ? L.borderColor = b : !n && o && (L.borderColor = o), /* @__PURE__ */ C("div", { className: P, onClick: t, style: L, children: [
+  return n && x ? L.backgroundColor = x : !n && d && (L.backgroundColor = d), n && b ? L.borderColor = b : !n && l && (L.borderColor = l), /* @__PURE__ */ C("div", { className: P, onClick: t, style: L, children: [
     n && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-[#EC615B]/5 to-transparent animate-slide-in pointer-events-none" }),
     /* @__PURE__ */ C("div", { className: "relative z-10 transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]", children: [
       /* @__PURE__ */ e(
         "span",
         {
-          className: `${l()} font-normal mb-2 block transition-colors duration-500 ${n ? "text-gray-700" : "text-gray-600"}`,
+          className: `${o()} font-normal mb-2 block transition-colors duration-500 ${n ? "text-gray-700" : "text-gray-600"}`,
           style: n && h ? { color: h } : !n && m ? { color: m } : void 0,
           children: s
         }
@@ -194,11 +194,11 @@ const ee = ({
   iconPosition: a = "left",
   size: n = "md",
   fullWidth: t = !1,
-  className: c = "",
+  className: i = "",
   onIconClick: u,
   bgColor: $,
-  borderColor: i,
-  focusBorderColor: o,
+  borderColor: d,
+  focusBorderColor: l,
   iconColor: m,
   textColor: g,
   placeholderColor: x,
@@ -206,12 +206,12 @@ const ee = ({
   style: h,
   ...r
 }) => {
-  const w = "relative inline-flex items-center", d = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", y = {
+  const w = "relative inline-flex items-center", c = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", y = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
     lg: "px-5 py-3 text-lg",
     responsive: "px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-3 text-sm sm:text-base md:text-lg"
-  }, l = {
+  }, o = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
     lg: "w-6 h-6",
@@ -224,13 +224,13 @@ const ee = ({
     full: "rounded-full"
   }, N = a === "left" ? n === "sm" ? "pl-9" : n === "md" ? "pl-10" : n === "lg" ? "pl-12" : "pl-9 sm:pl-10 md:pl-12" : n === "sm" ? "pr-9" : n === "md" ? "pr-10" : n === "lg" ? "pr-12" : "pr-9 sm:pr-10 md:pr-12", p = t ? "w-full" : "", B = {
     backgroundColor: $,
-    borderColor: i || "#D1D5DB",
+    borderColor: d || "#D1D5DB",
     color: g,
     ...h
-  }, k = x ? "" : "placeholder:text-gray-400", T = i ? "" : "border-gray-300", P = g ? "" : "text-gray-900", L = o ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", M = `${d} ${y[n]} ${s ? N : ""} ${p} ${f[b]} ${T} ${P} ${L} ${k} ${c}`, F = a === "left" ? "left-3" : "right-3", j = m || "text-gray-400", S = m ? "" : "hover:text-gray-600", E = /* @__PURE__ */ e(
+  }, k = x ? "" : "placeholder:text-gray-400", T = d ? "" : "border-gray-300", P = g ? "" : "text-gray-900", L = l ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", M = `${c} ${!i.includes("px-") && !i.includes("py-") ? y[n] : ""} ${s ? N : ""} ${p} ${i.includes("rounded") ? "" : f[b]} ${i.includes("border-") ? "" : T} ${P} ${L} ${k} ${i}`, F = a === "left" ? "left-3" : "right-3", j = m || "text-gray-400", S = m ? "" : "hover:text-gray-600", E = /* @__PURE__ */ e(
     "svg",
     {
-      className: `${l[n]} ${j}`,
+      className: `${o[n]} ${j}`,
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -262,8 +262,8 @@ const ee = ({
         className: M,
         style: {
           ...B,
-          ...o && {
-            "--focus-border-color": o
+          ...l && {
+            "--focus-border-color": l
           },
           ...x && {
             "--placeholder-color": x
@@ -278,11 +278,11 @@ const ee = ({
   shadow: a = "sm",
   hover: n = !1,
   bordered: t = !0,
-  rounded: c = "lg",
+  rounded: i = "lg",
   className: u = "",
   bgColor: $,
-  borderColor: i,
-  style: o,
+  borderColor: d,
+  style: l,
   children: m,
   ...g
 }) => {
@@ -303,21 +303,21 @@ const ee = ({
     md: "rounded-md",
     lg: "rounded-lg",
     xl: "rounded-xl"
-  }, w = t ? `border ${i || "border-gray-200"}` : "", d = n ? "cursor-pointer" : "", l = `${x} ${$ ? "" : "bg-white"} ${b[s]} ${h[a]} ${r[c]} ${w} ${d} ${u}`, f = {
+  }, w = t ? `border ${d || "border-gray-200"}` : "", c = n ? "cursor-pointer" : "", o = `${x} ${$ ? "" : "bg-white"} ${b[s]} ${h[a]} ${r[i]} ${w} ${c} ${u}`, f = {
     ...$ && { backgroundColor: $ },
-    ...o
+    ...l
   };
-  return /* @__PURE__ */ e("div", { className: l, style: f, ...g, children: /* @__PURE__ */ e("div", { className: n ? "transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]" : "", children: m }) });
+  return /* @__PURE__ */ e("div", { className: o, style: f, ...g, children: /* @__PURE__ */ e("div", { className: n ? "transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]" : "", children: m }) });
 }, ne = ({
   items: s,
   trigger: a = "click",
   placement: n = "bottomLeft",
   children: t,
-  className: c = "",
+  className: i = "",
   overlayClassName: u = "",
   disabled: $ = !1,
-  size: i = "md",
-  menuBgColor: o,
+  size: d = "md",
+  menuBgColor: l,
   menuItemHoverColor: m,
   dangerColor: g,
   borderColor: x,
@@ -332,11 +332,11 @@ const ee = ({
       document.removeEventListener("mousedown", z);
     };
   }, [h]);
-  const d = () => {
+  const c = () => {
     !$ && a === "click" && r(!h);
   }, y = () => {
     !$ && a === "hover" && r(!0);
-  }, l = () => {
+  }, o = () => {
     !$ && a === "hover" && r(!1);
   }, f = (z) => {
     !z.disabled && z.onClick && z.onClick(), r(!1);
@@ -360,15 +360,15 @@ const ee = ({
     "div",
     {
       ref: w,
-      className: `relative inline-block ${c}`,
+      className: `relative inline-block ${i}`,
       onMouseEnter: y,
-      onMouseLeave: l,
+      onMouseLeave: o,
       style: b,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            onClick: d,
+            onClick: c,
             className: `inline-flex ${$ ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
             children: t
           }
@@ -376,12 +376,12 @@ const ee = ({
         h && !$ && /* @__PURE__ */ e(
           "div",
           {
-            className: `absolute ${N[n]} ${p} z-50 ${B[i]} ${u}`,
+            className: `absolute ${N[n]} ${p} z-50 ${B[d]} ${u}`,
             children: /* @__PURE__ */ e(
               "div",
               {
                 className: `dropdown-menu rounded-lg shadow-lg border py-1 overflow-hidden ${E}`,
-                style: { backgroundColor: o || "#ffffff" },
+                style: { backgroundColor: l || "#ffffff" },
                 children: s.map((z) => {
                   let I = {};
                   return z.disabled || (z.danger ? I = {
@@ -394,7 +394,7 @@ const ee = ({
                       className: `
                     dropdown-menu-item
                     flex items-center cursor-pointer transition-all duration-200 ease-out
-                    ${k[i]}
+                    ${!u.includes("px-") && !u.includes("py-") ? k[d] : ""}
                     ${z.disabled ? "opacity-50 cursor-not-allowed" : F}
                     ${z.danger ? g ? "" : L : "text-gray-700"}
                   `,
@@ -419,11 +419,11 @@ const ee = ({
   value: a,
   defaultValue: n,
   placeholder: t = "Select an option",
-  onChange: c,
+  onChange: i,
   disabled: u = !1,
   size: $ = "md",
-  fullWidth: i = !1,
-  className: o = "",
+  fullWidth: d = !1,
+  className: l = "",
   allowClear: m = !1,
   showSearch: g = !1,
   searchPlaceholder: x = "Search...",
@@ -431,9 +431,9 @@ const ee = ({
   borderColor: h,
   focusBorderColor: r = "#EC615B",
   selectedBgColor: w,
-  selectedTextColor: d,
+  selectedTextColor: c,
   hoverBgColor: y,
-  rounded: l = "lg",
+  rounded: o = "lg",
   style: f
 }) => {
   const [N, p] = R(!1), [B, k] = R(
@@ -448,9 +448,9 @@ const ee = ({
     };
   }, [N, g]);
   const j = (v) => {
-    a === void 0 && k(v), c == null || c(v), p(!1), P("");
+    a === void 0 && k(v), i == null || i(v), p(!1), P("");
   }, S = (v) => {
-    v.stopPropagation(), a === void 0 && k(void 0), c == null || c("");
+    v.stopPropagation(), a === void 0 && k(void 0), i == null || i("");
   }, E = s.find((v) => v.value === F), z = g ? s.filter(
     (v) => v.label.toLowerCase().includes(T.toLowerCase())
   ) : s, I = {
@@ -464,12 +464,12 @@ const ee = ({
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }, W = i ? "w-full" : "min-w-[200px]", D = () => {
+  }, W = d ? "w-full" : "min-w-[200px]", D = () => {
     const v = {};
     return b && (v.backgroundColor = b), h && (v.borderColor = h), v;
   }, H = () => {
     const v = {};
-    return w && (v.backgroundColor = w), d && (v.color = d), v;
+    return w && (v.backgroundColor = w), c && (v.color = c), v;
   }, Q = /* @__PURE__ */ e(
     "svg",
     {
@@ -480,7 +480,7 @@ const ee = ({
       children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
     }
   ), q = /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
-  return /* @__PURE__ */ C("div", { ref: L, className: `relative inline-block ${W} ${o}`, style: f, children: [
+  return /* @__PURE__ */ C("div", { ref: L, className: `relative inline-block ${W}`, style: f, children: [
     /* @__PURE__ */ C(
       "div",
       {
@@ -489,10 +489,11 @@ const ee = ({
           select-trigger
           flex items-center justify-between gap-2
           border transition-all duration-200 ease-out
-          ${I[$]}
-          ${A[l]}
+          ${!l.includes("px-") && !l.includes("py-") && !l.includes("h-") ? I[$] : ""}
+          ${l.includes("rounded") ? "" : A[o]}
           ${u ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
           ${N ? "ring-2 ring-opacity-20" : ""}
+          ${l}
         `,
         style: {
           ...D(),
@@ -528,7 +529,7 @@ const ee = ({
         ]
       }
     ),
-    N && !u && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 dropdown-slide-down", children: /* @__PURE__ */ C("div", { className: `select-dropdown bg-white shadow-lg border border-gray-200 py-1 max-h-[300px] overflow-auto ${A[l]}`, children: [
+    N && !u && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 dropdown-slide-down", children: /* @__PURE__ */ C("div", { className: `select-dropdown bg-white shadow-lg border border-gray-200 py-1 max-h-[300px] overflow-auto ${A[o]}`, children: [
       g && /* @__PURE__ */ e("div", { className: "px-2 py-2 border-b border-gray-200", children: /* @__PURE__ */ e(
         "input",
         {
@@ -557,7 +558,7 @@ const ee = ({
           style: {
             ...v.value === F ? H() : {},
             backgroundColor: v.value === F ? w || "#FCEAE9" : void 0,
-            color: v.value === F ? d || "#EC615B" : "#181918",
+            color: v.value === F ? c || "#EC615B" : "#181918",
             fontWeight: v.value === F ? "medium" : void 0
           },
           onMouseEnter: (O) => {
@@ -577,11 +578,11 @@ const ee = ({
   dataSource: a,
   rowKey: n = "id",
   pagination: t,
-  loading: c = !1,
+  loading: i = !1,
   onRow: u,
   className: $ = "",
-  bordered: i = !1,
-  striped: o = !1,
+  bordered: d = !1,
+  striped: l = !1,
   size: m = "md",
   headerBgColor: g,
   headerTextColor: x,
@@ -589,9 +590,9 @@ const ee = ({
   borderColor: h,
   stripedRowColor: r,
   rounded: w = "md",
-  style: d
+  style: c
 }) => {
-  const [y, l] = R(
+  const [y, o] = R(
     t && typeof t == "object" && t.current || 1
   ), [f, N] = R(
     t && typeof t == "object" && t.pageSize || 10
@@ -632,17 +633,17 @@ const ee = ({
     xl: "rounded-xl",
     "2xl": "rounded-2xl"
   }, k = p[m], T = B[w], P = (S, E) => typeof n == "function" ? n(S) : S[n] || String(E), L = (S, E) => E ? E.split(".").reduce((z, I) => z == null ? void 0 : z[I], S) : S, M = t === !1 ? a : a.slice((y - 1) * f, y * f), F = (S) => {
-    l(S), t && typeof t == "object" && t.onChange && t.onChange(S, f);
+    o(S), t && typeof t == "object" && t.onChange && t.onChange(S, f);
   }, j = (S) => {
-    N(S), l(1), t && typeof t == "object" && t.onChange && t.onChange(1, S);
+    N(S), o(1), t && typeof t == "object" && t.onChange && t.onChange(1, S);
   };
-  return /* @__PURE__ */ C("div", { className: "w-full", style: d, children: [
+  return /* @__PURE__ */ C("div", { className: "w-full", style: c, children: [
     /* @__PURE__ */ e(
       "div",
       {
         className: `overflow-x-auto ${T || "rounded-2xl"} border`,
         style: { borderColor: h || "#EEEEEE" },
-        children: /* @__PURE__ */ C("table", { className: `w-full ${i ? "border-collapse" : ""} ${$}`, children: [
+        children: /* @__PURE__ */ C("table", { className: `w-full ${d ? "border-collapse" : ""} ${$}`, children: [
           /* @__PURE__ */ e(
             "thead",
             {
@@ -653,7 +654,7 @@ const ee = ({
               children: /* @__PURE__ */ e("tr", { children: s.map((S, E) => /* @__PURE__ */ e(
                 "th",
                 {
-                  className: `${k.headerPadding} text-left ${k.headerFontSize} font-medium uppercase tracking-wider ${i && E !== s.length - 1 ? "border-r" : ""} ${S.align === "center" ? "text-center" : S.align === "right" ? "text-right" : ""}`,
+                  className: `${k.headerPadding} text-left ${k.headerFontSize} font-medium uppercase tracking-wider ${d && E !== s.length - 1 ? "border-r" : ""} ${S.align === "center" ? "text-center" : S.align === "right" ? "text-right" : ""}`,
                   style: {
                     width: S.width,
                     borderColor: h || "#EEEEEE",
@@ -670,7 +671,7 @@ const ee = ({
             {
               className: "bg-white divide-y",
               style: { borderColor: h || "#e5e5e5" },
-              children: c ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+              children: i ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
                 "td",
                 {
                   colSpan: s.length,
@@ -719,7 +720,7 @@ const ee = ({
                   children: "No data"
                 }
               ) }) : M.map((S, E) => {
-                const z = u ? u(S, E) : {}, I = o && E % 2 === 1 ? r || "#F5F6F7" : "transparent", A = b || "#f3f4f6";
+                const z = u ? u(S, E) : {}, I = l && E % 2 === 1 ? r || "#F5F6F7" : "transparent", A = b || "#f3f4f6";
                 return /* @__PURE__ */ e(
                   "tr",
                   {
@@ -728,7 +729,7 @@ const ee = ({
                       backgroundColor: I
                     },
                     onMouseEnter: (W) => {
-                      (b || !o || E % 2 === 0) && (W.currentTarget.style.backgroundColor = A);
+                      (b || !l || E % 2 === 0) && (W.currentTarget.style.backgroundColor = A);
                     },
                     onMouseLeave: (W) => {
                       W.currentTarget.style.backgroundColor = I;
@@ -739,7 +740,7 @@ const ee = ({
                       return /* @__PURE__ */ e(
                         "td",
                         {
-                          className: `${k.rowPadding} ${k.rowFontSize} text-gray-900 ${i && D !== s.length - 1 ? "border-r" : ""} ${W.align === "center" ? "text-center" : W.align === "right" ? "text-right" : ""}`,
+                          className: `${k.rowPadding} ${k.rowFontSize} text-gray-900 ${d && D !== s.length - 1 ? "border-r" : ""} ${W.align === "center" ? "text-center" : W.align === "right" ? "text-right" : ""}`,
                           style: {
                             borderColor: h || "#EEEEEE"
                           },
@@ -777,11 +778,11 @@ const ee = ({
   pageSize: a,
   total: n,
   onChange: t,
-  onPageSizeChange: c,
+  onPageSizeChange: i,
   showSizeChanger: u = !0,
   pageSizeOptions: $ = [10, 20, 50, 100],
-  showTotal: i = !0,
-  size: o = "md"
+  showTotal: d = !0,
+  size: l = "md"
 }) => {
   const m = Math.ceil(n / a), g = (s - 1) * a + 1, x = Math.min(s * a, n), b = {
     sm: {
@@ -802,23 +803,23 @@ const ee = ({
   }, h = () => {
     const r = [];
     if (m <= 7)
-      for (let d = 1; d <= m; d++)
-        r.push(d);
+      for (let c = 1; c <= m; c++)
+        r.push(c);
     else if (s <= 3) {
-      for (let d = 1; d <= 5; d++) r.push(d);
+      for (let c = 1; c <= 5; c++) r.push(c);
       r.push("..."), r.push(m);
     } else if (s >= m - 2) {
       r.push(1), r.push("...");
-      for (let d = m - 4; d <= m; d++) r.push(d);
+      for (let c = m - 4; c <= m; c++) r.push(c);
     } else {
       r.push(1), r.push("...");
-      for (let d = s - 1; d <= s + 1; d++) r.push(d);
+      for (let c = s - 1; c <= s + 1; c++) r.push(c);
       r.push("..."), r.push(m);
     }
     return r;
   };
   return /* @__PURE__ */ C("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[#EEEEEE] sm:px-6 mt-4", children: [
-    i && /* @__PURE__ */ C("div", { className: "text-sm text-[#181918]", children: [
+    d && /* @__PURE__ */ C("div", { className: "text-sm text-[#181918]", children: [
       g,
       "-",
       x,
@@ -831,7 +832,7 @@ const ee = ({
         G,
         {
           value: a.toString(),
-          onChange: (r) => c(Number(r)),
+          onChange: (r) => i(Number(r)),
           options: $.map((r) => ({
             value: r.toString(),
             label: `${r} / page`
@@ -846,8 +847,8 @@ const ee = ({
           {
             onClick: () => t(s - 1),
             disabled: s === 1,
-            className: `relative inline-flex items-center justify-center rounded-md ${b[o].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
-            children: /* @__PURE__ */ e("svg", { className: b[o].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
+            className: `relative inline-flex items-center justify-center rounded-md ${b[l].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
+            children: /* @__PURE__ */ e("svg", { className: b[l].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -861,7 +862,7 @@ const ee = ({
         h().map((r, w) => r === "..." ? /* @__PURE__ */ e(
           "span",
           {
-            className: `relative inline-flex items-center justify-center ${b[o].button} font-normal text-[#181918]`,
+            className: `relative inline-flex items-center justify-center ${b[l].button} font-normal text-[#181918]`,
             children: "..."
           },
           `ellipsis-${w}`
@@ -869,7 +870,7 @@ const ee = ({
           "button",
           {
             onClick: () => t(r),
-            className: `relative inline-flex items-center justify-center rounded-md ${b[o].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${s === r ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
+            className: `relative inline-flex items-center justify-center rounded-md ${b[l].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${s === r ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
             children: r
           },
           r
@@ -879,8 +880,8 @@ const ee = ({
           {
             onClick: () => t(s + 1),
             disabled: s === m,
-            className: `relative inline-flex items-center justify-center rounded-md ${b[o].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
-            children: /* @__PURE__ */ e("svg", { className: b[o].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
+            className: `relative inline-flex items-center justify-center rounded-md ${b[l].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
+            children: /* @__PURE__ */ e("svg", { className: b[l].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -899,11 +900,11 @@ const ee = ({
   description: a,
   searchPlaceholder: n = "Search...",
   onSearch: t,
-  actions: c,
+  actions: i,
   filters: u,
   className: $ = "",
-  size: i = "responsive",
-  titleColor: o,
+  size: d = "responsive",
+  titleColor: l,
   descriptionColor: m,
   searchBgColor: g = "white",
   searchBorderColor: x = "#d1d5db",
@@ -966,7 +967,7 @@ const ee = ({
       maxWidth: "max-w-sm md:max-w-md lg:max-w-lg",
       descriptionMargin: "mt-0.5 sm:mt-1 md:mt-2"
     }
-  }[i], f = {
+  }[d], f = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
@@ -987,7 +988,7 @@ const ee = ({
             "h2",
             {
               className: `${y.titleSize} ${y.titleWeight}`,
-              style: { color: o || "#111827" },
+              style: { color: l || "#111827" },
               children: s
             }
           ),
@@ -1037,7 +1038,7 @@ const ee = ({
               }
             )
           ] }) }),
-          c && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: c })
+          i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: i })
         ] }),
         u && /* @__PURE__ */ e("div", { className: `flex flex-wrap items-center ${y.gap}`, children: u })
       ]
@@ -1055,11 +1056,11 @@ const ee = ({
   onClose: a,
   title: n,
   children: t,
-  footer: c,
+  footer: i,
   width: u,
   size: $ = "md",
-  closable: i = !0,
-  maskClosable: o = !0,
+  closable: d = !0,
+  maskClosable: l = !0,
   centered: m = !0,
   className: g = "",
   bgColor: x = "#ffffff",
@@ -1067,9 +1068,9 @@ const ee = ({
   overlayColor: h = "rgba(0, 0, 0, 0.5)",
   bodyClassName: r = "",
   headerClassName: w = "",
-  maxHeight: d = "70vh"
+  maxHeight: c = "70vh"
 }) => {
-  const [y, l] = R(!1), [f, N] = R(!1), p = u || X[$], k = {
+  const [y, o] = R(!1), [f, N] = R(!1), p = u || X[$], k = {
     width: typeof p == "number" ? `${p}px` : p,
     maxWidth: "90vw",
     backgroundColor: x
@@ -1080,24 +1081,24 @@ const ee = ({
   };
   if (V(() => {
     if (s)
-      l(!0), setTimeout(() => N(!0), 10), document.body.style.overflow = "hidden";
+      o(!0), setTimeout(() => N(!0), 10), document.body.style.overflow = "hidden";
     else {
       N(!1);
       const F = setTimeout(() => {
-        l(!1);
+        o(!1);
       }, 200);
       return document.body.style.overflow = "unset", () => clearTimeout(F);
     }
   }, [s]), V(() => {
     const F = (j) => {
-      j.key === "Escape" && i && s && a();
+      j.key === "Escape" && d && s && a();
     };
     return s && document.addEventListener("keydown", F), () => {
       document.removeEventListener("keydown", F);
     };
-  }, [s, a, i]), !y) return null;
+  }, [s, a, d]), !y) return null;
   const L = () => {
-    o && a();
+    l && a();
   }, M = (F) => {
     F.stopPropagation();
   };
@@ -1118,17 +1119,17 @@ const ee = ({
           "div",
           {
             className: `relative rounded-lg shadow-xl transition-all duration-200 ease-out overflow-y-auto ${f ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-4"} ${g}`,
-            style: { ...k, maxHeight: typeof d == "number" ? `${d}px` : d },
+            style: { ...k, maxHeight: typeof c == "number" ? `${c}px` : c },
             onClick: M,
             children: [
-              (n || i) && /* @__PURE__ */ C(
+              (n || d) && /* @__PURE__ */ C(
                 "div",
                 {
                   className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${w}`,
                   style: T,
                   children: [
                     n && /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900", children: n }),
-                    i && /* @__PURE__ */ e(
+                    d && /* @__PURE__ */ e(
                       "button",
                       {
                         onClick: a,
@@ -1163,7 +1164,7 @@ const ee = ({
                   children: t
                 }
               ),
-              c && /* @__PURE__ */ e("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-2", children: c })
+              i && /* @__PURE__ */ e("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-2", children: i })
             ]
           }
         ) })
@@ -1175,11 +1176,11 @@ const ee = ({
   variant: a = "default",
   size: n = "md",
   dot: t = !1,
-  icon: c,
+  icon: i,
   iconPosition: u = "left",
   className: $ = "",
-  bgColor: i,
-  textColor: o,
+  bgColor: d,
+  textColor: l,
   borderColor: m,
   rounded: g = "full",
   style: x
@@ -1208,7 +1209,7 @@ const ee = ({
     warning: "bg-yellow-600",
     danger: "bg-red-600",
     info: "bg-cyan-600"
-  }, d = {
+  }, c = {
     sm: "w-3 h-3",
     md: "w-3.5 h-3.5",
     lg: "w-4 h-4",
@@ -1219,22 +1220,22 @@ const ee = ({
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }, l = {
-    ...i && { backgroundColor: i },
-    ...o && { color: o },
+  }, o = {
+    ...d && { backgroundColor: d },
+    ...l && { color: l },
     ...m && { borderColor: m, borderWidth: "1px", borderStyle: "solid" },
     ...x
   };
   return /* @__PURE__ */ C(
     "span",
     {
-      className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${i ? "" : b[a]} ${h[n]} ${y[g]} ${$}`,
-      style: l,
+      className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${d ? "" : b[a]} ${h[n]} ${y[g]} ${$}`,
+      style: o,
       children: [
         t && /* @__PURE__ */ e("span", { className: `rounded-full ${r[n]} ${w[a]}` }),
-        c && u === "left" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${d[n]}`, children: c }),
+        i && u === "left" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${c[n]}`, children: i }),
         s,
-        c && u === "right" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${d[n]}`, children: c })
+        i && u === "right" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${c[n]}`, children: i })
       ]
     }
   );
@@ -1243,16 +1244,16 @@ const ee = ({
   current: a = 0,
   direction: n = "vertical",
   size: t = "md",
-  variant: c = "default",
+  variant: i = "default",
   className: u = "",
   style: $,
-  finishColor: i,
-  processColor: o,
+  finishColor: d,
+  processColor: l,
   waitColor: m,
   errorColor: g,
   lineColor: x
 }) => {
-  const b = (l, f) => f.status ? f.status : l < a ? "finish" : l === a ? "process" : "wait", h = {
+  const b = (o, f) => f.status ? f.status : o < a ? "finish" : o === a ? "process" : "wait", h = {
     sm: "w-6 h-6",
     md: "w-8 h-8",
     lg: "w-10 h-10",
@@ -1267,38 +1268,38 @@ const ee = ({
     md: "text-sm",
     lg: "text-base",
     responsive: "text-xs sm:text-xs md:text-sm lg:text-base"
-  }, d = (l, f) => f || (l === "finish" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+  }, c = (o, f) => f || (o === "finish" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
       d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
       clipRule: "evenodd"
     }
-  ) }) : l === "error" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+  ) }) : o === "error" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
       d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
       clipRule: "evenodd"
     }
-  ) }) : null), y = (l) => {
-    const f = c === "outline";
-    switch (l) {
+  ) }) : null), y = (o) => {
+    const f = i === "outline";
+    switch (o) {
       case "finish":
         return {
-          icon: f ? `bg-white text-white border ${i ? `border-[${i}]` : "border-green-500"}` : `${i ? `bg-[${i}]` : "bg-green-500"} text-white ${i ? `border-[${i}]` : "border-green-500"}`,
+          icon: f ? `bg-white text-white border ${d ? `border-[${d}]` : "border-green-500"}` : `${d ? `bg-[${d}]` : "bg-green-500"} text-white ${d ? `border-[${d}]` : "border-green-500"}`,
           title: "text-[#181918]",
           description: "text-gray-600",
           line: x ? `bg-[${x}]` : "bg-green-500",
-          iconColor: i
+          iconColor: d
         };
       case "process":
         return {
-          icon: f ? `bg-white text-white border ${o ? `border-[${o}]` : "border-[#EC615B]"}` : `${o ? `bg-[${o}]` : "bg-[#EC615B]"} text-white ${o ? `border-[${o}]` : "border-[#EC615B]"}`,
+          icon: f ? `bg-white text-white border ${l ? `border-[${l}]` : "border-[#EC615B]"}` : `${l ? `bg-[${l}]` : "bg-[#EC615B]"} text-white ${l ? `border-[${l}]` : "border-[#EC615B]"}`,
           title: "text-[#181918] font-semibold",
           description: "text-gray-700",
           line: x ? `bg-[${x}]` : "bg-gray-300",
-          iconColor: o
+          iconColor: l
         };
       case "error":
         return {
@@ -1318,8 +1319,8 @@ const ee = ({
         };
     }
   };
-  return n === "horizontal" ? /* @__PURE__ */ e("div", { className: `flex items-start ${u}`, style: $, children: s.map((l, f) => {
-    const N = b(f, l), p = y(N), B = f === s.length - 1, k = {};
+  return n === "horizontal" ? /* @__PURE__ */ e("div", { className: `flex items-start ${u}`, style: $, children: s.map((o, f) => {
+    const N = b(f, o), p = y(N), B = f === s.length - 1, k = {};
     return p.iconColor && (k.color = p.iconColor), /* @__PURE__ */ C("div", { className: "flex flex-1 items-start", children: [
       /* @__PURE__ */ C("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ e(
@@ -1327,7 +1328,7 @@ const ee = ({
           {
             className: `flex items-center justify-center ${h[t]} rounded-full border transition-all duration-300 ${p.icon}`,
             style: k,
-            children: d(N, l.icon)
+            children: c(N, o.icon)
           }
         ),
         /* @__PURE__ */ C("div", { className: "mt-2 text-center", children: [
@@ -1335,14 +1336,14 @@ const ee = ({
             "div",
             {
               className: `${r[t]} ${p.title} transition-colors duration-300`,
-              children: l.title
+              children: o.title
             }
           ),
-          l.description && /* @__PURE__ */ e(
+          o.description && /* @__PURE__ */ e(
             "div",
             {
               className: `${w[t]} ${p.description} mt-1 transition-colors duration-300`,
-              children: l.description
+              children: o.description
             }
           )
         ] })
@@ -1354,8 +1355,8 @@ const ee = ({
         }
       )
     ] }, f);
-  }) }) : /* @__PURE__ */ e("div", { className: `flex flex-col ${u}`, style: $, children: s.map((l, f) => {
-    const N = b(f, l), p = y(N), B = f === s.length - 1, k = {};
+  }) }) : /* @__PURE__ */ e("div", { className: `flex flex-col ${u}`, style: $, children: s.map((o, f) => {
+    const N = b(f, o), p = y(N), B = f === s.length - 1, k = {};
     return p.iconColor && (k.color = p.iconColor), /* @__PURE__ */ C("div", { className: "flex", children: [
       /* @__PURE__ */ C("div", { className: "flex flex-col items-center mr-4", children: [
         /* @__PURE__ */ e(
@@ -1363,7 +1364,7 @@ const ee = ({
           {
             className: `flex items-center justify-center ${h[t]} rounded-full border transition-all duration-300 ${p.icon}`,
             style: k,
-            children: d(N, l.icon)
+            children: c(N, o.icon)
           }
         ),
         !B && /* @__PURE__ */ e(
@@ -1379,14 +1380,14 @@ const ee = ({
           "div",
           {
             className: `${r[t]} ${p.title} transition-colors duration-300`,
-            children: l.title
+            children: o.title
           }
         ),
-        l.description && /* @__PURE__ */ e(
+        o.description && /* @__PURE__ */ e(
           "div",
           {
             className: `${w[t]} ${p.description} mt-1 transition-colors duration-300`,
-            children: l.description
+            children: o.description
           }
         )
       ] })
@@ -1397,11 +1398,11 @@ const ee = ({
   status: a = "normal",
   showInfo: n = !0,
   strokeColor: t,
-  strokeWidth: c,
+  strokeWidth: i,
   size: u = "md",
   className: $ = "",
-  format: i,
-  bgColor: o,
+  format: d,
+  bgColor: l,
   successColor: m,
   exceptionColor: g,
   trackColor: x,
@@ -1417,7 +1418,7 @@ const ee = ({
     md: "text-sm",
     lg: "text-base",
     responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
-  }, d = {
+  }, c = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
@@ -1431,11 +1432,11 @@ const ee = ({
       case "exception":
         return g || "bg-red-500";
       case "active":
-        return o || "bg-[#EC615B]";
+        return l || "bg-[#EC615B]";
       default:
-        return h === 100 ? m || "bg-green-500" : o || "bg-[#EC615B]";
+        return h === 100 ? m || "bg-green-500" : l || "bg-[#EC615B]";
     }
-  }, l = () => x || "bg-gray-200", f = () => a === "success" || h === 100 ? /* @__PURE__ */ e("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+  }, o = () => x || "bg-gray-200", f = () => a === "success" || h === 100 ? /* @__PURE__ */ e("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
@@ -1449,17 +1450,17 @@ const ee = ({
       d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
       clipRule: "evenodd"
     }
-  ) }) : null, N = () => i ? i(h) : `${Math.round(h)}%`, p = c ? `${c}px` : void 0;
+  ) }) : null, N = () => d ? d(h) : `${Math.round(h)}%`, p = i ? `${i}px` : void 0;
   return /* @__PURE__ */ C("div", { className: `flex items-center gap-2 ${$}`, children: [
     /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
       "div",
       {
-        className: `w-full overflow-hidden ${r[u]} ${d[b]} ${l()}`,
+        className: `w-full overflow-hidden ${r[u]} ${c[b]} ${o()}`,
         style: { height: p },
         children: /* @__PURE__ */ e(
           "div",
           {
-            className: `${y()} ${r[u]} ${d[b]} transition-all duration-300 ease-out ${a === "active" ? "progress-active" : ""}`,
+            className: `${y()} ${r[u]} ${c[b]} transition-all duration-300 ease-out ${a === "active" ? "progress-active" : ""}`,
             style: {
               width: `${h}%`,
               height: p
@@ -1475,11 +1476,11 @@ const ee = ({
   defaultChecked: a = !1,
   onChange: n,
   disabled: t = !1,
-  indeterminate: c = !1,
+  indeterminate: i = !1,
   size: u = "md",
   variant: $ = "filled",
-  className: i = "",
-  id: o,
+  className: d = "",
+  id: l,
   name: m,
   value: g,
   checkedColor: x = "#EC615B",
@@ -1487,10 +1488,10 @@ const ee = ({
   checkedBorderColor: h = "#EC615B",
   style: r
 }) => {
-  const [w, d] = R(a), y = s !== void 0, l = y ? s : w, f = (L) => {
+  const [w, c] = R(a), y = s !== void 0, o = y ? s : w, f = (L) => {
     if (t) return;
     const M = L.target.checked;
-    y || d(M), n == null || n(M);
+    y || c(M), n == null || n(M);
   }, N = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
@@ -1501,8 +1502,8 @@ const ee = ({
     md: "w-3.5 h-3.5",
     lg: "w-4 h-4",
     responsive: "w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 lg:w-4 lg:h-4"
-  }, B = $ === "filled", k = () => t ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : !l && !c ? "border-gray-300 bg-white hover:border-gray-400" : "", T = () => {
-    if (!t && !(!l && !c))
+  }, B = $ === "filled", k = () => t ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : !o && !i ? "border-gray-300 bg-white hover:border-gray-400" : "", T = () => {
+    if (!t && !(!o && !i))
       return B ? {
         borderColor: h,
         backgroundColor: x
@@ -1510,16 +1511,16 @@ const ee = ({
         borderColor: h,
         backgroundColor: b
       };
-  }, P = () => B && (l || c) ? "text-white" : "";
+  }, P = () => B && (o || i) ? "text-white" : "";
   return /* @__PURE__ */ C("div", { className: "inline-flex items-center", style: r, children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
-        id: o,
+        id: l,
         name: m,
         value: g,
-        checked: l,
+        checked: o,
         onChange: f,
         disabled: t,
         className: "sr-only"
@@ -1528,7 +1529,7 @@ const ee = ({
     /* @__PURE__ */ C(
       "label",
       {
-        htmlFor: o,
+        htmlFor: l,
         className: `
           relative flex items-center justify-center
           ${N[u]}
@@ -1537,11 +1538,11 @@ const ee = ({
           transition-all duration-200 ease-out
           cursor-pointer
           ${k()}
-          ${i}
+          ${d}
         `,
         style: T(),
         children: [
-          l && !c && /* @__PURE__ */ e(
+          o && !i && /* @__PURE__ */ e(
             "svg",
             {
               className: `${p[u]} ${P()}`,
@@ -1549,17 +1550,17 @@ const ee = ({
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               strokeWidth: 3,
-              style: !B && (l || c) ? { color: x } : void 0,
+              style: !B && (o || i) ? { color: x } : void 0,
               children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
             }
           ),
-          c && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             "svg",
             {
               className: `${p[u]} ${P()}`,
               fill: "currentColor",
               viewBox: "0 0 24 24",
-              style: !B && (l || c) ? { color: x } : void 0,
+              style: !B && (o || i) ? { color: x } : void 0,
               children: /* @__PURE__ */ e("rect", { x: "4", y: "11", width: "16", height: "2", rx: "1" })
             }
           )
@@ -1611,11 +1612,11 @@ const ee = ({
   onRemove: a,
   emptyMessage: n = "No items selected",
   className: t = "",
-  itemClassName: c = "",
+  itemClassName: i = "",
   maxHeight: u = "300px",
   size: $ = "md",
-  bgColor: i,
-  hoverBgColor: o,
+  bgColor: d,
+  hoverBgColor: l,
   textColor: m,
   sublabelColor: g,
   removeButtonColor: x,
@@ -1623,7 +1624,7 @@ const ee = ({
   rounded: h = "md",
   style: r
 }) => {
-  const w = Y($), d = Z(h), y = "#F4F4F4", l = "#EBEBEB", f = "#181918", N = "#999999", p = "#9CA3AF", B = "#EC615B", k = i || y, T = o || l, P = m || f, L = g || N, M = x || p, F = b || B;
+  const w = Y($), c = Z(h), y = "#F4F4F4", o = "#EBEBEB", f = "#181918", N = "#999999", p = "#9CA3AF", B = "#EC615B", k = d || y, T = l || o, P = m || f, L = g || N, M = x || p, F = b || B;
   return s.length === 0 ? /* @__PURE__ */ e(
     "div",
     {
@@ -1644,11 +1645,11 @@ const ee = ({
         {
           className: `
             group flex items-center justify-between
-            ${d}
+            ${c}
             transition-all duration-300 ease-out
             hover:shadow-sm
             animate-slide-in-item
-            ${c}
+            ${i}
           `,
           style: {
             backgroundColor: k,