shekel-fe-shared-lib 1.0.26 → 1.0.28

package/dist/index.mjs

@@ -118,26 +118,39 @@ const R1 = ({
   progressText: a,
   badge: l,
   width: c = 347,
-  className: p = ""
+  className: p = "",
+  selected: d = !1,
+  onClick: C,
+  size: m = "md",
+  rounded: L = "2xl"
 }) => {
-  const d = /* @__PURE__ */ u("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
+  const y = m === "sm" ? "p-3" : m === "lg" ? "p-6" : "p-4", g = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    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: [
     /* @__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 border-[#E6E6E6] rounded-2xl p-4 flex flex-col justify-between transition-all duration-300 ease-in-out hover:border-gray-300 hover:-translate-y-1 cursor-pointer ${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} ${g} ${d ? "border-[#EC615B]" : "border-[#E6E6E6]"} ${p}`,
       style: {
         width: typeof c == "number" ? `${c}px` : c,
-        boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
+        boxShadow: d ? "0 0 0 1px #EC615B" : "0 0 0 0 rgba(0, 0, 0, 0)",
         transition: "all 0.3s ease-in-out"
       },
-      onMouseEnter: (C) => {
-        C.currentTarget.style.boxShadow = "0 0 20px 0 rgba(0, 0, 0, 0.1)";
+      onClick: C,
+      onMouseEnter: (x) => {
+        x.currentTarget.style.boxShadow = d ? "0 0 0 1px #EC615B" : "0 0 20px 0 rgba(0, 0, 0, 0.1)";
       },
-      onMouseLeave: (C) => {
-        C.currentTarget.style.boxShadow = "0 0 0 0 rgba(0, 0, 0, 0)";
+      onMouseLeave: (x) => {
+        x.currentTarget.style.boxShadow = d ? "0 0 0 1px #EC615B" : "0 0 0 0 rgba(0, 0, 0, 0)";
       },
       children: [
         /* @__PURE__ */ u("div", { children: [
@@ -150,7 +163,7 @@ const R1 = ({
                   backgroundColor: o,
                   color: s
                 },
-                children: r || d
+                children: r || v
               }
             ),
             l && l
@@ -186,17 +199,17 @@ const R1 = ({
   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 b = "relative inline-flex items-center", g = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", v = {
+  const w = "relative inline-flex items-center", g = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", v = {
     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"
-  }, w = {
+  }, x = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
     lg: "w-6 h-6",
     responsive: "w-4 sm:w-5 md:w-6 h-4 sm:h-5 md:h-6"
-  }, x = {
+  }, b = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-lg",
@@ -207,10 +220,10 @@ const R1 = ({
     borderColor: l || "#D1D5DB",
     color: d,
     ...L
-  }, _ = C ? "" : "placeholder:text-gray-400", z = l ? "" : "border-gray-300", H = d ? "" : "text-gray-900", Z = c ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", U = `${g} ${!s.includes("px-") && !s.includes("py-") ? v[r] : ""} ${e ? k : ""} ${f} ${s.includes("rounded") ? "" : x[m]} ${s.includes("border-") ? "" : z} ${H} ${Z} ${_} ${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 = `${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(
     "svg",
     {
-      className: `${w[r]} ${N}`,
+      className: `${x[r]} ${N}`,
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -226,7 +239,7 @@ const R1 = ({
       )
     }
   );
-  return /* @__PURE__ */ u("div", { className: `${b} ${f}`, children: [
+  return /* @__PURE__ */ u("div", { className: `${w} ${f}`, children: [
     e && /* @__PURE__ */ n(
       "div",
       {
@@ -288,10 +301,10 @@ const R1 = ({
   borderColor: C,
   style: m
 }) => {
-  const [L, y] = R(!1), b = i2(null);
+  const [L, y] = R(!1), w = i2(null);
   I(() => {
     const $ = (G) => {
-      b.current && !b.current.contains(G.target) && y(!1);
+      w.current && !w.current.contains(G.target) && y(!1);
     };
     return L && document.addEventListener("mousedown", $), () => {
       document.removeEventListener("mousedown", $);
@@ -301,9 +314,9 @@ const R1 = ({
     !a && t === "click" && y(!L);
   }, v = () => {
     !a && t === "hover" && y(!0);
-  }, w = () => {
+  }, x = () => {
     !a && t === "hover" && y(!1);
-  }, x = ($) => {
+  }, b = ($) => {
     !$.disabled && $.onClick && $.onClick(), y(!1);
   }, k = {
     bottomLeft: "top-full left-0 mt-1",
@@ -320,14 +333,14 @@ const R1 = ({
     md: "px-4 py-2 text-sm gap-2",
     lg: "px-5 py-3 text-base gap-2.5",
     responsive: "px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-3 text-xs sm:text-sm md:text-base gap-1.5 sm:gap-2 md:gap-2.5"
-  }, z = "hover:bg-gray-50", H = "border-gray-200", Z = "text-red-600", U = p ? { backgroundColor: p } : {}, E = p ? "" : z, N = d ? { color: d } : {}, V = d ? { backgroundColor: d + "15" } : {}, S = C || H;
+  }, z = "hover:bg-gray-50", H = "border-gray-200", B = "text-red-600", U = p ? { backgroundColor: p } : {}, E = p ? "" : z, N = d ? { color: d } : {}, V = d ? { backgroundColor: d + "15" } : {}, S = C || H;
   return /* @__PURE__ */ u(
     "div",
     {
-      ref: b,
+      ref: w,
       className: `relative inline-block ${s}`,
       onMouseEnter: v,
-      onMouseLeave: w,
+      onMouseLeave: x,
       style: m,
       children: [
         /* @__PURE__ */ n(
@@ -355,13 +368,13 @@ const R1 = ({
                   } : p && (G = U)), /* @__PURE__ */ u(
                     "div",
                     {
-                      onClick: () => x($),
+                      onClick: () => b($),
                       className: `
                     dropdown-menu-item
                     flex items-center cursor-pointer transition-all duration-200 ease-out
                     ${!i.includes("px-") && !i.includes("py-") ? _[l] : ""}
                     ${$.disabled ? "opacity-50 cursor-not-allowed" : E}
-                    ${$.danger ? d ? "" : Z : "text-gray-700"}
+                    ${$.danger ? d ? "" : B : "text-gray-700"}
                   `,
                       style: G,
                       children: [
@@ -497,7 +510,7 @@ function z0(e) {
   const [L, y] = M.useState(() => {
     const k = r._getWatch(o, c.current);
     return p.current ? p.current(k) : k;
-  }), b = M.useCallback((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) => {
@@ -520,13 +533,13 @@ function z0(e) {
       g(k.values);
     }
   })), [r, a, o, g]), M.useEffect(() => r._removeUnmounted());
-  const v = C.current !== r, w = m.current, x = M.useMemo(() => {
+  const v = C.current !== r, x = m.current, b = M.useMemo(() => {
     if (i)
       return null;
-    const k = !v && !s2(w, o);
-    return v || k ? b() : null;
-  }, [i, v, o, w, b]);
-  return x !== null ? x : L;
+    const k = !v && !s2(x, o);
+    return v || k ? w() : null;
+  }, [i, v, o, x, w]);
+  return b !== null ? b : L;
 }
 function W(e) {
   const t = _2(), { name: r, disabled: o, control: s = t, shouldUnregister: i, defaultValue: a, exact: l = !0 } = e, c = F0(s._names.array, r), p = M.useMemo(() => D(s._formValues, r, D(s._defaultValues, r, a)), [s, r, a]), d = z0({
@@ -544,7 +557,7 @@ function W(e) {
     ...C2(e.disabled) ? { disabled: e.disabled } : {}
   }));
   m.current = e;
-  const b = M.useMemo(() => Object.defineProperties({}, {
+  const w = M.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: !0,
       get: () => !!D(C.errors, r)
@@ -577,7 +590,7 @@ function W(e) {
       name: r
     },
     type: E2.BLUR
-  }), [r, s._formValues]), w = M.useCallback((k) => {
+  }), [r, s._formValues]), x = M.useCallback((k) => {
     const f = D(s._fields, r);
     f && f._f && k && (f._f.ref = {
       focus: () => r2(k.focus) && k.focus(),
@@ -585,14 +598,14 @@ function W(e) {
       setCustomValidity: (h) => r2(k.setCustomValidity) && k.setCustomValidity(h),
       reportValidity: () => r2(k.reportValidity) && k.reportValidity()
     });
-  }, [s._fields, r]), x = M.useMemo(() => ({
+  }, [s._fields, r]), b = M.useMemo(() => ({
     name: r,
     value: d,
     ...C2(o) || C.disabled ? { disabled: C.disabled || o } : {},
     onChange: g,
     onBlur: v,
-    ref: w
-  }), [r, o, C.disabled, g, v, w, d]);
+    ref: x
+  }), [r, o, C.disabled, g, v, x, d]);
   return M.useEffect(() => {
     const k = s._options.shouldUnregister || i, f = L.current;
     f && f !== r && !c && s.unregister(f), s.register(r, {
@@ -616,10 +629,10 @@ function W(e) {
       name: r
     });
   }, [o, r, s]), M.useMemo(() => ({
-    field: x,
+    field: b,
     formState: C,
-    fieldState: b
-  }), [x, C, b]);
+    fieldState: w
+  }), [b, C, w]);
 }
 const U0 = M.createContext(null);
 U0.displayName = "HookFormContext";
@@ -639,28 +652,28 @@ const X2 = ({
   showSearch: m = !1,
   searchPlaceholder: L = "Search...",
   bgColor: y,
-  borderColor: b,
+  borderColor: w,
   focusBorderColor: g = "#EC615B",
   selectedBgColor: v,
-  selectedTextColor: w,
-  hoverBgColor: x,
+  selectedTextColor: x,
+  hoverBgColor: b,
   rounded: k = "lg",
   style: f,
   label: h,
   error: _,
   helperText: z
 }) => {
-  const [H, Z] = R(!1), [U, E] = R(r), [N, V] = R(""), S = i2(null), $ = i2(null), G = t !== void 0 ? t : U;
+  const [H, B] = R(!1), [U, E] = R(r), [N, V] = R(""), S = i2(null), $ = i2(null), G = t !== void 0 ? t : U;
   I(() => {
     const F = (Y) => {
-      S.current && !S.current.contains(Y.target) && (Z(!1), V(""), H && (i == null || i()));
+      S.current && !S.current.contains(Y.target) && (B(!1), V(""), H && (i == null || i()));
     };
     return H && (document.addEventListener("mousedown", F), m && $.current && $.current.focus()), () => {
       document.removeEventListener("mousedown", F);
     };
   }, [H, m]);
   const c2 = (F) => {
-    t === void 0 && E(F), s == null || s(F), Z(!1), V("");
+    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(
@@ -678,10 +691,10 @@ const X2 = ({
     full: "rounded-full"
   }, u0 = p ? "w-full" : "min-w-[200px]", p2 = () => {
     const F = {};
-    return y && (F.backgroundColor = y), b && (F.borderColor = b), F;
+    return y && (F.backgroundColor = y), w && (F.borderColor = w), F;
   }, f0 = () => {
     const F = {};
-    return v && (F.backgroundColor = v), w && (F.color = w), F;
+    return v && (F.backgroundColor = v), x && (F.color = x), F;
   }, h0 = /* @__PURE__ */ n(
     "svg",
     {
@@ -699,7 +712,7 @@ const X2 = ({
       /* @__PURE__ */ u(
         "div",
         {
-          onClick: () => !l && Z(!H),
+          onClick: () => !l && B(!H),
           className: `
             select-trigger
             flex items-center justify-between gap-2
@@ -713,17 +726,17 @@ const X2 = ({
           style: {
             ...p2(),
             backgroundColor: y || p2().backgroundColor || "#FFFFFF",
-            borderColor: _ ? "#C21919" : b || p2().borderColor || "#D1D5DB",
+            borderColor: _ ? "#C21919" : w || p2().borderColor || "#D1D5DB",
             ...H && {
               borderColor: _ ? "#C21919" : g,
               boxShadow: `0 0 0 2px ${_ ? "#C21919" : g}20`
             },
-            ...!l && !H && x && {
+            ...!l && !H && b && {
               cursor: "pointer"
             }
           },
           onMouseEnter: (F) => {
-            !l && x && (F.currentTarget.style.backgroundColor = x);
+            !l && b && (F.currentTarget.style.backgroundColor = b);
           },
           onMouseLeave: (F) => {
             y ? F.currentTarget.style.backgroundColor = y : F.currentTarget.style.backgroundColor = "#FFFFFF";
@@ -755,7 +768,7 @@ 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: b,
+              borderColor: w,
               boxShadow: `0 0 0 2px ${g}20`
             },
             onClick: (F) => F.stopPropagation()
@@ -773,11 +786,11 @@ const X2 = ({
             style: {
               ...F.value === G ? f0() : {},
               backgroundColor: F.value === G ? v || "#FCEAE9" : void 0,
-              color: F.value === G ? w || "#EC615B" : "#181918",
+              color: F.value === G ? x || "#EC615B" : "#181918",
               fontWeight: F.value === G ? "medium" : void 0
             },
             onMouseEnter: (Y) => {
-              !F.disabled && F.value !== G && (Y.currentTarget.style.backgroundColor = x || "#F3F4F6");
+              !F.disabled && F.value !== G && (Y.currentTarget.style.backgroundColor = b || "#F3F4F6");
             },
             onMouseLeave: (Y) => {
               F.value !== G && (Y.currentTarget.style.backgroundColor = "transparent");
@@ -820,7 +833,7 @@ const X2 = ({
       error: r ?? ((a = i.error) == null ? void 0 : a.message)
     }
   );
-}, Z0 = ({ control: e, name: t, ...r }) => e && t ? /* @__PURE__ */ n(G0, { control: e, name: t, ...r }) : /* @__PURE__ */ n(X2, { name: t, ...r }), T1 = ({
+}, B0 = ({ control: e, name: t, ...r }) => e && t ? /* @__PURE__ */ n(G0, { control: e, name: t, ...r }) : /* @__PURE__ */ n(X2, { name: t, ...r }), T1 = ({
   columns: e,
   dataSource: t,
   rowKey: r = "id",
@@ -836,12 +849,12 @@ const X2 = ({
   rowHoverColor: m,
   borderColor: L,
   stripedRowColor: y,
-  rounded: b = "md",
+  rounded: w = "md",
   style: g
 }) => {
-  const [v, w] = R(
+  const [v, x] = R(
     o && typeof o == "object" && o.current || 1
-  ), [x, k] = R(
+  ), [b, k] = R(
     o && typeof o == "object" && o.pageSize || 10
   ), f = {
     sm: {
@@ -879,10 +892,10 @@ const X2 = ({
     lg: "rounded-lg",
     xl: "rounded-xl",
     "2xl": "rounded-2xl"
-  }, _ = f[p], z = h[b], H = (V, S) => typeof r == "function" ? r(V) : V[r] || String(S), Z = (V, S) => S ? S.split(".").reduce(($, G) => $ == null ? void 0 : $[G], V) : V, U = o === !1 ? t : t.slice((v - 1) * x, v * x), E = (V) => {
-    w(V), o && typeof o == "object" && o.onChange && o.onChange(V, x);
+  }, _ = 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) => {
+    x(V), o && typeof o == "object" && o.onChange && o.onChange(V, b);
   }, N = (V) => {
-    k(V), w(1), o && typeof o == "object" && o.onChange && o.onChange(1, 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: [
     /* @__PURE__ */ n(
@@ -983,7 +996,7 @@ const X2 = ({
                     },
                     ...$,
                     children: e.map((P, K) => {
-                      const Q = Z(V, P.dataIndex), d2 = P.render ? P.render(Q, V, S) : Q;
+                      const Q = B(V, P.dataIndex), d2 = P.render ? P.render(Q, V, S) : Q;
                       return /* @__PURE__ */ n(
                         "td",
                         {
@@ -1006,10 +1019,10 @@ const X2 = ({
       }
     ),
     o !== !1 && /* @__PURE__ */ n(
-      B0,
+      Z0,
       {
         current: v,
-        pageSize: x,
+        pageSize: b,
         total: t.length,
         onChange: E,
         onPageSizeChange: N,
@@ -1020,7 +1033,7 @@ const X2 = ({
       }
     )
   ] });
-}, B0 = ({
+}, Z0 = ({
   current: e,
   pageSize: t,
   total: r,
@@ -1076,7 +1089,7 @@ const X2 = ({
     ] }),
     /* @__PURE__ */ u("div", { className: "flex items-center gap-2", children: [
       i && /* @__PURE__ */ n(
-        Z0,
+        B0,
         {
           value: t.toString(),
           onChange: (y) => s(Number(y)),
@@ -1106,13 +1119,13 @@ const X2 = ({
             ) })
           }
         ),
-        L().map((y, b) => y === "..." ? /* @__PURE__ */ n(
+        L().map((y, w) => y === "..." ? /* @__PURE__ */ n(
           "span",
           {
             className: `relative inline-flex items-center justify-center ${m[c].button} font-normal text-[#181918]`,
             children: "..."
           },
-          `ellipsis-${b}`
+          `ellipsis-${w}`
         ) : /* @__PURE__ */ n(
           "button",
           {
@@ -1158,12 +1171,12 @@ const X2 = ({
   searchFocusBorderColor: m = "#3b82f6",
   rounded: L = "md",
   style: y,
-  hideActionButtons: b = !1,
+  hideActionButtons: w = !1,
   selectedActionButton: g
 }) => {
   const v = (_) => {
     o == null || o(_.target.value);
-  }, x = {
+  }, b = {
     sm: {
       titleSize: "text-lg",
       titleWeight: "font-semibold",
@@ -1229,14 +1242,14 @@ const X2 = ({
   return /* @__PURE__ */ u(
     "div",
     {
-      className: `${x.spacing} mb-4 ${a}`,
+      className: `${b.spacing} mb-4 ${a}`,
       style: y,
       children: [
         (e || t) && /* @__PURE__ */ u("div", { children: [
           e && /* @__PURE__ */ n(
             "h2",
             {
-              className: `${x.titleSize} ${x.titleWeight}`,
+              className: `${b.titleSize} ${b.titleWeight}`,
               style: { color: c || "#111827" },
               children: e
             }
@@ -1244,18 +1257,18 @@ const X2 = ({
           t && /* @__PURE__ */ n(
             "p",
             {
-              className: `${x.descriptionSize} ${x.descriptionMargin}`,
+              className: `${b.descriptionSize} ${b.descriptionMargin}`,
               style: { color: p || "#6b7280" },
               children: t
             }
           )
         ] }),
-        /* @__PURE__ */ u("div", { className: `flex flex-col sm:flex-row items-stretch sm:items-center justify-between ${x.gap}`, children: [
-          o && /* @__PURE__ */ n("div", { className: `flex-1 ${x.maxWidth}`, children: /* @__PURE__ */ u("div", { className: "relative", children: [
+        /* @__PURE__ */ u("div", { className: `flex flex-col sm:flex-row items-stretch sm:items-center justify-between ${b.gap}`, children: [
+          o && /* @__PURE__ */ n("div", { className: `flex-1 ${b.maxWidth}`, children: /* @__PURE__ */ u("div", { className: "relative", children: [
             /* @__PURE__ */ n("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ n(
               "svg",
               {
-                className: `${x.iconSize} text-gray-400`,
+                className: `${b.iconSize} text-gray-400`,
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -1276,7 +1289,7 @@ const X2 = ({
                 type: "text",
                 placeholder: r,
                 onChange: v,
-                className: `block w-full ${x.searchPaddingLeft} pr-3 ${x.searchInputPy} border ${f} focus:outline-none focus:ring-2 focus:ring-opacity-50 ${x.searchInputSize} transition-colors duration-200`,
+                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,
                 onFocus: (_) => {
                   _.currentTarget.style.borderColor = m, _.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
@@ -1287,9 +1300,9 @@ const X2 = ({
               }
             )
           ] }) }),
-          /* @__PURE__ */ n("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: b && g ? g : s })
+          /* @__PURE__ */ n("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: w && g ? g : s })
         ] }),
-        i && /* @__PURE__ */ n("div", { className: `flex flex-wrap items-center ${x.gap}`, children: i })
+        i && /* @__PURE__ */ n("div", { className: `flex flex-wrap items-center ${b.gap}`, children: i })
       ]
     }
   );
@@ -1316,10 +1329,10 @@ const X2 = ({
   headerBgColor: m = "#ffffff",
   overlayColor: L = "rgba(0, 0, 0, 0.5)",
   bodyClassName: y = "",
-  headerClassName: b = "",
+  headerClassName: w = "",
   maxHeight: g = "70vh"
 }) => {
-  const [v, w] = R(!1), [x, k] = R(!1), f = i || O0[a], _ = {
+  const [v, x] = R(!1), [b, k] = R(!1), f = i || O0[a], _ = {
     width: typeof f == "number" ? `${f}px` : f,
     maxWidth: "90vw",
     backgroundColor: C
@@ -1330,11 +1343,11 @@ const X2 = ({
   };
   if (I(() => {
     if (e)
-      w(!0), setTimeout(() => k(!0), 10), document.body.style.overflow = "hidden";
+      x(!0), setTimeout(() => k(!0), 10), document.body.style.overflow = "hidden";
     else {
       k(!1);
       const E = setTimeout(() => {
-        w(!1);
+        x(!1);
       }, 200);
       return document.body.style.overflow = "unset", () => clearTimeout(E);
     }
@@ -1346,7 +1359,7 @@ const X2 = ({
       document.removeEventListener("keydown", E);
     };
   }, [e, t, l]), !v) return null;
-  const Z = () => {
+  const B = () => {
     c && t();
   }, U = (E) => {
     E.stopPropagation();
@@ -1355,26 +1368,26 @@ const X2 = ({
     "div",
     {
       className: "fixed inset-0 z-50 overflow-y-auto",
-      onClick: Z,
+      onClick: B,
       children: [
         /* @__PURE__ */ n(
           "div",
           {
-            className: `fixed inset-0 transition-opacity duration-200 ease-out ${x ? "opacity-100" : "opacity-0"}`,
+            className: `fixed inset-0 transition-opacity duration-200 ease-out ${b ? "opacity-100" : "opacity-0"}`,
             style: H
           }
         ),
         /* @__PURE__ */ n("div", { className: `flex min-h-full items-center justify-center p-4 ${p ? "items-center" : "items-start pt-20"}`, children: /* @__PURE__ */ u(
           "div",
           {
-            className: `relative rounded-lg shadow-xl transition-all duration-200 ease-out overflow-y-auto ${x ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-4"} ${d}`,
+            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 },
             onClick: U,
             children: [
               (r || l) && /* @__PURE__ */ u(
                 "div",
                 {
-                  className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${b}`,
+                  className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${w}`,
                   style: z,
                   children: [
                     r && /* @__PURE__ */ n("h3", { className: "text-lg font-semibold text-gray-900", children: r }),
@@ -1451,7 +1464,7 @@ 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"
-  }, b = {
+  }, w = {
     default: "bg-gray-600",
     primary: "bg-[#EC615B]",
     success: "bg-green-600",
@@ -1469,7 +1482,7 @@ const X2 = ({
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }, w = {
+  }, x = {
     ...l && { backgroundColor: l },
     ...c && { color: c },
     ...p && { borderColor: p, borderWidth: "1px", borderStyle: "solid" },
@@ -1479,9 +1492,9 @@ const X2 = ({
     "span",
     {
       className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${l ? "" : m[t]} ${L[r]} ${v[d]} ${a}`,
-      style: w,
+      style: x,
       children: [
-        o && /* @__PURE__ */ n("span", { className: `rounded-full ${y[r]} ${b[t]}` }),
+        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 }),
         e,
         s && i === "right" && /* @__PURE__ */ n("span", { className: `inline-flex items-center ${g[r]}`, children: s })
@@ -1502,7 +1515,7 @@ const X2 = ({
   errorColor: d,
   lineColor: C
 }) => {
-  const m = (w, x) => x.status ? x.status : w < t ? "finish" : w === t ? "process" : "wait", L = {
+  const m = (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",
@@ -1512,31 +1525,31 @@ const X2 = ({
     md: "text-base",
     lg: "text-lg",
     responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
-  }, b = {
+  }, w = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
     responsive: "text-xs sm:text-xs md:text-sm lg:text-base"
-  }, g = (w, x) => x || (w === "finish" ? /* @__PURE__ */ n("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
+  }, g = (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",
       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"
     }
-  ) }) : w === "error" ? /* @__PURE__ */ n("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
+  ) }) : x === "error" ? /* @__PURE__ */ n("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
     "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), v = (w) => {
-    const x = s === "outline";
-    switch (w) {
+  ) }) : null), v = (x) => {
+    const b = s === "outline";
+    switch (x) {
       case "finish":
         return {
-          icon: x ? `bg-white text-white border ${l ? `border-[${l}]` : "border-green-500"}` : `${l ? `bg-[${l}]` : "bg-green-500"} text-white ${l ? `border-[${l}]` : "border-green-500"}`,
+          icon: b ? `bg-white text-white border ${l ? `border-[${l}]` : "border-green-500"}` : `${l ? `bg-[${l}]` : "bg-green-500"} text-white ${l ? `border-[${l}]` : "border-green-500"}`,
           title: "text-[#181918]",
           description: "text-gray-600",
           line: C ? `bg-[${C}]` : "bg-green-500",
@@ -1544,7 +1557,7 @@ const X2 = ({
         };
       case "process":
         return {
-          icon: x ? `bg-white text-white border ${c ? `border-[${c}]` : "border-[#EC615B]"}` : `${c ? `bg-[${c}]` : "bg-[#EC615B]"} text-white ${c ? `border-[${c}]` : "border-[#EC615B]"}`,
+          icon: b ? `bg-white text-white border ${c ? `border-[${c}]` : "border-[#EC615B]"}` : `${c ? `bg-[${c}]` : "bg-[#EC615B]"} text-white ${c ? `border-[${c}]` : "border-[#EC615B]"}`,
           title: "text-[#181918] font-semibold",
           description: "text-gray-700",
           line: C ? `bg-[${C}]` : "bg-gray-300",
@@ -1552,7 +1565,7 @@ const X2 = ({
         };
       case "error":
         return {
-          icon: x ? `bg-white text-white border ${d ? `border-[${d}]` : "border-red-500"}` : `${d ? `bg-[${d}]` : "bg-red-500"} text-white ${d ? `border-[${d}]` : "border-red-500"}`,
+          icon: b ? `bg-white text-white border ${d ? `border-[${d}]` : "border-red-500"}` : `${d ? `bg-[${d}]` : "bg-red-500"} text-white ${d ? `border-[${d}]` : "border-red-500"}`,
           title: "text-red-600",
           description: "text-red-500",
           line: C ? `bg-[${C}]` : "bg-gray-300",
@@ -1568,8 +1581,8 @@ const X2 = ({
         };
     }
   };
-  return r === "horizontal" ? /* @__PURE__ */ n("div", { className: `flex items-start ${i}`, style: a, children: e.map((w, x) => {
-    const k = m(x, w), f = v(k), h = x === e.length - 1, _ = {};
+  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: [
       /* @__PURE__ */ u("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ n(
@@ -1577,7 +1590,7 @@ const X2 = ({
           {
             className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${f.icon}`,
             style: _,
-            children: g(k, w.icon)
+            children: g(k, x.icon)
           }
         ),
         /* @__PURE__ */ u("div", { className: "mt-2 text-center", children: [
@@ -1585,14 +1598,14 @@ const X2 = ({
             "div",
             {
               className: `${y[o]} ${f.title} transition-colors duration-300`,
-              children: w.title
+              children: x.title
             }
           ),
-          w.description && /* @__PURE__ */ n(
+          x.description && /* @__PURE__ */ n(
             "div",
             {
-              className: `${b[o]} ${f.description} mt-1 transition-colors duration-300`,
-              children: w.description
+              className: `${w[o]} ${f.description} mt-1 transition-colors duration-300`,
+              children: x.description
             }
           )
         ] })
@@ -1603,9 +1616,9 @@ const X2 = ({
           className: `flex-1 h-0.5 mt-4 mx-2 ${f.line} transition-colors duration-300`
         }
       )
-    ] }, x);
-  }) }) : /* @__PURE__ */ n("div", { className: `flex flex-col ${i}`, style: a, children: e.map((w, x) => {
-    const k = m(x, w), f = v(k), h = x === e.length - 1, _ = {};
+    ] }, 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: [
       /* @__PURE__ */ u("div", { className: "flex flex-col items-center mr-4", children: [
         /* @__PURE__ */ n(
@@ -1613,7 +1626,7 @@ const X2 = ({
           {
             className: `flex items-center justify-center ${L[o]} rounded-full border transition-all duration-300 ${f.icon}`,
             style: _,
-            children: g(k, w.icon)
+            children: g(k, x.icon)
           }
         ),
         !h && /* @__PURE__ */ n(
@@ -1629,18 +1642,18 @@ const X2 = ({
           "div",
           {
             className: `${y[o]} ${f.title} transition-colors duration-300`,
-            children: w.title
+            children: x.title
           }
         ),
-        w.description && /* @__PURE__ */ n(
+        x.description && /* @__PURE__ */ n(
           "div",
           {
-            className: `${b[o]} ${f.description} mt-1 transition-colors duration-300`,
-            children: w.description
+            className: `${w[o]} ${f.description} mt-1 transition-colors duration-300`,
+            children: x.description
           }
         )
       ] })
-    ] }, x);
+    ] }, b);
   }) });
 }, Y1 = ({
   percent: e = 0,
@@ -1662,7 +1675,7 @@ const X2 = ({
     md: "h-2",
     lg: "h-3",
     responsive: "h-1.5 sm:h-2 md:h-3 lg:h-4"
-  }, b = {
+  }, w = {
     sm: "text-xs",
     md: "text-sm",
     lg: "text-base",
@@ -1685,7 +1698,7 @@ const X2 = ({
       default:
         return L === 100 ? p || "bg-green-500" : c || "bg-[#EC615B]";
     }
-  }, w = () => C || "bg-gray-200", x = () => t === "success" || L === 100 ? /* @__PURE__ */ n("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
+  }, x = () => C || "bg-gray-200", b = () => t === "success" || L === 100 ? /* @__PURE__ */ n("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ n(
     "path",
     {
       fillRule: "evenodd",
@@ -1704,7 +1717,7 @@ const X2 = ({
     /* @__PURE__ */ n("div", { className: "flex-1", children: /* @__PURE__ */ n(
       "div",
       {
-        className: `w-full overflow-hidden ${y[i]} ${g[m]} ${w()}`,
+        className: `w-full overflow-hidden ${y[i]} ${g[m]} ${x()}`,
         style: { height: f },
         children: /* @__PURE__ */ n(
           "div",
@@ -1718,7 +1731,7 @@ const X2 = ({
         )
       }
     ) }),
-    r && /* @__PURE__ */ n("div", { className: `flex items-center gap-1 ${b[i]} text-gray-600 font-normal`, children: x() || k() })
+    r && /* @__PURE__ */ n("div", { className: `flex items-center gap-1 ${w[i]} text-gray-600 font-normal`, children: b() || k() })
   ] });
 }, J1 = ({
   checked: e,
@@ -1737,9 +1750,9 @@ const X2 = ({
   checkedBorderColor: L = "#EC615B",
   style: y
 }) => {
-  const [b, g] = R(t), v = e !== void 0, w = v ? e : b, x = (Z) => {
+  const [w, g] = R(t), v = e !== void 0, x = v ? e : w, b = (B) => {
     if (o) return;
-    const U = Z.target.checked;
+    const U = B.target.checked;
     v || g(U), r == null || r(U);
   }, k = {
     sm: "w-4 h-4",
@@ -1751,8 +1764,8 @@ const X2 = ({
     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" : !w && !s ? "border-gray-300 bg-white hover:border-gray-400" : "", z = () => {
-    if (!o && !(!w && !s))
+  }, 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 = () => {
+    if (!o && !(!x && !s))
       return h ? {
         borderColor: L,
         backgroundColor: C
@@ -1760,7 +1773,7 @@ const X2 = ({
         borderColor: L,
         backgroundColor: m
       };
-  }, H = () => h && (w || s) ? "text-white" : "";
+  }, H = () => h && (x || s) ? "text-white" : "";
   return /* @__PURE__ */ u("div", { className: "inline-flex items-center", style: y, children: [
     /* @__PURE__ */ n(
       "input",
@@ -1769,8 +1782,8 @@ const X2 = ({
         id: c,
         name: p,
         value: d,
-        checked: w,
-        onChange: x,
+        checked: x,
+        onChange: b,
         disabled: o,
         className: "sr-only"
       }
@@ -1791,7 +1804,7 @@ const X2 = ({
         `,
         style: z(),
         children: [
-          w && !s && /* @__PURE__ */ n(
+          x && !s && /* @__PURE__ */ n(
             "svg",
             {
               className: `${f[i]} ${H()}`,
@@ -1799,7 +1812,7 @@ const X2 = ({
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               strokeWidth: 3,
-              style: !h && (w || s) ? { color: C } : void 0,
+              style: !h && (x || s) ? { color: C } : void 0,
               children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
             }
           ),
@@ -1809,7 +1822,7 @@ const X2 = ({
               className: `${f[i]} ${H()}`,
               fill: "currentColor",
               viewBox: "0 0 24 24",
-              style: !h && (w || s) ? { color: C } : void 0,
+              style: !h && (x || s) ? { color: C } : void 0,
               children: /* @__PURE__ */ n("rect", { x: "4", y: "11", width: "16", height: "2", rx: "1" })
             }
           )
@@ -1873,13 +1886,13 @@ const X2 = ({
   rounded: L = "md",
   style: y
 }) => {
-  const b = D0(a), g = R0(L), v = "#F4F4F4", w = "#EBEBEB", x = "#181918", k = "#999999", f = "#9CA3AF", h = "#EC615B", _ = l || v, z = c || w, H = p || x, Z = d || k, U = C || f, E = m || h;
+  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;
   return e.length === 0 ? /* @__PURE__ */ n(
     "div",
     {
       className: `text-center py-8 text-gray-500 text-sm ${o}`,
       style: {
-        color: Z,
+        color: B,
         ...y
       },
       children: r
@@ -1887,7 +1900,7 @@ const X2 = ({
   ) : /* @__PURE__ */ n(
     "div",
     {
-      className: `overflow-y-auto ${b.container} ${o}`,
+      className: `overflow-y-auto ${w.container} ${o}`,
       style: { maxHeight: i, ...y },
       children: e.map((N, V) => /* @__PURE__ */ u(
         "div",
@@ -1911,19 +1924,19 @@ const X2 = ({
             S.currentTarget.style.backgroundColor = _;
           },
           children: [
-            /* @__PURE__ */ u("div", { className: `flex-1 min-w-0 ${b.item}`, children: [
+            /* @__PURE__ */ u("div", { className: `flex-1 min-w-0 ${w.item}`, children: [
               N.sublabel && /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `font-normal mb-0.5 ${b.sublabel}`,
-                  style: { color: Z },
+                  className: `font-normal mb-0.5 ${w.sublabel}`,
+                  style: { color: B },
                   children: N.sublabel
                 }
               ),
               /* @__PURE__ */ n(
                 "div",
                 {
-                  className: `font-medium truncate ${b.label}`,
+                  className: `font-medium truncate ${w.label}`,
                   style: { color: H },
                   children: N.label
                 }
@@ -1940,7 +1953,7 @@ const X2 = ({
               hover:scale-110
               active:scale-95
               focus:outline-none focus:ring-2 focus:ring-opacity-50
-              ${b.button}
+              ${w.button}
             `,
                 style: {
                   color: U
@@ -1955,7 +1968,7 @@ const X2 = ({
                 children: /* @__PURE__ */ n(
                   "svg",
                   {
-                    className: b.icon,
+                    className: w.icon,
                     fill: "none",
                     stroke: "currentColor",
                     viewBox: "0 0 24 24",
@@ -2164,34 +2177,34 @@ const e0 = ({
   const [p, d] = R(Array(e).fill("")), C = i2([]);
   I(() => {
     if (t) {
-      const b = t.split("").slice(0, e), g = [...b, ...Array(e - b.length).fill("")];
+      const w = t.split("").slice(0, e), g = [...w, ...Array(e - w.length).fill("")];
       d(g);
     }
   }, [t, e]);
-  const m = (b, g) => {
-    var x;
+  const m = (w, g) => {
+    var b;
     if (g && !/^\d+$/.test(g)) return;
     const v = [...p];
-    v[b] = g.slice(-1), d(v);
-    const w = v.join("");
-    r == null || r(w), g && b < e - 1 && ((x = C.current[b + 1]) == null || x.focus()), v.every((k) => k !== "") && (s == null || s(w));
-  }, L = (b, g) => {
+    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[b] && b > 0 && ((v = C.current[b - 1]) == null || v.focus());
-  }, y = (b) => {
+    g.key === "Backspace" && !p[w] && w > 0 && ((v = C.current[w - 1]) == null || v.focus());
+  }, y = (w) => {
     var f;
-    b.preventDefault();
-    const g = b.clipboardData.getData("text/plain");
+    w.preventDefault();
+    const g = w.clipboardData.getData("text/plain");
     if (!/^\d+$/.test(g)) return;
-    const v = g.split("").slice(0, e), w = [...v, ...Array(e - v.length).fill("")];
-    d(w);
-    const x = w.join("");
-    r == null || r(x);
+    const v = g.split("").slice(0, e), x = [...v, ...Array(e - v.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(), w.every((h) => h !== "") && (s == null || s(x));
+    (f = C.current[k]) == null || f.focus(), x.every((h) => h !== "") && (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((b, g) => /* @__PURE__ */ u(M.Fragment, { 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(
         t2,
         {
@@ -2199,7 +2212,7 @@ const e0 = ({
             C.current[g] = v;
           },
           placeholder: "",
-          value: b,
+          value: w,
           onChange: (v) => m(g, v.target.value),
           onKeyDown: (v) => L(g, v),
           onPaste: y,
@@ -2268,7 +2281,7 @@ const e0 = ({
   onChange: C,
   ...m
 }, L) => {
-  const y = t ? "phone-input-error-state" : "", [b, g] = R("");
+  const y = t ? "phone-input-error-state" : "", [w, g] = R("");
   I(() => {
     if (d !== void 0) {
       const f = String(d).replace(/\D/g, ""), h = v(f);
@@ -2283,13 +2296,13 @@ const e0 = ({
       return h;
     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)}`, _;
-  }, w = (f) => {
+  }, 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);
-  }, x = (f) => {
+  }, b = (f) => {
     const h = f.target, _ = h.selectionStart || 0, z = h.value.replace(/\D/g, ""), H = v(z);
     g(H);
-    const Z = b.length, E = H.length - Z;
+    const B = w.length, E = H.length - B;
     if (requestAnimationFrame(() => {
       const N = Math.max(0, Math.min(_ + E, H.length));
       h.setSelectionRange(N, N);
@@ -2303,7 +2316,7 @@ const e0 = ({
   }, k = (f) => {
     var N;
     f.preventDefault();
-    const _ = f.clipboardData.getData("text/plain").replace(/\D/g, ""), H = f.target.selectionStart || 0, U = b.replace(/\D/g, "").slice(0, H) + _, E = v(U);
+    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) {
       const V = {
         ...f,
@@ -2398,10 +2411,10 @@ const e0 = ({
         {
           ...m,
           ref: L,
-          value: b,
+          value: w,
           className: o,
-          onKeyDown: w,
-          onChange: x,
+          onKeyDown: x,
+          onChange: b,
           onPaste: k,
           style: {
             flex: 1,
@@ -2461,9 +2474,9 @@ const F2 = M.forwardRef(({
   ...p
 }, d) => {
   const C = t ? "currency-input-error-state" : "", [m, L] = R(""), y = (v) => {
-    const x = v.replace(/[^\d.]/g, "").split("."), k = x[0], f = x[1], h = k.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    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;
-  }, b = (v) => v.replace(/,/g, "");
+  }, w = (v) => v.replace(/,/g, "");
   I(() => {
     if (c !== void 0) {
       const v = String(c);
@@ -2471,12 +2484,12 @@ const F2 = M.forwardRef(({
     }
   }, [c, a]);
   const g = (v) => {
-    const w = v.target.value;
+    const x = v.target.value;
     if (a) {
-      const x = b(w), k = y(x);
-      L(k), l && l(x, v);
+      const b = w(x), k = y(b);
+      L(k), l && l(b, v);
     } else
-      L(w), l && l(w, v);
+      L(x), l && l(x, v);
   };
   return /* @__PURE__ */ u("div", { className: "w-full", children: [
     e && /* @__PURE__ */ u(
@@ -2742,14 +2755,14 @@ const J0 = {
   whitesmoke: "9lhpx",
   yellow: "9zl6o",
   yellowgreen: "61fzm"
-}, B = Math.round;
+}, Z = Math.round;
 function u2(e, t) {
   const r = e.replace(/^[^(]*\((.*)/, "$1").replace(/\).*/, "").match(/\d*\.?\d+%?/g) || [], o = r.map((s) => parseFloat(s));
   for (let s = 0; s < 3; s += 1)
     o[s] = t(o[s] || 0, r[s] || "", s);
   return r[3] ? o[3] = r[3].includes("%") ? o[3] / 100 : o[3] : o[3] = 1, o;
 }
-const Z2 = (e, t, r) => r === 0 ? e : e / 100;
+const B2 = (e, t, r) => r === 0 ? e : e / 100;
 function J(e, t) {
   const r = t || 255;
   return e > r ? r : e < 0 ? 0 : e;
@@ -2853,7 +2866,7 @@ class T {
   getHue() {
     if (typeof this._h > "u") {
       const t = this.getMax() - this.getMin();
-      t === 0 ? this._h = 0 : this._h = B(60 * (this.r === this.getMax() ? (this.g - this.b) / t + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / t + 2 : (this.r - this.g) / t + 4));
+      t === 0 ? this._h = 0 : this._h = Z(60 * (this.r === this.getMax() ? (this.g - this.b) / t + (this.g < this.b ? 6 : 0) : this.g === this.getMax() ? (this.b - this.r) / t + 2 : (this.r - this.g) / t + 4));
     }
     return this._h;
   }
@@ -2923,10 +2936,10 @@ class T {
    */
   mix(t, r = 50) {
     const o = this._c(t), s = r / 100, i = (l) => (o[l] - this[l]) * s + this[l], a = {
-      r: B(i("r")),
-      g: B(i("g")),
-      b: B(i("b")),
-      a: B(i("a") * 100) / 100
+      r: Z(i("r")),
+      g: Z(i("g")),
+      b: Z(i("b")),
+      a: Z(i("a") * 100) / 100
     };
     return this._c(a);
   }
@@ -2955,7 +2968,7 @@ class T {
     }, t);
   }
   onBackground(t) {
-    const r = this._c(t), o = this.a + r.a * (1 - this.a), s = (i) => B((this[i] * this.a + r[i] * r.a * (1 - this.a)) / o);
+    const r = this._c(t), o = this.a + r.a * (1 - this.a), s = (i) => Z((this[i] * this.a + r[i] * r.a * (1 - this.a)) / o);
     return this._c({
       r: s("r"),
       g: s("g"),
@@ -2986,7 +2999,7 @@ class T {
     t += o.length === 2 ? o : "0" + o;
     const s = (this.b || 0).toString(16);
     if (t += s.length === 2 ? s : "0" + s, typeof this.a == "number" && this.a >= 0 && this.a < 1) {
-      const i = B(this.a * 255).toString(16);
+      const i = Z(this.a * 255).toString(16);
       t += i.length === 2 ? i : "0" + i;
     }
     return t;
@@ -3002,7 +3015,7 @@ class T {
   }
   /** CSS support color pattern */
   toHslString() {
-    const t = this.getHue(), r = B(this.getHSLSaturation() * 100), o = B(this.getLightness() * 100);
+    const t = this.getHue(), r = Z(this.getHSLSaturation() * 100), o = Z(this.getLightness() * 100);
     return this.a !== 1 ? `hsla(${t},${r}%,${o}%,${this.a})` : `hsl(${t},${r}%,${o}%)`;
   }
   /** Same as toHsb */
@@ -3058,7 +3071,7 @@ class T {
   }) {
     const i = (t % 360 + 360) % 360;
     if (this._h = i, this._hsl_s = r, this._l = o, this.a = typeof s == "number" ? s : 1, r <= 0) {
-      const L = B(o * 255);
+      const L = Z(o * 255);
       this.r = L, this.g = L, this.b = L;
       return;
     }
@@ -3066,7 +3079,7 @@ class T {
     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 = B((a + m) * 255), this.g = B((l + m) * 255), this.b = B((c + m) * 255);
+    this.r = Z((a + m) * 255), this.g = Z((l + m) * 255), this.b = Z((c + m) * 255);
   }
   fromHsv({
     h: t,
@@ -3076,10 +3089,10 @@ class T {
   }) {
     const i = (t % 360 + 360) % 360;
     this._h = i, this._hsv_s = r, this._v = o, this.a = typeof s == "number" ? s : 1;
-    const a = B(o * 255);
+    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 = B(o * (1 - r) * 255), C = B(o * (1 - r * p) * 255), m = B(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), m = Z(o * (1 - r * (1 - p)) * 255);
     switch (c) {
       case 0:
         this.g = m, this.b = d;
@@ -3103,7 +3116,7 @@ class T {
     }
   }
   fromHsvString(t) {
-    const r = u2(t, Z2);
+    const r = u2(t, B2);
     this.fromHsv({
       h: r[0],
       s: r[1],
@@ -3112,7 +3125,7 @@ class T {
     });
   }
   fromHslString(t) {
-    const r = u2(t, Z2);
+    const r = u2(t, B2);
     this.fromHsl({
       h: r[0],
       s: r[1],
@@ -3123,12 +3136,12 @@ class T {
   fromRgbString(t) {
     const r = u2(t, (o, s) => (
       // Convert percentage to number. e.g. 50% -> 128
-      s.includes("%") ? B(o / 100 * 255) : o
+      s.includes("%") ? Z(o / 100 * 255) : o
     ));
     this.r = r[0], this.g = r[1], this.b = r[2], this.a = r[3];
   }
 }
-const o2 = 2, B2 = 0.16, X0 = 0.05, e1 = 0.05, t1 = 0.15, o0 = 5, s0 = 4, r1 = [{
+const o2 = 2, Z2 = 0.16, X0 = 0.05, e1 = 0.05, t1 = 0.15, o0 = 5, s0 = 4, r1 = [{
   index: 7,
   amount: 15
 }, {
@@ -3167,7 +3180,7 @@ function D2(e, t, r) {
   if (e.h === 0 && e.s === 0)
     return e.s;
   let o;
-  return r ? o = e.s - B2 * t : t === s0 ? o = e.s + B2 : o = e.s + X0 * t, o > 1 && (o = 1), r && t === o0 && o > 0.1 && (o = 0.1), o < 0.06 && (o = 0.06), Math.round(o * 100) / 100;
+  return r ? o = e.s - Z2 * t : t === s0 ? o = e.s + Z2 : o = e.s + X0 * t, o > 1 && (o = 1), r && t === o0 && o > 0.1 && (o = 0.1), o < 0.06 && (o = 0.06), Math.round(o * 100) / 100;
 }
 function R2(e, t, r) {
   let o;
@@ -3537,7 +3550,7 @@ const l2 = /* @__PURE__ */ A.forwardRef((e, t) => {
   const y = i ? {
     msTransform: `rotate(${i}deg)`,
     transform: `rotate(${i}deg)`
-  } : void 0, [b, g] = d0(c);
+  } : void 0, [w, g] = d0(c);
   return /* @__PURE__ */ A.createElement("span", x2({
     role: "img",
     "aria-label": o.name
@@ -3548,7 +3561,7 @@ const l2 = /* @__PURE__ */ A.forwardRef((e, t) => {
     className: m
   }), /* @__PURE__ */ A.createElement(q, {
     icon: o,
-    primaryColor: b,
+    primaryColor: w,
     secondaryColor: g,
     style: y
   }));
@@ -4065,11 +4078,11 @@ const t3 = ({
         boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
         transition: "all 0.3s ease-in-out"
       },
-      onMouseEnter: (b) => {
-        b.currentTarget.style.boxShadow = "0 0 24px 0 rgba(0, 0, 0, 0.15)";
+      onMouseEnter: (w) => {
+        w.currentTarget.style.boxShadow = "0 0 24px 0 rgba(0, 0, 0, 0.15)";
       },
-      onMouseLeave: (b) => {
-        b.currentTarget.style.boxShadow = "0 0 0 0 rgba(0, 0, 0, 0)";
+      onMouseLeave: (w) => {
+        w.currentTarget.style.boxShadow = "0 0 0 0 rgba(0, 0, 0, 0)";
       },
       children: [
         l !== "none" && /* @__PURE__ */ n(
@@ -4321,7 +4334,7 @@ export {
   q0 as PhoneInput,
   Y1 as Progress,
   I1 as SearchInput,
-  Z0 as Select,
+  B0 as Select,
   X1 as SelectedItemsList,
   P1 as StatCard,
   Q1 as Steps,