shekel-fe-shared-lib 1.0.29 → 1.0.30

package/dist/index.mjs

@@ -121,10 +121,10 @@ const R1 = ({
   className: p = "",
   selected: d = !1,
   onClick: C,
-  size: m = "md",
+  size: h = "md",
   rounded: L = "2xl"
 }) => {
-  const y = m === "sm" ? "p-3" : m === "lg" ? "p-6" : "p-4", g = {
+  const y = h === "sm" ? "p-3" : h === "lg" ? "p-6" : "p-4", f = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
@@ -132,14 +132,14 @@ const R1 = ({
     xl: "rounded-xl",
     "2xl": "rounded-2xl",
     full: "rounded-full"
-  }[L] ?? "rounded-2xl", v = /* @__PURE__ */ u("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  }[L] ?? "rounded-2xl", w = /* @__PURE__ */ u("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ n("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
     /* @__PURE__ */ n("path", { d: "M3 10h18M7 14h4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
   ] });
   return /* @__PURE__ */ u(
     "div",
     {
-      className: `bg-white border flex flex-col justify-between transition-all duration-300 ease-in-out hover:border-gray-300 hover:-translate-y-1 cursor-pointer ${y} ${g} ${d ? "border-[#EC615B]" : "border-[#E6E6E6]"} ${p}`,
+      className: `bg-white border flex flex-col justify-between transition-all duration-300 ease-in-out hover:border-gray-300 hover:-translate-y-1 cursor-pointer ${y} ${f} ${d ? "border-[#EC615B]" : "border-[#E6E6E6]"} ${p}`,
       style: {
         width: typeof c == "number" ? `${c}px` : c,
         boxShadow: d ? "0 0 0 1px #EC615B" : "0 0 0 0 rgba(0, 0, 0, 0)",
@@ -163,7 +163,7 @@ const R1 = ({
                   backgroundColor: o,
                   color: s
                 },
-                children: r || v
+                children: r || w
               }
             ),
             l && l
@@ -192,14 +192,14 @@ const R1 = ({
   iconColor: p,
   textColor: d,
   placeholderColor: C,
-  rounded: m = "md",
+  rounded: h = "md",
   style: L,
   ...y
 }) => {
   process.env.NODE_ENV !== "production" && console.warn(
     "[Shekel Shared Lib] SearchInput is deprecated as of v1.0.11. Please use the new Input component instead for better functionality and consistent styling."
   );
-  const w = "relative inline-flex items-center", g = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", v = {
+  const v = "relative inline-flex items-center", f = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", w = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
     lg: "px-5 py-3 text-lg",
@@ -215,12 +215,12 @@ const R1 = ({
     md: "rounded-lg",
     lg: "rounded-xl",
     full: "rounded-full"
-  }, k = t === "left" ? r === "sm" ? "pl-9" : r === "md" ? "pl-10" : r === "lg" ? "pl-12" : "pl-9 sm:pl-10 md:pl-12" : r === "sm" ? "pr-9" : r === "md" ? "pr-10" : r === "lg" ? "pr-12" : "pr-9 sm:pr-10 md:pr-12", f = o ? "w-full" : "", h = {
+  }, k = t === "left" ? r === "sm" ? "pl-9" : r === "md" ? "pl-10" : r === "lg" ? "pl-12" : "pl-9 sm:pl-10 md:pl-12" : r === "sm" ? "pr-9" : r === "md" ? "pr-10" : r === "lg" ? "pr-12" : "pr-9 sm:pr-10 md:pr-12", m = o ? "w-full" : "", g = {
     backgroundColor: a,
     borderColor: l || "#D1D5DB",
     color: d,
     ...L
-  }, _ = C ? "" : "placeholder:text-gray-400", z = l ? "" : "border-gray-300", H = d ? "" : "text-gray-900", B = c ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", U = `${g} ${!s.includes("px-") && !s.includes("py-") ? v[r] : ""} ${e ? k : ""} ${f} ${s.includes("rounded") ? "" : b[m]} ${s.includes("border-") ? "" : z} ${H} ${B} ${_} ${s}`, E = t === "left" ? "left-3" : "right-3", N = p || "text-gray-400", V = p ? "" : "hover:text-gray-600", S = /* @__PURE__ */ n(
+  }, _ = C ? "" : "placeholder:text-gray-400", z = l ? "" : "border-gray-300", H = d ? "" : "text-gray-900", B = c ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", U = `${f} ${!s.includes("px-") && !s.includes("py-") ? w[r] : ""} ${e ? k : ""} ${m} ${s.includes("rounded") ? "" : b[h]} ${s.includes("border-") ? "" : z} ${H} ${B} ${_} ${s}`, E = t === "left" ? "left-3" : "right-3", N = p || "text-gray-400", V = p ? "" : "hover:text-gray-600", S = /* @__PURE__ */ n(
     "svg",
     {
       className: `${x[r]} ${N}`,
@@ -239,7 +239,7 @@ const R1 = ({
       )
     }
   );
-  return /* @__PURE__ */ u("div", { className: `${w} ${f}`, children: [
+  return /* @__PURE__ */ u("div", { className: `${v} ${m}`, children: [
     e && /* @__PURE__ */ n(
       "div",
       {
@@ -254,7 +254,7 @@ const R1 = ({
         type: "text",
         className: U,
         style: {
-          ...h,
+          ...g,
           ...c && {
             "--focus-border-color": c
           },
@@ -299,20 +299,20 @@ const R1 = ({
   menuItemHoverColor: p,
   dangerColor: d,
   borderColor: C,
-  style: m
+  style: h
 }) => {
-  const [L, y] = R(!1), w = i2(null);
+  const [L, y] = R(!1), v = i2(null);
   I(() => {
     const $ = (G) => {
-      w.current && !w.current.contains(G.target) && y(!1);
+      v.current && !v.current.contains(G.target) && y(!1);
     };
     return L && document.addEventListener("mousedown", $), () => {
       document.removeEventListener("mousedown", $);
     };
   }, [L]);
-  const g = () => {
+  const f = () => {
     !a && t === "click" && y(!L);
-  }, v = () => {
+  }, w = () => {
     !a && t === "hover" && y(!0);
   }, x = () => {
     !a && t === "hover" && y(!1);
@@ -323,7 +323,7 @@ const R1 = ({
     bottomRight: "top-full right-0 mt-1",
     topLeft: "bottom-full left-0 mb-1",
     topRight: "bottom-full right-0 mb-1"
-  }, f = r.startsWith("bottom") ? "dropdown-slide-down" : "dropdown-slide-up", h = {
+  }, m = r.startsWith("bottom") ? "dropdown-slide-down" : "dropdown-slide-up", g = {
     sm: "min-w-[120px] text-xs",
     md: "min-w-[160px] text-sm",
     lg: "min-w-[220px] text-base",
@@ -337,16 +337,16 @@ const R1 = ({
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: w,
+      ref: v,
       className: `relative inline-block ${s}`,
-      onMouseEnter: v,
+      onMouseEnter: w,
       onMouseLeave: x,
-      style: m,
+      style: h,
       children: [
         /* @__PURE__ */ n(
           "div",
           {
-            onClick: g,
+            onClick: f,
             className: `inline-flex ${a ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
             children: o
           }
@@ -354,7 +354,7 @@ const R1 = ({
         L && !a && /* @__PURE__ */ n(
           "div",
           {
-            className: `absolute ${k[r]} ${f} z-50 ${h[l]} ${i}`,
+            className: `absolute ${k[r]} ${m} z-50 ${g[l]} ${i}`,
             children: /* @__PURE__ */ n(
               "div",
               {
@@ -505,40 +505,40 @@ function s2(e, t, r = /* @__PURE__ */ new WeakSet()) {
   return !0;
 }
 function z0(e) {
-  const t = _2(), { control: r = t, name: o, defaultValue: s, disabled: i, exact: a, compute: l } = e || {}, c = M.useRef(s), p = M.useRef(l), d = M.useRef(void 0), C = M.useRef(r), m = M.useRef(o);
+  const t = _2(), { control: r = t, name: o, defaultValue: s, disabled: i, exact: a, compute: l } = e || {}, c = M.useRef(s), p = M.useRef(l), d = M.useRef(void 0), C = M.useRef(r), h = M.useRef(o);
   p.current = l;
   const [L, y] = M.useState(() => {
     const k = r._getWatch(o, c.current);
     return p.current ? p.current(k) : k;
-  }), w = M.useCallback((k) => {
-    const f = U2(o, r._names, k || r._formValues, !1, c.current);
-    return p.current ? p.current(f) : f;
-  }, [r._formValues, r._names, o]), g = M.useCallback((k) => {
+  }), v = M.useCallback((k) => {
+    const m = U2(o, r._names, k || r._formValues, !1, c.current);
+    return p.current ? p.current(m) : m;
+  }, [r._formValues, r._names, o]), f = M.useCallback((k) => {
     if (!i) {
-      const f = U2(o, r._names, k || r._formValues, !1, c.current);
+      const m = U2(o, r._names, k || r._formValues, !1, c.current);
       if (p.current) {
-        const h = p.current(f);
-        s2(h, d.current) || (y(h), d.current = h);
+        const g = p.current(m);
+        s2(g, d.current) || (y(g), d.current = g);
       } else
-        y(f);
+        y(m);
     }
   }, [r._formValues, r._names, i, o]);
-  J2(() => ((C.current !== r || !s2(m.current, o)) && (C.current = r, m.current = o, g()), r._subscribe({
+  J2(() => ((C.current !== r || !s2(h.current, o)) && (C.current = r, h.current = o, f()), r._subscribe({
     name: o,
     formState: {
       values: !0
     },
     exact: a,
     callback: (k) => {
-      g(k.values);
+      f(k.values);
     }
-  })), [r, a, o, g]), M.useEffect(() => r._removeUnmounted());
-  const v = C.current !== r, x = m.current, b = M.useMemo(() => {
+  })), [r, a, o, f]), M.useEffect(() => r._removeUnmounted());
+  const w = C.current !== r, x = h.current, b = M.useMemo(() => {
     if (i)
       return null;
-    const k = !v && !s2(x, o);
-    return v || k ? w() : null;
-  }, [i, v, o, x, w]);
+    const k = !w && !s2(x, o);
+    return w || k ? v() : null;
+  }, [i, w, o, x, v]);
   return b !== null ? b : L;
 }
 function W(e) {
@@ -551,13 +551,13 @@ function W(e) {
     control: s,
     name: r,
     exact: l
-  }), m = M.useRef(e), L = M.useRef(void 0), y = M.useRef(s.register(r, {
+  }), h = M.useRef(e), L = M.useRef(void 0), y = M.useRef(s.register(r, {
     ...e.rules,
     value: d,
     ...C2(e.disabled) ? { disabled: e.disabled } : {}
   }));
-  m.current = e;
-  const w = M.useMemo(() => Object.defineProperties({}, {
+  h.current = e;
+  const v = M.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: !0,
       get: () => !!D(C.errors, r)
@@ -578,50 +578,50 @@ function W(e) {
       enumerable: !0,
       get: () => D(C.errors, r)
     }
-  }), [C, r]), g = M.useCallback((k) => y.current.onChange({
+  }), [C, r]), f = M.useCallback((k) => y.current.onChange({
     target: {
       value: M0(k),
       name: r
     },
     type: E2.CHANGE
-  }), [r]), v = M.useCallback(() => y.current.onBlur({
+  }), [r]), w = M.useCallback(() => y.current.onBlur({
     target: {
       value: D(s._formValues, r),
       name: r
     },
     type: E2.BLUR
   }), [r, s._formValues]), x = M.useCallback((k) => {
-    const f = D(s._fields, r);
-    f && f._f && k && (f._f.ref = {
+    const m = D(s._fields, r);
+    m && m._f && k && (m._f.ref = {
       focus: () => r2(k.focus) && k.focus(),
       select: () => r2(k.select) && k.select(),
-      setCustomValidity: (h) => r2(k.setCustomValidity) && k.setCustomValidity(h),
+      setCustomValidity: (g) => r2(k.setCustomValidity) && k.setCustomValidity(g),
       reportValidity: () => r2(k.reportValidity) && k.reportValidity()
     });
   }, [s._fields, r]), b = M.useMemo(() => ({
     name: r,
     value: d,
     ...C2(o) || C.disabled ? { disabled: C.disabled || o } : {},
-    onChange: g,
-    onBlur: v,
+    onChange: f,
+    onBlur: w,
     ref: x
-  }), [r, o, C.disabled, g, v, x, d]);
+  }), [r, o, C.disabled, f, w, x, d]);
   return M.useEffect(() => {
-    const k = s._options.shouldUnregister || i, f = L.current;
-    f && f !== r && !c && s.unregister(f), s.register(r, {
-      ...m.current.rules,
-      ...C2(m.current.disabled) ? { disabled: m.current.disabled } : {}
+    const k = s._options.shouldUnregister || i, m = L.current;
+    m && m !== r && !c && s.unregister(m), s.register(r, {
+      ...h.current.rules,
+      ...C2(h.current.disabled) ? { disabled: h.current.disabled } : {}
     });
-    const h = (_, z) => {
+    const g = (_, z) => {
       const H = D(s._fields, _);
       H && H._f && (H._f.mount = z);
     };
-    if (h(r, !0), k) {
-      const _ = q2(D(s._options.defaultValues, r, m.current.defaultValue));
+    if (g(r, !0), k) {
+      const _ = q2(D(s._options.defaultValues, r, h.current.defaultValue));
       $2(s._defaultValues, r, _), f2(D(s._formValues, r)) && $2(s._formValues, r, _);
     }
     return !c && s.register(r), L.current = r, () => {
-      (c ? k && !s._state.action : k) ? s.unregister(r) : h(r, !1);
+      (c ? k && !s._state.action : k) ? s.unregister(r) : g(r, !1);
     };
   }, [r, s, c, i]), M.useEffect(() => {
     s._setDisabledField({
@@ -631,8 +631,8 @@ function W(e) {
   }, [o, r, s]), M.useMemo(() => ({
     field: b,
     formState: C,
-    fieldState: w
-  }), [b, C, w]);
+    fieldState: v
+  }), [b, C, v]);
 }
 const U0 = M.createContext(null);
 U0.displayName = "HookFormContext";
@@ -649,17 +649,17 @@ const X2 = ({
   fullWidth: p = !1,
   className: d = "",
   allowClear: C = !1,
-  showSearch: m = !1,
+  showSearch: h = !1,
   searchPlaceholder: L = "Search...",
   bgColor: y,
-  borderColor: w,
-  focusBorderColor: g = "#EC615B",
-  selectedBgColor: v,
+  borderColor: v,
+  focusBorderColor: f = "#EC615B",
+  selectedBgColor: w,
   selectedTextColor: x,
   hoverBgColor: b,
   rounded: k = "lg",
-  style: f,
-  label: h,
+  style: m,
+  label: g,
   error: _,
   helperText: z
 }) => {
@@ -668,15 +668,15 @@ const X2 = ({
     const F = (Y) => {
       S.current && !S.current.contains(Y.target) && (B(!1), V(""), H && (i == null || i()));
     };
-    return H && (document.addEventListener("mousedown", F), m && $.current && $.current.focus()), () => {
+    return H && (document.addEventListener("mousedown", F), h && $.current && $.current.focus()), () => {
       document.removeEventListener("mousedown", F);
     };
-  }, [H, m]);
+  }, [H, h]);
   const c2 = (F) => {
     t === void 0 && E(F), s == null || s(F), B(!1), V("");
   }, P = (F) => {
     F.stopPropagation(), t === void 0 && E(void 0), s == null || s("");
-  }, K = e.find((F) => F.value === G), Q = m ? e.filter(
+  }, K = e.find((F) => F.value === G), Q = h ? e.filter(
     (F) => F.label.toLowerCase().includes(N.toLowerCase())
   ) : e, d2 = {
     sm: "px-3 py-1.5 text-sm",
@@ -691,10 +691,10 @@ const X2 = ({
     full: "rounded-full"
   }, u0 = p ? "w-full" : "min-w-[200px]", p2 = () => {
     const F = {};
-    return y && (F.backgroundColor = y), w && (F.borderColor = w), F;
+    return y && (F.backgroundColor = y), v && (F.borderColor = v), F;
   }, f0 = () => {
     const F = {};
-    return v && (F.backgroundColor = v), x && (F.color = x), F;
+    return w && (F.backgroundColor = w), x && (F.color = x), F;
   }, h0 = /* @__PURE__ */ n(
     "svg",
     {
@@ -705,8 +705,8 @@ const X2 = ({
       children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
     }
   ), m0 = /* @__PURE__ */ n("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
-  return /* @__PURE__ */ u("div", { className: `relative inline-block ${u0}`, style: f, children: [
-    h && /* @__PURE__ */ n("label", { className: "block text-sm font-medium mb-2", style: { color: _ ? "#C21919" : "#181918" }, children: h }),
+  return /* @__PURE__ */ u("div", { className: `relative inline-block ${u0}`, style: m, children: [
+    g && /* @__PURE__ */ n("label", { className: "block text-sm font-medium mb-2", style: { color: _ ? "#C21919" : "#181918" }, children: g }),
     /* @__PURE__ */ u("div", { ref: S, className: "relative", children: [
       /* @__PURE__ */ n("input", { type: "hidden", name: a, value: G ?? "", readOnly: !0 }),
       /* @__PURE__ */ u(
@@ -726,10 +726,10 @@ const X2 = ({
           style: {
             ...p2(),
             backgroundColor: y || p2().backgroundColor || "#FFFFFF",
-            borderColor: _ ? "#C21919" : w || p2().borderColor || "#D1D5DB",
+            borderColor: _ ? "#C21919" : v || p2().borderColor || "#D1D5DB",
             ...H && {
-              borderColor: _ ? "#C21919" : g,
-              boxShadow: `0 0 0 2px ${_ ? "#C21919" : g}20`
+              borderColor: _ ? "#C21919" : f,
+              boxShadow: `0 0 0 2px ${_ ? "#C21919" : f}20`
             },
             ...!l && !H && b && {
               cursor: "pointer"
@@ -758,7 +758,7 @@ const X2 = ({
         }
       ),
       H && !l && /* @__PURE__ */ n("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 dropdown-slide-down", children: /* @__PURE__ */ u("div", { className: `select-dropdown bg-white shadow-lg border border-gray-200 py-1 max-h-[300px] overflow-auto ${N2[k]}`, children: [
-        m && /* @__PURE__ */ n("div", { className: "px-2 py-2 border-b border-gray-200", children: /* @__PURE__ */ n(
+        h && /* @__PURE__ */ n("div", { className: "px-2 py-2 border-b border-gray-200", children: /* @__PURE__ */ n(
           "input",
           {
             ref: $,
@@ -768,8 +768,8 @@ const X2 = ({
             placeholder: L,
             className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 transition-all duration-200 ease-out",
             style: {
-              borderColor: w,
-              boxShadow: `0 0 0 2px ${g}20`
+              borderColor: v,
+              boxShadow: `0 0 0 2px ${f}20`
             },
             onClick: (F) => F.stopPropagation()
           }
@@ -785,7 +785,7 @@ const X2 = ({
                     `,
             style: {
               ...F.value === G ? f0() : {},
-              backgroundColor: F.value === G ? v || "#FCEAE9" : void 0,
+              backgroundColor: F.value === G ? w || "#FCEAE9" : void 0,
               color: F.value === G ? x || "#EC615B" : "#181918",
               fontWeight: F.value === G ? "medium" : void 0
             },
@@ -846,17 +846,17 @@ const X2 = ({
   size: p = "md",
   headerBgColor: d,
   headerTextColor: C,
-  rowHoverColor: m,
+  rowHoverColor: h,
   borderColor: L,
   stripedRowColor: y,
-  rounded: w = "md",
-  style: g
+  rounded: v = "md",
+  style: f
 }) => {
-  const [v, x] = R(
+  const [w, x] = R(
     o && typeof o == "object" && o.current || 1
   ), [b, k] = R(
     o && typeof o == "object" && o.pageSize || 10
-  ), f = {
+  ), m = {
     sm: {
       headerPadding: "px-3 py-2",
       headerFontSize: "text-xs",
@@ -885,19 +885,19 @@ const X2 = ({
       rowFontSize: "text-xs sm:text-xs md:text-sm",
       containerRounded: "rounded-md sm:rounded-lg md:rounded-lg"
     }
-  }, h = {
+  }, g = {
     none: "",
     sm: "rounded-sm",
     md: "rounded-md",
     lg: "rounded-lg",
     xl: "rounded-xl",
     "2xl": "rounded-2xl"
-  }, _ = f[p], z = h[w], H = (V, S) => typeof r == "function" ? r(V) : V[r] || String(S), B = (V, S) => S ? S.split(".").reduce(($, G) => $ == null ? void 0 : $[G], V) : V, U = o === !1 ? t : t.slice((v - 1) * b, v * b), E = (V) => {
+  }, _ = m[p], z = g[v], H = (V, S) => typeof r == "function" ? r(V) : V[r] || String(S), B = (V, S) => S ? S.split(".").reduce(($, G) => $ == null ? void 0 : $[G], V) : V, U = o === !1 ? t : t.slice((w - 1) * b, w * b), E = (V) => {
     x(V), o && typeof o == "object" && o.onChange && o.onChange(V, b);
   }, N = (V) => {
     k(V), x(1), o && typeof o == "object" && o.onChange && o.onChange(1, V);
   };
-  return /* @__PURE__ */ u("div", { className: "w-full", style: g, children: [
+  return /* @__PURE__ */ u("div", { className: "w-full", style: f, children: [
     /* @__PURE__ */ n(
       "div",
       {
@@ -980,7 +980,7 @@ const X2 = ({
                   children: "No data"
                 }
               ) }) : U.map((V, S) => {
-                const $ = i ? i(V, S) : {}, G = c && S % 2 === 1 ? y || "#F5F6F7" : "transparent", c2 = m || "#f3f4f6";
+                const $ = i ? i(V, S) : {}, G = c && S % 2 === 1 ? y || "#F5F6F7" : "transparent", c2 = h || "#f3f4f6";
                 return /* @__PURE__ */ n(
                   "tr",
                   {
@@ -989,7 +989,7 @@ const X2 = ({
                       backgroundColor: G
                     },
                     onMouseEnter: (P) => {
-                      (m || !c || S % 2 === 0) && (P.currentTarget.style.backgroundColor = c2);
+                      (h || !c || S % 2 === 0) && (P.currentTarget.style.backgroundColor = c2);
                     },
                     onMouseLeave: (P) => {
                       P.currentTarget.style.backgroundColor = G;
@@ -1021,7 +1021,7 @@ const X2 = ({
     o !== !1 && /* @__PURE__ */ n(
       Z0,
       {
-        current: v,
+        current: w,
         pageSize: b,
         total: t.length,
         onChange: E,
@@ -1044,7 +1044,7 @@ const X2 = ({
   showTotal: l = !0,
   size: c = "md"
 }) => {
-  const p = Math.ceil(r / t), d = (e - 1) * t + 1, C = Math.min(e * t, r), m = {
+  const p = Math.ceil(r / t), d = (e - 1) * t + 1, C = Math.min(e * t, r), h = {
     sm: {
       button: "px-2.5 py-1 text-xs",
       icon: "h-3.5 w-3.5",
@@ -1063,17 +1063,17 @@ const X2 = ({
   }, L = () => {
     const y = [];
     if (p <= 7)
-      for (let g = 1; g <= p; g++)
-        y.push(g);
+      for (let f = 1; f <= p; f++)
+        y.push(f);
     else if (e <= 3) {
-      for (let g = 1; g <= 5; g++) y.push(g);
+      for (let f = 1; f <= 5; f++) y.push(f);
       y.push("..."), y.push(p);
     } else if (e >= p - 2) {
       y.push(1), y.push("...");
-      for (let g = p - 4; g <= p; g++) y.push(g);
+      for (let f = p - 4; f <= p; f++) y.push(f);
     } else {
       y.push(1), y.push("...");
-      for (let g = e - 1; g <= e + 1; g++) y.push(g);
+      for (let f = e - 1; f <= e + 1; f++) y.push(f);
       y.push("..."), y.push(p);
     }
     return y;
@@ -1107,8 +1107,8 @@ const X2 = ({
           {
             onClick: () => o(e - 1),
             disabled: e === 1,
-            className: `relative inline-flex items-center justify-center rounded-md ${m[c].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__ */ n("svg", { className: m[c].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ n(
+            className: `relative inline-flex items-center justify-center rounded-md ${h[c].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__ */ n("svg", { className: h[c].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ n(
               "path",
               {
                 strokeLinecap: "round",
@@ -1119,18 +1119,18 @@ const X2 = ({
             ) })
           }
         ),
-        L().map((y, w) => y === "..." ? /* @__PURE__ */ n(
+        L().map((y, v) => y === "..." ? /* @__PURE__ */ n(
           "span",
           {
-            className: `relative inline-flex items-center justify-center ${m[c].button} font-normal text-[#181918]`,
+            className: `relative inline-flex items-center justify-center ${h[c].button} font-normal text-[#181918]`,
             children: "..."
           },
-          `ellipsis-${w}`
+          `ellipsis-${v}`
         ) : /* @__PURE__ */ n(
           "button",
           {
             onClick: () => o(y),
-            className: `relative inline-flex items-center justify-center rounded-md ${m[c].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${e === y ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
+            className: `relative inline-flex items-center justify-center rounded-md ${h[c].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${e === y ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
             children: y
           },
           y
@@ -1140,8 +1140,8 @@ const X2 = ({
           {
             onClick: () => o(e + 1),
             disabled: e === p,
-            className: `relative inline-flex items-center justify-center rounded-md ${m[c].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__ */ n("svg", { className: m[c].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ n(
+            className: `relative inline-flex items-center justify-center rounded-md ${h[c].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__ */ n("svg", { className: h[c].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ n(
               "path",
               {
                 strokeLinecap: "round",
@@ -1168,13 +1168,13 @@ const X2 = ({
   descriptionColor: p,
   searchBgColor: d = "white",
   searchBorderColor: C = "#d1d5db",
-  searchFocusBorderColor: m = "#3b82f6",
+  searchFocusBorderColor: h = "#3b82f6",
   rounded: L = "md",
   style: y,
-  hideActionButtons: w = !1,
-  selectedActionButton: g
+  hideActionButtons: v = !1,
+  selectedActionButton: f
 }) => {
-  const v = (_) => {
+  const w = (_) => {
     o == null || o(_.target.value);
   }, b = {
     sm: {
@@ -1229,13 +1229,13 @@ const X2 = ({
       maxWidth: "max-w-sm md:max-w-md lg:max-w-lg",
       descriptionMargin: "mt-0.5 sm:mt-1 md:mt-2"
     }
-  }[l], f = {
+  }[l], m = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }[L], h = {
+  }[L], g = {
     backgroundColor: d,
     borderColor: C
   };
@@ -1288,11 +1288,11 @@ const X2 = ({
               {
                 type: "text",
                 placeholder: r,
-                onChange: v,
-                className: `block w-full ${b.searchPaddingLeft} pr-3 ${b.searchInputPy} border ${f} focus:outline-none focus:ring-2 focus:ring-opacity-50 ${b.searchInputSize} transition-colors duration-200`,
-                style: h,
+                onChange: w,
+                className: `block w-full ${b.searchPaddingLeft} pr-3 ${b.searchInputPy} border ${m} focus:outline-none focus:ring-2 focus:ring-opacity-50 ${b.searchInputSize} transition-colors duration-200`,
+                style: g,
                 onFocus: (_) => {
-                  _.currentTarget.style.borderColor = m, _.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
+                  _.currentTarget.style.borderColor = h, _.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
                 },
                 onBlur: (_) => {
                   _.currentTarget.style.borderColor = C, _.currentTarget.style.boxShadow = "none";
@@ -1300,7 +1300,7 @@ const X2 = ({
               }
             )
           ] }) }),
-          /* @__PURE__ */ n("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: w && g ? g : s })
+          /* @__PURE__ */ n("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: v && f ? f : s })
         ] }),
         i && /* @__PURE__ */ n("div", { className: `flex flex-wrap items-center ${b.gap}`, children: i })
       ]
@@ -1326,18 +1326,18 @@ const X2 = ({
   centered: p = !0,
   className: d = "",
   bgColor: C = "#ffffff",
-  headerBgColor: m = "#ffffff",
+  headerBgColor: h = "#ffffff",
   overlayColor: L = "rgba(0, 0, 0, 0.5)",
   bodyClassName: y = "",
-  headerClassName: w = "",
-  maxHeight: g = "70vh"
+  headerClassName: v = "",
+  maxHeight: f = "70vh"
 }) => {
-  const [v, x] = R(!1), [b, k] = R(!1), f = i || O0[a], _ = {
-    width: typeof f == "number" ? `${f}px` : f,
+  const [w, x] = R(!1), [b, k] = R(!1), m = i || O0[a], _ = {
+    width: typeof m == "number" ? `${m}px` : m,
     maxWidth: "90vw",
     backgroundColor: C
   }, z = {
-    backgroundColor: m
+    backgroundColor: h
   }, H = {
     backgroundColor: L
   };
@@ -1358,7 +1358,7 @@ const X2 = ({
     return e && document.addEventListener("keydown", E), () => {
       document.removeEventListener("keydown", E);
     };
-  }, [e, t, l]), !v) return null;
+  }, [e, t, l]), !w) return null;
   const B = () => {
     c && t();
   }, U = (E) => {
@@ -1381,13 +1381,13 @@ const X2 = ({
           "div",
           {
             className: `relative rounded-lg shadow-xl transition-all duration-200 ease-out overflow-y-auto ${b ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-4"} ${d}`,
-            style: { ..._, maxHeight: typeof g == "number" ? `${g}px` : g },
+            style: { ..._, maxHeight: typeof f == "number" ? `${f}px` : f },
             onClick: U,
             children: [
               (r || l) && /* @__PURE__ */ u(
                 "div",
                 {
-                  className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${w}`,
+                  className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${v}`,
                   style: z,
                   children: [
                     r && /* @__PURE__ */ n("h3", { className: "text-lg font-semibold text-gray-900", children: r }),
@@ -1447,7 +1447,7 @@ const X2 = ({
   rounded: d = "full",
   style: C
 }) => {
-  const m = {
+  const h = {
     default: "bg-gray-100 text-[#181918]",
     primary: "bg-[#FCEAE9] text-[#EC615B]",
     success: "bg-green-100 text-green-800",
@@ -1464,19 +1464,19 @@ const X2 = ({
     md: "w-2 h-2",
     lg: "w-2.5 h-2.5",
     responsive: "w-1 h-1 sm:w-1.5 sm:h-1.5 md:w-2 md:h-2 lg:w-2.5 lg:h-2.5"
-  }, w = {
+  }, v = {
     default: "bg-gray-600",
     primary: "bg-[#EC615B]",
     success: "bg-green-600",
     warning: "bg-yellow-600",
     danger: "bg-red-600",
     info: "bg-cyan-600"
-  }, g = {
+  }, f = {
     sm: "w-3 h-3",
     md: "w-3.5 h-3.5",
     lg: "w-4 h-4",
     responsive: "w-2.5 h-2.5 sm:w-3 sm:h-3 md:w-3.5 md:h-3.5 lg:w-4 lg:h-4"
-  }, v = {
+  }, w = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
@@ -1491,13 +1491,13 @@ const X2 = ({
   return /* @__PURE__ */ u(
     "span",
     {
-      className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${l ? "" : m[t]} ${L[r]} ${v[d]} ${a}`,
+      className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${l ? "" : h[t]} ${L[r]} ${w[d]} ${a}`,
       style: x,
       children: [
-        o && /* @__PURE__ */ n("span", { className: `rounded-full ${y[r]} ${w[t]}` }),
-        s && i === "left" && /* @__PURE__ */ n("span", { className: `inline-flex items-center ${g[r]}`, children: s }),
+        o && /* @__PURE__ */ n("span", { className: `rounded-full ${y[r]} ${v[t]}` }),
+        s && i === "left" && /* @__PURE__ */ n("span", { className: `inline-flex items-center ${f[r]}`, children: s }),
         e,
-        s && i === "right" && /* @__PURE__ */ n("span", { className: `inline-flex items-center ${g[r]}`, children: s })
+        s && i === "right" && /* @__PURE__ */ n("span", { className: `inline-flex items-center ${f[r]}`, children: s })
       ]
     }
   );
@@ -1515,7 +1515,7 @@ const X2 = ({
   errorColor: d,
   lineColor: C
 }) => {
-  const m = (x, b) => b.status ? b.status : x < t ? "finish" : x === t ? "process" : "wait", L = {
+  const h = (x, b) => b.status ? b.status : x < t ? "finish" : x === t ? "process" : "wait", L = {
     sm: "w-6 h-6",
     md: "w-8 h-8",
     lg: "w-10 h-10",
@@ -1525,12 +1525,12 @@ const X2 = ({
     md: "text-base",
     lg: "text-lg",
     responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
-  }, w = {
+  }, v = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
     responsive: "text-xs sm:text-xs md:text-sm lg:text-base"
-  }, g = (x, b) => b || (x === "finish" ? /* @__PURE__ */ n("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
+  }, f = (x, b) => b || (x === "finish" ? /* @__PURE__ */ n("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
     "path",
     {
       fillRule: "evenodd",
@@ -1544,7 +1544,7 @@ const X2 = ({
       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), v = (x) => {
+  ) }) : null), w = (x) => {
     const b = s === "outline";
     switch (x) {
       case "finish":
@@ -1582,57 +1582,57 @@ const X2 = ({
     }
   };
   return r === "horizontal" ? /* @__PURE__ */ n("div", { className: `flex items-start ${i}`, style: a, children: e.map((x, b) => {
-    const k = m(b, x), f = v(k), h = b === e.length - 1, _ = {};
-    return f.iconColor && (_.color = f.iconColor), /* @__PURE__ */ u("div", { className: "flex flex-1 items-start", children: [
+    const k = h(b, x), m = w(k), g = b === e.length - 1, _ = {};
+    return m.iconColor && (_.color = m.iconColor), /* @__PURE__ */ u("div", { className: "flex flex-1 items-start", children: [
       /* @__PURE__ */ u("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ n(
           "div",
           {
-            className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${f.icon}`,
+            className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${m.icon}`,
             style: _,
-            children: g(k, x.icon)
+            children: f(k, x.icon)
           }
         ),
         /* @__PURE__ */ u("div", { className: "mt-2 text-center", children: [
           /* @__PURE__ */ n(
             "div",
             {
-              className: `${y[o]} ${f.title} transition-colors duration-300`,
+              className: `${y[o]} ${m.title} transition-colors duration-300`,
               children: x.title
             }
           ),
           x.description && /* @__PURE__ */ n(
             "div",
             {
-              className: `${w[o]} ${f.description} mt-1 transition-colors duration-300`,
+              className: `${v[o]} ${m.description} mt-1 transition-colors duration-300`,
               children: x.description
             }
           )
         ] })
       ] }),
-      !h && /* @__PURE__ */ n(
+      !g && /* @__PURE__ */ n(
         "div",
         {
-          className: `flex-1 h-0.5 mt-4 mx-2 ${f.line} transition-colors duration-300`
+          className: `flex-1 h-0.5 mt-4 mx-2 ${m.line} transition-colors duration-300`
         }
       )
     ] }, b);
   }) }) : /* @__PURE__ */ n("div", { className: `flex flex-col ${i}`, style: a, children: e.map((x, b) => {
-    const k = m(b, x), f = v(k), h = b === e.length - 1, _ = {};
-    return f.iconColor && (_.color = f.iconColor), /* @__PURE__ */ u("div", { className: "flex", children: [
+    const k = h(b, x), m = w(k), g = b === e.length - 1, _ = {};
+    return m.iconColor && (_.color = m.iconColor), /* @__PURE__ */ u("div", { className: "flex", children: [
       /* @__PURE__ */ u("div", { className: "flex flex-col items-center mr-4", children: [
         /* @__PURE__ */ n(
           "div",
           {
-            className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${f.icon}`,
+            className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${m.icon}`,
             style: _,
-            children: g(k, x.icon)
+            children: f(k, x.icon)
           }
         ),
-        !h && /* @__PURE__ */ n(
+        !g && /* @__PURE__ */ n(
           "div",
           {
-            className: `w-0.5 flex-1 my-1 ${f.line} transition-colors duration-300`,
+            className: `w-0.5 flex-1 my-1 ${m.line} transition-colors duration-300`,
             style: { minHeight: "20px" }
           }
         )
@@ -1641,14 +1641,14 @@ const X2 = ({
         /* @__PURE__ */ n(
           "div",
           {
-            className: `${y[o]} ${f.title} transition-colors duration-300`,
+            className: `${y[o]} ${m.title} transition-colors duration-300`,
             children: x.title
           }
         ),
         x.description && /* @__PURE__ */ n(
           "div",
           {
-            className: `${w[o]} ${f.description} mt-1 transition-colors duration-300`,
+            className: `${v[o]} ${m.description} mt-1 transition-colors duration-300`,
             children: x.description
           }
         )
@@ -1668,25 +1668,25 @@ const X2 = ({
   successColor: p,
   exceptionColor: d,
   trackColor: C,
-  rounded: m = "full"
+  rounded: h = "full"
 }) => {
   const L = Math.min(100, Math.max(0, e)), y = {
     sm: "h-1.5",
     md: "h-2",
     lg: "h-3",
     responsive: "h-1.5 sm:h-2 md:h-3 lg:h-4"
-  }, w = {
+  }, v = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
     responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
-  }, g = {
+  }, f = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }, v = () => {
+  }, w = () => {
     if (o) return o;
     switch (t) {
       case "success":
@@ -1712,26 +1712,26 @@ const X2 = ({
       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, k = () => l ? l(L) : `${Math.round(L)}%`, f = s ? `${s}px` : void 0;
+  ) }) : null, k = () => l ? l(L) : `${Math.round(L)}%`, m = s ? `${s}px` : void 0;
   return /* @__PURE__ */ u("div", { className: `flex items-center gap-2 ${a}`, children: [
     /* @__PURE__ */ n("div", { className: "flex-1", children: /* @__PURE__ */ n(
       "div",
       {
-        className: `w-full overflow-hidden ${y[i]} ${g[m]} ${x()}`,
-        style: { height: f },
+        className: `w-full overflow-hidden ${y[i]} ${f[h]} ${x()}`,
+        style: { height: m },
         children: /* @__PURE__ */ n(
           "div",
           {
-            className: `${v()} ${y[i]} ${g[m]} transition-all duration-300 ease-out ${t === "active" ? "progress-active" : ""}`,
+            className: `${w()} ${y[i]} ${f[h]} transition-all duration-300 ease-out ${t === "active" ? "progress-active" : ""}`,
             style: {
               width: `${L}%`,
-              height: f
+              height: m
             }
           }
         )
       }
     ) }),
-    r && /* @__PURE__ */ n("div", { className: `flex items-center gap-1 ${w[i]} text-gray-600 font-normal`, children: b() || k() })
+    r && /* @__PURE__ */ n("div", { className: `flex items-center gap-1 ${v[i]} text-gray-600 font-normal`, children: b() || k() })
   ] });
 }, J1 = ({
   checked: e,
@@ -1746,34 +1746,34 @@ const X2 = ({
   name: p,
   value: d,
   checkedColor: C = "#EC615B",
-  uncheckedColor: m = "#ffffff",
+  uncheckedColor: h = "#ffffff",
   checkedBorderColor: L = "#EC615B",
   style: y
 }) => {
-  const [w, g] = R(t), v = e !== void 0, x = v ? e : w, b = (B) => {
+  const [v, f] = R(t), w = e !== void 0, x = w ? e : v, b = (B) => {
     if (o) return;
     const U = B.target.checked;
-    v || g(U), r == null || r(U);
+    w || f(U), r == null || r(U);
   }, k = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
     lg: "w-6 h-6",
     responsive: "w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6"
-  }, f = {
+  }, m = {
     sm: "w-3 h-3",
     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"
-  }, h = a === "filled", _ = () => o ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : !x && !s ? "border-gray-300 bg-white hover:border-gray-400" : "", z = () => {
+  }, g = a === "filled", _ = () => o ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : !x && !s ? "border-gray-300 bg-white hover:border-gray-400" : "", z = () => {
     if (!o && !(!x && !s))
-      return h ? {
+      return g ? {
         borderColor: L,
         backgroundColor: C
       } : {
         borderColor: L,
-        backgroundColor: m
+        backgroundColor: h
       };
-  }, H = () => h && (x || s) ? "text-white" : "";
+  }, H = () => g && (x || s) ? "text-white" : "";
   return /* @__PURE__ */ u("div", { className: "inline-flex items-center", style: y, children: [
     /* @__PURE__ */ n(
       "input",
@@ -1807,22 +1807,22 @@ const X2 = ({
           x && !s && /* @__PURE__ */ n(
             "svg",
             {
-              className: `${f[i]} ${H()}`,
+              className: `${m[i]} ${H()}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               strokeWidth: 3,
-              style: !h && (x || s) ? { color: C } : void 0,
+              style: !g && (x || s) ? { color: C } : void 0,
               children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
             }
           ),
           s && /* @__PURE__ */ n(
             "svg",
             {
-              className: `${f[i]} ${H()}`,
+              className: `${m[i]} ${H()}`,
               fill: "currentColor",
               viewBox: "0 0 24 24",
-              style: !h && (x || s) ? { color: C } : void 0,
+              style: !g && (x || s) ? { color: C } : void 0,
               children: /* @__PURE__ */ n("rect", { x: "4", y: "11", width: "16", height: "2", rx: "1" })
             }
           )
@@ -1882,11 +1882,11 @@ const X2 = ({
   textColor: p,
   sublabelColor: d,
   removeButtonColor: C,
-  removeButtonHoverColor: m,
+  removeButtonHoverColor: h,
   rounded: L = "md",
   style: y
 }) => {
-  const w = D0(a), g = R0(L), v = "#F4F4F4", x = "#EBEBEB", b = "#181918", k = "#999999", f = "#9CA3AF", h = "#EC615B", _ = l || v, z = c || x, H = p || b, B = d || k, U = C || f, E = m || h;
+  const v = D0(a), f = R0(L), w = "#F4F4F4", x = "#EBEBEB", b = "#181918", k = "#999999", m = "#9CA3AF", g = "#EC615B", _ = l || w, z = c || x, H = p || b, B = d || k, U = C || m, E = h || g;
   return e.length === 0 ? /* @__PURE__ */ n(
     "div",
     {
@@ -1900,14 +1900,14 @@ const X2 = ({
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: `overflow-y-auto ${w.container} ${o}`,
+      className: `overflow-y-auto ${v.container} ${o}`,
       style: { maxHeight: i, ...y },
       children: e.map((N, V) => /* @__PURE__ */ u(
         "div",
         {
           className: `
             group flex items-center justify-between
-            ${g}
+            ${f}
             transition-all duration-300 ease-out
             hover:shadow-sm
             animate-slide-in-item
@@ -1924,11 +1924,11 @@ const X2 = ({
             S.currentTarget.style.backgroundColor = _;
           },
           children: [
-            /* @__PURE__ */ u("div", { className: `flex-1 min-w-0 ${w.item}`, children: [
+            /* @__PURE__ */ u("div", { className: `flex-1 min-w-0 ${v.item}`, children: [
               N.sublabel && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `font-normal mb-0.5 ${w.sublabel}`,
+                  className: `font-normal mb-0.5 ${v.sublabel}`,
                   style: { color: B },
                   children: N.sublabel
                 }
@@ -1936,7 +1936,7 @@ const X2 = ({
               /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `font-medium truncate ${w.label}`,
+                  className: `font-medium truncate ${v.label}`,
                   style: { color: H },
                   children: N.label
                 }
@@ -1953,7 +1953,7 @@ const X2 = ({
               hover:scale-110
               active:scale-95
               focus:outline-none focus:ring-2 focus:ring-opacity-50
-              ${w.button}
+              ${v.button}
             `,
                 style: {
                   color: U
@@ -1968,7 +1968,7 @@ const X2 = ({
                 children: /* @__PURE__ */ n(
                   "svg",
                   {
-                    className: w.icon,
+                    className: v.icon,
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
@@ -2177,44 +2177,44 @@ const e0 = ({
   const [p, d] = R(Array(e).fill("")), C = i2([]);
   I(() => {
     if (t) {
-      const w = t.split("").slice(0, e), g = [...w, ...Array(e - w.length).fill("")];
-      d(g);
+      const v = t.split("").slice(0, e), f = [...v, ...Array(e - v.length).fill("")];
+      d(f);
     }
   }, [t, e]);
-  const m = (w, g) => {
+  const h = (v, f) => {
     var b;
-    if (g && !/^\d+$/.test(g)) return;
-    const v = [...p];
-    v[w] = g.slice(-1), d(v);
-    const x = v.join("");
-    r == null || r(x), g && w < e - 1 && ((b = C.current[w + 1]) == null || b.focus()), v.every((k) => k !== "") && (s == null || s(x));
-  }, L = (w, g) => {
-    var v;
-    g.key === "Backspace" && !p[w] && w > 0 && ((v = C.current[w - 1]) == null || v.focus());
-  }, y = (w) => {
-    var f;
-    w.preventDefault();
-    const g = w.clipboardData.getData("text/plain");
-    if (!/^\d+$/.test(g)) return;
-    const v = g.split("").slice(0, e), x = [...v, ...Array(e - v.length).fill("")];
+    if (f && !/^\d+$/.test(f)) return;
+    const w = [...p];
+    w[v] = f.slice(-1), d(w);
+    const x = w.join("");
+    r == null || r(x), f && v < e - 1 && ((b = C.current[v + 1]) == null || b.focus()), w.every((k) => k !== "") && (s == null || s(x));
+  }, L = (v, f) => {
+    var w;
+    f.key === "Backspace" && !p[v] && v > 0 && ((w = C.current[v - 1]) == null || w.focus());
+  }, y = (v) => {
+    var m;
+    v.preventDefault();
+    const f = v.clipboardData.getData("text/plain");
+    if (!/^\d+$/.test(f)) return;
+    const w = f.split("").slice(0, e), x = [...w, ...Array(e - w.length).fill("")];
     d(x);
     const b = x.join("");
     r == null || r(b);
-    const k = Math.min(v.length, e - 1);
-    (f = C.current[k]) == null || f.focus(), x.every((h) => h !== "") && (s == null || s(b));
+    const k = Math.min(w.length, e - 1);
+    (m = C.current[k]) == null || m.focus(), x.every((g) => g !== "") && (s == null || s(b));
   };
   return /* @__PURE__ */ u("div", { className: "w-full", children: [
-    /* @__PURE__ */ n("div", { className: `flex gap-2 justify-center ${c}`, onBlur: o, children: p.map((w, g) => /* @__PURE__ */ u(M.Fragment, { children: [
+    /* @__PURE__ */ n("div", { className: `flex gap-2 justify-center ${c}`, onBlur: o, children: p.map((v, f) => /* @__PURE__ */ u(M.Fragment, { children: [
       /* @__PURE__ */ n(
         t2,
         {
-          ref: (v) => {
-            C.current[g] = v;
+          ref: (w) => {
+            C.current[f] = w;
           },
           placeholder: "",
-          value: w,
-          onChange: (v) => m(g, v.target.value),
-          onKeyDown: (v) => L(g, v),
+          value: v,
+          onChange: (w) => h(f, w.target.value),
+          onKeyDown: (w) => L(f, w),
           onPaste: y,
           disabled: l,
           maxLength: 1,
@@ -2227,8 +2227,8 @@ const e0 = ({
           }
         }
       ),
-      g === Math.floor(e / 2) - 1 && /* @__PURE__ */ n("div", { className: "flex items-center justify-center px-1", children: /* @__PURE__ */ n("span", { className: "text-gray-400 text-xl", children: "—" }) })
-    ] }, g)) }),
+      f === Math.floor(e / 2) - 1 && /* @__PURE__ */ n("div", { className: "flex items-center justify-center px-1", children: /* @__PURE__ */ n("span", { className: "text-gray-400 text-xl", children: "—" }) })
+    ] }, f)) }),
     i && a && /* @__PURE__ */ u("div", { className: "flex items-center justify-center mt-2 text-xs text-[#C21919]", children: [
       /* @__PURE__ */ n("svg", { className: "w-3 h-3 mr-1", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
         "path",
@@ -2279,52 +2279,52 @@ const e0 = ({
   customFormat: p,
   value: d,
   onChange: C,
-  ...m
+  ...h
 }, L) => {
-  const y = t ? "phone-input-error-state" : "", [w, g] = R("");
+  const y = t ? "phone-input-error-state" : "", [v, f] = R("");
   I(() => {
     if (d !== void 0) {
-      const f = String(d).replace(/\D/g, ""), h = v(f);
-      g(h);
+      const m = String(d).replace(/\D/g, ""), g = w(m);
+      f(g);
     }
   }, [d, c, s]);
-  const v = (f) => {
-    const h = f.replace(/\D/g, "");
+  const w = (m) => {
+    const g = m.replace(/\D/g, "");
     if (p)
-      return p(h);
+      return p(g);
     if (c === "none")
-      return h;
+      return g;
     let _ = "";
-    return c === "spaced" ? h.length <= 3 ? _ = h : h.length <= 6 ? _ = `${h.slice(0, 3)} ${h.slice(3)}` : _ = `${h.slice(0, 3)} ${h.slice(3, 6)} ${h.slice(6, 10)}` : c === "dashed" ? h.length <= 3 ? _ = h : h.length <= 6 ? _ = `${h.slice(0, 3)}-${h.slice(3)}` : _ = `${h.slice(0, 3)}-${h.slice(3, 6)}-${h.slice(6, 10)}` : s === "+1" ? h.length <= 3 ? _ = h : h.length <= 6 ? _ = `(${h.slice(0, 3)}) ${h.slice(3)}` : _ = `(${h.slice(0, 3)}) ${h.slice(3, 6)}-${h.slice(6, 10)}` : h.length <= 3 ? _ = h : h.length <= 6 ? _ = `${h.slice(0, 3)} ${h.slice(3)}` : _ = `${h.slice(0, 3)} ${h.slice(3, 6)} ${h.slice(6, 10)}`, _;
-  }, x = (f) => {
-    var h;
-    !/^\d$/.test(f.key) && f.key !== "Backspace" && f.key !== "Delete" && f.key !== "Tab" && f.key !== "ArrowLeft" && f.key !== "ArrowRight" && f.key !== "Home" && f.key !== "End" && f.preventDefault(), (h = m.onKeyDown) == null || h.call(m, f);
-  }, b = (f) => {
-    const h = f.target, _ = h.selectionStart || 0, z = h.value.replace(/\D/g, ""), H = v(z);
-    g(H);
-    const B = w.length, E = H.length - B;
+    return c === "spaced" ? g.length <= 3 ? _ = g : g.length <= 6 ? _ = `${g.slice(0, 3)} ${g.slice(3)}` : _ = `${g.slice(0, 3)} ${g.slice(3, 6)} ${g.slice(6, 10)}` : c === "dashed" ? g.length <= 3 ? _ = g : g.length <= 6 ? _ = `${g.slice(0, 3)}-${g.slice(3)}` : _ = `${g.slice(0, 3)}-${g.slice(3, 6)}-${g.slice(6, 10)}` : s === "+1" ? g.length <= 3 ? _ = g : g.length <= 6 ? _ = `(${g.slice(0, 3)}) ${g.slice(3)}` : _ = `(${g.slice(0, 3)}) ${g.slice(3, 6)}-${g.slice(6, 10)}` : g.length <= 3 ? _ = g : g.length <= 6 ? _ = `${g.slice(0, 3)} ${g.slice(3)}` : _ = `${g.slice(0, 3)} ${g.slice(3, 6)} ${g.slice(6, 10)}`, _;
+  }, x = (m) => {
+    var g;
+    !/^\d$/.test(m.key) && m.key !== "Backspace" && m.key !== "Delete" && m.key !== "Tab" && m.key !== "ArrowLeft" && m.key !== "ArrowRight" && m.key !== "Home" && m.key !== "End" && m.preventDefault(), (g = h.onKeyDown) == null || g.call(h, m);
+  }, b = (m) => {
+    const g = m.target, _ = g.selectionStart || 0, z = g.value.replace(/\D/g, ""), H = w(z);
+    f(H);
+    const B = v.length, E = H.length - B;
     if (requestAnimationFrame(() => {
       const N = Math.max(0, Math.min(_ + E, H.length));
-      h.setSelectionRange(N, N);
+      g.setSelectionRange(N, N);
     }), C) {
       const N = {
-        ...f,
-        target: { ...f.target, value: z }
+        ...m,
+        target: { ...m.target, value: z }
       };
       C(N);
     }
-  }, k = (f) => {
+  }, k = (m) => {
     var N;
-    f.preventDefault();
-    const _ = f.clipboardData.getData("text/plain").replace(/\D/g, ""), H = f.target.selectionStart || 0, U = w.replace(/\D/g, "").slice(0, H) + _, E = v(U);
-    if (g(E), C) {
+    m.preventDefault();
+    const _ = m.clipboardData.getData("text/plain").replace(/\D/g, ""), H = m.target.selectionStart || 0, U = v.replace(/\D/g, "").slice(0, H) + _, E = w(U);
+    if (f(E), C) {
       const V = {
-        ...f,
-        target: { ...f.target, value: U }
+        ...m,
+        target: { ...m.target, value: U }
       };
       C(V);
     }
-    (N = m.onPaste) == null || N.call(m, f);
+    (N = h.onPaste) == null || N.call(h, m);
   };
   return /* @__PURE__ */ u("div", { className: "w-full", children: [
     e && /* @__PURE__ */ u(
@@ -2334,7 +2334,7 @@ const e0 = ({
         style: { color: t ? "#C21919" : "#181918" },
         children: [
           e,
-          m.required && /* @__PURE__ */ n("span", { style: { color: "#C21919" }, children: "*" })
+          h.required && /* @__PURE__ */ n("span", { style: { color: "#C21919" }, children: "*" })
         ]
       }
     ),
@@ -2392,7 +2392,7 @@ const e0 = ({
           },
           className: y,
           popupClassName: "country-code-dropdown",
-          disabled: m.disabled
+          disabled: h.disabled
         }
       ) : /* @__PURE__ */ n(
         "div",
@@ -2400,8 +2400,8 @@ const e0 = ({
           className: "phone-input-country-code-static",
           style: {
             borderColor: t ? "#C21919" : "#D1D1D1",
-            color: m.disabled ? "#00000040" : "#000000",
-            backgroundColor: m.disabled ? "#f5f5f5" : "#FAFAFA"
+            color: h.disabled ? "#00000040" : "#000000",
+            backgroundColor: h.disabled ? "#f5f5f5" : "#FAFAFA"
           },
           children: s
         }
@@ -2409,9 +2409,9 @@ const e0 = ({
       /* @__PURE__ */ n(
         t2,
         {
-          ...m,
+          ...h,
           ref: L,
-          value: w,
+          value: v,
           className: o,
           onKeyDown: x,
           onChange: b,
@@ -2421,7 +2421,7 @@ const e0 = ({
             height: "44px",
             borderRadius: "12px",
             borderColor: t ? "#C21919" : "#D1D1D1",
-            ...m.style
+            ...h.style
           }
         }
       )
@@ -2473,23 +2473,23 @@ const F2 = M.forwardRef(({
   value: c,
   ...p
 }, d) => {
-  const C = t ? "currency-input-error-state" : "", [m, L] = R(""), y = (v) => {
-    const b = v.replace(/[^\d.]/g, "").split("."), k = b[0], f = b[1], h = k.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-    return f !== void 0 ? `${h}.${f}` : h;
-  }, w = (v) => v.replace(/,/g, "");
+  const C = t ? "currency-input-error-state" : "", [h, L] = R(""), y = (w) => {
+    const b = w.replace(/[^\d.]/g, "").split("."), k = b[0], m = b[1], g = k.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return m !== void 0 ? `${g}.${m}` : g;
+  }, v = (w) => w.replace(/,/g, "");
   I(() => {
     if (c !== void 0) {
-      const v = String(c);
-      L(a ? y(v) : v);
+      const w = String(c);
+      L(a ? y(w) : w);
     }
   }, [c, a]);
-  const g = (v) => {
-    const x = v.target.value;
+  const f = (w) => {
+    const x = w.target.value;
     if (a) {
-      const b = w(x), k = y(b);
-      L(k), l && l(b, v);
+      const b = v(x), k = y(b);
+      L(k), l && l(b, w);
     } else
-      L(x), l && l(x, v);
+      L(x), l && l(x, w);
   };
   return /* @__PURE__ */ u("div", { className: "w-full", children: [
     e && /* @__PURE__ */ u(
@@ -2549,8 +2549,8 @@ const F2 = M.forwardRef(({
         status: t ? "error" : s,
         prefix: /* @__PURE__ */ n("span", { children: i }),
         ...p,
-        value: a ? m : c,
-        onChange: g,
+        value: a ? h : c,
+        onChange: f,
         style: {
           borderColor: t ? "#C21919" : "#D1D1D1",
           ...p.style
@@ -3078,8 +3078,8 @@ class T {
     let a = 0, l = 0, c = 0;
     const p = i / 60, d = (1 - Math.abs(2 * o - 1)) * r, C = d * (1 - Math.abs(p % 2 - 1));
     p >= 0 && p < 1 ? (a = d, l = C) : p >= 1 && p < 2 ? (a = C, l = d) : p >= 2 && p < 3 ? (l = d, c = C) : p >= 3 && p < 4 ? (l = C, c = d) : p >= 4 && p < 5 ? (a = C, c = d) : p >= 5 && p < 6 && (a = d, c = C);
-    const m = o - d / 2;
-    this.r = Z((a + m) * 255), this.g = Z((l + m) * 255), this.b = Z((c + m) * 255);
+    const h = o - d / 2;
+    this.r = Z((a + h) * 255), this.g = Z((l + h) * 255), this.b = Z((c + h) * 255);
   }
   fromHsv({
     h: t,
@@ -3092,22 +3092,22 @@ class T {
     const a = Z(o * 255);
     if (this.r = a, this.g = a, this.b = a, r <= 0)
       return;
-    const l = i / 60, c = Math.floor(l), p = l - c, d = Z(o * (1 - r) * 255), C = Z(o * (1 - r * p) * 255), m = Z(o * (1 - r * (1 - p)) * 255);
+    const l = i / 60, c = Math.floor(l), p = l - c, d = Z(o * (1 - r) * 255), C = Z(o * (1 - r * p) * 255), h = Z(o * (1 - r * (1 - p)) * 255);
     switch (c) {
       case 0:
-        this.g = m, this.b = d;
+        this.g = h, this.b = d;
         break;
       case 1:
         this.r = C, this.b = d;
         break;
       case 2:
-        this.r = d, this.b = m;
+        this.r = d, this.b = h;
         break;
       case 3:
         this.r = d, this.g = C;
         break;
       case 4:
-        this.r = m, this.g = d;
+        this.r = h, this.g = d;
         break;
       case 5:
       default:
@@ -3260,8 +3260,8 @@ function i0(e, t = {}) {
       const d = (t.styles || H2(c)).filter((C) => {
         if (!["prepend", "prependQueue"].includes(C.getAttribute(P2)))
           return !1;
-        const m = Number(C.getAttribute(I2) || 0);
-        return s >= m;
+        const h = Number(C.getAttribute(I2) || 0);
+        return s >= h;
       });
       if (d.length)
         return c.insertBefore(l, d[d.length - 1].nextSibling), l;
@@ -3541,7 +3541,7 @@ const l2 = /* @__PURE__ */ A.forwardRef((e, t) => {
   } = e, {
     prefixCls: d = "anticon",
     rootClassName: C
-  } = A.useContext(t0), m = Y0(C, d, {
+  } = A.useContext(t0), h = Y0(C, d, {
     [`${d}-${o.name}`]: !!o.name,
     [`${d}-spin`]: !!s || o.name === "loading"
   }, r);
@@ -3550,7 +3550,7 @@ const l2 = /* @__PURE__ */ A.forwardRef((e, t) => {
   const y = i ? {
     msTransform: `rotate(${i}deg)`,
     transform: `rotate(${i}deg)`
-  } : void 0, [w, g] = d0(c);
+  } : void 0, [v, f] = d0(c);
   return /* @__PURE__ */ A.createElement("span", x2({
     role: "img",
     "aria-label": o.name
@@ -3558,11 +3558,11 @@ const l2 = /* @__PURE__ */ A.forwardRef((e, t) => {
     ref: t,
     tabIndex: L,
     onClick: l,
-    className: m
+    className: h
   }), /* @__PURE__ */ A.createElement(q, {
     icon: o,
-    primaryColor: w,
-    secondaryColor: g,
+    primaryColor: v,
+    secondaryColor: f,
     style: y
   }));
 });
@@ -3756,8 +3756,8 @@ const t3 = ({
     // Add searchable text for filtering
     searchLabel: `${d.name} ${d.code}`.toLowerCase()
   })), p = (d, C) => {
-    var m;
-    return ((m = C == null ? void 0 : C.searchLabel) == null ? void 0 : m.includes(d.toLowerCase())) || !1;
+    var h;
+    return ((h = C == null ? void 0 : C.searchLabel) == null ? void 0 : h.includes(d.toLowerCase())) || !1;
   };
   return /* @__PURE__ */ u(w2, { children: [
     /* @__PURE__ */ n("style", { children: `
@@ -4058,31 +4058,32 @@ const t3 = ({
   valuePrefix: i = "₦",
   ledgerBalance: a,
   backgroundPattern: l = "wave",
-  topRight: c,
-  width: p = 348,
-  className: d = ""
+  backgroundImage: c,
+  topRight: p,
+  width: d = 348,
+  className: C = ""
 }) => {
-  const [C, m] = R(!0), L = () => {
-    m(!C), s && s();
-  }, y = /* @__PURE__ */ u("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  const [h, L] = R(!0), y = () => {
+    L(!h), s && s();
+  }, v = /* @__PURE__ */ u("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ n("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
     /* @__PURE__ */ n("path", { d: "M3 10h18M7 14h4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
   ] });
   return /* @__PURE__ */ u(
     "div",
     {
-      className: `relative overflow-hidden flex flex-col rounded-[20px] px-[18px] pt-3 transition-all duration-300 ease-in-out hover:-translate-y-1 cursor-pointer self-start ${a ? "pb-1" : "pb-3"} ${d}`,
+      className: `relative overflow-hidden flex flex-col rounded-[20px] px-[18px] pt-3 transition-all duration-300 ease-in-out hover:-translate-y-1 cursor-pointer self-start ${a ? "pb-1" : "pb-3"} ${C}`,
       style: {
-        background: "radial-gradient(circle at 50% 136%, #7A7F7A 0%, #181918 100%)",
-        width: typeof p == "number" ? `${p}px` : p,
+        background: c ? `url(${c}) center / cover no-repeat` : "radial-gradient(circle at 50% 136%, #7A7F7A 0%, #181918 100%)",
+        width: typeof d == "number" ? `${d}px` : d,
         boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
         transition: "all 0.3s ease-in-out"
       },
-      onMouseEnter: (w) => {
-        w.currentTarget.style.boxShadow = "0 0 24px 0 rgba(0, 0, 0, 0.15)";
+      onMouseEnter: (f) => {
+        f.currentTarget.style.boxShadow = "0 0 24px 0 rgba(0, 0, 0, 0.15)";
       },
-      onMouseLeave: (w) => {
-        w.currentTarget.style.boxShadow = "0 0 0 0 rgba(0, 0, 0, 0)";
+      onMouseLeave: (f) => {
+        f.currentTarget.style.boxShadow = "0 0 0 0 rgba(0, 0, 0, 0)";
       },
       children: [
         l !== "none" && /* @__PURE__ */ n(
@@ -4099,8 +4100,8 @@ const t3 = ({
         ),
         /* @__PURE__ */ u("div", { className: "relative z-10", children: [
           /* @__PURE__ */ u("div", { className: "flex items-center justify-between mb-4", children: [
-            /* @__PURE__ */ n("div", { className: "w-10 h-10 bg-[#616161] rounded-full flex items-center justify-center text-white transition-transform duration-300 ease-in-out hover:scale-110", children: r || y }),
-            c && /* @__PURE__ */ n("div", { children: c })
+            /* @__PURE__ */ n("div", { className: "w-10 h-10 bg-[#616161] rounded-full flex items-center justify-center text-white transition-transform duration-300 ease-in-out hover:scale-110", children: r || v }),
+            p && /* @__PURE__ */ n("div", { children: p })
           ] }),
           /* @__PURE__ */ u("div", { className: "flex items-center gap-2 mt-3", children: [
             /* @__PURE__ */ n("span", { className: "text-sm text-[#E6E6E6] font-light transition-colors duration-200", children: e }),
@@ -4108,7 +4109,7 @@ const t3 = ({
               "button",
               {
                 className: "bg-transparent border-none cursor-pointer p-1 flex items-center justify-center text-white hover:text-white/80 transition-colors duration-200",
-                onClick: L,
+                onClick: y,
                 "aria-label": "Toggle visibility",
                 children: /* @__PURE__ */ u(
                   "svg",
@@ -4145,7 +4146,7 @@ const t3 = ({
               }
             )
           ] }),
-          /* @__PURE__ */ n("div", { className: "text-[32px] font-bold text-white transition-all duration-200", children: C ? `${i} ${t}` : "****" }),
+          /* @__PURE__ */ n("div", { className: "text-[32px] font-bold text-white transition-all duration-200", children: h ? `${i} ${t}` : "****" }),
           a && /* @__PURE__ */ u("div", { className: "mb-1", children: [
             /* @__PURE__ */ n("div", { className: "w-full h-px bg-white/10 mb-2 transition-opacity duration-300" }),
             /* @__PURE__ */ u("div", { className: "flex items-center gap-2 transition-all duration-200", children: [
@@ -4171,7 +4172,7 @@ const t3 = ({
               ),
               /* @__PURE__ */ u("span", { className: "text-xs text-[#E6E6E6] font-light transition-all duration-200", children: [
                 "Ledger Balance ",
-                C ? `${i} ${a}` : "****"
+                h ? `${i} ${a}` : "****"
               ] })
             ] })
           ] })