@fabio.caffarello/react-design-system 1.5.2 → 1.7.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import ie, { useState as Y, useRef as z, useEffect as F } from "react";
-import { createPortal as ce } from "react-dom";
-var O = { exports: {} }, _ = {};
+import $e, { useState as A, useCallback as X, useEffect as _, useRef as P, forwardRef as ge, createElement as Z, createContext as Re, useContext as Ae } from "react";
+import { createPortal as Le } from "react-dom";
+var W = { exports: {} }, I = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +10,29 @@ var O = { exports: {} }, _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
-function de() {
-  if (J) return _;
-  J = 1;
-  var s = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
-  function a(n, l, o) {
-    var i = null;
-    if (o !== void 0 && (i = "" + o), l.key !== void 0 && (i = "" + l.key), "key" in l) {
-      o = {};
-      for (var c in l)
-        c !== "key" && (o[c] = l[c]);
-    } else o = l;
-    return l = o.ref, {
-      $$typeof: s,
-      type: n,
-      key: i,
-      ref: l !== void 0 ? l : null,
-      props: o
+var ce;
+function Fe() {
+  if (ce) return I;
+  ce = 1;
+  var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
+  function a(s, o, i) {
+    var c = null;
+    if (i !== void 0 && (c = "" + i), o.key !== void 0 && (c = "" + o.key), "key" in o) {
+      i = {};
+      for (var l in o)
+        l !== "key" && (i[l] = o[l]);
+    } else i = o;
+    return o = i.ref, {
+      $$typeof: t,
+      type: s,
+      key: c,
+      ref: o !== void 0 ? o : null,
+      props: i
     };
   }
-  return _.Fragment = t, _.jsx = a, _.jsxs = a, _;
+  return I.Fragment = e, I.jsx = a, I.jsxs = a, I;
 }
-var R = {};
+var B = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,283 +42,283 @@ var R = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var X;
-function ue() {
-  return X || (X = 1, process.env.NODE_ENV !== "production" && (function() {
-    function s(r) {
-      if (r == null) return null;
-      if (typeof r == "function")
-        return r.$$typeof === ne ? null : r.displayName || r.name || null;
-      if (typeof r == "string") return r;
-      switch (r) {
-        case f:
+var de;
+function Oe() {
+  return de || (de = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(n) {
+      if (n == null) return null;
+      if (typeof n == "function")
+        return n.$$typeof === Ee ? null : n.displayName || n.name || null;
+      if (typeof n == "string") return n;
+      switch (n) {
+        case x:
           return "Fragment";
-        case h:
+        case p:
           return "Profiler";
-        case k:
+        case E:
           return "StrictMode";
-        case re:
+        case ke:
           return "Suspense";
-        case se:
+        case Ne:
           return "SuspenseList";
-        case ae:
+        case Te:
           return "Activity";
       }
-      if (typeof r == "object")
-        switch (typeof r.tag == "number" && console.error(
+      if (typeof n == "object")
+        switch (typeof n.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), r.$$typeof) {
-          case w:
+        ), n.$$typeof) {
+          case C:
             return "Portal";
-          case K:
-            return r.displayName || "Context";
-          case S:
-            return (r._context.displayName || "Context") + ".Consumer";
-          case ee:
-            var u = r.render;
-            return r = r.displayName, r || (r = u.displayName || u.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
-          case te:
-            return u = r.displayName || null, u !== null ? u : s(r.type) || "Memo";
-          case L:
-            u = r._payload, r = r._init;
+          case ve:
+            return n.displayName || "Context";
+          case M:
+            return (n._context.displayName || "Context") + ".Consumer";
+          case je:
+            var h = n.render;
+            return n = n.displayName, n || (n = h.displayName || h.name || "", n = n !== "" ? "ForwardRef(" + n + ")" : "ForwardRef"), n;
+          case Ce:
+            return h = n.displayName || null, h !== null ? h : t(n.type) || "Memo";
+          case H:
+            h = n._payload, n = n._init;
             try {
-              return s(r(u));
+              return t(n(h));
             } catch {
             }
         }
       return null;
     }
-    function t(r) {
-      return "" + r;
+    function e(n) {
+      return "" + n;
     }
-    function a(r) {
+    function a(n) {
       try {
-        t(r);
-        var u = !1;
+        e(n);
+        var h = !1;
       } catch {
-        u = !0;
+        h = !0;
       }
-      if (u) {
-        u = console;
-        var p = u.error, g = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return p.call(
-          u,
+      if (h) {
+        h = console;
+        var v = h.error, j = typeof Symbol == "function" && Symbol.toStringTag && n[Symbol.toStringTag] || n.constructor.name || "Object";
+        return v.call(
+          h,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          g
-        ), t(r);
+          j
+        ), e(n);
       }
     }
-    function n(r) {
-      if (r === f) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === L)
+    function s(n) {
+      if (n === x) return "<>";
+      if (typeof n == "object" && n !== null && n.$$typeof === H)
         return "<...>";
       try {
-        var u = s(r);
-        return u ? "<" + u + ">" : "<...>";
+        var h = t(n);
+        return h ? "<" + h + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function l() {
-      var r = B.A;
-      return r === null ? null : r.getOwner();
-    }
     function o() {
+      var n = V.A;
+      return n === null ? null : n.getOwner();
+    }
+    function i() {
       return Error("react-stack-top-frame");
     }
-    function i(r) {
-      if (W.call(r, "key")) {
-        var u = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (u && u.isReactWarning) return !1;
+    function c(n) {
+      if (ae.call(n, "key")) {
+        var h = Object.getOwnPropertyDescriptor(n, "key").get;
+        if (h && h.isReactWarning) return !1;
       }
-      return r.key !== void 0;
+      return n.key !== void 0;
     }
-    function c(r, u) {
-      function p() {
-        P || (P = !0, console.error(
+    function l(n, h) {
+      function v() {
+        se || (se = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          u
+          h
         ));
       }
-      p.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: p,
+      v.isReactWarning = !0, Object.defineProperty(n, "key", {
+        get: v,
         configurable: !0
       });
     }
     function d() {
-      var r = s(this.type);
-      return V[r] || (V[r] = !0, console.error(
+      var n = t(this.type);
+      return ne[n] || (ne[n] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
-      )), r = this.props.ref, r !== void 0 ? r : null;
+      )), n = this.props.ref, n !== void 0 ? n : null;
     }
-    function b(r, u, p, g, A, I) {
-      var v = p.ref;
-      return r = {
-        $$typeof: N,
-        type: r,
-        key: u,
-        props: p,
-        _owner: g
-      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(r, "ref", {
+    function u(n, h, v, j, D, q) {
+      var k = v.ref;
+      return n = {
+        $$typeof: w,
+        type: n,
+        key: h,
+        props: v,
+        _owner: j
+      }, (k !== void 0 ? k : null) !== null ? Object.defineProperty(n, "ref", {
         enumerable: !1,
         get: d
-      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
+      }) : Object.defineProperty(n, "ref", { enumerable: !1, value: null }), n._store = {}, Object.defineProperty(n._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(r, "_debugInfo", {
+      }), Object.defineProperty(n, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(r, "_debugStack", {
+      }), Object.defineProperty(n, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: A
-      }), Object.defineProperty(r, "_debugTask", {
+        value: D
+      }), Object.defineProperty(n, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: I
-      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
+        value: q
+      }), Object.freeze && (Object.freeze(n.props), Object.freeze(n)), n;
     }
-    function j(r, u, p, g, A, I) {
-      var v = u.children;
-      if (v !== void 0)
-        if (g)
-          if (le(v)) {
-            for (g = 0; g < v.length; g++)
-              m(v[g]);
-            Object.freeze && Object.freeze(v);
+    function f(n, h, v, j, D, q) {
+      var k = h.children;
+      if (k !== void 0)
+        if (j)
+          if (Se(k)) {
+            for (j = 0; j < k.length; j++)
+              g(k[j]);
+            Object.freeze && Object.freeze(k);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else m(v);
-      if (W.call(u, "key")) {
-        v = s(r);
-        var C = Object.keys(u).filter(function(oe) {
-          return oe !== "key";
+        else g(k);
+      if (ae.call(h, "key")) {
+        k = t(n);
+        var $ = Object.keys(h).filter(function(_e) {
+          return _e !== "key";
         });
-        g = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", U[v + g] || (C = 0 < C.length ? "{" + C.join(": ..., ") + ": ...}" : "{}", console.error(
+        j = 0 < $.length ? "{key: someKey, " + $.join(": ..., ") + ": ...}" : "{key: someKey}", le[k + j] || ($ = 0 < $.length ? "{" + $.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          g,
-          v,
-          C,
-          v
-        ), U[v + g] = !0);
+          j,
+          k,
+          $,
+          k
+        ), le[k + j] = !0);
       }
-      if (v = null, p !== void 0 && (a(p), v = "" + p), i(u) && (a(u.key), v = "" + u.key), "key" in u) {
-        p = {};
-        for (var M in u)
-          M !== "key" && (p[M] = u[M]);
-      } else p = u;
-      return v && c(
-        p,
-        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), b(
-        r,
+      if (k = null, v !== void 0 && (a(v), k = "" + v), c(h) && (a(h.key), k = "" + h.key), "key" in h) {
+        v = {};
+        for (var J in h)
+          J !== "key" && (v[J] = h[J]);
+      } else v = h;
+      return k && l(
+        v,
+        typeof n == "function" ? n.displayName || n.name || "Unknown" : n
+      ), u(
+        n,
+        k,
         v,
-        p,
-        l(),
-        A,
-        I
+        o(),
+        D,
+        q
       );
     }
-    function m(r) {
-      x(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === L && (r._payload.status === "fulfilled" ? x(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    function g(n) {
+      m(n) ? n._store && (n._store.validated = 1) : typeof n == "object" && n !== null && n.$$typeof === H && (n._payload.status === "fulfilled" ? m(n._payload.value) && n._payload.value._store && (n._payload.value._store.validated = 1) : n._store && (n._store.validated = 1));
     }
-    function x(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === N;
+    function m(n) {
+      return typeof n == "object" && n !== null && n.$$typeof === w;
     }
-    var y = ie, N = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), k = Symbol.for("react.strict_mode"), h = Symbol.for("react.profiler"), S = Symbol.for("react.consumer"), K = Symbol.for("react.context"), ee = Symbol.for("react.forward_ref"), re = Symbol.for("react.suspense"), se = Symbol.for("react.suspense_list"), te = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), ae = Symbol.for("react.activity"), ne = Symbol.for("react.client.reference"), B = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, W = Object.prototype.hasOwnProperty, le = Array.isArray, $ = console.createTask ? console.createTask : function() {
+    var b = $e, w = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), x = Symbol.for("react.fragment"), E = Symbol.for("react.strict_mode"), p = Symbol.for("react.profiler"), M = Symbol.for("react.consumer"), ve = Symbol.for("react.context"), je = Symbol.for("react.forward_ref"), ke = Symbol.for("react.suspense"), Ne = Symbol.for("react.suspense_list"), Ce = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), Te = Symbol.for("react.activity"), Ee = Symbol.for("react.client.reference"), V = b.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ae = Object.prototype.hasOwnProperty, Se = Array.isArray, G = console.createTask ? console.createTask : function() {
       return null;
     };
-    y = {
-      react_stack_bottom_frame: function(r) {
-        return r();
+    b = {
+      react_stack_bottom_frame: function(n) {
+        return n();
       }
     };
-    var P, V = {}, q = y.react_stack_bottom_frame.bind(
-      y,
-      o
-    )(), G = $(n(o)), U = {};
-    R.Fragment = f, R.jsx = function(r, u, p) {
-      var g = 1e4 > B.recentlyCreatedOwnerStacks++;
-      return j(
-        r,
-        u,
-        p,
+    var se, ne = {}, ie = b.react_stack_bottom_frame.bind(
+      b,
+      i
+    )(), oe = G(s(i)), le = {};
+    B.Fragment = x, B.jsx = function(n, h, v) {
+      var j = 1e4 > V.recentlyCreatedOwnerStacks++;
+      return f(
+        n,
+        h,
+        v,
         !1,
-        g ? Error("react-stack-top-frame") : q,
-        g ? $(n(r)) : G
+        j ? Error("react-stack-top-frame") : ie,
+        j ? G(s(n)) : oe
       );
-    }, R.jsxs = function(r, u, p) {
-      var g = 1e4 > B.recentlyCreatedOwnerStacks++;
-      return j(
-        r,
-        u,
-        p,
+    }, B.jsxs = function(n, h, v) {
+      var j = 1e4 > V.recentlyCreatedOwnerStacks++;
+      return f(
+        n,
+        h,
+        v,
         !0,
-        g ? Error("react-stack-top-frame") : q,
-        g ? $(n(r)) : G
+        j ? Error("react-stack-top-frame") : ie,
+        j ? G(s(n)) : oe
       );
     };
-  })()), R;
+  })()), B;
 }
-var H;
-function fe() {
-  return H || (H = 1, process.env.NODE_ENV === "production" ? O.exports = de() : O.exports = ue()), O.exports;
+var ue;
+function Ie() {
+  return ue || (ue = 1, process.env.NODE_ENV === "production" ? W.exports = Fe() : W.exports = Oe()), W.exports;
 }
-var e = fe();
-function je({ variant: s = "info", className: t, ...a }) {
-  const n = [t || ""];
-  switch (s) {
+var r = Ie();
+function st({ variant: t = "info", className: e, ...a }) {
+  const s = [e || ""];
+  switch (t) {
     case "warning": {
-      n.push("bg-yellow-100 text-yellow-800 border-yellow-500");
+      s.push("bg-yellow-100 text-yellow-800 border-yellow-500");
       break;
     }
     case "error": {
-      n.push("bg-red-100 text-red-800 border-red-500");
+      s.push("bg-red-100 text-red-800 border-red-500");
       break;
     }
     default:
     case "info": {
-      n.push("bg-blue-100 text-blue-800 border-blue-500");
+      s.push("bg-blue-100 text-blue-800 border-blue-500");
       break;
     }
   }
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx(
     "div",
     {
       role: "alert",
-      className: `border px-4 py-2 rounded-lg ${n.join(" ")}`,
+      className: `border px-4 py-2 rounded-lg ${s.join(" ")}`,
       ...a
     }
   );
 }
-function T({
-  variant: s,
-  bold: t,
+function L({
+  variant: t,
+  bold: e,
   italic: a,
-  className: n,
-  as: l,
-  color: o,
-  ...i
+  className: s,
+  as: o,
+  color: i,
+  ...c
 }) {
-  const c = [n];
+  const l = [s];
   let d;
-  if (l)
-    d = l;
+  if (o)
+    d = o;
   else
-    switch (s) {
+    switch (t) {
       case "heading":
         d = "h2";
         break;
@@ -330,60 +330,481 @@ function T({
         d = "p";
         break;
     }
-  return t && c.push("font-bold"), a && c.push("italic"), o && c.push(`text-${o}`), /* @__PURE__ */ e.jsx(d, { className: c.join(" "), ...i });
+  return e && l.push("font-bold"), a && l.push("italic"), i && l.push(`text-${i}`), /* @__PURE__ */ r.jsx(d, { className: l.join(" "), ...c });
 }
-function me({ className: s, ...t }) {
-  const a = [
-    s,
-    "px-large",
-    "border",
-    "border-1",
-    "border-grey-light",
-    "rounded",
-    "lh-form-element",
-    "h-form-element",
-    "text-base"
-  ];
-  return /* @__PURE__ */ e.jsx("input", { className: a.join(" "), ...t });
+class N {
+  /**
+   * Create font size token
+   */
+  static createFontSize(e) {
+    const s = {
+      xs: { px: 12, tailwind: "text-xs" },
+      sm: { px: 14, tailwind: "text-sm" },
+      base: { px: 16, tailwind: "text-base" },
+      lg: { px: 18, tailwind: "text-lg" },
+      xl: { px: 20, tailwind: "text-xl" },
+      "2xl": { px: 24, tailwind: "text-2xl" },
+      "3xl": { px: 30, tailwind: "text-3xl" },
+      "4xl": { px: 36, tailwind: "text-4xl" },
+      "5xl": { px: 48, tailwind: "text-5xl" },
+      "6xl": { px: 60, tailwind: "text-6xl" }
+    }[e];
+    return {
+      value: s.px,
+      rem: `${s.px / 16}rem`,
+      px: `${s.px}px`,
+      tailwind: s.tailwind
+    };
+  }
+  /**
+   * Create line height token
+   */
+  static createLineHeight(e) {
+    const s = {
+      none: { value: 1, tailwind: "leading-none" },
+      tight: { value: 1.25, tailwind: "leading-tight" },
+      snug: { value: 1.375, tailwind: "leading-snug" },
+      normal: { value: 1.5, tailwind: "leading-normal" },
+      relaxed: { value: 1.625, tailwind: "leading-relaxed" },
+      loose: { value: 2, tailwind: "leading-loose" }
+    }[e];
+    return {
+      value: s.value,
+      tailwind: s.tailwind
+    };
+  }
+  /**
+   * Create font weight token
+   */
+  static createFontWeight(e) {
+    const s = {
+      light: { value: 300, tailwind: "font-light" },
+      normal: { value: 400, tailwind: "font-normal" },
+      medium: { value: 500, tailwind: "font-medium" },
+      semibold: { value: 600, tailwind: "font-semibold" },
+      bold: { value: 700, tailwind: "font-bold" }
+    }[e];
+    return {
+      value: s.value,
+      tailwind: s.tailwind
+    };
+  }
+  /**
+   * Create complete typography token
+   */
+  static create(e, a = "normal", s = "normal") {
+    return {
+      fontSize: this.createFontSize(e),
+      lineHeight: this.createLineHeight(a),
+      fontWeight: this.createFontWeight(s)
+    };
+  }
 }
-function E({
-  className: s,
-  variant: t = "regular",
-  ...a
+const nt = {
+  sans: {
+    name: "sans",
+    stack: 'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
+    tailwind: "font-sans"
+  },
+  serif: {
+    name: "serif",
+    stack: 'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif',
+    tailwind: "font-serif"
+  },
+  mono: {
+    name: "mono",
+    stack: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    tailwind: "font-mono"
+  }
+}, it = {
+  light: N.createFontWeight("light"),
+  normal: N.createFontWeight("normal"),
+  medium: N.createFontWeight("medium"),
+  semibold: N.createFontWeight("semibold"),
+  bold: N.createFontWeight("bold")
+}, z = {
+  // Headings
+  h1: N.create("4xl", "tight", "bold"),
+  h2: N.create("3xl", "tight", "bold"),
+  h3: N.create("2xl", "snug", "semibold"),
+  h4: N.create("xl", "snug", "semibold"),
+  h5: N.create("lg", "normal", "medium"),
+  h6: N.create("base", "normal", "medium"),
+  // Body text
+  body: N.create("base", "relaxed", "normal"),
+  bodySmall: N.create("sm", "relaxed", "normal"),
+  bodyLarge: N.create("lg", "relaxed", "normal"),
+  // UI elements
+  label: N.create("sm", "normal", "medium"),
+  caption: N.create("xs", "normal", "normal"),
+  button: N.create("base", "normal", "medium")
+};
+function ot(t) {
+  return z[t];
+}
+function F(t) {
+  const e = z[t];
+  return `${e.fontSize.tailwind} ${e.lineHeight.tailwind} ${e.fontWeight.tailwind}`;
+}
+class K {
+  generatePrimary() {
+    return {
+      light: { hex: "#818cf8", rgb: "129, 140, 248", tailwind: "indigo-400" },
+      DEFAULT: { hex: "#6366f1", rgb: "99, 102, 241", tailwind: "indigo-500" },
+      dark: { hex: "#4f46e5", rgb: "79, 70, 229", tailwind: "indigo-600" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateSecondary() {
+    return {
+      light: { hex: "#a78bfa", rgb: "167, 139, 250", tailwind: "violet-400" },
+      DEFAULT: { hex: "#8b5cf6", rgb: "139, 92, 246", tailwind: "violet-500" },
+      dark: { hex: "#7c3aed", rgb: "124, 58, 237", tailwind: "violet-600" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateSuccess() {
+    return {
+      light: { hex: "#86efac", rgb: "134, 239, 172", tailwind: "green-300" },
+      DEFAULT: { hex: "#22c55e", rgb: "34, 197, 94", tailwind: "green-500" },
+      dark: { hex: "#16a34a", rgb: "22, 163, 74", tailwind: "green-600" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateWarning() {
+    return {
+      light: { hex: "#fde047", rgb: "253, 224, 71", tailwind: "yellow-300" },
+      DEFAULT: { hex: "#eab308", rgb: "234, 179, 8", tailwind: "yellow-500" },
+      dark: { hex: "#ca8a04", rgb: "202, 138, 4", tailwind: "yellow-600" },
+      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
+    };
+  }
+  generateError() {
+    return {
+      light: { hex: "#fca5a5", rgb: "252, 165, 165", tailwind: "red-300" },
+      DEFAULT: { hex: "#ef4444", rgb: "239, 68, 68", tailwind: "red-500" },
+      dark: { hex: "#dc2626", rgb: "220, 38, 38", tailwind: "red-600" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateInfo() {
+    return {
+      light: { hex: "#93c5fd", rgb: "147, 197, 253", tailwind: "blue-300" },
+      DEFAULT: { hex: "#3b82f6", rgb: "59, 130, 246", tailwind: "blue-500" },
+      dark: { hex: "#2563eb", rgb: "37, 99, 235", tailwind: "blue-600" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateNeutral() {
+    return {
+      light: { hex: "#f3f4f6", rgb: "243, 244, 246", tailwind: "gray-100" },
+      DEFAULT: { hex: "#6b7280", rgb: "107, 114, 128", tailwind: "gray-500" },
+      dark: { hex: "#374151", rgb: "55, 65, 81", tailwind: "gray-700" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+}
+class Q {
+  generatePrimary() {
+    return {
+      light: { hex: "#6366f1", rgb: "99, 102, 241", tailwind: "indigo-500" },
+      DEFAULT: { hex: "#818cf8", rgb: "129, 140, 248", tailwind: "indigo-400" },
+      dark: { hex: "#a5b4fc", rgb: "165, 180, 252", tailwind: "indigo-300" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateSecondary() {
+    return {
+      light: { hex: "#8b5cf6", rgb: "139, 92, 246", tailwind: "violet-500" },
+      DEFAULT: { hex: "#a78bfa", rgb: "167, 139, 250", tailwind: "violet-400" },
+      dark: { hex: "#c4b5fd", rgb: "196, 181, 253", tailwind: "violet-300" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateSuccess() {
+    return {
+      light: { hex: "#22c55e", rgb: "34, 197, 94", tailwind: "green-500" },
+      DEFAULT: { hex: "#4ade80", rgb: "74, 222, 128", tailwind: "green-400" },
+      dark: { hex: "#86efac", rgb: "134, 239, 172", tailwind: "green-300" },
+      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
+    };
+  }
+  generateWarning() {
+    return {
+      light: { hex: "#eab308", rgb: "234, 179, 8", tailwind: "yellow-500" },
+      DEFAULT: { hex: "#facc15", rgb: "250, 204, 21", tailwind: "yellow-400" },
+      dark: { hex: "#fde047", rgb: "253, 224, 71", tailwind: "yellow-300" },
+      contrast: { hex: "#000000", rgb: "0, 0, 0", tailwind: "black" }
+    };
+  }
+  generateError() {
+    return {
+      light: { hex: "#ef4444", rgb: "239, 68, 68", tailwind: "red-500" },
+      DEFAULT: { hex: "#f87171", rgb: "248, 113, 113", tailwind: "red-400" },
+      dark: { hex: "#fca5a5", rgb: "252, 165, 165", tailwind: "red-300" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateInfo() {
+    return {
+      light: { hex: "#3b82f6", rgb: "59, 130, 246", tailwind: "blue-500" },
+      DEFAULT: { hex: "#60a5fa", rgb: "96, 165, 250", tailwind: "blue-400" },
+      dark: { hex: "#93c5fd", rgb: "147, 197, 253", tailwind: "blue-300" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+  generateNeutral() {
+    return {
+      light: { hex: "#374151", rgb: "55, 65, 81", tailwind: "gray-700" },
+      DEFAULT: { hex: "#9ca3af", rgb: "156, 163, 175", tailwind: "gray-400" },
+      dark: { hex: "#d1d5db", rgb: "209, 213, 219", tailwind: "gray-300" },
+      contrast: { hex: "#ffffff", rgb: "255, 255, 255", tailwind: "white" }
+    };
+  }
+}
+class ee {
+  strategy;
+  constructor(e) {
+    this.strategy = e;
+  }
+  /**
+   * Set color strategy
+   */
+  setStrategy(e) {
+    this.strategy = e;
+  }
+  /**
+   * Generate semantic color palette
+   */
+  generatePalette() {
+    return {
+      primary: this.strategy.generatePrimary(),
+      secondary: this.strategy.generateSecondary(),
+      success: this.strategy.generateSuccess(),
+      warning: this.strategy.generateWarning(),
+      error: this.strategy.generateError(),
+      info: this.strategy.generateInfo(),
+      neutral: this.strategy.generateNeutral()
+    };
+  }
+}
+const Be = new ee(new K()), te = Be.generatePalette(), Me = new ee(new Q()), he = Me.generatePalette(), xe = te;
+function lt(t, e = "DEFAULT") {
+  return xe[t][e];
+}
+function S(t, e = "DEFAULT", a = "text") {
+  const s = xe[t][e];
+  return `${a}-${s.tailwind}`;
+}
+function De({
+  id: t,
+  label: e,
+  error: a = !1,
+  helperText: s,
+  size: o = "md",
+  variant: i = "outlined",
+  className: c = "",
+  disabled: l = !1,
+  ...d
 }) {
-  const n = [
-    s,
-    "rounded",
-    "h-form-element",
-    "lh-form-element",
-    "px-large",
-    "text-base"
-  ];
-  switch (t) {
-    case "error":
-      n.push("bg-red-light", "text-red-dark", "font-bold");
-      break;
-    case "secondary":
-      n.push("bg-transparent", "text-grey-minor", "px-0");
-      break;
-    case "regular":
-    default:
-      n.push("bg-blue-light", "text-blue-dark", "font-bold");
-      break;
+  const u = t || `input-${Math.random().toString(36).substr(2, 9)}`, f = a ? `${u}-error` : void 0, g = s ? `${u}-helper` : void 0, m = {
+    sm: "h-8 text-sm px-3",
+    md: "h-10 text-base px-4",
+    lg: "h-12 text-lg px-5"
+  }, b = {
+    default: "border-0 border-b-2 border-gray-300 focus:border-indigo-500",
+    outlined: "border border-gray-300 focus:border-indigo-500",
+    filled: "bg-gray-100 border-0 focus:bg-white focus:ring-2 focus:ring-indigo-500"
+  }, w = [
+    "w-full",
+    "rounded-md",
+    "transition-colors",
+    "focus:outline-none",
+    "focus:ring-2",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed",
+    m[o],
+    b[i]
+  ], C = a ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "", x = [
+    ...w,
+    C,
+    c
+  ].filter(Boolean).join(" "), E = [
+    "block",
+    F("label"),
+    "mb-1",
+    l ? "opacity-50" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("div", { className: "w-full", children: [
+    e && /* @__PURE__ */ r.jsx(
+      "label",
+      {
+        htmlFor: u,
+        className: E,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "input",
+      {
+        id: u,
+        className: x,
+        disabled: l,
+        "aria-invalid": a,
+        "aria-describedby": f || g,
+        ...d
+      }
+    ),
+    (a || s) && /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        id: f || g,
+        className: `mt-1 ${F("caption")} ${a ? S("error", "DEFAULT", "text") : "text-gray-500"}`,
+        role: a ? "alert" : void 0,
+        children: a || s
+      }
+    )
+  ] });
+}
+class We {
+  classes = [];
+  addBase() {
+    return this.classes.push(
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "font-medium",
+      "rounded-md",
+      "transition-colors",
+      "focus:outline-none",
+      "focus:ring-2",
+      "focus:ring-offset-2",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed"
+    ), this;
+  }
+  addVariant(e) {
+    const a = e === "regular" ? "primary" : e, s = {
+      primary: [
+        S("primary", "DEFAULT", "bg"),
+        S("primary", "DEFAULT", "text"),
+        "hover:opacity-90",
+        "focus:ring-indigo-500"
+      ],
+      secondary: [
+        S("secondary", "DEFAULT", "bg"),
+        S("secondary", "DEFAULT", "text"),
+        "hover:opacity-90",
+        "focus:ring-violet-500"
+      ],
+      error: [
+        S("error", "DEFAULT", "bg"),
+        S("error", "DEFAULT", "text"),
+        "hover:opacity-90",
+        "focus:ring-red-500"
+      ],
+      outline: [
+        "border-2",
+        "border-gray-300",
+        "bg-transparent",
+        "text-gray-700",
+        "hover:bg-gray-50",
+        "focus:ring-gray-500"
+      ],
+      ghost: [
+        "bg-transparent",
+        "text-gray-700",
+        "hover:bg-gray-100",
+        "focus:ring-gray-500"
+      ]
+    };
+    return this.classes.push(...s[a]), this;
+  }
+  addSize(e) {
+    const a = {
+      sm: ["px-3", "py-1.5", "text-sm"],
+      md: ["px-4", "py-2", "text-base"],
+      lg: ["px-6", "py-3", "text-lg"]
+    };
+    return this.classes.push(...a[e]), this;
+  }
+  addCustom(e) {
+    return e && this.classes.push(e), this;
+  }
+  build() {
+    return this.classes.filter(Boolean).join(" ");
   }
-  return /* @__PURE__ */ e.jsx("button", { className: n.join(" "), ...a });
 }
-function xe({ className: s, ...t }) {
-  const a = [s, "p-large", "bg-bg", "rounded", "shadow-card"];
-  return /* @__PURE__ */ e.jsx("div", { className: a.join(" "), ...t });
+function O({
+  variant: t = "primary",
+  size: e = "md",
+  isLoading: a = !1,
+  leftIcon: s,
+  rightIcon: o,
+  className: i = "",
+  disabled: c = !1,
+  children: l,
+  ...d
+}) {
+  const f = new We().addBase().addVariant(t).addSize(e).addCustom(i).build();
+  return /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      className: f,
+      disabled: c || a,
+      ...d,
+      children: a ? /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsxs(
+          "svg",
+          {
+            className: "animate-spin -ml-1 mr-2 h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ r.jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ r.jsx(
+                "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..."
+      ] }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        s && /* @__PURE__ */ r.jsx("span", { className: "mr-2", children: s }),
+        l,
+        o && /* @__PURE__ */ r.jsx("span", { className: "ml-2", children: o })
+      ] })
+    }
+  );
+}
+function Pe({ className: t, ...e }) {
+  const a = [t, "p-large", "bg-bg", "rounded", "shadow-card"];
+  return /* @__PURE__ */ r.jsx("div", { className: a.join(" "), ...e });
 }
-function ye({
-  variant: s = "neutral",
-  className: t = "",
+function ct({
+  variant: t = "neutral",
+  className: e = "",
   children: a,
-  ...n
+  ...s
 }) {
-  const l = [
+  const o = [
     "inline-flex",
     "items-center",
     "px-2",
@@ -392,36 +813,36 @@ function ye({
     "text-xs",
     "font-medium",
     "border"
-  ], o = {
+  ], i = {
     success: "bg-green-100 text-green-800 border-green-500",
     warning: "bg-yellow-100 text-yellow-800 border-yellow-500",
     error: "bg-red-100 text-red-800 border-red-500",
     info: "bg-blue-100 text-blue-800 border-blue-500",
     neutral: "bg-gray-100 text-gray-800 border-gray-500"
-  }, i = [
-    ...l,
-    o[s],
-    t
+  }, c = [
+    ...o,
+    i[t],
+    e
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx(
     "span",
     {
       role: "status",
       "aria-label": typeof a == "string" ? a : void 0,
-      className: i,
-      ...n,
+      className: c,
+      ...s,
       children: a
     }
   );
 }
-function Ne({
-  options: s,
-  placeholder: t,
+function dt({
+  options: t,
+  placeholder: e,
   error: a = !1,
-  className: n = "",
-  ...l
+  className: s = "",
+  ...o
 }) {
-  const o = [
+  const i = [
     "block",
     "w-full",
     "rounded",
@@ -432,21 +853,21 @@ function Ne({
     "focus:outline-none",
     "focus:ring-2",
     "focus:ring-offset-2"
-  ], i = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
-    ...o,
-    i,
-    n
+  ], c = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", l = [
+    ...i,
+    c,
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "select",
     {
-      className: c,
+      className: l,
       "aria-invalid": a,
-      "aria-describedby": a ? `${l.id}-error` : void 0,
-      ...l,
+      "aria-describedby": a ? `${o.id}-error` : void 0,
+      ...o,
       children: [
-        t && /* @__PURE__ */ e.jsx("option", { value: "", disabled: !0, children: t }),
-        s.map((d) => /* @__PURE__ */ e.jsx(
+        e && /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: e }),
+        t.map((d) => /* @__PURE__ */ r.jsx(
           "option",
           {
             value: d.value,
@@ -459,13 +880,13 @@ function Ne({
     }
   );
 }
-function we({
-  error: s = !1,
-  resize: t = "vertical",
+function ut({
+  error: t = !1,
+  resize: e = "vertical",
   className: a = "",
-  ...n
+  ...s
 }) {
-  const l = [
+  const o = [
     "block",
     "w-full",
     "rounded",
@@ -476,56 +897,56 @@ function we({
     "focus:outline-none",
     "focus:ring-2",
     "focus:ring-offset-2"
-  ], o = {
+  ], i = {
     none: "resize-none",
     both: "resize",
     horizontal: "resize-x",
     vertical: "resize-y"
-  }, i = s ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
-    ...l,
-    o[t],
-    i,
+  }, c = t ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", l = [
+    ...o,
+    i[e],
+    c,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx(
     "textarea",
     {
-      className: c,
-      "aria-invalid": s,
-      "aria-describedby": s && n.id ? `${n.id}-error` : void 0,
-      ...n
+      className: l,
+      "aria-invalid": t,
+      "aria-describedby": t && s.id ? `${s.id}-error` : void 0,
+      ...s
     }
   );
 }
-function ke({
-  variant: s = "default",
-  className: t = "",
+function ft({
+  variant: t = "default",
+  className: e = "",
   children: a,
-  ...n
+  ...s
 }) {
-  const l = [
+  const o = [
     "block",
     "text-sm",
     "font-medium",
     "text-gray-700"
-  ], o = {
+  ], i = {
     default: "",
     required: "after:content-['*'] after:ml-0.5 after:text-red-500",
     optional: "after:content-['(optional)'] after:ml-1 after:text-gray-400 after:font-normal"
-  }, i = [
-    ...l,
-    o[s],
-    t
+  }, c = [
+    ...o,
+    i[t],
+    e
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx("label", { className: i, ...n, children: a });
+  return /* @__PURE__ */ r.jsx("label", { className: c, ...s, children: a });
 }
-function Ce({
-  message: s,
-  id: t,
+function mt({
+  message: t,
+  id: e,
   className: a = "",
-  ...n
+  ...s
 }) {
-  const o = [
+  const i = [
     ...[
       "mt-1",
       "text-sm",
@@ -536,23 +957,23 @@ function Ce({
     ],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
       role: "alert",
-      id: t,
-      className: o,
+      id: e,
+      className: i,
       "aria-live": "polite",
-      ...n,
+      ...s,
       children: [
-        /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ r.jsx(
           "svg",
           {
             className: "h-4 w-4 flex-shrink-0",
             fill: "currentColor",
             viewBox: "0 0 20 20",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ e.jsx(
+            children: /* @__PURE__ */ r.jsx(
               "path",
               {
                 fillRule: "evenodd",
@@ -562,19 +983,19 @@ function Ce({
             )
           }
         ),
-        /* @__PURE__ */ e.jsx("span", { children: s })
+        /* @__PURE__ */ r.jsx("span", { children: t })
       ]
     }
   );
 }
-function be({
-  variant: s = "default",
-  icon: t,
+function ze({
+  variant: t = "default",
+  icon: e,
   className: a = "",
-  children: n,
-  ...l
+  children: s,
+  ...o
 }) {
-  const o = [
+  const i = [
     "inline-flex",
     "items-center",
     "px-1",
@@ -583,69 +1004,69 @@ function be({
     "text-sm",
     "font-medium",
     "transition-colors"
-  ], i = {
+  ], c = {
     default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
     active: "border-indigo-500 text-gray-900",
     disabled: "border-transparent text-gray-300 cursor-not-allowed pointer-events-none"
-  }, c = [
-    ...o,
-    i[s],
+  }, l = [
+    ...i,
+    c[t],
     a
   ].filter(Boolean).join(" ");
-  return s === "disabled" ? /* @__PURE__ */ e.jsxs("span", { className: c, "aria-disabled": "true", children: [
-    t && /* @__PURE__ */ e.jsx("span", { className: "flex-shrink-0", children: t }),
-    n
-  ] }) : /* @__PURE__ */ e.jsxs("a", { className: c, ...l, children: [
-    t && /* @__PURE__ */ e.jsx("span", { className: "flex-shrink-0", children: t }),
-    n
+  return t === "disabled" ? /* @__PURE__ */ r.jsxs("span", { className: l, "aria-disabled": "true", children: [
+    e && /* @__PURE__ */ r.jsx("span", { className: "flex-shrink-0", children: e }),
+    s
+  ] }) : /* @__PURE__ */ r.jsxs("a", { className: l, ...o, children: [
+    e && /* @__PURE__ */ r.jsx("span", { className: "flex-shrink-0", children: e }),
+    s
   ] });
 }
-function Ee({
-  content: s,
-  children: t,
+function gt({
+  content: t,
+  children: e,
   position: a = "top",
-  delay: n = 200,
-  className: l = "",
-  ...o
+  delay: s = 200,
+  className: o = "",
+  ...i
 }) {
-  const [i, c] = Y(!1), [d, b] = Y(null), j = () => {
-    const N = setTimeout(() => {
-      c(!0);
-    }, n);
-    b(N);
-  }, m = () => {
-    d && (clearTimeout(d), b(null)), c(!1);
-  }, x = {
+  const [c, l] = A(!1), [d, u] = A(null), f = () => {
+    const w = setTimeout(() => {
+      l(!0);
+    }, s);
+    u(w);
+  }, g = () => {
+    d && (clearTimeout(d), u(null)), l(!1);
+  }, m = {
     top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
     bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
     left: "right-full top-1/2 transform -translate-y-1/2 mr-2",
     right: "left-full top-1/2 transform -translate-y-1/2 ml-2"
-  }, y = {
+  }, b = {
     top: "top-full left-1/2 transform -translate-x-1/2 border-t-gray-900",
     bottom: "bottom-full left-1/2 transform -translate-x-1/2 border-b-gray-900",
     left: "left-full top-1/2 transform -translate-y-1/2 border-l-gray-900",
     right: "right-full top-1/2 transform -translate-y-1/2 border-r-gray-900"
   };
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: `relative inline-block ${l}`,
-      onMouseEnter: j,
-      onMouseLeave: m,
-      ...o,
+      className: `relative inline-block ${o}`,
+      onMouseEnter: f,
+      onMouseLeave: g,
+      ...i,
       children: [
-        t,
-        i && /* @__PURE__ */ e.jsxs(
+        e,
+        c && /* @__PURE__ */ r.jsxs(
           "div",
           {
-            className: `absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap ${x[a]}`,
+            className: `absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap ${m[a]}`,
             role: "tooltip",
             children: [
-              s,
-              /* @__PURE__ */ e.jsx(
+              t,
+              /* @__PURE__ */ r.jsx(
                 "div",
                 {
-                  className: `absolute w-0 h-0 border-4 border-transparent ${y[a]}`
+                  className: `absolute w-0 h-0 border-4 border-transparent ${b[a]}`
                 }
               )
             ]
@@ -655,154 +1076,432 @@ function Ee({
     }
   );
 }
-function _e({
-  variant: s = "text",
-  width: t,
+function ht({
+  variant: t = "text",
+  width: e,
   height: a,
-  lines: n = 1,
-  className: l = "",
-  ...o
+  lines: s = 1,
+  className: o = "",
+  ...i
 }) {
-  const i = [
+  const c = [
     "animate-pulse",
     "bg-gray-200",
     "rounded"
-  ], c = {
+  ], l = {
     text: "h-4",
     card: "h-32",
     list: "h-12",
     circle: "rounded-full"
   }, d = [
-    ...i,
-    c[s],
-    l
-  ].filter(Boolean).join(" "), b = {};
-  return t && (b.width = t), a && (b.height = a), s === "text" && n > 1 ? /* @__PURE__ */ e.jsx("div", { className: "space-y-2", ...o, children: Array.from({ length: n }).map((j, m) => /* @__PURE__ */ e.jsx(
+    ...c,
+    l[t],
+    o
+  ].filter(Boolean).join(" "), u = {};
+  return e && (u.width = e), a && (u.height = a), t === "text" && s > 1 ? /* @__PURE__ */ r.jsx("div", { className: "space-y-2", ...i, children: Array.from({ length: s }).map((f, g) => /* @__PURE__ */ r.jsx(
     "div",
     {
       className: d,
-      style: m === n - 1 ? { width: "75%" } : b
+      style: g === s - 1 ? { width: "75%" } : u
+    },
+    g
+  )) }) : /* @__PURE__ */ r.jsx("div", { className: d, style: u, ...i });
+}
+const y = {
+  // Icon sizes
+  icon: {
+    sm: "h-4 w-4",
+    // 16px
+    md: "h-5 w-5",
+    // 20px (default)
+    lg: "h-6 w-6"
+    // 24px
+  },
+  // Text sizes
+  text: {
+    xs: "text-xs",
+    // 12px (group titles)
+    sm: "text-sm",
+    // 14px (items - default)
+    base: "text-base"
+    // 16px
+  },
+  // Spacing
+  spacing: {
+    itemPaddingX: "px-4",
+    // 16px horizontal padding for items
+    itemPaddingY: "py-2",
+    // 8px vertical padding for items
+    nestedIndent: "pl-6",
+    // 24px for nested items (level 1)
+    nestedIndentLevel2: "pl-10",
+    // 40px for nested items (level 2)
+    nestedIndentLevel3: "pl-14",
+    // 56px for nested items (level 3)
+    groupTitlePadding: "px-4 py-2",
+    // Padding for group titles
+    iconMargin: "mr-3"
+    // 12px margin between icon and text
+  },
+  // Colors (using Tailwind classes)
+  colors: {
+    active: {
+      bg: "bg-indigo-50",
+      text: "text-indigo-700",
+      border: "border-indigo-600"
     },
-    m
-  )) }) : /* @__PURE__ */ e.jsx("div", { className: d, style: b, ...o });
+    inactive: {
+      text: "text-gray-700",
+      hover: "hover:bg-gray-100 hover:text-gray-900"
+    },
+    groupTitle: "text-gray-500"
+  },
+  // Chevron (for collapsible groups)
+  chevron: {
+    size: "h-3 w-3",
+    // 12px (reduced from h-4 w-4)
+    color: "text-gray-400"
+    // Subtle gray color
+  }
+};
+function Ue(t) {
+  return t <= 0 ? y.spacing.itemPaddingX : t === 1 ? y.spacing.nestedIndent : t === 2 ? y.spacing.nestedIndentLevel2 : t === 3 ? y.spacing.nestedIndentLevel3 : `pl-${4 + t * 4}`;
 }
-function he({
-  href: s,
-  isActive: t = !1,
+function Ye({
+  href: t,
+  isActive: e = !1,
   icon: a,
-  children: n,
-  className: l = "",
-  ...o
+  nested: s = !1,
+  iconSize: o = "md",
+  children: i,
+  className: c = "",
+  ...l
 }) {
-  const i = [
+  const f = [
     "flex",
     "items-center",
-    "px-4",
-    "py-2",
-    "text-sm",
+    Ue(typeof s == "number" ? s : s ? 1 : 0),
+    y.spacing.itemPaddingY,
+    y.text.sm,
     "font-medium",
     "rounded-md",
     "transition-colors",
     "hover:bg-gray-100"
-  ], c = t ? "bg-indigo-50 text-indigo-700 border-r-2 border-indigo-600" : "text-gray-700 hover:text-gray-900", d = [
-    ...i,
-    c,
-    l
+  ], g = e ? `${y.colors.active.bg} ${y.colors.active.text} border-r-2 ${y.colors.active.border}` : `${y.colors.inactive.text} ${y.colors.inactive.hover}`, m = y.icon[o], b = [
+    ...f,
+    g,
+    c
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("a", { href: t, className: b, ...l, children: [
+    a && /* @__PURE__ */ r.jsx("span", { className: `${m} ${y.spacing.iconMargin} shrink-0`, children: a }),
+    /* @__PURE__ */ r.jsx("span", { children: i })
+  ] });
+}
+function He({
+  defaultOpen: t = !0,
+  open: e,
+  onOpenChange: a,
+  storageKey: s
+}) {
+  const o = X(() => {
+    if (s && typeof window < "u") {
+      const f = localStorage.getItem(s);
+      if (f !== null)
+        return f === "true";
+    }
+    return t;
+  }, [t, s]), [i, c] = A(o), l = e !== void 0 ? e : i;
+  _(() => {
+    s && typeof window < "u" && e === void 0 && localStorage.setItem(s, String(i));
+  }, [i, s, e]);
+  const d = X(
+    (f) => {
+      e === void 0 && c(f), a?.(f);
+    },
+    [e, a]
+  ), u = X(() => {
+    d(!l);
+  }, [l, d]);
+  return {
+    isOpen: l,
+    toggle: u,
+    setOpen: d
+  };
+}
+function Ve({
+  children: t,
+  trigger: e,
+  defaultOpen: a = !0,
+  open: s,
+  onOpenChange: o,
+  disabled: i = !1,
+  duration: c = 200,
+  storageKey: l,
+  className: d = "",
+  ...u
+}) {
+  const { isOpen: f, toggle: g } = He({
+    defaultOpen: a,
+    open: s,
+    onOpenChange: o,
+    storageKey: l
+  }), m = P(null), [b, w] = A(f ? "auto" : 0);
+  _(() => {
+    m.current && w(f ? m.current.scrollHeight : 0);
+  }, [f, t]), _(() => {
+    if (!f || !m.current) return;
+    const x = new ResizeObserver(() => {
+      m.current && f && w(m.current.scrollHeight);
+    });
+    return x.observe(m.current), () => {
+      x.disconnect();
+    };
+  }, [f]);
+  const C = `collapsible-content-${Math.random().toString(36).substr(2, 9)}`;
+  return /* @__PURE__ */ r.jsxs("div", { className: d, ...u, children: [
+    /* @__PURE__ */ r.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: g,
+        disabled: i,
+        "aria-expanded": f,
+        "aria-controls": C,
+        "aria-disabled": i,
+        className: "w-full text-left focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 rounded-md",
+        children: e
+      }
+    ),
+    /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        id: C,
+        ref: m,
+        style: {
+          height: typeof b == "number" ? `${b}px` : b,
+          overflow: "hidden",
+          transition: `height ${c}ms ease-in-out`
+        },
+        "aria-hidden": !f,
+        children: /* @__PURE__ */ r.jsx("div", { children: t })
+      }
+    )
+  ] });
+}
+function xt({
+  id: t,
+  label: e,
+  error: a = !1,
+  helperText: s,
+  className: o = "",
+  disabled: i = !1,
+  ...c
+}) {
+  const l = t || `checkbox-${Math.random().toString(36).substr(2, 9)}`, d = a ? `${l}-error` : void 0, u = s ? `${l}-helper` : void 0, f = [
+    "h-4",
+    "w-4",
+    "rounded",
+    "border-gray-300",
+    "text-indigo-600",
+    "focus:ring-2",
+    "focus:ring-indigo-500",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed",
+    "cursor-pointer"
+  ], g = a ? "border-red-500 focus:ring-red-500" : "", m = [
+    ...f,
+    g
+  ].filter(Boolean).join(" "), b = [
+    F("label"),
+    "ml-2",
+    i ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs("a", { href: s, className: d, ...o, children: [
-    a && /* @__PURE__ */ e.jsx("span", { className: "mr-3 flex-shrink-0", children: a }),
-    /* @__PURE__ */ e.jsx("span", { children: n })
+  return /* @__PURE__ */ r.jsxs("div", { className: `flex flex-col my-2 ${o}`, children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          type: "checkbox",
+          id: l,
+          className: m,
+          disabled: i,
+          "aria-invalid": a,
+          "aria-describedby": d || u,
+          ...c
+        }
+      ),
+      e && /* @__PURE__ */ r.jsx(
+        "label",
+        {
+          htmlFor: l,
+          className: b,
+          children: e
+        }
+      )
+    ] }),
+    (a || s) && /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        id: d || u,
+        className: `mt-1 ${F("caption")} ${a ? "text-red-600" : "text-gray-500"}`,
+        role: a ? "alert" : void 0,
+        children: a || s
+      }
+    )
   ] });
 }
-function Z({ label: s, ...t }) {
-  return t.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ e.jsxs("div", { className: "mb-medium grid gap-small", children: [
-    /* @__PURE__ */ e.jsx(T, { as: "label", htmlFor: t.id, className: "cursor-pointer", children: s }),
-    /* @__PURE__ */ e.jsx(me, { ...t })
+function bt({
+  id: t,
+  label: e,
+  error: a = !1,
+  helperText: s,
+  className: o = "",
+  disabled: i = !1,
+  ...c
+}) {
+  const l = t || `radio-${Math.random().toString(36).substr(2, 9)}`, d = a ? `${l}-error` : void 0, u = s ? `${l}-helper` : void 0, f = [
+    "h-4",
+    "w-4",
+    "border-gray-300",
+    "text-indigo-600",
+    "focus:ring-2",
+    "focus:ring-indigo-500",
+    "focus:ring-offset-2",
+    "disabled:opacity-50",
+    "disabled:cursor-not-allowed",
+    "cursor-pointer"
+  ], g = a ? "border-red-500 focus:ring-red-500" : "", m = [
+    ...f,
+    g
+  ].filter(Boolean).join(" "), b = [
+    F("label"),
+    "ml-2",
+    i ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("div", { className: `flex flex-col my-2 ${o}`, children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          type: "radio",
+          id: l,
+          className: m,
+          disabled: i,
+          "aria-invalid": a,
+          "aria-describedby": d || u,
+          ...c
+        }
+      ),
+      e && /* @__PURE__ */ r.jsx(
+        "label",
+        {
+          htmlFor: l,
+          className: b,
+          children: e
+        }
+      )
+    ] }),
+    (a || s) && /* @__PURE__ */ r.jsx(
+      "div",
+      {
+        id: d || u,
+        className: `mt-1 ${F("caption")} ${a ? "text-red-600" : "text-gray-500"}`,
+        role: a ? "alert" : void 0,
+        children: a || s
+      }
+    )
   ] });
 }
-function Re({
-  variant: s = "default",
-  padding: t = "medium",
+function fe({ label: t, size: e, ...a }) {
+  return a.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ r.jsxs("div", { className: "mb-medium grid gap-small", children: [
+    /* @__PURE__ */ r.jsx(L, { as: "label", htmlFor: a.id, className: "cursor-pointer", children: t }),
+    /* @__PURE__ */ r.jsx(De, { ...a, size: e })
+  ] });
+}
+function pt({
+  variant: t = "default",
+  padding: e = "medium",
   className: a = "",
-  children: n,
-  ...l
+  children: s,
+  ...o
 }) {
-  const o = [
+  const i = [
     "bg-white",
     "rounded-lg",
     "border",
     "border-gray-200",
     "shadow-sm"
-  ], i = {
+  ], c = {
     default: "",
     hover: "hover:shadow-md transition-shadow cursor-pointer",
     selected: "border-indigo-500 shadow-md"
-  }, c = {
+  }, l = {
     none: "",
     small: "p-2",
     medium: "p-4",
     large: "p-6"
   }, d = [
-    ...o,
-    i[s],
+    ...i,
     c[t],
+    l[e],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx("div", { className: d, ...l, children: n });
+  return /* @__PURE__ */ r.jsx("div", { className: d, ...o, children: s });
 }
-function Te({
-  children: s,
-  onSubmit: t,
+function yt({
+  children: t,
+  onSubmit: e,
   loading: a = !1,
-  error: n = null,
-  success: l = null,
-  className: o = "",
-  ...i
+  error: s = null,
+  success: o = null,
+  className: i = "",
+  ...c
 }) {
   const d = [
     ...[
       "space-y-4"
     ],
-    o
-  ].filter(Boolean).join(" "), b = (j) => {
-    j.preventDefault(), t && !a && t(j);
+    i
+  ].filter(Boolean).join(" "), u = (f) => {
+    f.preventDefault(), e && !a && e(f);
   };
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "form",
     {
       className: d,
-      onSubmit: b,
+      onSubmit: u,
       noValidate: !0,
-      ...i,
+      ...c,
       children: [
-        s,
-        n && /* @__PURE__ */ e.jsx(
+        t,
+        s && /* @__PURE__ */ r.jsx(
           "div",
           {
             role: "alert",
             className: "p-3 text-sm text-red-800 bg-red-50 border border-red-200 rounded",
-            children: n
+            children: s
           }
         ),
-        l && /* @__PURE__ */ e.jsx(
+        o && /* @__PURE__ */ r.jsx(
           "div",
           {
             role: "alert",
             className: "p-3 text-sm text-green-800 bg-green-50 border border-green-200 rounded",
-            children: l
+            children: o
           }
         )
       ]
     }
   );
 }
-function Se({
-  items: s,
-  separator: t = "/",
+function wt({
+  items: t,
+  separator: e = "/",
   className: a = "",
-  ...n
+  ...s
 }) {
-  const o = [
+  const i = [
     ...[
       "flex",
       "items-center",
@@ -811,51 +1510,51 @@ function Se({
     ],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx("nav", { "aria-label": "Breadcrumb", className: o, ...n, children: /* @__PURE__ */ e.jsx("ol", { className: "flex items-center space-x-2", children: s.map((i, c) => {
-    const d = c === s.length - 1;
-    return /* @__PURE__ */ e.jsxs("li", { className: "flex items-center", children: [
-      c > 0 && /* @__PURE__ */ e.jsx("span", { className: "mx-2 text-gray-400", "aria-hidden": "true", children: t }),
-      d ? /* @__PURE__ */ e.jsx("span", { className: "text-gray-900 font-medium", "aria-current": "page", children: i.label }) : i.href ? /* @__PURE__ */ e.jsx(be, { href: i.href, variant: "default", children: i.label }) : /* @__PURE__ */ e.jsx("span", { className: "text-gray-500", children: i.label })
-    ] }, c);
+  return /* @__PURE__ */ r.jsx("nav", { "aria-label": "Breadcrumb", className: i, ...s, children: /* @__PURE__ */ r.jsx("ol", { className: "flex items-center space-x-2", children: t.map((c, l) => {
+    const d = l === t.length - 1;
+    return /* @__PURE__ */ r.jsxs("li", { className: "flex items-center", children: [
+      l > 0 && /* @__PURE__ */ r.jsx("span", { className: "mx-2 text-gray-400", "aria-hidden": "true", children: e }),
+      d ? /* @__PURE__ */ r.jsx("span", { className: "text-gray-900 font-medium", "aria-current": "page", children: c.label }) : c.href ? /* @__PURE__ */ r.jsx(ze, { href: c.href, variant: "default", children: c.label }) : /* @__PURE__ */ r.jsx("span", { className: "text-gray-500", children: c.label })
+    ] }, l);
   }) }) });
 }
-function Ae({
-  currentPage: s,
-  totalPages: t,
+function vt({
+  currentPage: t,
+  totalPages: e,
   onPageChange: a,
-  totalItems: n,
-  itemsPerPage: l,
-  showPageInfo: o = !0,
-  className: i = "",
-  ...c
+  totalItems: s,
+  itemsPerPage: o,
+  showPageInfo: i = !0,
+  className: c = "",
+  ...l
 }) {
   const d = () => {
-    s > 1 && a(s - 1);
-  }, b = () => {
-    s < t && a(s + 1);
-  }, j = (f) => {
-    f >= 1 && f <= t && f !== s && a(f);
-  }, m = () => {
-    const f = [];
-    if (t <= 5)
-      for (let h = 1; h <= t; h++)
-        f.push(h);
-    else if (s <= 3) {
-      for (let h = 1; h <= 4; h++)
-        f.push(h);
-      f.push("ellipsis"), f.push(t);
-    } else if (s >= t - 2) {
-      f.push(1), f.push("ellipsis");
-      for (let h = t - 3; h <= t; h++)
-        f.push(h);
+    t > 1 && a(t - 1);
+  }, u = () => {
+    t < e && a(t + 1);
+  }, f = (x) => {
+    x >= 1 && x <= e && x !== t && a(x);
+  }, g = () => {
+    const x = [];
+    if (e <= 5)
+      for (let p = 1; p <= e; p++)
+        x.push(p);
+    else if (t <= 3) {
+      for (let p = 1; p <= 4; p++)
+        x.push(p);
+      x.push("ellipsis"), x.push(e);
+    } else if (t >= e - 2) {
+      x.push(1), x.push("ellipsis");
+      for (let p = e - 3; p <= e; p++)
+        x.push(p);
     } else {
-      f.push(1), f.push("ellipsis");
-      for (let h = s - 1; h <= s + 1; h++)
-        f.push(h);
-      f.push("ellipsis"), f.push(t);
+      x.push(1), x.push("ellipsis");
+      for (let p = t - 1; p <= t + 1; p++)
+        x.push(p);
+      x.push("ellipsis"), x.push(e);
     }
-    return f;
-  }, x = n && l ? (s - 1) * l + 1 : void 0, y = n && l ? Math.min(s * l, n) : void 0, w = [
+    return x;
+  }, m = s && o ? (t - 1) * o + 1 : void 0, b = s && o ? Math.min(t * o, s) : void 0, C = [
     ...[
       "flex",
       "items-center",
@@ -863,69 +1562,69 @@ function Ae({
       "px-4",
       "py-3"
     ],
-    i
+    c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs("nav", { className: w, "aria-label": "Pagination", ...c, children: [
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ e.jsx(
-        E,
+  return /* @__PURE__ */ r.jsxs("nav", { className: C, "aria-label": "Pagination", ...l, children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r.jsx(
+        O,
         {
           variant: "secondary",
           onClick: d,
-          disabled: s === 1,
+          disabled: t === 1,
           className: "px-3 py-1 text-sm",
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1", children: m().map((f, k) => {
-        if (f === "ellipsis")
-          return /* @__PURE__ */ e.jsx("span", { className: "px-2 text-gray-500", children: "..." }, `ellipsis-${k}`);
-        const h = f, S = h === s;
-        return /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ r.jsx("div", { className: "flex items-center gap-1", children: g().map((x, E) => {
+        if (x === "ellipsis")
+          return /* @__PURE__ */ r.jsx("span", { className: "px-2 text-gray-500", children: "..." }, `ellipsis-${E}`);
+        const p = x, M = p === t;
+        return /* @__PURE__ */ r.jsx(
           "button",
           {
-            onClick: () => j(h),
-            className: `px-3 py-1 text-sm rounded ${S ? "bg-indigo-600 text-white" : "text-gray-700 hover:bg-gray-100"}`,
-            "aria-current": S ? "page" : void 0,
-            "aria-label": `Go to page ${h}`,
-            children: h
+            onClick: () => f(p),
+            className: `px-3 py-1 text-sm rounded ${M ? "bg-indigo-600 text-white" : "text-gray-700 hover:bg-gray-100"}`,
+            "aria-current": M ? "page" : void 0,
+            "aria-label": `Go to page ${p}`,
+            children: p
           },
-          h
+          p
         );
       }) }),
-      /* @__PURE__ */ e.jsx(
-        E,
+      /* @__PURE__ */ r.jsx(
+        O,
         {
           variant: "secondary",
-          onClick: b,
-          disabled: s === t,
+          onClick: u,
+          disabled: t === e,
           className: "px-3 py-1 text-sm",
           children: "Next"
         }
       )
     ] }),
-    o && n && l && /* @__PURE__ */ e.jsxs("div", { className: "text-sm text-gray-700", children: [
+    i && s && o && /* @__PURE__ */ r.jsxs("div", { className: "text-sm text-gray-700", children: [
       "Showing ",
-      x,
+      m,
       " to ",
-      y,
+      b,
       " of ",
-      n,
+      s,
       " results"
     ] })
   ] });
 }
-function Oe({
-  title: s,
-  message: t,
+function jt({
+  title: t,
+  message: e,
   actionLabel: a,
-  onAction: n,
-  illustration: l,
-  variant: o = "default",
-  className: i = "",
-  ...c
+  onAction: s,
+  illustration: o,
+  variant: i = "default",
+  className: c = "",
+  ...l
 }) {
-  const b = [
+  const u = [
     ...[
       "flex",
       "flex-col",
@@ -935,72 +1634,72 @@ function Oe({
       "py-12",
       "px-4"
     ],
-    i
-  ].filter(Boolean).join(" "), j = o === "withAction" || a && n, m = o === "withIllustration" || l;
-  return /* @__PURE__ */ e.jsxs("div", { className: b, ...c, children: [
-    m && l && /* @__PURE__ */ e.jsx("div", { className: "mb-4", children: l }),
-    /* @__PURE__ */ e.jsx(T, { as: "h3", className: "text-lg font-semibold text-gray-900 mb-2", children: s }),
-    /* @__PURE__ */ e.jsx(T, { as: "p", className: "text-sm text-gray-500 mb-6 max-w-sm", children: t }),
-    j && a && n && /* @__PURE__ */ e.jsx(E, { variant: "regular", onClick: n, children: a })
+    c
+  ].filter(Boolean).join(" "), f = i === "withAction" || a && s, g = i === "withIllustration" || o;
+  return /* @__PURE__ */ r.jsxs("div", { className: u, ...l, children: [
+    g && o && /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: o }),
+    /* @__PURE__ */ r.jsx(L, { as: "h3", className: "text-lg font-semibold text-gray-900 mb-2", children: t }),
+    /* @__PURE__ */ r.jsx(L, { as: "p", className: "text-sm text-gray-500 mb-6 max-w-sm", children: e }),
+    f && a && s && /* @__PURE__ */ r.jsx(O, { variant: "regular", onClick: s, children: a })
   ] });
 }
-function Le({
-  trigger: s,
-  items: t,
+function kt({
+  trigger: t,
+  items: e,
   align: a = "right",
-  variant: n = "default",
-  className: l = "",
-  ...o
+  variant: s = "default",
+  className: o = "",
+  ...i
 }) {
-  const [i, c] = Y(!1), d = z(null);
-  F(() => {
-    const m = (x) => {
-      d.current && !d.current.contains(x.target) && c(!1);
+  const [c, l] = A(!1), d = P(null);
+  _(() => {
+    const g = (m) => {
+      d.current && !d.current.contains(m.target) && l(!1);
     };
-    return i && document.addEventListener("mousedown", m), () => {
-      document.removeEventListener("mousedown", m);
+    return c && document.addEventListener("mousedown", g), () => {
+      document.removeEventListener("mousedown", g);
     };
-  }, [i]);
-  const b = (m) => {
-    m.disabled || (m.onClick(), c(!1));
-  }, j = a === "right" ? "right-0" : "left-0";
-  return /* @__PURE__ */ e.jsxs("div", { className: `relative inline-block ${l}`, ref: d, ...o, children: [
-    /* @__PURE__ */ e.jsx("div", { onClick: () => c(!i), children: s }),
-    i && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx(
+  }, [c]);
+  const u = (g) => {
+    g.disabled || (g.onClick(), l(!1));
+  }, f = a === "right" ? "right-0" : "left-0";
+  return /* @__PURE__ */ r.jsxs("div", { className: `relative inline-block ${o}`, ref: d, ...i, children: [
+    /* @__PURE__ */ r.jsx("div", { onClick: () => l(!c), children: t }),
+    c && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+      /* @__PURE__ */ r.jsx(
         "div",
         {
           className: "fixed inset-0 z-10",
-          onClick: () => c(!1)
+          onClick: () => l(!1)
         }
       ),
-      /* @__PURE__ */ e.jsx(
+      /* @__PURE__ */ r.jsx(
         "div",
         {
-          className: `absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${j}`,
+          className: `absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${f}`,
           role: "menu",
           "aria-orientation": "vertical",
-          children: /* @__PURE__ */ e.jsx("div", { className: "py-1", role: "none", children: t.map((m, x) => {
-            const y = [
+          children: /* @__PURE__ */ r.jsx("div", { className: "py-1", role: "none", children: e.map((g, m) => {
+            const b = [
               "block",
               "px-4",
               "py-2",
               "text-sm",
               "w-full",
               "text-left",
-              m.disabled ? "text-gray-400 cursor-not-allowed" : m.variant === "danger" ? "text-red-700 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"
+              g.disabled ? "text-gray-400 cursor-not-allowed" : g.variant === "danger" ? "text-red-700 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"
             ].filter(Boolean).join(" ");
-            return /* @__PURE__ */ e.jsx(
+            return /* @__PURE__ */ r.jsx(
               "button",
               {
                 type: "button",
-                className: y,
-                onClick: () => b(m),
-                disabled: m.disabled,
+                className: b,
+                onClick: () => u(g),
+                disabled: g.disabled,
                 role: "menuitem",
-                children: m.label
+                children: g.label
               },
-              x
+              m
             );
           }) })
         }
@@ -1008,32 +1707,171 @@ function Le({
     ] })
   ] });
 }
-function pe({
-  title: s,
-  children: t,
-  className: a = "",
-  ...n
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ge = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), qe = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, a, s) => s ? s.toUpperCase() : a.toLowerCase()
+), me = (t) => {
+  const e = qe(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, be = (...t) => t.filter((e, a, s) => !!e && e.trim() !== "" && s.indexOf(e) === a).join(" ").trim(), Je = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var Xe = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ze = ge(
+  ({
+    color: t = "currentColor",
+    size: e = 24,
+    strokeWidth: a = 2,
+    absoluteStrokeWidth: s,
+    className: o = "",
+    children: i,
+    iconNode: c,
+    ...l
+  }, d) => Z(
+    "svg",
+    {
+      ref: d,
+      ...Xe,
+      width: e,
+      height: e,
+      stroke: t,
+      strokeWidth: s ? Number(a) * 24 / Number(e) : a,
+      className: be("lucide", o),
+      ...!i && !Je(l) && { "aria-hidden": "true" },
+      ...l
+    },
+    [
+      ...c.map(([u, f]) => Z(u, f)),
+      ...Array.isArray(i) ? i : [i]
+    ]
+  )
+);
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Ke = (t, e) => {
+  const a = ge(
+    ({ className: s, ...o }, i) => Z(Ze, {
+      ref: i,
+      iconNode: e,
+      className: be(
+        `lucide-${Ge(me(t))}`,
+        `lucide-${t}`,
+        s
+      ),
+      ...o
+    })
+  );
+  return a.displayName = me(t), a;
+};
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const Qe = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]], et = Ke("chevron-right", Qe);
+function tt({
+  title: t,
+  titleIcon: e,
+  children: a,
+  collapsible: s = !1,
+  defaultCollapsed: o = !1,
+  collapsed: i,
+  onCollapseChange: c,
+  storageKey: l,
+  showChevron: d = !0,
+  className: u = "",
+  ...f
 }) {
-  const o = [
-    ...[
-      "space-y-1"
-    ],
-    a
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs("div", { className: o, ...n, children: [
-    s && /* @__PURE__ */ e.jsx(T, { as: "h3", className: "px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider", children: s }),
-    /* @__PURE__ */ e.jsx("div", { className: "space-y-1", children: t })
+  const m = [...["space-y-1"], u].filter(Boolean).join(" "), b = ({ isOpen: w }) => /* @__PURE__ */ r.jsx(
+    et,
+    {
+      className: `${y.chevron.size} ${y.chevron.color} transition-transform duration-200 ${w ? "rotate-90" : ""}`
+    }
+  );
+  return s && t ? /* @__PURE__ */ r.jsx(
+    Ve,
+    {
+      defaultOpen: !o,
+      open: i !== void 0 ? !i : void 0,
+      onOpenChange: (w) => c?.(!w),
+      storageKey: l,
+      trigger: /* @__PURE__ */ r.jsxs("div", { className: `${y.spacing.groupTitlePadding} flex items-center justify-between w-full hover:bg-gray-50 rounded-md transition-colors cursor-pointer`, children: [
+        /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+          e && /* @__PURE__ */ r.jsx("span", { className: `${y.icon.md} ${y.colors.groupTitle}`, children: e }),
+          /* @__PURE__ */ r.jsx(
+            L,
+            {
+              as: "h3",
+              className: `${y.text.xs} font-semibold ${y.colors.groupTitle} uppercase tracking-wider`,
+              children: t
+            }
+          )
+        ] }),
+        d && /* @__PURE__ */ r.jsx("span", { className: "ml-2", children: /* @__PURE__ */ r.jsx(b, { isOpen: i !== void 0 ? !i : !o }) })
+      ] }),
+      className: m,
+      ...f,
+      children: /* @__PURE__ */ r.jsx("div", { className: "space-y-1", children: a })
+    }
+  ) : /* @__PURE__ */ r.jsxs("div", { className: m, ...f, children: [
+    t && /* @__PURE__ */ r.jsxs("div", { className: `${y.spacing.groupTitlePadding} flex items-center gap-2`, children: [
+      e && /* @__PURE__ */ r.jsx("span", { className: `${y.icon.md} ${y.colors.groupTitle}`, children: e }),
+      /* @__PURE__ */ r.jsx(
+        L,
+        {
+          as: "h3",
+          className: `${y.text.xs} font-semibold ${y.colors.groupTitle} uppercase tracking-wider`,
+          children: t
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsx("div", { className: "space-y-1", children: a })
   ] });
 }
-function Q({
-  title: s,
-  onClose: t,
+function pe({
+  title: t,
+  onClose: e,
   showCloseButton: a = !1,
-  children: n,
-  className: l = "",
-  ...o
+  children: s,
+  className: o = "",
+  ...i
 }) {
-  const c = [
+  const l = [
     ...[
       "flex",
       "items-center",
@@ -1043,27 +1881,27 @@ function Q({
       "border-b",
       "border-gray-200"
     ],
-    l
+    o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs("div", { className: c, ...o, children: [
-    /* @__PURE__ */ e.jsx(T, { as: "h2", className: "text-lg font-semibold text-gray-900", children: s }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
-      n,
-      a && t && /* @__PURE__ */ e.jsx(
-        E,
+  return /* @__PURE__ */ r.jsxs("div", { className: l, ...i, children: [
+    /* @__PURE__ */ r.jsx(L, { as: "h2", className: "text-lg font-semibold text-gray-900", children: t }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center space-x-2", children: [
+      s,
+      a && e && /* @__PURE__ */ r.jsx(
+        O,
         {
           variant: "secondary",
-          onClick: t,
+          onClick: e,
           className: "p-1",
           "aria-label": "Close sidebar",
-          children: /* @__PURE__ */ e.jsx(
+          children: /* @__PURE__ */ r.jsx(
             "svg",
             {
               className: "h-5 w-5",
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ e.jsx(
+              children: /* @__PURE__ */ r.jsx(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -1079,16 +1917,16 @@ function Q({
     ] })
   ] });
 }
-function Be({
-  label: s,
-  isActive: t = !1,
+function Nt({
+  label: t,
+  isActive: e = !1,
   icon: a,
-  onClick: n,
-  className: l = "",
-  children: o,
-  ...i
+  onClick: s,
+  className: o = "",
+  children: i,
+  ...c
 }) {
-  const c = [
+  const l = [
     "inline-flex",
     "items-center",
     "px-3",
@@ -1097,51 +1935,51 @@ function Be({
     "font-medium",
     "rounded-md",
     "transition-colors"
-  ], d = t ? "bg-indigo-100 text-indigo-700 border-b-2 border-indigo-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900", b = [
-    ...c,
+  ], d = e ? "bg-indigo-100 text-indigo-700 border-b-2 border-indigo-600" : "text-gray-600 hover:bg-gray-100 hover:text-gray-900", u = [
+    ...l,
     d,
-    l
+    o
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "button",
     {
       type: "button",
-      className: b,
-      onClick: n,
-      "aria-expanded": t,
+      className: u,
+      onClick: s,
+      "aria-expanded": e,
       "aria-haspopup": "true",
-      ...i,
+      ...c,
       children: [
-        a && /* @__PURE__ */ e.jsx("span", { className: "mr-2", children: a }),
-        /* @__PURE__ */ e.jsx("span", { children: s }),
-        o
+        a && /* @__PURE__ */ r.jsx("span", { className: "mr-2", children: a }),
+        /* @__PURE__ */ r.jsx("span", { children: t }),
+        i
       ]
     }
   );
 }
-function $e({
-  onForgotPasswordClick: s,
-  className: t,
+function Ct({
+  onForgotPasswordClick: t,
+  className: e,
   ...a
 }) {
-  return /* @__PURE__ */ e.jsx(xe, { className: t, children: /* @__PURE__ */ e.jsxs(
+  return /* @__PURE__ */ r.jsx(Pe, { className: e, children: /* @__PURE__ */ r.jsxs(
     "form",
     {
       ...a,
-      onSubmit: (n) => {
-        n.preventDefault(), a.onSubmit && a.onSubmit(n);
+      onSubmit: (s) => {
+        s.preventDefault(), a.onSubmit && a.onSubmit(s);
       },
       children: [
-        /* @__PURE__ */ e.jsx(
-          Z,
+        /* @__PURE__ */ r.jsx(
+          fe,
           {
             id: "login-email",
             label: "Your email",
             placeholder: "myname@email.com"
           }
         ),
-        /* @__PURE__ */ e.jsx(
-          Z,
+        /* @__PURE__ */ r.jsx(
+          fe,
           {
             id: "login-password",
             label: "Your password",
@@ -1149,60 +1987,60 @@ function $e({
             type: "password"
           }
         ),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ e.jsx(
-            E,
+        /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ r.jsx(
+            O,
             {
               variant: "secondary",
               type: "button",
-              onClick: s,
+              onClick: t,
               children: "Forgot password?"
             }
           ),
-          /* @__PURE__ */ e.jsx(E, { variant: "regular", type: "submit", children: "Sign in" })
+          /* @__PURE__ */ r.jsx(O, { variant: "regular", type: "submit", children: "Sign in" })
         ] })
       ]
     }
   ) });
 }
-function Ie({
-  isOpen: s,
-  onClose: t,
+function Tt({
+  isOpen: t,
+  onClose: e,
   title: a,
-  children: n,
-  variant: l = "default",
-  showCloseButton: o = !0,
-  footer: i,
-  className: c = "",
+  children: s,
+  variant: o = "default",
+  showCloseButton: i = !0,
+  footer: c,
+  className: l = "",
   ...d
 }) {
-  const b = z(null), j = z(null);
-  if (F(() => {
-    if (!s) return;
-    j.current = document.activeElement;
-    const f = setTimeout(() => {
-      b.current?.focus();
-    }, 0), k = (h) => {
-      h.key === "Escape" && t();
+  const u = P(null), f = P(null);
+  if (_(() => {
+    if (!t) return;
+    f.current = document.activeElement;
+    const x = setTimeout(() => {
+      u.current?.focus();
+    }, 0), E = (p) => {
+      p.key === "Escape" && e();
     };
-    return document.addEventListener("keydown", k), () => {
-      clearTimeout(f), document.removeEventListener("keydown", k), j.current?.focus();
+    return document.addEventListener("keydown", E), () => {
+      clearTimeout(x), document.removeEventListener("keydown", E), f.current?.focus();
     };
-  }, [s, t]), F(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  }, [t, e]), _(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [s]), !s) return null;
-  const m = [
+  }), [t]), !t) return null;
+  const g = [
     "fixed",
     "inset-0",
     "z-50",
     "overflow-y-auto"
-  ], x = [
+  ], m = [
     "fixed",
     "inset-0",
     "bg-black",
     "bg-opacity-50",
     "transition-opacity"
-  ], N = [
+  ], w = [
     "relative",
     "bg-white",
     "rounded-lg",
@@ -1213,46 +2051,46 @@ function Ie({
       default: "max-w-md",
       large: "max-w-2xl",
       fullscreen: "max-w-full h-full"
-    }[l],
+    }[o],
     "p-6",
-    c
-  ].filter(Boolean).join(" "), w = /* @__PURE__ */ e.jsxs(
+    l
+  ].filter(Boolean).join(" "), C = /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: m.join(" "),
+      className: g.join(" "),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": a ? "modal-title" : void 0,
-      onClick: (f) => {
-        f.target === f.currentTarget && t();
+      onClick: (x) => {
+        x.target === x.currentTarget && e();
       },
       children: [
-        /* @__PURE__ */ e.jsx("div", { className: x.join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ r.jsx("div", { className: m.join(" "), "aria-hidden": "true" }),
+        /* @__PURE__ */ r.jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ r.jsxs(
           "div",
           {
-            ref: b,
+            ref: u,
             tabIndex: -1,
-            className: N,
-            onClick: (f) => f.stopPropagation(),
+            className: w,
+            onClick: (x) => x.stopPropagation(),
             ...d,
             children: [
-              a && /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
-                /* @__PURE__ */ e.jsx("h2", { id: "modal-title", className: "text-xl font-semibold text-gray-900", children: a }),
-                o && /* @__PURE__ */ e.jsx(
+              a && /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+                /* @__PURE__ */ r.jsx("h2", { id: "modal-title", className: "text-xl font-semibold text-gray-900", children: a }),
+                i && /* @__PURE__ */ r.jsx(
                   "button",
                   {
-                    onClick: t,
+                    onClick: e,
                     className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ e.jsx(
+                    children: /* @__PURE__ */ r.jsx(
                       "svg",
                       {
                         className: "h-6 w-6",
                         fill: "none",
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
-                        children: /* @__PURE__ */ e.jsx(
+                        children: /* @__PURE__ */ r.jsx(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -1266,20 +2104,20 @@ function Ie({
                   }
                 )
               ] }),
-              !a && o && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ e.jsx(
+              !a && i && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ r.jsx(
                 "button",
                 {
-                  onClick: t,
+                  onClick: e,
                   className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ e.jsx(
+                  children: /* @__PURE__ */ r.jsx(
                     "svg",
                     {
                       className: "h-6 w-6",
                       fill: "none",
                       viewBox: "0 0 24 24",
                       stroke: "currentColor",
-                      children: /* @__PURE__ */ e.jsx(
+                      children: /* @__PURE__ */ r.jsx(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -1292,125 +2130,437 @@ function Ie({
                   )
                 }
               ) }),
-              /* @__PURE__ */ e.jsx("div", { className: "mb-4", children: n }),
-              i && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end gap-2 mt-4", children: i })
+              /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: s }),
+              c && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end gap-2 mt-4", children: c })
             ]
           }
         ) })
       ]
     }
   );
-  return typeof window < "u" ? ce(w, document.body) : w;
+  return typeof window < "u" ? Le(C, document.body) : C;
 }
-function Me({
-  columns: s,
-  data: t,
+function Et({
+  columns: t,
+  data: e,
   loading: a = !1,
-  onSort: n,
-  sortColumn: l,
-  sortDirection: o,
-  emptyMessage: i = "No data available",
-  className: c = "",
+  onSort: s,
+  sortColumn: o,
+  sortDirection: i,
+  emptyMessage: c = "No data available",
+  className: l = "",
   ...d
 }) {
-  const b = (x) => {
-    if (!n || !s.find((N) => N.key === x)?.sortable)
+  const u = (m) => {
+    if (!s || !t.find((w) => w.key === m)?.sortable)
       return;
-    n(x, l === x && o === "asc" ? "desc" : "asc");
-  }, m = [
+    s(m, o === m && i === "asc" ? "desc" : "asc");
+  }, g = [
     ...[
       "min-w-full",
       "divide-y",
       "divide-gray-200"
     ],
-    c
+    l
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ e.jsxs("table", { className: m, ...d, children: [
-    /* @__PURE__ */ e.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ e.jsx("tr", { children: s.map((x) => /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ r.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r.jsxs("table", { className: g, ...d, children: [
+    /* @__PURE__ */ r.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ r.jsx("tr", { children: t.map((m) => /* @__PURE__ */ r.jsx(
       "th",
       {
         scope: "col",
-        className: `px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${x.sortable && n ? "cursor-pointer hover:bg-gray-100 select-none" : ""}`,
-        onClick: () => x.sortable && b(x.key),
-        children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e.jsx("span", { children: x.label }),
-          x.sortable && l === x.key && /* @__PURE__ */ e.jsx("span", { className: "text-gray-400", children: o === "asc" ? "↑" : "↓" })
+        className: `px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${m.sortable && s ? "cursor-pointer hover:bg-gray-100 select-none" : ""}`,
+        onClick: () => m.sortable && u(m.key),
+        children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ r.jsx("span", { children: m.label }),
+          m.sortable && o === m.key && /* @__PURE__ */ r.jsx("span", { className: "text-gray-400", children: i === "asc" ? "↑" : "↓" })
         ] })
       },
-      x.key
+      m.key
     )) }) }),
-    /* @__PURE__ */ e.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: a ? /* @__PURE__ */ e.jsx("tr", { children: /* @__PURE__ */ e.jsx("td", { colSpan: s.length, className: "px-6 py-4 text-center text-gray-500", children: "Loading..." }) }) : t.length === 0 ? /* @__PURE__ */ e.jsx("tr", { children: /* @__PURE__ */ e.jsx("td", { colSpan: s.length, className: "px-6 py-4 text-center text-gray-500", children: i }) }) : t.map((x, y) => /* @__PURE__ */ e.jsx("tr", { className: "hover:bg-gray-50", children: s.map((N) => {
-      const w = x[N.key];
-      return /* @__PURE__ */ e.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: N.render ? N.render(w, x) : w }, N.key);
-    }) }, y)) })
+    /* @__PURE__ */ r.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: a ? /* @__PURE__ */ r.jsx("tr", { children: /* @__PURE__ */ r.jsx("td", { colSpan: t.length, className: "px-6 py-4 text-center text-gray-500", children: "Loading..." }) }) : e.length === 0 ? /* @__PURE__ */ r.jsx("tr", { children: /* @__PURE__ */ r.jsx("td", { colSpan: t.length, className: "px-6 py-4 text-center text-gray-500", children: c }) }) : e.map((m, b) => /* @__PURE__ */ r.jsx("tr", { className: "hover:bg-gray-50", children: t.map((w) => {
+      const C = m[w.key];
+      return /* @__PURE__ */ r.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: w.render ? w.render(C, m) : C }, w.key);
+    }) }, b)) })
   ] }) });
 }
-function D({
-  variant: s = "default",
-  title: t,
+function re({
+  variant: t = "default",
+  title: e,
   showHeader: a = !0,
-  onClose: n,
-  children: l,
-  className: o = "",
-  ...i
+  onClose: s,
+  children: o,
+  className: i = "",
+  ...c
 }) {
-  const c = [
+  const l = [
     "flex",
     "flex-col",
     "bg-white",
-    "border-r",
-    "border-gray-200",
-    "h-full"
+    "h-full",
+    "w-full"
   ], d = {
-    default: "w-64",
-    collapsed: "w-16"
-  }, b = [
-    ...c,
-    d[s],
-    o
+    default: "",
+    collapsed: ""
+  }, u = [
+    ...l,
+    d[t],
+    i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsxs("aside", { className: b, ...i, children: [
-    a && t && /* @__PURE__ */ e.jsx(
-      Q,
+  return /* @__PURE__ */ r.jsxs("div", { className: u, ...c, children: [
+    a && e && /* @__PURE__ */ r.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ r.jsx(
+      pe,
       {
-        title: t,
-        onClose: n,
-        showCloseButton: !!n
+        title: e,
+        onClose: s,
+        showCloseButton: !!s
       }
-    ),
-    /* @__PURE__ */ e.jsx("nav", { className: "flex-1 overflow-y-auto py-4", children: l })
+    ) }),
+    /* @__PURE__ */ r.jsx("div", { className: "flex-1 overflow-y-auto py-4 min-h-0", children: o })
   ] });
 }
-D.Group = pe;
-D.Item = he;
-D.Header = Q;
+re.Group = tt;
+re.Item = Ye;
+re.Header = pe;
+class T {
+  static BASE_UNIT = 4;
+  // 4px base
+  /**
+   * Create a spacing token from scale value
+   */
+  static create(e) {
+    const a = e * this.BASE_UNIT, s = a / 16;
+    return {
+      value: a,
+      rem: `${s}rem`,
+      px: `${a}px`,
+      tailwind: this.getTailwindClass(e)
+    };
+  }
+  /**
+   * Get Tailwind class for spacing value
+   */
+  static getTailwindClass(e) {
+    return {
+      0: "0",
+      1: "1",
+      // 4px
+      2: "2",
+      // 8px
+      3: "3",
+      // 12px
+      4: "4",
+      // 16px
+      5: "5",
+      // 20px
+      6: "6",
+      // 24px
+      8: "8",
+      // 32px
+      10: "10",
+      // 40px
+      12: "12",
+      // 48px
+      16: "16",
+      // 64px
+      20: "20",
+      // 80px
+      24: "24",
+      // 96px
+      32: "32",
+      // 128px
+      40: "40",
+      // 160px
+      48: "48",
+      // 192px
+      64: "64",
+      // 256px
+      80: "80",
+      // 320px
+      96: "96"
+      // 384px
+    }[e] || String(e);
+  }
+}
+const U = {
+  // Micro spacing (0-12px)
+  none: T.create(0),
+  xs: T.create(1),
+  // 4px
+  sm: T.create(2),
+  // 8px
+  md: T.create(3),
+  // 12px
+  // Standard spacing (16-32px)
+  base: T.create(4),
+  // 16px
+  lg: T.create(6),
+  // 24px
+  xl: T.create(8),
+  // 32px
+  // Large spacing (40-64px)
+  "2xl": T.create(10),
+  // 40px
+  "3xl": T.create(12),
+  // 48px
+  "4xl": T.create(16),
+  // 64px
+  // Extra large spacing (80px+)
+  "5xl": T.create(20),
+  // 80px
+  "6xl": T.create(24)
+  // 96px
+};
+function St(t) {
+  return U[t];
+}
+function _t(t, e = "p") {
+  const s = U[t].tailwind;
+  return `${{
+    p: "p",
+    m: "m",
+    px: "px",
+    mx: "mx",
+    py: "py",
+    my: "my",
+    pt: "pt",
+    mt: "mt",
+    pr: "pr",
+    mr: "mr",
+    pb: "pb",
+    mb: "mb",
+    pl: "pl",
+    ml: "ml"
+  }[e]}-${s}`;
+}
+class R {
+  /**
+   * Create breakpoint token
+   */
+  static create(e) {
+    const s = {
+      sm: { minWidth: 640, tailwind: "sm" },
+      md: { minWidth: 768, tailwind: "md" },
+      lg: { minWidth: 1024, tailwind: "lg" },
+      xl: { minWidth: 1280, tailwind: "xl" },
+      "2xl": { minWidth: 1536, tailwind: "2xl" }
+    }[e];
+    return {
+      name: e,
+      minWidth: s.minWidth,
+      px: `${s.minWidth}px`,
+      rem: `${s.minWidth / 16}rem`,
+      tailwind: s.tailwind
+    };
+  }
+}
+const Y = {
+  sm: R.create("sm"),
+  md: R.create("md"),
+  lg: R.create("lg"),
+  xl: R.create("xl"),
+  "2xl": R.create("2xl")
+};
+function $t(t) {
+  return Y[t];
+}
+function Rt(t, e = "min") {
+  const a = Y[t];
+  return `@media (${e === "min" ? "min-width" : "max-width"}: ${a.px})`;
+}
+class ye {
+  colorFactory;
+  constructor(e = "light") {
+    const a = e === "light" ? new K() : new Q();
+    this.colorFactory = new ee(a);
+  }
+  /**
+   * Create spacing token
+   */
+  createSpacing(e) {
+    return T.create(e);
+  }
+  /**
+   * Create typography token
+   */
+  createTypography(e, a, s) {
+    return N.create(e, a, s);
+  }
+  /**
+   * Create color palette
+   */
+  createColorPalette() {
+    return this.colorFactory.generatePalette();
+  }
+  /**
+   * Create breakpoint token
+   */
+  createBreakpoint(e) {
+    return R.create(e);
+  }
+  /**
+   * Create complete token set for a theme
+   */
+  createTokenSet() {
+    return {
+      spacing: {
+        xs: this.createSpacing(1),
+        sm: this.createSpacing(2),
+        md: this.createSpacing(3),
+        base: this.createSpacing(4),
+        lg: this.createSpacing(6),
+        xl: this.createSpacing(8),
+        "2xl": this.createSpacing(10),
+        "3xl": this.createSpacing(12),
+        "4xl": this.createSpacing(16)
+      },
+      typography: {
+        h1: this.createTypography("4xl", "tight", "bold"),
+        h2: this.createTypography("3xl", "tight", "bold"),
+        h3: this.createTypography("2xl", "snug", "semibold"),
+        body: this.createTypography("base", "relaxed", "normal"),
+        label: this.createTypography("sm", "normal", "medium"),
+        caption: this.createTypography("xs", "normal", "normal")
+      },
+      colors: this.createColorPalette(),
+      breakpoints: {
+        sm: this.createBreakpoint("sm"),
+        md: this.createBreakpoint("md"),
+        lg: this.createBreakpoint("lg"),
+        xl: this.createBreakpoint("xl"),
+        "2xl": this.createBreakpoint("2xl")
+      }
+    };
+  }
+  /**
+   * Switch theme
+   */
+  setTheme(e) {
+    const a = e === "light" ? new K() : new Q();
+    this.colorFactory.setStrategy(a);
+  }
+}
+const At = new ye("light");
+function Lt(t = "light") {
+  return new ye(t).createTokenSet();
+}
+const Ft = {
+  colors: te,
+  spacing: U,
+  typography: z,
+  breakpoints: Y,
+  mode: "light"
+}, Ot = {
+  colors: he,
+  spacing: U,
+  typography: z,
+  breakpoints: Y,
+  mode: "dark"
+}, we = Re(void 0);
+function It({
+  children: t,
+  defaultTheme: e = "light",
+  storageKey: a = "theme"
+}) {
+  const [s, o] = A(() => {
+    if (typeof window > "u")
+      return e;
+    try {
+      const u = localStorage.getItem(a);
+      if (u === "light" || u === "dark")
+        return u;
+    } catch (u) {
+      console.warn("Failed to read theme from localStorage:", u);
+    }
+    return e;
+  });
+  _(() => {
+    try {
+      localStorage.setItem(a, s);
+    } catch (u) {
+      console.warn("Failed to save theme to localStorage:", u);
+    }
+    document.documentElement.classList.remove("light", "dark"), document.documentElement.classList.add(s);
+  }, [s, a]);
+  const d = {
+    theme: s,
+    toggleTheme: () => {
+      o((u) => u === "light" ? "dark" : "light");
+    },
+    setTheme: (u) => {
+      o(u);
+    },
+    colors: s === "light" ? te : he,
+    isDark: s === "dark"
+  };
+  return /* @__PURE__ */ r.jsx(we.Provider, { value: d, children: t });
+}
+function Bt() {
+  const t = Ae(we);
+  if (t === void 0)
+    throw new Error("useTheme must be used within a ThemeProvider");
+  return t;
+}
 export {
-  ye as Badge,
-  xe as BoxWrapper,
-  Se as Breadcrumb,
-  E as Button,
-  Re as Card,
-  Le as Dropdown,
-  Oe as EmptyState,
-  Ce as ErrorMessage,
-  Te as Form,
-  je as Info,
-  me as Input,
-  Z as InputWithLabel,
-  ke as Label,
-  $e as LoginBox,
-  Ie as Modal,
-  be as NavLink,
-  Be as NavbarGroup,
-  Ae as Pagination,
-  Ne as Select,
-  D as Sidebar,
-  pe as SidebarGroup,
-  Q as SidebarHeader,
-  he as SidebarItem,
-  _e as Skeleton,
-  Me as Table,
-  T as Text,
-  we as Textarea,
-  Ee as Tooltip
+  Y as BREAKPOINT_TOKENS,
+  ct as Badge,
+  Pe as BoxWrapper,
+  wt as Breadcrumb,
+  R as BreakpointTokenFactory,
+  O as Button,
+  xe as COLOR_TOKENS,
+  he as COLOR_TOKENS_DARK,
+  te as COLOR_TOKENS_LIGHT,
+  pt as Card,
+  xt as Checkbox,
+  Ve as Collapsible,
+  ee as ColorTokenFactory,
+  Ot as DARK_THEME,
+  Q as DarkColorStrategy,
+  kt as Dropdown,
+  jt as EmptyState,
+  mt as ErrorMessage,
+  nt as FONT_FAMILY_TOKENS,
+  it as FONT_WEIGHT_TOKENS,
+  yt as Form,
+  st as Info,
+  De as Input,
+  fe as InputWithLabel,
+  Ft as LIGHT_THEME,
+  ft as Label,
+  K as LightColorStrategy,
+  Ct as LoginBox,
+  Tt as Modal,
+  ze as NavLink,
+  Nt as NavbarGroup,
+  vt as Pagination,
+  bt as Radio,
+  y as SIDEBAR_TOKENS,
+  U as SPACING_TOKENS,
+  dt as Select,
+  re as Sidebar,
+  tt as SidebarGroup,
+  pe as SidebarHeader,
+  Ye as SidebarItem,
+  ht as Skeleton,
+  T as SpacingTokenFactory,
+  z as TYPOGRAPHY_TOKENS,
+  Et as Table,
+  L as Text,
+  ut as Textarea,
+  It as ThemeProvider,
+  ye as TokensFactory,
+  gt as Tooltip,
+  N as TypographyTokenFactory,
+  Lt as createTokenSet,
+  At as defaultTokensFactory,
+  $t as getBreakpoint,
+  lt as getColor,
+  S as getColorClass,
+  Rt as getMediaQuery,
+  Ue as getNestedIndentClass,
+  St as getSpacing,
+  _t as getSpacingClass,
+  ot as getTypography,
+  F as getTypographyClasses,
+  Bt as useTheme
 };