shekel-fe-shared-lib 1.0.7 → 1.0.9

package/dist/index.mjs

@@ -1,28 +1,45 @@
-import { jsxs as f, jsx as e } from "react/jsx-runtime";
-import { useState as k, useRef as j, useEffect as M } from "react";
-const D = ({
+import { jsxs as C, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as U, useEffect as V } from "react";
+const ee = ({
   variant: s = "primary",
   size: a = "md",
-  fullWidth: o = !1,
+  fullWidth: n = !1,
   icon: t,
   iconPosition: c = "left",
-  loading: d = !1,
-  hoverColor: i,
-  className: g = "",
-  children: h,
-  disabled: m,
-  ...v
+  loading: u = !1,
+  hoverColor: $,
+  bgColor: i,
+  textColor: o,
+  borderColor: m,
+  hoverBgColor: g,
+  hoverTextColor: x,
+  rounded: b = "lg",
+  style: h,
+  className: r = "",
+  children: w,
+  disabled: d,
+  ...y
 }) => {
-  const p = "inline-flex items-center justify-center font-normal rounded-lg transition-all duration-300 ease-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95", l = {
+  const l = "inline-flex items-center justify-center font-normal transition-all duration-300 ease-out focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed active:scale-95", f = {
     primary: "bg-[#EC615B] hover:bg-[#D4554F] text-white focus:ring-[#EC615B] shadow-sm hover:shadow-md",
     outlined: "border border-gray-300 bg-white hover:bg-gray-50 text-[#181918] focus:ring-gray-300",
     ghost: "bg-gray-100 hover:bg-gray-200 text-[#181918] focus:ring-gray-300",
     text: "text-[#181918] hover:bg-gray-100 focus:ring-gray-300"
-  }, u = {
+  }, N = {
     sm: "px-3 py-1.5 text-sm gap-1.5",
     md: "px-4 py-2 text-base gap-2",
-    lg: "px-6 py-3 text-lg gap-2.5"
-  }, r = o ? "w-full" : "", b = `${p} ${l[s]} ${u[a]} ${r} ${g}`, n = () => d ? /* @__PURE__ */ f(
+    lg: "px-6 py-3 text-lg gap-2.5",
+    responsive: "px-2 py-1 text-xs sm:px-3 sm:py-1.5 sm:text-sm md:px-4 md:py-2 md:text-base lg:px-6 lg:py-3 lg:text-lg gap-1 sm:gap-1.5 md:gap-2 lg:gap-2.5"
+  }, p = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  }, B = n ? "w-full" : "";
+  let k = f[s];
+  (i || o || m) && (k = "");
+  const T = `${l} ${k} ${N[a]} ${p[b]} ${B} ${r}`, P = () => u ? /* @__PURE__ */ C(
     "svg",
     {
       className: "animate-spin h-4 w-4",
@@ -51,65 +68,169 @@ const D = ({
         )
       ]
     }
-  ) : t;
-  return /* @__PURE__ */ f(
+  ) : t, L = {
+    ...h
+  };
+  return i && (L.backgroundColor = i), o && (L.color = o), m && (L.borderColor = m), /* @__PURE__ */ C(
     "button",
     {
-      className: b,
-      disabled: m || d,
-      style: i ? {
-        "--hover-color": i
-      } : void 0,
-      onMouseEnter: (N) => {
-        i && !m && !d && (N.currentTarget.style.backgroundColor = i);
+      className: T,
+      disabled: d || u,
+      style: L,
+      onMouseEnter: (M) => {
+        !d && !u && (g ? M.currentTarget.style.backgroundColor = g : $ && (M.currentTarget.style.backgroundColor = $), x && (M.currentTarget.style.color = x));
       },
-      onMouseLeave: (N) => {
-        i && !m && !d && (N.currentTarget.style.backgroundColor = "");
+      onMouseLeave: (M) => {
+        !d && !u && ((i || g || $) && (M.currentTarget.style.backgroundColor = i || ""), (o || x) && (M.currentTarget.style.color = o || ""));
       },
-      ...v,
+      ...y,
       children: [
-        c === "left" && n(),
-        h,
-        c === "right" && n()
+        c === "left" && P(),
+        w,
+        c === "right" && P()
       ]
     }
   );
-}, A = ({
+}, te = ({
   label: s,
   value: a,
-  selected: o = !1,
+  selected: n = !1,
   onClick: t,
-  className: c = ""
+  className: c = "",
+  size: u = "responsive",
+  rounded: $ = "md",
+  bgColor: i,
+  borderColor: o,
+  labelColor: m,
+  valueColor: g,
+  selectedBgColor: x,
+  selectedBorderColor: b,
+  selectedLabelColor: h,
+  selectedValueColor: r,
+  style: w
 }) => {
-  const g = `stat-card relative flex flex-col p-4 rounded-lg border transition-all duration-500 ease-in-out cursor-pointer overflow-hidden ${o ? "border-[#181918] bg-[#F4F4F4] shadow-sm scale-[1.02]" : "border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm"} ${c}`;
-  return /* @__PURE__ */ f("div", { className: g, onClick: t, children: [
-    o && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-[#EC615B]/5 to-transparent animate-slide-in pointer-events-none" }),
-    /* @__PURE__ */ f("div", { className: "relative z-10 transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]", children: [
-      /* @__PURE__ */ e("span", { className: `text-sm font-normal mb-2 block transition-colors duration-500 ${o ? "text-gray-700" : "text-gray-600"}`, children: s }),
-      /* @__PURE__ */ e("span", { className: `text-3xl font-semibold stat-value block transition-all duration-500 ${o ? "text-[#181918] scale-105" : "text-[#181918]"}`, children: a })
+  const d = () => {
+    switch (u) {
+      case "sm":
+        return "p-2 sm:p-3";
+      case "md":
+        return "p-3 sm:p-4";
+      case "lg":
+        return "p-4 sm:p-6";
+      case "responsive":
+        return "p-3 sm:p-4 md:p-5 lg:p-6";
+      default:
+        return "p-4";
+    }
+  }, y = () => {
+    switch ($) {
+      case "none":
+        return "rounded-none";
+      case "sm":
+        return "rounded-sm";
+      case "md":
+        return "rounded-md";
+      case "lg":
+        return "rounded-lg";
+      case "xl":
+        return "rounded-xl";
+      case "full":
+        return "rounded-full";
+      default:
+        return "rounded-md";
+    }
+  }, l = () => {
+    switch (u) {
+      case "sm":
+        return "text-xs sm:text-xs";
+      case "md":
+        return "text-sm sm:text-base";
+      case "lg":
+        return "text-base sm:text-lg";
+      case "responsive":
+        return "text-xs sm:text-sm md:text-base lg:text-lg";
+      default:
+        return "text-xs sm:text-sm md:text-base";
+    }
+  }, f = () => {
+    switch (u) {
+      case "sm":
+        return "text-lg sm:text-xl";
+      case "md":
+        return "text-2xl sm:text-3xl";
+      case "lg":
+        return "text-4xl sm:text-5xl";
+      case "responsive":
+        return "text-2xl sm:text-3xl md:text-4xl lg:text-5xl";
+      default:
+        return "text-3xl";
+    }
+  }, P = `${`stat-card relative flex flex-col ${d()} ${y()} border transition-all duration-500 ease-in-out cursor-pointer overflow-hidden`} ${n ? "border-[#181918] bg-[#F4F4F4] shadow-sm scale-[1.02]" : `${o ? "" : "border-gray-200"} ${i ? "" : "bg-white"} ${!i && !o ? "hover:border-gray-300 hover:shadow-sm" : ""}`} ${c}`, L = {
+    ...w
+  };
+  return n && x ? L.backgroundColor = x : !n && i && (L.backgroundColor = i), n && b ? L.borderColor = b : !n && o && (L.borderColor = o), /* @__PURE__ */ C("div", { className: P, onClick: t, style: L, children: [
+    n && /* @__PURE__ */ e("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-[#EC615B]/5 to-transparent animate-slide-in pointer-events-none" }),
+    /* @__PURE__ */ C("div", { className: "relative z-10 transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]", children: [
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: `${l()} font-normal mb-2 block transition-colors duration-500 ${n ? "text-gray-700" : "text-gray-600"}`,
+          style: n && h ? { color: h } : !n && m ? { color: m } : void 0,
+          children: s
+        }
+      ),
+      /* @__PURE__ */ e(
+        "span",
+        {
+          className: `${f()} font-semibold stat-value block transition-all duration-500 ${n ? "text-[#181918] scale-105" : "text-[#181918]"}`,
+          style: n && r ? { color: r } : !n && g ? { color: g } : void 0,
+          children: a
+        }
+      )
     ] })
   ] });
-}, V = ({
+}, se = ({
   icon: s,
   iconPosition: a = "left",
-  size: o = "md",
+  size: n = "md",
   fullWidth: t = !1,
   className: c = "",
-  onIconClick: d,
-  ...i
+  onIconClick: u,
+  bgColor: $,
+  borderColor: i,
+  focusBorderColor: o,
+  iconColor: m,
+  textColor: g,
+  placeholderColor: x,
+  rounded: b = "md",
+  style: h,
+  ...r
 }) => {
-  const g = "relative inline-flex items-center", h = "border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-[#EC615B] focus:border-[#EC615B] transition-all duration-200 ease-in-out placeholder:text-gray-400", m = {
+  const w = "relative inline-flex items-center", d = "border focus:outline-none focus:ring-1 transition-all duration-200 ease-in-out", y = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
-    lg: "px-5 py-3 text-lg"
-  }, v = {
+    lg: "px-5 py-3 text-lg",
+    responsive: "px-3 sm:px-4 md:px-5 py-1.5 sm:py-2 md:py-3 text-sm sm:text-base md:text-lg"
+  }, l = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
-    lg: "w-6 h-6"
-  }, p = a === "left" ? o === "sm" ? "pl-9" : o === "md" ? "pl-10" : "pl-12" : o === "sm" ? "pr-9" : o === "md" ? "pr-10" : "pr-12", l = t ? "w-full" : "", u = `${h} ${m[o]} ${s ? p : ""} ${l} ${c}`, r = a === "left" ? "left-3" : "right-3", b = /* @__PURE__ */ e(
+    lg: "w-6 h-6",
+    responsive: "w-4 sm:w-5 md:w-6 h-4 sm:h-5 md:h-6"
+  }, f = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-lg",
+    lg: "rounded-xl",
+    full: "rounded-full"
+  }, N = a === "left" ? n === "sm" ? "pl-9" : n === "md" ? "pl-10" : n === "lg" ? "pl-12" : "pl-9 sm:pl-10 md:pl-12" : n === "sm" ? "pr-9" : n === "md" ? "pr-10" : n === "lg" ? "pr-12" : "pr-9 sm:pr-10 md:pr-12", p = t ? "w-full" : "", B = {
+    backgroundColor: $,
+    borderColor: i || "#D1D5DB",
+    color: g,
+    ...h
+  }, k = x ? "" : "placeholder:text-gray-400", T = i ? "" : "border-gray-300", P = g ? "" : "text-gray-900", L = o ? "" : "focus:ring-[#EC615B] focus:border-[#EC615B]", M = `${d} ${y[n]} ${s ? N : ""} ${p} ${f[b]} ${T} ${P} ${L} ${k} ${c}`, F = a === "left" ? "left-3" : "right-3", j = m || "text-gray-400", S = m ? "" : "hover:text-gray-600", E = /* @__PURE__ */ e(
     "svg",
     {
-      className: v[o],
+      className: `${l[n]} ${j}`,
       xmlns: "http://www.w3.org/2000/svg",
       fill: "none",
       viewBox: "0 0 24 24",
@@ -125,337 +246,544 @@ const D = ({
       )
     }
   );
-  return /* @__PURE__ */ f("div", { className: `${g} ${l}`, children: [
+  return /* @__PURE__ */ C("div", { className: `${w} ${p}`, children: [
     s && /* @__PURE__ */ e(
       "div",
       {
-        className: `absolute ${r} text-gray-400 ${d ? "cursor-pointer hover:text-gray-600" : ""}`,
-        onClick: d,
-        children: s === !0 ? b : s
+        className: `absolute ${F} ${j} ${u ? "cursor-pointer" : ""} ${S}`,
+        onClick: u,
+        children: s === !0 ? E : s
       }
     ),
-    /* @__PURE__ */ e("input", { type: "text", className: u, ...i })
+    /* @__PURE__ */ e(
+      "input",
+      {
+        type: "text",
+        className: M,
+        style: {
+          ...B,
+          ...o && {
+            "--focus-border-color": o
+          },
+          ...x && {
+            "--placeholder-color": x
+          }
+        },
+        ...r
+      }
+    )
   ] });
-}, H = ({
+}, re = ({
   padding: s = "md",
   shadow: a = "sm",
-  hover: o = !1,
+  hover: n = !1,
   bordered: t = !0,
   rounded: c = "lg",
-  className: d = "",
-  children: i,
+  className: u = "",
+  bgColor: $,
+  borderColor: i,
+  style: o,
+  children: m,
   ...g
 }) => {
-  const h = "card bg-white transition-all duration-300 ease-out", m = {
+  const x = "card transition-all duration-300 ease-out", b = {
     none: "p-0",
     sm: "p-3",
     md: "p-4",
-    lg: "p-6"
-  }, v = {
+    lg: "p-6",
+    responsive: "p-2 sm:p-3 md:p-4 lg:p-6"
+  }, h = {
     none: "",
     sm: "shadow-sm",
     md: "shadow-md",
     lg: "shadow-lg"
-  }, p = {
+  }, r = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
     lg: "rounded-lg",
     xl: "rounded-xl"
-  }, l = t ? "border border-gray-200" : "", u = o ? "cursor-pointer" : "", r = `${h} ${m[s]} ${v[a]} ${p[c]} ${l} ${u} ${d}`;
-  return /* @__PURE__ */ e("div", { className: r, ...g, children: /* @__PURE__ */ e("div", { className: o ? "transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]" : "", children: i }) });
-}, Q = ({
+  }, w = t ? `border ${i || "border-gray-200"}` : "", d = n ? "cursor-pointer" : "", l = `${x} ${$ ? "" : "bg-white"} ${b[s]} ${h[a]} ${r[c]} ${w} ${d} ${u}`, f = {
+    ...$ && { backgroundColor: $ },
+    ...o
+  };
+  return /* @__PURE__ */ e("div", { className: l, style: f, ...g, children: /* @__PURE__ */ e("div", { className: n ? "transition-transform duration-300 ease-out hover:scale-[0.98] active:scale-[0.96]" : "", children: m }) });
+}, ne = ({
   items: s,
   trigger: a = "click",
-  placement: o = "bottomLeft",
+  placement: n = "bottomLeft",
   children: t,
   className: c = "",
-  overlayClassName: d = "",
-  disabled: i = !1
+  overlayClassName: u = "",
+  disabled: $ = !1,
+  size: i = "md",
+  menuBgColor: o,
+  menuItemHoverColor: m,
+  dangerColor: g,
+  borderColor: x,
+  style: b
 }) => {
-  const [g, h] = k(!1), m = j(null);
-  M(() => {
-    const n = (N) => {
-      m.current && !m.current.contains(N.target) && h(!1);
+  const [h, r] = R(!1), w = U(null);
+  V(() => {
+    const z = (I) => {
+      w.current && !w.current.contains(I.target) && r(!1);
     };
-    return g && document.addEventListener("mousedown", n), () => {
-      document.removeEventListener("mousedown", n);
+    return h && document.addEventListener("mousedown", z), () => {
+      document.removeEventListener("mousedown", z);
     };
-  }, [g]);
-  const v = () => {
-    !i && a === "click" && h(!g);
-  }, p = () => {
-    !i && a === "hover" && h(!0);
+  }, [h]);
+  const d = () => {
+    !$ && a === "click" && r(!h);
+  }, y = () => {
+    !$ && a === "hover" && r(!0);
   }, l = () => {
-    !i && a === "hover" && h(!1);
-  }, u = (n) => {
-    !n.disabled && n.onClick && n.onClick(), h(!1);
-  }, r = {
+    !$ && a === "hover" && r(!1);
+  }, f = (z) => {
+    !z.disabled && z.onClick && z.onClick(), r(!1);
+  }, N = {
     bottomLeft: "top-full left-0 mt-1",
     bottomRight: "top-full right-0 mt-1",
     topLeft: "bottom-full left-0 mb-1",
     topRight: "bottom-full right-0 mb-1"
-  }, b = o.startsWith("bottom") ? "dropdown-slide-down" : "dropdown-slide-up";
-  return /* @__PURE__ */ f(
+  }, p = n.startsWith("bottom") ? "dropdown-slide-down" : "dropdown-slide-up", B = {
+    sm: "min-w-[120px] text-xs",
+    md: "min-w-[160px] text-sm",
+    lg: "min-w-[220px] text-base",
+    responsive: "min-w-[120px] sm:min-w-[160px] md:min-w-[200px] lg:min-w-[240px] text-xs sm:text-sm md:text-base"
+  }, k = {
+    sm: "px-3 py-1.5 text-xs gap-1.5",
+    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"
+  }, T = "hover:bg-gray-50", P = "border-gray-200", L = "text-red-600", M = m ? { backgroundColor: m } : {}, F = m ? "" : T, j = g ? { color: g } : {}, S = g ? { backgroundColor: g + "15" } : {}, E = x || P;
+  return /* @__PURE__ */ C(
     "div",
     {
-      ref: m,
+      ref: w,
       className: `relative inline-block ${c}`,
-      onMouseEnter: p,
+      onMouseEnter: y,
       onMouseLeave: l,
+      style: b,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            onClick: v,
-            className: `inline-flex ${i ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
+            onClick: d,
+            className: `inline-flex ${$ ? "cursor-not-allowed opacity-50" : "cursor-pointer"}`,
             children: t
           }
         ),
-        g && !i && /* @__PURE__ */ e(
+        h && !$ && /* @__PURE__ */ e(
           "div",
           {
-            className: `absolute ${r[o]} ${b} z-50 min-w-[160px] ${d}`,
-            children: /* @__PURE__ */ e("div", { className: "dropdown-menu bg-white rounded-lg shadow-lg border border-gray-200 py-1 overflow-hidden", children: s.map((n) => /* @__PURE__ */ f(
+            className: `absolute ${N[n]} ${p} z-50 ${B[i]} ${u}`,
+            children: /* @__PURE__ */ e(
               "div",
               {
-                onClick: () => u(n),
-                className: `
-                  dropdown-menu-item
-                  flex items-center gap-2 px-4 py-2 text-sm cursor-pointer transition-all duration-200 ease-out
-                  ${n.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50"}
-                  ${n.danger ? "text-red-600 hover:bg-red-50" : "text-gray-700"}
-                `,
-                children: [
-                  n.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: n.icon }),
-                  /* @__PURE__ */ e("span", { children: n.label })
-                ]
-              },
-              n.key
-            )) })
+                className: `dropdown-menu rounded-lg shadow-lg border py-1 overflow-hidden ${E}`,
+                style: { backgroundColor: o || "#ffffff" },
+                children: s.map((z) => {
+                  let I = {};
+                  return z.disabled || (z.danger ? I = {
+                    ...j,
+                    ...S
+                  } : m && (I = M)), /* @__PURE__ */ C(
+                    "div",
+                    {
+                      onClick: () => f(z),
+                      className: `
+                    dropdown-menu-item
+                    flex items-center cursor-pointer transition-all duration-200 ease-out
+                    ${k[i]}
+                    ${z.disabled ? "opacity-50 cursor-not-allowed" : F}
+                    ${z.danger ? g ? "" : L : "text-gray-700"}
+                  `,
+                      style: I,
+                      children: [
+                        z.icon && /* @__PURE__ */ e("span", { className: "flex-shrink-0", children: z.icon }),
+                        /* @__PURE__ */ e("span", { children: z.label })
+                      ]
+                    },
+                    z.key
+                  );
+                })
+              }
+            )
           }
         )
       ]
     }
   );
-}, P = ({
+}, G = ({
   options: s,
   value: a,
-  defaultValue: o,
+  defaultValue: n,
   placeholder: t = "Select an option",
   onChange: c,
-  disabled: d = !1,
-  size: i = "md",
-  fullWidth: g = !1,
-  className: h = "",
+  disabled: u = !1,
+  size: $ = "md",
+  fullWidth: i = !1,
+  className: o = "",
   allowClear: m = !1,
-  showSearch: v = !1,
-  searchPlaceholder: p = "Search..."
+  showSearch: g = !1,
+  searchPlaceholder: x = "Search...",
+  bgColor: b,
+  borderColor: h,
+  focusBorderColor: r = "#EC615B",
+  selectedBgColor: w,
+  selectedTextColor: d,
+  hoverBgColor: y,
+  rounded: l = "lg",
+  style: f
 }) => {
-  const [l, u] = k(!1), [r, b] = k(
-    o
-  ), [n, N] = k(""), x = j(null), w = j(null), C = a !== void 0 ? a : r;
-  M(() => {
-    const y = (R) => {
-      x.current && !x.current.contains(R.target) && (u(!1), N(""));
+  const [N, p] = R(!1), [B, k] = R(
+    n
+  ), [T, P] = R(""), L = U(null), M = U(null), F = a !== void 0 ? a : B;
+  V(() => {
+    const v = (O) => {
+      L.current && !L.current.contains(O.target) && (p(!1), P(""));
     };
-    return l && (document.addEventListener("mousedown", y), v && w.current && w.current.focus()), () => {
-      document.removeEventListener("mousedown", y);
+    return N && (document.addEventListener("mousedown", v), g && M.current && M.current.focus()), () => {
+      document.removeEventListener("mousedown", v);
     };
-  }, [l, v]);
-  const $ = (y) => {
-    a === void 0 && b(y), c == null || c(y), u(!1), N("");
-  }, E = (y) => {
-    y.stopPropagation(), a === void 0 && b(void 0), c == null || c("");
-  }, L = s.find((y) => y.value === C), B = v ? s.filter(
-    (y) => y.label.toLowerCase().includes(n.toLowerCase())
-  ) : s, S = {
+  }, [N, g]);
+  const j = (v) => {
+    a === void 0 && k(v), c == null || c(v), p(!1), P("");
+  }, S = (v) => {
+    v.stopPropagation(), a === void 0 && k(void 0), c == null || c("");
+  }, E = s.find((v) => v.value === F), z = g ? s.filter(
+    (v) => v.label.toLowerCase().includes(T.toLowerCase())
+  ) : s, I = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-4 py-2 text-base",
-    lg: "px-5 py-3 text-lg"
-  }, F = g ? "w-full" : "min-w-[200px]", z = /* @__PURE__ */ e(
+    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"
+  }, A = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  }, W = i ? "w-full" : "min-w-[200px]", D = () => {
+    const v = {};
+    return b && (v.backgroundColor = b), h && (v.borderColor = h), v;
+  }, H = () => {
+    const v = {};
+    return w && (v.backgroundColor = w), d && (v.color = d), v;
+  }, Q = /* @__PURE__ */ e(
     "svg",
     {
-      className: `w-4 h-4 transition-transform duration-200 ease-out ${l ? "rotate-180" : ""}`,
+      className: `w-4 h-4 transition-transform duration-200 ease-out ${N ? "rotate-180" : ""}`,
       fill: "none",
       stroke: "currentColor",
       viewBox: "0 0 24 24",
       children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
     }
-  ), I = /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
-  return /* @__PURE__ */ f("div", { ref: x, className: `relative ${F} ${h}`, children: [
-    /* @__PURE__ */ f(
+  ), q = /* @__PURE__ */ e("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) });
+  return /* @__PURE__ */ C("div", { ref: L, className: `relative inline-block ${W} ${o}`, style: f, children: [
+    /* @__PURE__ */ C(
       "div",
       {
-        onClick: () => !d && u(!l),
+        onClick: () => !u && p(!N),
         className: `
           select-trigger
           flex items-center justify-between gap-2
-          border border-gray-300 rounded-lg
-          bg-white
-          transition-all duration-200 ease-out
-          ${S[i]}
-          ${d ? "opacity-50 cursor-not-allowed bg-gray-50" : "cursor-pointer hover:border-gray-400"}
-          ${l ? "border-[#EC615B] ring-2 ring-[#EC615B] ring-opacity-20" : ""}
+          border transition-all duration-200 ease-out
+          ${I[$]}
+          ${A[l]}
+          ${u ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+          ${N ? "ring-2 ring-opacity-20" : ""}
         `,
+        style: {
+          ...D(),
+          backgroundColor: b || D().backgroundColor || "#FFFFFF",
+          borderColor: h || D().borderColor || "#D1D5DB",
+          ...N && {
+            borderColor: r,
+            boxShadow: `0 0 0 2px ${r}20`
+          },
+          ...!u && !N && y && {
+            cursor: "pointer"
+          }
+        },
+        onMouseEnter: (v) => {
+          !u && y && (v.currentTarget.style.backgroundColor = y);
+        },
+        onMouseLeave: (v) => {
+          b ? v.currentTarget.style.backgroundColor = b : v.currentTarget.style.backgroundColor = "#FFFFFF";
+        },
         children: [
-          /* @__PURE__ */ e("span", { className: L ? "text-gray-900" : "text-gray-400", children: L ? L.label : t }),
-          /* @__PURE__ */ f("div", { className: "flex items-center gap-1", children: [
-            m && C && !d && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("span", { className: E ? "text-gray-900" : "text-gray-400", children: E ? E.label : t }),
+          /* @__PURE__ */ C("div", { className: "flex items-center gap-1", children: [
+            m && F && !u && /* @__PURE__ */ e(
               "span",
               {
-                onClick: E,
+                onClick: S,
                 className: "text-gray-400 hover:text-gray-600 transition-colors duration-200 ease-out",
-                children: I
+                children: q
               }
             ),
-            /* @__PURE__ */ e("span", { className: "text-gray-400", children: z })
+            /* @__PURE__ */ e("span", { className: "text-gray-400", children: Q })
           ] })
         ]
       }
     ),
-    l && !d && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 dropdown-slide-down", children: /* @__PURE__ */ f("div", { className: "select-dropdown bg-white rounded-lg shadow-lg border border-gray-200 py-1 max-h-[300px] overflow-auto", children: [
-      v && /* @__PURE__ */ e("div", { className: "px-2 py-2 border-b border-gray-200", children: /* @__PURE__ */ e(
+    N && !u && /* @__PURE__ */ e("div", { className: "absolute top-full left-0 right-0 mt-1 z-50 dropdown-slide-down", children: /* @__PURE__ */ C("div", { className: `select-dropdown bg-white shadow-lg border border-gray-200 py-1 max-h-[300px] overflow-auto ${A[l]}`, children: [
+      g && /* @__PURE__ */ e("div", { className: "px-2 py-2 border-b border-gray-200", children: /* @__PURE__ */ e(
         "input",
         {
-          ref: w,
+          ref: M,
           type: "text",
-          value: n,
-          onChange: (y) => N(y.target.value),
-          placeholder: p,
-          className: "w-full px-3 py-1.5 text-sm border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-[#EC615B] focus:border-[#EC615B] transition-all duration-200 ease-out",
-          onClick: (y) => y.stopPropagation()
+          value: T,
+          onChange: (v) => P(v.target.value),
+          placeholder: x,
+          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: h,
+            boxShadow: `0 0 0 2px ${r}20`
+          },
+          onClick: (v) => v.stopPropagation()
         }
       ) }),
-      B.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-3 text-sm text-gray-500 text-center", children: "No results found" }) : B.map((y) => /* @__PURE__ */ e(
+      z.length === 0 ? /* @__PURE__ */ e("div", { className: "px-4 py-3 text-sm text-gray-500 text-center", children: "No results found" }) : z.map((v) => /* @__PURE__ */ e(
         "div",
         {
-          onClick: () => !y.disabled && $(y.value),
+          onClick: () => !v.disabled && j(v.value),
           className: `
                     select-option
-                    px-4 py-2 text-sm cursor-pointer transition-all duration-200 ease-out
-                    ${y.disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-gray-50"}
-                    ${y.value === C ? "bg-[#FCEAE9] text-[#EC615B] font-medium" : "text-[#181918]"}
+                    px-4 py-2 text-sm transition-all duration-200 ease-out
+                    ${v.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
                   `,
-          children: y.label
+          style: {
+            ...v.value === F ? H() : {},
+            backgroundColor: v.value === F ? w || "#FCEAE9" : void 0,
+            color: v.value === F ? d || "#EC615B" : "#181918",
+            fontWeight: v.value === F ? "medium" : void 0
+          },
+          onMouseEnter: (O) => {
+            !v.disabled && v.value !== F && (O.currentTarget.style.backgroundColor = y || "#F3F4F6");
+          },
+          onMouseLeave: (O) => {
+            v.value !== F && (O.currentTarget.style.backgroundColor = "transparent");
+          },
+          children: v.label
         },
-        y.value
+        v.value
       ))
     ] }) })
   ] });
-}, q = ({
+}, le = ({
   columns: s,
   dataSource: a,
-  rowKey: o = "id",
+  rowKey: n = "id",
   pagination: t,
   loading: c = !1,
-  onRow: d,
-  className: i = "",
-  bordered: g = !1,
-  striped: h = !1
+  onRow: u,
+  className: $ = "",
+  bordered: i = !1,
+  striped: o = !1,
+  size: m = "md",
+  headerBgColor: g,
+  headerTextColor: x,
+  rowHoverColor: b,
+  borderColor: h,
+  stripedRowColor: r,
+  rounded: w = "md",
+  style: d
 }) => {
-  const [m, v] = k(
+  const [y, l] = R(
     t && typeof t == "object" && t.current || 1
-  ), [p, l] = k(
+  ), [f, N] = R(
     t && typeof t == "object" && t.pageSize || 10
-  ), u = (x, w) => typeof o == "function" ? o(x) : x[o] || String(w), r = (x, w) => w ? w.split(".").reduce((C, $) => C == null ? void 0 : C[$], x) : x, b = t === !1 ? a : a.slice((m - 1) * p, m * p), n = (x) => {
-    v(x), t && typeof t == "object" && t.onChange && t.onChange(x, p);
-  }, N = (x) => {
-    l(x), v(1), t && typeof t == "object" && t.onChange && t.onChange(1, x);
+  ), p = {
+    sm: {
+      headerPadding: "px-3 py-2",
+      headerFontSize: "text-xs",
+      rowPadding: "px-3 py-2",
+      rowFontSize: "text-xs",
+      containerRounded: "rounded-md"
+    },
+    md: {
+      headerPadding: "px-4 py-3",
+      headerFontSize: "text-xs",
+      rowPadding: "px-4 py-3",
+      rowFontSize: "text-sm",
+      containerRounded: "rounded-lg"
+    },
+    lg: {
+      headerPadding: "px-6 py-4",
+      headerFontSize: "text-sm",
+      rowPadding: "px-6 py-4",
+      rowFontSize: "text-base",
+      containerRounded: "rounded-xl"
+    },
+    responsive: {
+      headerPadding: "px-2 sm:px-3 md:px-4 py-2 sm:py-2.5 md:py-3",
+      headerFontSize: "text-xs sm:text-xs md:text-sm",
+      rowPadding: "px-2 sm:px-3 md:px-4 py-2 sm:py-2.5 md:py-3",
+      rowFontSize: "text-xs sm:text-xs md:text-sm",
+      containerRounded: "rounded-md sm:rounded-lg md:rounded-lg"
+    }
+  }, B = {
+    none: "",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    xl: "rounded-xl",
+    "2xl": "rounded-2xl"
+  }, k = p[m], T = B[w], P = (S, E) => typeof n == "function" ? n(S) : S[n] || String(E), L = (S, E) => E ? E.split(".").reduce((z, I) => z == null ? void 0 : z[I], S) : S, M = t === !1 ? a : a.slice((y - 1) * f, y * f), F = (S) => {
+    l(S), t && typeof t == "object" && t.onChange && t.onChange(S, f);
+  }, j = (S) => {
+    N(S), l(1), t && typeof t == "object" && t.onChange && t.onChange(1, S);
   };
-  return /* @__PURE__ */ f("div", { className: "w-full", children: [
-    /* @__PURE__ */ e("div", { className: "overflow-x-auto rounded-2xl border border-[#EEEEEE]", children: /* @__PURE__ */ f("table", { className: `w-full ${g ? "border-collapse" : ""} ${i}`, children: [
-      /* @__PURE__ */ e("thead", { className: "bg-[#F5F6F7]", children: /* @__PURE__ */ e("tr", { children: s.map((x, w) => /* @__PURE__ */ e(
-        "th",
-        {
-          className: `px-4 py-3 text-left text-xs font-medium text-[#333333] uppercase tracking-wider ${g && w !== s.length - 1 ? "border-r border-[#EEEEEE]" : ""} ${x.align === "center" ? "text-center" : x.align === "right" ? "text-right" : ""}`,
-          style: { width: x.width },
-          children: x.title
-        },
-        x.key
-      )) }) }),
-      /* @__PURE__ */ e("tbody", { className: "bg-white divide-y divide-gray-200", children: c ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: s.length, className: "px-4 py-8 text-center text-[#333333]", children: /* @__PURE__ */ f("div", { className: "flex justify-center items-center", children: [
-        /* @__PURE__ */ f(
-          "svg",
-          {
-            className: "animate-spin h-5 w-5 mr-2",
-            xmlns: "http://www.w3.org/2000/svg",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            children: [
-              /* @__PURE__ */ e(
-                "circle",
+  return /* @__PURE__ */ C("div", { className: "w-full", style: d, children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: `overflow-x-auto ${T || "rounded-2xl"} border`,
+        style: { borderColor: h || "#EEEEEE" },
+        children: /* @__PURE__ */ C("table", { className: `w-full ${i ? "border-collapse" : ""} ${$}`, children: [
+          /* @__PURE__ */ e(
+            "thead",
+            {
+              style: {
+                backgroundColor: g || "#F5F6F7",
+                color: x || "#333333"
+              },
+              children: /* @__PURE__ */ e("tr", { children: s.map((S, E) => /* @__PURE__ */ e(
+                "th",
                 {
-                  className: "opacity-25",
-                  cx: "12",
-                  cy: "12",
-                  r: "10",
-                  stroke: "currentColor",
-                  strokeWidth: "4"
-                }
-              ),
-              /* @__PURE__ */ e(
-                "path",
+                  className: `${k.headerPadding} text-left ${k.headerFontSize} font-medium uppercase tracking-wider ${i && E !== s.length - 1 ? "border-r" : ""} ${S.align === "center" ? "text-center" : S.align === "right" ? "text-right" : ""}`,
+                  style: {
+                    width: S.width,
+                    borderColor: h || "#EEEEEE",
+                    color: x || "#333333"
+                  },
+                  children: S.title
+                },
+                S.key
+              )) })
+            }
+          ),
+          /* @__PURE__ */ e(
+            "tbody",
+            {
+              className: "bg-white divide-y",
+              style: { borderColor: h || "#e5e5e5" },
+              children: c ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+                "td",
                 {
-                  className: "opacity-75",
-                  fill: "currentColor",
-                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                  colSpan: s.length,
+                  className: `${k.rowPadding} py-8 text-center`,
+                  style: { color: "#333333" },
+                  children: /* @__PURE__ */ C("div", { className: "flex justify-center items-center", children: [
+                    /* @__PURE__ */ C(
+                      "svg",
+                      {
+                        className: "animate-spin h-5 w-5 mr-2",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        children: [
+                          /* @__PURE__ */ e(
+                            "circle",
+                            {
+                              className: "opacity-25",
+                              cx: "12",
+                              cy: "12",
+                              r: "10",
+                              stroke: "currentColor",
+                              strokeWidth: "4"
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            "path",
+                            {
+                              className: "opacity-75",
+                              fill: "currentColor",
+                              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    "Loading..."
+                  ] })
                 }
-              )
-            ]
-          }
-        ),
-        "Loading..."
-      ] }) }) }) : b.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e("td", { colSpan: s.length, className: "px-4 py-8 text-center text-[#333333]", children: "No data" }) }) : b.map((x, w) => {
-        const C = d ? d(x, w) : {};
-        return /* @__PURE__ */ e(
-          "tr",
-          {
-            className: `${h && w % 2 === 1 ? "bg-[#F5F6F7]" : ""} hover:bg-gray-50 transition-colors duration-200 ease-out`,
-            ...C,
-            children: s.map(($, E) => {
-              const L = r(x, $.dataIndex), B = $.render ? $.render(L, x, w) : L;
-              return /* @__PURE__ */ e(
+              ) }) : M.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
                 "td",
                 {
-                  className: `px-4 py-4 text-sm text-gray-900 ${g && E !== s.length - 1 ? "border-r border-[#EEEEEE]" : ""} ${$.align === "center" ? "text-center" : $.align === "right" ? "text-right" : ""}`,
-                  children: B
-                },
-                $.key
-              );
-            })
-          },
-          u(x, w)
-        );
-      }) })
-    ] }) }),
+                  colSpan: s.length,
+                  className: `${k.rowPadding} py-8 text-center`,
+                  style: { color: "#333333" },
+                  children: "No data"
+                }
+              ) }) : M.map((S, E) => {
+                const z = u ? u(S, E) : {}, I = o && E % 2 === 1 ? r || "#F5F6F7" : "transparent", A = b || "#f3f4f6";
+                return /* @__PURE__ */ e(
+                  "tr",
+                  {
+                    className: "transition-colors duration-200 ease-out",
+                    style: {
+                      backgroundColor: I
+                    },
+                    onMouseEnter: (W) => {
+                      (b || !o || E % 2 === 0) && (W.currentTarget.style.backgroundColor = A);
+                    },
+                    onMouseLeave: (W) => {
+                      W.currentTarget.style.backgroundColor = I;
+                    },
+                    ...z,
+                    children: s.map((W, D) => {
+                      const H = L(S, W.dataIndex), Q = W.render ? W.render(H, S, E) : H;
+                      return /* @__PURE__ */ e(
+                        "td",
+                        {
+                          className: `${k.rowPadding} ${k.rowFontSize} text-gray-900 ${i && D !== s.length - 1 ? "border-r" : ""} ${W.align === "center" ? "text-center" : W.align === "right" ? "text-right" : ""}`,
+                          style: {
+                            borderColor: h || "#EEEEEE"
+                          },
+                          children: Q
+                        },
+                        W.key
+                      );
+                    })
+                  },
+                  P(S, E)
+                );
+              })
+            }
+          )
+        ] })
+      }
+    ),
     t !== !1 && /* @__PURE__ */ e(
-      T,
+      J,
       {
-        current: m,
-        pageSize: p,
+        current: y,
+        pageSize: f,
         total: a.length,
-        onChange: n,
-        onPageSizeChange: N,
+        onChange: F,
+        onPageSizeChange: j,
         showSizeChanger: t && typeof t == "object" ? t.showSizeChanger : !0,
         pageSizeOptions: t && typeof t == "object" ? t.pageSizeOptions : [10, 20, 50, 100],
         showTotal: t && typeof t == "object" ? t.showTotal : !0,
-        size: t && typeof t == "object" ? t.size : "md"
+        size: t && typeof t == "object" && t.size ? t.size : m === "responsive" ? "md" : m
       }
     )
   ] });
-}, T = ({
+}, J = ({
   current: s,
   pageSize: a,
-  total: o,
+  total: n,
   onChange: t,
   onPageSizeChange: c,
-  showSizeChanger: d = !0,
-  pageSizeOptions: i = [10, 20, 50, 100],
-  showTotal: g = !0,
-  size: h = "md"
+  showSizeChanger: u = !0,
+  pageSizeOptions: $ = [10, 20, 50, 100],
+  showTotal: i = !0,
+  size: o = "md"
 }) => {
-  const m = Math.ceil(o / a), v = (s - 1) * a + 1, p = Math.min(s * a, o), l = {
+  const m = Math.ceil(n / a), g = (s - 1) * a + 1, x = Math.min(s * a, n), b = {
     sm: {
       button: "px-2.5 py-1 text-xs",
       icon: "h-3.5 w-3.5",
@@ -471,40 +799,40 @@ const D = ({
       icon: "h-6 w-6",
       nav: "px-3 py-3"
     }
-  }, u = () => {
+  }, h = () => {
     const r = [];
     if (m <= 7)
-      for (let n = 1; n <= m; n++)
-        r.push(n);
+      for (let d = 1; d <= m; d++)
+        r.push(d);
     else if (s <= 3) {
-      for (let n = 1; n <= 5; n++) r.push(n);
+      for (let d = 1; d <= 5; d++) r.push(d);
       r.push("..."), r.push(m);
     } else if (s >= m - 2) {
       r.push(1), r.push("...");
-      for (let n = m - 4; n <= m; n++) r.push(n);
+      for (let d = m - 4; d <= m; d++) r.push(d);
     } else {
       r.push(1), r.push("...");
-      for (let n = s - 1; n <= s + 1; n++) r.push(n);
+      for (let d = s - 1; d <= s + 1; d++) r.push(d);
       r.push("..."), r.push(m);
     }
     return r;
   };
-  return /* @__PURE__ */ f("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[#EEEEEE] sm:px-6 mt-4", children: [
-    g && /* @__PURE__ */ f("div", { className: "text-sm text-[#181918]", children: [
-      v,
+  return /* @__PURE__ */ C("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[#EEEEEE] sm:px-6 mt-4", children: [
+    i && /* @__PURE__ */ C("div", { className: "text-sm text-[#181918]", children: [
+      g,
       "-",
-      p,
+      x,
       " of ",
-      o,
+      n,
       " items"
     ] }),
-    /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
-      d && /* @__PURE__ */ e(
-        P,
+    /* @__PURE__ */ C("div", { className: "flex items-center gap-2", children: [
+      u && /* @__PURE__ */ e(
+        G,
         {
           value: a.toString(),
           onChange: (r) => c(Number(r)),
-          options: i.map((r) => ({
+          options: $.map((r) => ({
             value: r.toString(),
             label: `${r} / page`
           })),
@@ -512,14 +840,14 @@ const D = ({
           className: "w-32"
         }
       ),
-      /* @__PURE__ */ f("nav", { className: "inline-flex gap-1 items-center", "aria-label": "Pagination", children: [
+      /* @__PURE__ */ C("nav", { className: "inline-flex gap-1 items-center", "aria-label": "Pagination", children: [
         /* @__PURE__ */ e(
           "button",
           {
             onClick: () => t(s - 1),
             disabled: s === 1,
-            className: `relative inline-flex items-center justify-center rounded-md ${l[h].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
-            children: /* @__PURE__ */ e("svg", { className: l[h].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
+            className: `relative inline-flex items-center justify-center rounded-md ${b[o].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
+            children: /* @__PURE__ */ e("svg", { className: b[o].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -530,18 +858,18 @@ const D = ({
             ) })
           }
         ),
-        u().map((r, b) => r === "..." ? /* @__PURE__ */ e(
+        h().map((r, w) => r === "..." ? /* @__PURE__ */ e(
           "span",
           {
-            className: `relative inline-flex items-center justify-center ${l[h].button} font-normal text-[#181918]`,
+            className: `relative inline-flex items-center justify-center ${b[o].button} font-normal text-[#181918]`,
             children: "..."
           },
-          `ellipsis-${b}`
+          `ellipsis-${w}`
         ) : /* @__PURE__ */ e(
           "button",
           {
             onClick: () => t(r),
-            className: `relative inline-flex items-center justify-center rounded-md ${l[h].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${s === r ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
+            className: `relative inline-flex items-center justify-center rounded-md ${b[o].button} font-medium transition-all duration-300 ease-out focus:z-20 hover:scale-105 active:scale-95 ${s === r ? "bg-[#EC615B] text-white shadow-sm" : "text-[#181918] hover:bg-gray-100"}`,
             children: r
           },
           r
@@ -551,8 +879,8 @@ const D = ({
           {
             onClick: () => t(s + 1),
             disabled: s === m,
-            className: `relative inline-flex items-center justify-center rounded-md ${l[h].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
-            children: /* @__PURE__ */ e("svg", { className: l[h].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
+            className: `relative inline-flex items-center justify-center rounded-md ${b[o].nav} text-[#181918] hover:bg-gray-100 focus:z-20 disabled:opacity-30 disabled:cursor-not-allowed disabled:hover:bg-transparent transition-all duration-300 ease-out hover:scale-110 active:scale-95`,
+            children: /* @__PURE__ */ e("svg", { className: b[o].icon, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", children: /* @__PURE__ */ e(
               "path",
               {
                 strokeLinecap: "round",
@@ -566,141 +894,275 @@ const D = ({
       ] })
     ] })
   ] });
-}, G = ({
+}, oe = ({
   title: s,
   description: a,
-  searchPlaceholder: o = "Search...",
+  searchPlaceholder: n = "Search...",
   onSearch: t,
   actions: c,
-  filters: d,
-  className: i = ""
+  filters: u,
+  className: $ = "",
+  size: i = "responsive",
+  titleColor: o,
+  descriptionColor: m,
+  searchBgColor: g = "white",
+  searchBorderColor: x = "#d1d5db",
+  searchFocusBorderColor: b = "#3b82f6",
+  rounded: h = "md",
+  style: r
 }) => {
-  const g = (h) => {
-    t == null || t(h.target.value);
+  const w = (p) => {
+    t == null || t(p.target.value);
+  }, y = {
+    sm: {
+      titleSize: "text-lg",
+      titleWeight: "font-semibold",
+      descriptionSize: "text-xs",
+      searchInputSize: "text-xs",
+      searchInputPy: "py-1.5",
+      searchPaddingLeft: "pl-8",
+      iconSize: "h-4 w-4",
+      spacing: "space-y-2",
+      gap: "gap-2",
+      maxWidth: "max-w-sm",
+      descriptionMargin: "mt-0.5"
+    },
+    md: {
+      titleSize: "text-xl",
+      titleWeight: "font-semibold",
+      descriptionSize: "text-sm",
+      searchInputSize: "text-sm",
+      searchInputPy: "py-2",
+      searchPaddingLeft: "pl-10",
+      iconSize: "h-5 w-5",
+      spacing: "space-y-3",
+      gap: "gap-3",
+      maxWidth: "max-w-md",
+      descriptionMargin: "mt-1"
+    },
+    lg: {
+      titleSize: "text-2xl",
+      titleWeight: "font-bold",
+      descriptionSize: "text-base",
+      searchInputSize: "text-base",
+      searchInputPy: "py-2.5",
+      searchPaddingLeft: "pl-12",
+      iconSize: "h-6 w-6",
+      spacing: "space-y-4",
+      gap: "gap-4",
+      maxWidth: "max-w-lg",
+      descriptionMargin: "mt-2"
+    },
+    responsive: {
+      titleSize: "text-lg sm:text-xl md:text-2xl",
+      titleWeight: "font-semibold md:font-bold",
+      descriptionSize: "text-xs sm:text-sm md:text-base",
+      searchInputSize: "text-xs sm:text-sm md:text-base",
+      searchInputPy: "py-1.5 sm:py-2 md:py-2.5",
+      searchPaddingLeft: "pl-8 sm:pl-10 md:pl-12",
+      iconSize: "h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6",
+      spacing: "space-y-2 sm:space-y-3 md:space-y-4",
+      gap: "gap-2 sm:gap-3 md:gap-4",
+      maxWidth: "max-w-sm md:max-w-md lg:max-w-lg",
+      descriptionMargin: "mt-0.5 sm:mt-1 md:mt-2"
+    }
+  }[i], f = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  }[h], N = {
+    backgroundColor: g,
+    borderColor: x
   };
-  return /* @__PURE__ */ f("div", { className: `space-y-4 mb-4 ${i}`, children: [
-    (s || a) && /* @__PURE__ */ f("div", { children: [
-      s && /* @__PURE__ */ e("h2", { className: "text-xl font-semibold text-gray-900", children: s }),
-      a && /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 mt-1", children: a })
-    ] }),
-    /* @__PURE__ */ f("div", { className: "flex items-center justify-between gap-4", children: [
-      t && /* @__PURE__ */ e("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ f("div", { className: "relative", children: [
-        /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(
-          "svg",
-          {
-            className: "h-5 w-5 text-gray-400",
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ e(
-              "path",
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      className: `${y.spacing} mb-4 ${$}`,
+      style: r,
+      children: [
+        (s || a) && /* @__PURE__ */ C("div", { children: [
+          s && /* @__PURE__ */ e(
+            "h2",
+            {
+              className: `${y.titleSize} ${y.titleWeight}`,
+              style: { color: o || "#111827" },
+              children: s
+            }
+          ),
+          a && /* @__PURE__ */ e(
+            "p",
+            {
+              className: `${y.descriptionSize} ${y.descriptionMargin}`,
+              style: { color: m || "#6b7280" },
+              children: a
+            }
+          )
+        ] }),
+        /* @__PURE__ */ C("div", { className: `flex flex-col sm:flex-row items-stretch sm:items-center justify-between ${y.gap}`, children: [
+          t && /* @__PURE__ */ e("div", { className: `flex-1 ${y.maxWidth}`, children: /* @__PURE__ */ C("div", { className: "relative", children: [
+            /* @__PURE__ */ e("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none", children: /* @__PURE__ */ e(
+              "svg",
               {
-                strokeLinecap: "round",
-                strokeLinejoin: "round",
-                strokeWidth: 2,
-                d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                className: `${y.iconSize} text-gray-400`,
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24",
+                children: /* @__PURE__ */ e(
+                  "path",
+                  {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 2,
+                    d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  }
+                )
+              }
+            ) }),
+            /* @__PURE__ */ e(
+              "input",
+              {
+                type: "text",
+                placeholder: n,
+                onChange: w,
+                className: `block w-full ${y.searchPaddingLeft} pr-3 ${y.searchInputPy} border ${f} focus:outline-none focus:ring-2 focus:ring-opacity-50 ${y.searchInputSize} transition-colors duration-200`,
+                style: N,
+                onFocus: (p) => {
+                  p.currentTarget.style.borderColor = b, p.currentTarget.style.boxShadow = "0 0 0 2px rgba(59, 130, 246, 0.1)";
+                },
+                onBlur: (p) => {
+                  p.currentTarget.style.borderColor = x, p.currentTarget.style.boxShadow = "none";
+                }
               }
             )
-          }
-        ) }),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "text",
-            placeholder: o,
-            onChange: g,
-            className: "block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
-          }
-        )
-      ] }) }),
-      c && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: c })
-    ] }),
-    d && /* @__PURE__ */ e("div", { className: "flex items-center gap-3", children: d })
-  ] });
-}, J = ({
+          ] }) }),
+          c && /* @__PURE__ */ e("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: c })
+        ] }),
+        u && /* @__PURE__ */ e("div", { className: `flex flex-wrap items-center ${y.gap}`, children: u })
+      ]
+    }
+  );
+}, X = {
+  sm: "384px",
+  md: "448px",
+  lg: "512px",
+  xl: "600px",
+  full: "100%",
+  responsive: "90vw"
+}, ae = ({
   open: s,
   onClose: a,
-  title: o,
+  title: n,
   children: t,
   footer: c,
-  width: d = "520px",
+  width: u,
+  size: $ = "md",
   closable: i = !0,
-  maskClosable: g = !0,
-  centered: h = !0,
-  className: m = ""
+  maskClosable: o = !0,
+  centered: m = !0,
+  className: g = "",
+  bgColor: x = "#ffffff",
+  headerBgColor: b = "#ffffff",
+  overlayColor: h = "rgba(0, 0, 0, 0.5)",
+  bodyClassName: r = "",
+  headerClassName: w = "",
+  maxHeight: d = "70vh"
 }) => {
-  const [v, p] = k(!1), [l, u] = k(!1);
-  if (M(() => {
+  const [y, l] = R(!1), [f, N] = R(!1), p = u || X[$], k = {
+    width: typeof p == "number" ? `${p}px` : p,
+    maxWidth: "90vw",
+    backgroundColor: x
+  }, T = {
+    backgroundColor: b
+  }, P = {
+    backgroundColor: h
+  };
+  if (V(() => {
     if (s)
-      p(!0), setTimeout(() => u(!0), 10), document.body.style.overflow = "hidden";
+      l(!0), setTimeout(() => N(!0), 10), document.body.style.overflow = "hidden";
     else {
-      u(!1);
-      const n = setTimeout(() => {
-        p(!1);
+      N(!1);
+      const F = setTimeout(() => {
+        l(!1);
       }, 200);
-      return document.body.style.overflow = "unset", () => clearTimeout(n);
+      return document.body.style.overflow = "unset", () => clearTimeout(F);
     }
-  }, [s]), M(() => {
-    const n = (N) => {
-      N.key === "Escape" && i && s && a();
+  }, [s]), V(() => {
+    const F = (j) => {
+      j.key === "Escape" && i && s && a();
     };
-    return s && document.addEventListener("keydown", n), () => {
-      document.removeEventListener("keydown", n);
+    return s && document.addEventListener("keydown", F), () => {
+      document.removeEventListener("keydown", F);
     };
-  }, [s, a, i]), !v) return null;
-  const r = () => {
-    g && a();
-  }, b = (n) => {
-    n.stopPropagation();
+  }, [s, a, i]), !y) return null;
+  const L = () => {
+    o && a();
+  }, M = (F) => {
+    F.stopPropagation();
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ C(
     "div",
     {
       className: "fixed inset-0 z-50 overflow-y-auto",
-      onClick: r,
+      onClick: L,
       children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `fixed inset-0 bg-black transition-opacity duration-200 ease-out ${l ? "opacity-50" : "opacity-0"}`
+            className: `fixed inset-0 transition-opacity duration-200 ease-out ${f ? "opacity-100" : "opacity-0"}`,
+            style: P
           }
         ),
-        /* @__PURE__ */ e("div", { className: `flex min-h-full items-center justify-center p-4 ${h ? "items-center" : "items-start pt-20"}`, children: /* @__PURE__ */ f(
+        /* @__PURE__ */ e("div", { className: `flex min-h-full items-center justify-center p-4 ${m ? "items-center" : "items-start pt-20"}`, children: /* @__PURE__ */ C(
           "div",
           {
-            className: `relative bg-white rounded-lg shadow-xl transition-all duration-200 ease-out ${l ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-4"} ${m}`,
-            style: { width: d, maxWidth: "90vw" },
-            onClick: b,
+            className: `relative rounded-lg shadow-xl transition-all duration-200 ease-out overflow-y-auto ${f ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 -translate-y-4"} ${g}`,
+            style: { ...k, maxHeight: typeof d == "number" ? `${d}px` : d },
+            onClick: M,
             children: [
-              (o || i) && /* @__PURE__ */ f("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200", children: [
-                o && /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900", children: o }),
-                i && /* @__PURE__ */ e(
-                  "button",
-                  {
-                    onClick: a,
-                    className: "text-gray-400 hover:text-gray-600 transition-colors duration-200 ease-out",
-                    children: /* @__PURE__ */ e(
-                      "svg",
+              (n || i) && /* @__PURE__ */ C(
+                "div",
+                {
+                  className: `flex items-center justify-between px-6 py-4 border-b border-gray-200 ${w}`,
+                  style: T,
+                  children: [
+                    n && /* @__PURE__ */ e("h3", { className: "text-lg font-semibold text-gray-900", children: n }),
+                    i && /* @__PURE__ */ e(
+                      "button",
                       {
-                        className: "w-5 h-5",
-                        fill: "none",
-                        stroke: "currentColor",
-                        viewBox: "0 0 24 24",
+                        onClick: a,
+                        className: "text-gray-400 hover:text-gray-600 transition-colors duration-200 ease-out",
                         children: /* @__PURE__ */ e(
-                          "path",
+                          "svg",
                           {
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            strokeWidth: 2,
-                            d: "M6 18L18 6M6 6l12 12"
+                            className: "w-5 h-5",
+                            fill: "none",
+                            stroke: "currentColor",
+                            viewBox: "0 0 24 24",
+                            children: /* @__PURE__ */ e(
+                              "path",
+                              {
+                                strokeLinecap: "round",
+                                strokeLinejoin: "round",
+                                strokeWidth: 2,
+                                d: "M6 18L18 6M6 6l12 12"
+                              }
+                            )
                           }
                         )
                       }
                     )
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ e("div", { className: "px-6 py-4 max-h-[70vh] overflow-y-auto", children: t }),
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `px-6 py-4 ${r}`,
+                  children: t
+                }
+              ),
               c && /* @__PURE__ */ e("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end gap-2", children: c })
             ]
           }
@@ -708,16 +1170,21 @@ const D = ({
       ]
     }
   );
-}, U = ({
+}, ie = ({
   children: s,
   variant: a = "default",
-  size: o = "md",
+  size: n = "md",
   dot: t = !1,
   icon: c,
-  iconPosition: d = "left",
-  className: i = ""
+  iconPosition: u = "left",
+  className: $ = "",
+  bgColor: i,
+  textColor: o,
+  borderColor: m,
+  rounded: g = "full",
+  style: x
 }) => {
-  const g = {
+  const b = {
     default: "bg-gray-100 text-[#181918]",
     primary: "bg-[#FCEAE9] text-[#EC615B]",
     success: "bg-green-100 text-green-800",
@@ -727,56 +1194,80 @@ const D = ({
   }, h = {
     sm: "px-2 py-0.5 text-xs",
     md: "px-2.5 py-1 text-sm",
-    lg: "px-3 py-1.5 text-base"
-  }, m = {
+    lg: "px-3 py-1.5 text-base",
+    responsive: "px-1.5 py-0.5 text-[10px] sm:px-2 sm:py-0.5 sm:text-xs md:px-2.5 md:py-1 md:text-sm lg:px-3 lg:py-1.5 lg:text-base"
+  }, r = {
     sm: "w-1.5 h-1.5",
     md: "w-2 h-2",
-    lg: "w-2.5 h-2.5"
-  }, v = {
+    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 = {
     default: "bg-gray-600",
     primary: "bg-[#EC615B]",
     success: "bg-green-600",
     warning: "bg-yellow-600",
     danger: "bg-red-600",
     info: "bg-cyan-600"
-  }, p = {
+  }, d = {
     sm: "w-3 h-3",
     md: "w-3.5 h-3.5",
-    lg: "w-4 h-4"
+    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"
+  }, y = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  }, l = {
+    ...i && { backgroundColor: i },
+    ...o && { color: o },
+    ...m && { borderColor: m, borderWidth: "1px", borderStyle: "solid" },
+    ...x
   };
-  return /* @__PURE__ */ f(
+  return /* @__PURE__ */ C(
     "span",
     {
-      className: `inline-flex items-center gap-1.5 font-medium rounded-full transition-all duration-200 ${g[a]} ${h[o]} ${i}`,
+      className: `inline-flex items-center gap-1.5 font-medium transition-all duration-200 ${i ? "" : b[a]} ${h[n]} ${y[g]} ${$}`,
+      style: l,
       children: [
-        t && /* @__PURE__ */ e("span", { className: `rounded-full ${m[o]} ${v[a]}` }),
-        c && d === "left" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${p[o]}`, children: c }),
+        t && /* @__PURE__ */ e("span", { className: `rounded-full ${r[n]} ${w[a]}` }),
+        c && u === "left" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${d[n]}`, children: c }),
         s,
-        c && d === "right" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${p[o]}`, children: c })
+        c && u === "right" && /* @__PURE__ */ e("span", { className: `inline-flex items-center ${d[n]}`, children: c })
       ]
     }
   );
-}, X = ({
+}, de = ({
   items: s,
   current: a = 0,
-  direction: o = "vertical",
+  direction: n = "vertical",
   size: t = "md",
   variant: c = "default",
-  className: d = ""
+  className: u = "",
+  style: $,
+  finishColor: i,
+  processColor: o,
+  waitColor: m,
+  errorColor: g,
+  lineColor: x
 }) => {
-  const i = (l, u) => u.status ? u.status : l < a ? "finish" : l === a ? "process" : "wait", g = {
+  const b = (l, f) => f.status ? f.status : l < a ? "finish" : l === a ? "process" : "wait", h = {
     sm: "w-6 h-6",
     md: "w-8 h-8",
-    lg: "w-10 h-10"
-  }, h = {
+    lg: "w-10 h-10",
+    responsive: "w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 lg:w-10 lg:h-10"
+  }, r = {
     sm: "text-sm",
     md: "text-base",
-    lg: "text-lg"
-  }, m = {
+    lg: "text-lg",
+    responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
+  }, w = {
     sm: "text-xs",
     md: "text-sm",
-    lg: "text-base"
-  }, v = (l, u) => u || (l === "finish" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+    lg: "text-base",
+    responsive: "text-xs sm:text-xs md:text-sm lg:text-base"
+  }, d = (l, f) => f || (l === "finish" ? /* @__PURE__ */ e("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
@@ -790,142 +1281,161 @@ const D = ({
       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), p = (l) => {
-    const u = c === "outline";
+  ) }) : null), y = (l) => {
+    const f = c === "outline";
     switch (l) {
       case "finish":
         return {
-          icon: u ? "bg-white text-green-500 border-green-500" : "bg-green-500 text-white border-green-500",
+          icon: f ? `bg-white text-white border ${i ? `border-[${i}]` : "border-green-500"}` : `${i ? `bg-[${i}]` : "bg-green-500"} text-white ${i ? `border-[${i}]` : "border-green-500"}`,
           title: "text-[#181918]",
           description: "text-gray-600",
-          line: "bg-green-500"
+          line: x ? `bg-[${x}]` : "bg-green-500",
+          iconColor: i
         };
       case "process":
         return {
-          icon: u ? "bg-white text-[#EC615B] border-[#EC615B]" : "bg-[#EC615B] text-white border-[#EC615B]",
+          icon: f ? `bg-white text-white border ${o ? `border-[${o}]` : "border-[#EC615B]"}` : `${o ? `bg-[${o}]` : "bg-[#EC615B]"} text-white ${o ? `border-[${o}]` : "border-[#EC615B]"}`,
           title: "text-[#181918] font-semibold",
           description: "text-gray-700",
-          line: "bg-gray-300"
+          line: x ? `bg-[${x}]` : "bg-gray-300",
+          iconColor: o
         };
       case "error":
         return {
-          icon: u ? "bg-white text-red-500 border-red-500" : "bg-red-500 text-white border-red-500",
+          icon: f ? `bg-white text-white border ${g ? `border-[${g}]` : "border-red-500"}` : `${g ? `bg-[${g}]` : "bg-red-500"} text-white ${g ? `border-[${g}]` : "border-red-500"}`,
           title: "text-red-600",
           description: "text-red-500",
-          line: "bg-gray-300"
+          line: x ? `bg-[${x}]` : "bg-gray-300",
+          iconColor: g
         };
       default:
         return {
           icon: "bg-white text-gray-400 border-gray-300",
           title: "text-gray-500",
           description: "text-gray-400",
-          line: "bg-gray-300"
+          line: x ? `bg-[${x}]` : "bg-gray-300",
+          iconColor: m
         };
     }
   };
-  return o === "horizontal" ? /* @__PURE__ */ e("div", { className: `flex items-start ${d}`, children: s.map((l, u) => {
-    const r = i(u, l), b = p(r), n = u === s.length - 1;
-    return /* @__PURE__ */ f("div", { className: "flex flex-1 items-start", children: [
-      /* @__PURE__ */ f("div", { className: "flex flex-col items-center", children: [
+  return n === "horizontal" ? /* @__PURE__ */ e("div", { className: `flex items-start ${u}`, style: $, children: s.map((l, f) => {
+    const N = b(f, l), p = y(N), B = f === s.length - 1, k = {};
+    return p.iconColor && (k.color = p.iconColor), /* @__PURE__ */ C("div", { className: "flex flex-1 items-start", children: [
+      /* @__PURE__ */ C("div", { className: "flex flex-col items-center", children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `flex items-center justify-center ${g[t]} rounded-full border transition-all duration-300 ${b.icon}`,
-            children: v(r, l.icon)
+            className: `flex items-center justify-center ${h[t]} rounded-full border transition-all duration-300 ${p.icon}`,
+            style: k,
+            children: d(N, l.icon)
           }
         ),
-        /* @__PURE__ */ f("div", { className: "mt-2 text-center", children: [
+        /* @__PURE__ */ C("div", { className: "mt-2 text-center", children: [
           /* @__PURE__ */ e(
             "div",
             {
-              className: `${h[t]} ${b.title} transition-colors duration-300`,
+              className: `${r[t]} ${p.title} transition-colors duration-300`,
               children: l.title
             }
           ),
           l.description && /* @__PURE__ */ e(
             "div",
             {
-              className: `${m[t]} ${b.description} mt-1 transition-colors duration-300`,
+              className: `${w[t]} ${p.description} mt-1 transition-colors duration-300`,
               children: l.description
             }
           )
         ] })
       ] }),
-      !n && /* @__PURE__ */ e(
+      !B && /* @__PURE__ */ e(
         "div",
         {
-          className: `flex-1 h-0.5 mt-4 mx-2 ${b.line} transition-colors duration-300`
+          className: `flex-1 h-0.5 mt-4 mx-2 ${p.line} transition-colors duration-300`
         }
       )
-    ] }, u);
-  }) }) : /* @__PURE__ */ e("div", { className: `flex flex-col ${d}`, children: s.map((l, u) => {
-    const r = i(u, l), b = p(r), n = u === s.length - 1;
-    return /* @__PURE__ */ f("div", { className: "flex", children: [
-      /* @__PURE__ */ f("div", { className: "flex flex-col items-center mr-4", children: [
+    ] }, f);
+  }) }) : /* @__PURE__ */ e("div", { className: `flex flex-col ${u}`, style: $, children: s.map((l, f) => {
+    const N = b(f, l), p = y(N), B = f === s.length - 1, k = {};
+    return p.iconColor && (k.color = p.iconColor), /* @__PURE__ */ C("div", { className: "flex", children: [
+      /* @__PURE__ */ C("div", { className: "flex flex-col items-center mr-4", children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `flex items-center justify-center ${g[t]} rounded-full border transition-all duration-300 ${b.icon}`,
-            children: v(r, l.icon)
+            className: `flex items-center justify-center ${h[t]} rounded-full border transition-all duration-300 ${p.icon}`,
+            style: k,
+            children: d(N, l.icon)
           }
         ),
-        !n && /* @__PURE__ */ e(
+        !B && /* @__PURE__ */ e(
           "div",
           {
-            className: `w-0.5 flex-1 my-1 ${b.line} transition-colors duration-300`,
+            className: `w-0.5 flex-1 my-1 ${p.line} transition-colors duration-300`,
             style: { minHeight: "20px" }
           }
         )
       ] }),
-      /* @__PURE__ */ f("div", { className: "flex-1 pb-6", children: [
+      /* @__PURE__ */ C("div", { className: "flex-1 pb-6", children: [
         /* @__PURE__ */ e(
           "div",
           {
-            className: `${h[t]} ${b.title} transition-colors duration-300`,
+            className: `${r[t]} ${p.title} transition-colors duration-300`,
             children: l.title
           }
         ),
         l.description && /* @__PURE__ */ e(
           "div",
           {
-            className: `${m[t]} ${b.description} mt-1 transition-colors duration-300`,
+            className: `${w[t]} ${p.description} mt-1 transition-colors duration-300`,
             children: l.description
           }
         )
       ] })
-    ] }, u);
+    ] }, f);
   }) });
-}, Y = ({
+}, ce = ({
   percent: s = 0,
   status: a = "normal",
-  showInfo: o = !0,
+  showInfo: n = !0,
   strokeColor: t,
   strokeWidth: c,
-  size: d = "md",
-  className: i = "",
-  format: g
+  size: u = "md",
+  className: $ = "",
+  format: i,
+  bgColor: o,
+  successColor: m,
+  exceptionColor: g,
+  trackColor: x,
+  rounded: b = "full"
 }) => {
-  const h = Math.min(100, Math.max(0, s)), m = {
+  const h = Math.min(100, Math.max(0, s)), r = {
     sm: "h-1.5",
     md: "h-2",
-    lg: "h-3"
-  }, v = {
+    lg: "h-3",
+    responsive: "h-1.5 sm:h-2 md:h-3 lg:h-4"
+  }, w = {
     sm: "text-xs",
     md: "text-sm",
-    lg: "text-base"
-  }, p = () => {
+    lg: "text-base",
+    responsive: "text-xs sm:text-sm md:text-base lg:text-lg"
+  }, d = {
+    none: "rounded-none",
+    sm: "rounded-sm",
+    md: "rounded-md",
+    lg: "rounded-lg",
+    full: "rounded-full"
+  }, y = () => {
     if (t) return t;
     switch (a) {
       case "success":
-        return "bg-green-500";
+        return m || "bg-green-500";
       case "exception":
-        return "bg-red-500";
+        return g || "bg-red-500";
       case "active":
-        return "bg-[#EC615B]";
+        return o || "bg-[#EC615B]";
       default:
-        return h === 100 ? "bg-green-500" : "bg-[#EC615B]";
+        return h === 100 ? m || "bg-green-500" : o || "bg-[#EC615B]";
     }
-  }, l = () => a === "success" || h === 100 ? /* @__PURE__ */ e("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
+  }, l = () => x || "bg-gray-200", f = () => a === "success" || h === 100 ? /* @__PURE__ */ e("svg", { className: "w-4 h-4 text-green-500", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ e(
     "path",
     {
       fillRule: "evenodd",
@@ -939,99 +1449,117 @@ const D = ({
       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, u = () => g ? g(h) : `${Math.round(h)}%`, r = c ? `${c}px` : void 0;
-  return /* @__PURE__ */ f("div", { className: `flex items-center gap-2 ${i}`, children: [
+  ) }) : null, N = () => i ? i(h) : `${Math.round(h)}%`, p = c ? `${c}px` : void 0;
+  return /* @__PURE__ */ C("div", { className: `flex items-center gap-2 ${$}`, children: [
     /* @__PURE__ */ e("div", { className: "flex-1", children: /* @__PURE__ */ e(
       "div",
       {
-        className: `w-full bg-gray-200 rounded-full overflow-hidden ${m[d]}`,
-        style: { height: r },
+        className: `w-full overflow-hidden ${r[u]} ${d[b]} ${l()}`,
+        style: { height: p },
         children: /* @__PURE__ */ e(
           "div",
           {
-            className: `${p()} ${m[d]} rounded-full transition-all duration-300 ease-out ${a === "active" ? "progress-active" : ""}`,
+            className: `${y()} ${r[u]} ${d[b]} transition-all duration-300 ease-out ${a === "active" ? "progress-active" : ""}`,
             style: {
               width: `${h}%`,
-              height: r
+              height: p
             }
           }
         )
       }
     ) }),
-    o && /* @__PURE__ */ e("div", { className: `flex items-center gap-1 ${v[d]} text-gray-600 font-normal`, children: l() || u() })
+    n && /* @__PURE__ */ e("div", { className: `flex items-center gap-1 ${w[u]} text-gray-600 font-normal`, children: f() || N() })
   ] });
-}, Z = ({
+}, ue = ({
   checked: s,
   defaultChecked: a = !1,
-  onChange: o,
+  onChange: n,
   disabled: t = !1,
   indeterminate: c = !1,
-  size: d = "md",
-  variant: i = "filled",
-  className: g = "",
-  id: h,
+  size: u = "md",
+  variant: $ = "filled",
+  className: i = "",
+  id: o,
   name: m,
-  value: v
+  value: g,
+  checkedColor: x = "#EC615B",
+  uncheckedColor: b = "#ffffff",
+  checkedBorderColor: h = "#EC615B",
+  style: r
 }) => {
-  const [p, l] = k(a), u = s !== void 0, r = u ? s : p, b = ($) => {
+  const [w, d] = R(a), y = s !== void 0, l = y ? s : w, f = (L) => {
     if (t) return;
-    const E = $.target.checked;
-    u || l(E), o == null || o(E);
-  }, n = {
+    const M = L.target.checked;
+    y || d(M), n == null || n(M);
+  }, N = {
     sm: "w-4 h-4",
     md: "w-5 h-5",
-    lg: "w-6 h-6"
-  }, N = {
+    lg: "w-6 h-6",
+    responsive: "w-4 h-4 sm:w-5 sm:h-5 lg:w-6 lg:h-6"
+  }, p = {
     sm: "w-3 h-3",
     md: "w-3.5 h-3.5",
-    lg: "w-4 h-4"
-  }, x = i === "filled", w = () => t ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : x ? !r && !c ? "border-gray-300 bg-white hover:border-gray-400" : "border-[#EC615B] bg-[#EC615B] hover:bg-[#D4554F] hover:border-[#D4554F]" : !r && !c ? "border-gray-300 bg-white hover:border-gray-400" : "border-[#EC615B] bg-white hover:border-[#D4554F]", C = () => x ? "text-white" : "text-[#EC615B]";
-  return /* @__PURE__ */ f("div", { className: "inline-flex items-center", children: [
+    lg: "w-4 h-4",
+    responsive: "w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 lg:w-4 lg:h-4"
+  }, B = $ === "filled", k = () => t ? "cursor-not-allowed opacity-50 border-gray-300 bg-gray-100" : !l && !c ? "border-gray-300 bg-white hover:border-gray-400" : "", T = () => {
+    if (!t && !(!l && !c))
+      return B ? {
+        borderColor: h,
+        backgroundColor: x
+      } : {
+        borderColor: h,
+        backgroundColor: b
+      };
+  }, P = () => B && (l || c) ? "text-white" : "";
+  return /* @__PURE__ */ C("div", { className: "inline-flex items-center", style: r, children: [
     /* @__PURE__ */ e(
       "input",
       {
         type: "checkbox",
-        id: h,
+        id: o,
         name: m,
-        value: v,
-        checked: r,
-        onChange: b,
+        value: g,
+        checked: l,
+        onChange: f,
         disabled: t,
         className: "sr-only"
       }
     ),
-    /* @__PURE__ */ f(
+    /* @__PURE__ */ C(
       "label",
       {
-        htmlFor: h,
+        htmlFor: o,
         className: `
           relative flex items-center justify-center
-          ${n[d]}
-          ${i === "outline" ? "border" : "border-2"}
+          ${N[u]}
+          ${$ === "outline" ? "border" : "border-2"}
           rounded
           transition-all duration-200 ease-out
           cursor-pointer
-          ${w()}
-          ${g}
+          ${k()}
+          ${i}
         `,
+        style: T(),
         children: [
-          r && !c && /* @__PURE__ */ e(
+          l && !c && /* @__PURE__ */ e(
             "svg",
             {
-              className: `${N[d]} ${C()}`,
+              className: `${p[u]} ${P()}`,
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
               strokeWidth: 3,
+              style: !B && (l || c) ? { color: x } : void 0,
               children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
             }
           ),
           c && /* @__PURE__ */ e(
             "svg",
             {
-              className: `${N[d]} ${C()}`,
+              className: `${p[u]} ${P()}`,
               fill: "currentColor",
               viewBox: "0 0 24 24",
+              style: !B && (l || c) ? { color: x } : void 0,
               children: /* @__PURE__ */ e("rect", { x: "4", y: "11", width: "16", height: "2", rx: "1" })
             }
           )
@@ -1039,92 +1567,182 @@ const D = ({
       }
     )
   ] });
-}, _ = ({
+}, Y = (s = "md") => ({
+  sm: {
+    container: "space-y-1",
+    item: "px-2 py-1.5",
+    label: "text-xs",
+    sublabel: "text-[10px]",
+    button: "w-5 h-5",
+    icon: "w-3 h-3"
+  },
+  md: {
+    container: "space-y-2",
+    item: "px-4 py-3",
+    label: "text-sm",
+    sublabel: "text-xs",
+    button: "w-6 h-6",
+    icon: "w-4 h-4"
+  },
+  lg: {
+    container: "space-y-3",
+    item: "px-5 py-4",
+    label: "text-base",
+    sublabel: "text-sm",
+    button: "w-7 h-7",
+    icon: "w-5 h-5"
+  },
+  responsive: {
+    container: "space-y-1 sm:space-y-2 md:space-y-3",
+    item: "px-2 py-1.5 sm:px-3 sm:py-2 md:px-4 md:py-3 lg:px-5 lg:py-4",
+    label: "text-xs sm:text-sm md:text-base",
+    sublabel: "text-[10px] sm:text-xs md:text-sm",
+    button: "w-5 h-5 sm:w-5 sm:h-5 md:w-6 md:h-6 lg:w-7 lg:h-7",
+    icon: "w-3 h-3 sm:w-3 sm:h-3 md:w-4 md:h-4 lg:w-5 lg:h-5"
+  }
+})[s], Z = (s = "md") => ({
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-lg",
+  lg: "rounded-xl",
+  full: "rounded-full"
+})[s], me = ({
   items: s,
   onRemove: a,
-  emptyMessage: o = "No items selected",
+  emptyMessage: n = "No items selected",
   className: t = "",
   itemClassName: c = "",
-  maxHeight: d = "300px"
-}) => s.length === 0 ? /* @__PURE__ */ e("div", { className: `text-center py-8 text-gray-500 text-sm ${t}`, children: o }) : /* @__PURE__ */ e(
-  "div",
-  {
-    className: `space-y-2 overflow-y-auto ${t}`,
-    style: { maxHeight: d },
-    children: s.map((i, g) => /* @__PURE__ */ f(
-      "div",
-      {
-        className: `
+  maxHeight: u = "300px",
+  size: $ = "md",
+  bgColor: i,
+  hoverBgColor: o,
+  textColor: m,
+  sublabelColor: g,
+  removeButtonColor: x,
+  removeButtonHoverColor: b,
+  rounded: h = "md",
+  style: r
+}) => {
+  const w = Y($), d = Z(h), y = "#F4F4F4", l = "#EBEBEB", f = "#181918", N = "#999999", p = "#9CA3AF", B = "#EC615B", k = i || y, T = o || l, P = m || f, L = g || N, M = x || p, F = b || B;
+  return s.length === 0 ? /* @__PURE__ */ e(
+    "div",
+    {
+      className: `text-center py-8 text-gray-500 text-sm ${t}`,
+      style: {
+        color: L,
+        ...r
+      },
+      children: n
+    }
+  ) : /* @__PURE__ */ e(
+    "div",
+    {
+      className: `overflow-y-auto ${w.container} ${t}`,
+      style: { maxHeight: u, ...r },
+      children: s.map((j, S) => /* @__PURE__ */ C(
+        "div",
+        {
+          className: `
             group flex items-center justify-between
-            bg-[#F4F4F4] rounded-lg px-4 py-3
+            ${d}
             transition-all duration-300 ease-out
-            hover:bg-[#EBEBEB] hover:shadow-sm
+            hover:shadow-sm
             animate-slide-in-item
             ${c}
           `,
-        style: {
-          animationDelay: `${g * 50}ms`
-        },
-        children: [
-          /* @__PURE__ */ f("div", { className: "flex-1 min-w-0", children: [
-            i.sublabel && /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 font-normal mb-0.5", children: i.sublabel }),
-            /* @__PURE__ */ e("div", { className: "text-sm font-medium text-[#181918] truncate", children: i.label })
-          ] }),
-          /* @__PURE__ */ e(
-            "button",
-            {
-              onClick: () => a(i.id),
-              className: `
-              ml-3 flex-shrink-0
-              w-6 h-6 rounded-full
+          style: {
+            backgroundColor: k,
+            animationDelay: `${S * 50}ms`
+          },
+          onMouseEnter: (E) => {
+            E.currentTarget.style.backgroundColor = T;
+          },
+          onMouseLeave: (E) => {
+            E.currentTarget.style.backgroundColor = k;
+          },
+          children: [
+            /* @__PURE__ */ C("div", { className: `flex-1 min-w-0 ${w.item}`, children: [
+              j.sublabel && /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `font-normal mb-0.5 ${w.sublabel}`,
+                  style: { color: L },
+                  children: j.sublabel
+                }
+              ),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: `font-medium truncate ${w.label}`,
+                  style: { color: P },
+                  children: j.label
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => a(j.id),
+                className: `
+              ml-3 flex-shrink-0 rounded-full
               flex items-center justify-center
-              text-gray-400
               transition-all duration-200 ease-out
-              hover:bg-white hover:text-[#EC615B] hover:scale-110
+              hover:scale-110
               active:scale-95
-              focus:outline-none focus:ring-2 focus:ring-[#EC615B] focus:ring-opacity-50
+              focus:outline-none focus:ring-2 focus:ring-opacity-50
+              ${w.button}
             `,
-              "aria-label": `Remove ${i.label}`,
-              children: /* @__PURE__ */ e(
-                "svg",
-                {
-                  className: "w-4 h-4",
-                  fill: "none",
-                  stroke: "currentColor",
-                  viewBox: "0 0 24 24",
-                  children: /* @__PURE__ */ e(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M6 18L18 6M6 6l12 12"
-                    }
-                  )
-                }
-              )
-            }
-          )
-        ]
-      },
-      i.id
-    ))
-  }
-);
+                style: {
+                  color: M
+                },
+                onMouseEnter: (E) => {
+                  E.currentTarget.style.backgroundColor = "white", E.currentTarget.style.color = F;
+                },
+                onMouseLeave: (E) => {
+                  E.currentTarget.style.backgroundColor = "transparent", E.currentTarget.style.color = M;
+                },
+                "aria-label": `Remove ${j.label}`,
+                children: /* @__PURE__ */ e(
+                  "svg",
+                  {
+                    className: w.icon,
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ e(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M6 18L18 6M6 6l12 12"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        },
+        j.id
+      ))
+    }
+  );
+};
 export {
-  U as Badge,
-  D as Button,
-  H as Card,
-  Z as Checkbox,
-  Q as Dropdown,
-  J as Modal,
-  Y as Progress,
-  V as SearchInput,
-  P as Select,
-  _ as SelectedItemsList,
-  A as StatCard,
-  X as Steps,
-  q as Table,
-  G as TableTop
+  ie as Badge,
+  ee as Button,
+  re as Card,
+  ue as Checkbox,
+  ne as Dropdown,
+  ae as Modal,
+  ce as Progress,
+  se as SearchInput,
+  G as Select,
+  me as SelectedItemsList,
+  te as StatCard,
+  de as Steps,
+  le as Table,
+  oe as TableTop
 };
 //# sourceMappingURL=index.mjs.map