@fabio.caffarello/react-design-system 1.4.1 → 1.5.1

package/dist/index.js

@@ -1,6 +1,6 @@
-import le, { useState as M, useRef as Y, useEffect as z } from "react";
-import { createPortal as oe } from "react-dom";
-var A = { exports: {} }, _ = {};
+import ie, { useState as Y, useRef as z, useEffect as F } from "react";
+import { createPortal as ce } from "react-dom";
+var O = { exports: {} }, _ = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -11,10 +11,10 @@ var A = { exports: {} }, _ = {};
  * LICENSE file in the root directory of this source tree.
  */
 var J;
-function ie() {
+function de() {
   if (J) return _;
   J = 1;
-  var t = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  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) {
@@ -23,16 +23,16 @@ function ie() {
         c !== "key" && (o[c] = l[c]);
     } else o = l;
     return l = o.ref, {
-      $$typeof: t,
+      $$typeof: s,
       type: n,
       key: i,
       ref: l !== void 0 ? l : null,
       props: o
     };
   }
-  return _.Fragment = s, _.jsx = a, _.jsxs = a, _;
+  return _.Fragment = t, _.jsx = a, _.jsxs = a, _;
 }
-var C = {};
+var R = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,245 +42,245 @@ var C = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var G;
-function ce() {
-  return G || (G = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(e) {
-      if (e == null) return null;
-      if (typeof e == "function")
-        return e.$$typeof === se ? null : e.displayName || e.name || null;
-      if (typeof e == "string") return e;
-      switch (e) {
+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:
           return "Fragment";
-        case b:
+        case h:
           return "Profiler";
         case k:
           return "StrictMode";
-        case K:
+        case re:
           return "Suspense";
-        case ee:
+        case se:
           return "SuspenseList";
-        case te:
+        case ae:
           return "Activity";
       }
-      if (typeof e == "object")
-        switch (typeof e.tag == "number" && console.error(
+      if (typeof r == "object")
+        switch (typeof r.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
-        ), e.$$typeof) {
+        ), r.$$typeof) {
           case w:
             return "Portal";
-          case Z:
-            return e.displayName || "Context";
-          case T:
-            return (e._context.displayName || "Context") + ".Consumer";
-          case Q:
-            var d = e.render;
-            return e = e.displayName, e || (e = d.displayName || d.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case re:
-            return d = e.displayName || null, d !== null ? d : t(e.type) || "Memo";
-          case O:
-            d = e._payload, e = e._init;
+          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;
             try {
-              return t(e(d));
+              return s(r(u));
             } catch {
             }
         }
       return null;
     }
-    function s(e) {
-      return "" + e;
+    function t(r) {
+      return "" + r;
     }
-    function a(e) {
+    function a(r) {
       try {
-        s(e);
-        var d = !1;
+        t(r);
+        var u = !1;
       } catch {
-        d = !0;
+        u = !0;
       }
-      if (d) {
-        d = console;
-        var p = d.error, v = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (u) {
+        u = console;
+        var p = u.error, g = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
         return p.call(
-          d,
+          u,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          v
-        ), s(e);
+          g
+        ), t(r);
       }
     }
-    function n(e) {
-      if (e === f) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === O)
+    function n(r) {
+      if (r === f) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === L)
         return "<...>";
       try {
-        var d = t(e);
-        return d ? "<" + d + ">" : "<...>";
+        var u = s(r);
+        return u ? "<" + u + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function l() {
-      var e = L.A;
-      return e === null ? null : e.getOwner();
+      var r = B.A;
+      return r === null ? null : r.getOwner();
     }
     function o() {
       return Error("react-stack-top-frame");
     }
-    function i(e) {
-      if (D.call(e, "key")) {
-        var d = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (d && d.isReactWarning) return !1;
+    function i(r) {
+      if (W.call(r, "key")) {
+        var u = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (u && u.isReactWarning) return !1;
       }
-      return e.key !== void 0;
+      return r.key !== void 0;
     }
-    function c(e, d) {
+    function c(r, u) {
       function p() {
-        W || (W = !0, console.error(
+        P || (P = !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)",
-          d
+          u
         ));
       }
-      p.isReactWarning = !0, Object.defineProperty(e, "key", {
+      p.isReactWarning = !0, Object.defineProperty(r, "key", {
         get: p,
         configurable: !0
       });
     }
-    function u() {
-      var e = t(this.type);
-      return P[e] || (P[e] = !0, console.error(
+    function d() {
+      var r = s(this.type);
+      return V[r] || (V[r] = !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."
-      )), e = this.props.ref, e !== void 0 ? e : null;
+      )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function h(e, d, p, v, S, B) {
-      var g = p.ref;
-      return e = {
+    function b(r, u, p, g, A, I) {
+      var v = p.ref;
+      return r = {
         $$typeof: N,
-        type: e,
-        key: d,
+        type: r,
+        key: u,
         props: p,
-        _owner: v
-      }, (g !== void 0 ? g : null) !== null ? Object.defineProperty(e, "ref", {
+        _owner: g
+      }, (v !== void 0 ? v : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: u
-      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        get: d
+      }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: 0
-      }), Object.defineProperty(e, "_debugInfo", {
+      }), Object.defineProperty(r, "_debugInfo", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: null
-      }), Object.defineProperty(e, "_debugStack", {
+      }), Object.defineProperty(r, "_debugStack", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: S
-      }), Object.defineProperty(e, "_debugTask", {
+        value: A
+      }), Object.defineProperty(r, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: B
-      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+        value: I
+      }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function y(e, d, p, v, S, B) {
-      var g = d.children;
-      if (g !== void 0)
-        if (v)
-          if (ae(g)) {
-            for (v = 0; v < g.length; v++)
-              m(g[v]);
-            Object.freeze && Object.freeze(g);
+    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);
           } 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(g);
-      if (D.call(d, "key")) {
-        g = t(e);
-        var E = Object.keys(d).filter(function(ne) {
-          return ne !== "key";
+        else m(v);
+      if (W.call(u, "key")) {
+        v = s(r);
+        var C = Object.keys(u).filter(function(oe) {
+          return oe !== "key";
         });
-        v = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", U[g + v] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+        g = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", U[v + g] || (C = 0 < C.length ? "{" + C.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} />`,
-          v,
           g,
-          E,
-          g
-        ), U[g + v] = !0);
+          v,
+          C,
+          v
+        ), U[v + g] = !0);
       }
-      if (g = null, p !== void 0 && (a(p), g = "" + p), i(d) && (a(d.key), g = "" + d.key), "key" in d) {
+      if (v = null, p !== void 0 && (a(p), v = "" + p), i(u) && (a(u.key), v = "" + u.key), "key" in u) {
         p = {};
-        for (var I in d)
-          I !== "key" && (p[I] = d[I]);
-      } else p = d;
-      return g && c(
+        for (var M in u)
+          M !== "key" && (p[M] = u[M]);
+      } else p = u;
+      return v && c(
         p,
-        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), h(
-        e,
-        g,
+        typeof r == "function" ? r.displayName || r.name || "Unknown" : r
+      ), b(
+        r,
+        v,
         p,
         l(),
-        S,
-        B
+        A,
+        I
       );
     }
-    function m(e) {
-      x(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? x(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    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 x(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === N;
+    function x(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === N;
     }
-    var j = le, N = Symbol.for("react.transitional.element"), w = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), k = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), Z = Symbol.for("react.context"), Q = Symbol.for("react.forward_ref"), K = Symbol.for("react.suspense"), ee = Symbol.for("react.suspense_list"), re = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), se = Symbol.for("react.client.reference"), L = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, D = Object.prototype.hasOwnProperty, ae = Array.isArray, $ = console.createTask ? console.createTask : function() {
+    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() {
       return null;
     };
-    j = {
-      react_stack_bottom_frame: function(e) {
-        return e();
+    y = {
+      react_stack_bottom_frame: function(r) {
+        return r();
       }
     };
-    var W, P = {}, V = j.react_stack_bottom_frame.bind(
-      j,
+    var P, V = {}, q = y.react_stack_bottom_frame.bind(
+      y,
       o
-    )(), q = $(n(o)), U = {};
-    C.Fragment = f, C.jsx = function(e, d, p) {
-      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        d,
+    )(), G = $(n(o)), U = {};
+    R.Fragment = f, R.jsx = function(r, u, p) {
+      var g = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return j(
+        r,
+        u,
         p,
         !1,
-        v ? Error("react-stack-top-frame") : V,
-        v ? $(n(e)) : q
+        g ? Error("react-stack-top-frame") : q,
+        g ? $(n(r)) : G
       );
-    }, C.jsxs = function(e, d, p) {
-      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return y(
-        e,
-        d,
+    }, R.jsxs = function(r, u, p) {
+      var g = 1e4 > B.recentlyCreatedOwnerStacks++;
+      return j(
+        r,
+        u,
         p,
         !0,
-        v ? Error("react-stack-top-frame") : V,
-        v ? $(n(e)) : q
+        g ? Error("react-stack-top-frame") : q,
+        g ? $(n(r)) : G
       );
     };
-  })()), C;
+  })()), R;
 }
-var X;
-function de() {
-  return X || (X = 1, process.env.NODE_ENV === "production" ? A.exports = ie() : A.exports = ce()), A.exports;
+var H;
+function fe() {
+  return H || (H = 1, process.env.NODE_ENV === "production" ? O.exports = de() : O.exports = ue()), O.exports;
 }
-var r = de();
-function he({ variant: t = "info", className: s, ...a }) {
-  const n = [s || ""];
-  switch (t) {
+var e = fe();
+function je({ variant: s = "info", className: t, ...a }) {
+  const n = [t || ""];
+  switch (s) {
     case "warning": {
       n.push("bg-yellow-100 text-yellow-800 border-yellow-500");
       break;
@@ -295,7 +295,7 @@ function he({ variant: t = "info", className: s, ...a }) {
       break;
     }
   }
-  return /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ e.jsx(
     "div",
     {
       role: "alert",
@@ -304,9 +304,9 @@ function he({ variant: t = "info", className: s, ...a }) {
     }
   );
 }
-function F({
-  variant: t,
-  bold: s,
+function T({
+  variant: s,
+  bold: t,
   italic: a,
   className: n,
   as: l,
@@ -314,27 +314,27 @@ function F({
   ...i
 }) {
   const c = [n];
-  let u;
+  let d;
   if (l)
-    u = l;
+    d = l;
   else
-    switch (t) {
+    switch (s) {
       case "heading":
-        u = "h2";
+        d = "h2";
         break;
       case "list":
-        u = "li";
+        d = "li";
         break;
       case "paragraph":
       default:
-        u = "p";
+        d = "p";
         break;
     }
-  return s && c.push("font-bold"), a && c.push("italic"), o && c.push(`text-${o}`), /* @__PURE__ */ r.jsx(u, { className: c.join(" "), ...i });
+  return t && c.push("font-bold"), a && c.push("italic"), o && c.push(`text-${o}`), /* @__PURE__ */ e.jsx(d, { className: c.join(" "), ...i });
 }
-function ue({ className: t, ...s }) {
+function me({ className: s, ...t }) {
   const a = [
-    t,
+    s,
     "px-large",
     "border",
     "border-1",
@@ -344,22 +344,22 @@ function ue({ className: t, ...s }) {
     "h-form-element",
     "text-base"
   ];
-  return /* @__PURE__ */ r.jsx("input", { className: a.join(" "), ...s });
+  return /* @__PURE__ */ e.jsx("input", { className: a.join(" "), ...t });
 }
-function R({
-  className: t,
-  variant: s = "regular",
+function E({
+  className: s,
+  variant: t = "regular",
   ...a
 }) {
   const n = [
-    t,
+    s,
     "rounded",
     "h-form-element",
     "lh-form-element",
     "px-large",
     "text-base"
   ];
-  switch (s) {
+  switch (t) {
     case "error":
       n.push("bg-red-light", "text-red-dark", "font-bold");
       break;
@@ -371,15 +371,15 @@ function R({
       n.push("bg-blue-light", "text-blue-dark", "font-bold");
       break;
   }
-  return /* @__PURE__ */ r.jsx("button", { className: n.join(" "), ...a });
+  return /* @__PURE__ */ e.jsx("button", { className: n.join(" "), ...a });
 }
-function fe({ className: t, ...s }) {
-  const a = [t, "p-large", "bg-bg", "rounded", "shadow-card"];
-  return /* @__PURE__ */ r.jsx("div", { className: a.join(" "), ...s });
+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 pe({
-  variant: t = "neutral",
-  className: s = "",
+function ye({
+  variant: s = "neutral",
+  className: t = "",
   children: a,
   ...n
 }) {
@@ -400,10 +400,10 @@ function pe({
     neutral: "bg-gray-100 text-gray-800 border-gray-500"
   }, i = [
     ...l,
-    o[t],
-    s
+    o[s],
+    t
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ e.jsx(
     "span",
     {
       role: "status",
@@ -414,9 +414,9 @@ function pe({
     }
   );
 }
-function ve({
-  options: t,
-  placeholder: s,
+function Ne({
+  options: s,
+  placeholder: t,
   error: a = !1,
   className: n = "",
   ...l
@@ -437,7 +437,7 @@ function ve({
     i,
     n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ e.jsxs(
     "select",
     {
       className: c,
@@ -445,23 +445,23 @@ function ve({
       "aria-describedby": a ? `${l.id}-error` : void 0,
       ...l,
       children: [
-        s && /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: s }),
-        t.map((u) => /* @__PURE__ */ r.jsx(
+        t && /* @__PURE__ */ e.jsx("option", { value: "", disabled: !0, children: t }),
+        s.map((d) => /* @__PURE__ */ e.jsx(
           "option",
           {
-            value: u.value,
-            disabled: u.disabled,
-            children: u.label
+            value: d.value,
+            disabled: d.disabled,
+            children: d.label
           },
-          u.value
+          d.value
         ))
       ]
     }
   );
 }
-function ge({
-  error: t = !1,
-  resize: s = "vertical",
+function we({
+  error: s = !1,
+  resize: t = "vertical",
   className: a = "",
   ...n
 }) {
@@ -481,25 +481,25 @@ function ge({
     both: "resize",
     horizontal: "resize-x",
     vertical: "resize-y"
-  }, i = t ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
+  }, i = s ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
     ...l,
-    o[s],
+    o[t],
     i,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ e.jsx(
     "textarea",
     {
       className: c,
-      "aria-invalid": t,
-      "aria-describedby": t && n.id ? `${n.id}-error` : void 0,
+      "aria-invalid": s,
+      "aria-describedby": s && n.id ? `${n.id}-error` : void 0,
       ...n
     }
   );
 }
-function ye({
-  variant: t = "default",
-  className: s = "",
+function ke({
+  variant: s = "default",
+  className: t = "",
   children: a,
   ...n
 }) {
@@ -514,14 +514,14 @@ function ye({
     optional: "after:content-['(optional)'] after:ml-1 after:text-gray-400 after:font-normal"
   }, i = [
     ...l,
-    o[t],
-    s
+    o[s],
+    t
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("label", { className: i, ...n, children: a });
+  return /* @__PURE__ */ e.jsx("label", { className: i, ...n, children: a });
 }
-function je({
-  message: t,
-  id: s,
+function Ce({
+  message: s,
+  id: t,
   className: a = "",
   ...n
 }) {
@@ -536,23 +536,23 @@ function je({
     ],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ e.jsxs(
     "div",
     {
       role: "alert",
-      id: s,
+      id: t,
       className: o,
       "aria-live": "polite",
       ...n,
       children: [
-        /* @__PURE__ */ r.jsx(
+        /* @__PURE__ */ e.jsx(
           "svg",
           {
             className: "h-4 w-4 flex-shrink-0",
             fill: "currentColor",
             viewBox: "0 0 20 20",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ r.jsx(
+            children: /* @__PURE__ */ e.jsx(
               "path",
               {
                 fillRule: "evenodd",
@@ -562,18 +562,19 @@ function je({
             )
           }
         ),
-        /* @__PURE__ */ r.jsx("span", { children: t })
+        /* @__PURE__ */ e.jsx("span", { children: s })
       ]
     }
   );
 }
-function me({
-  variant: t = "default",
-  className: s = "",
-  children: a,
-  ...n
+function be({
+  variant: s = "default",
+  icon: t,
+  className: a = "",
+  children: n,
+  ...l
 }) {
-  const l = [
+  const o = [
     "inline-flex",
     "items-center",
     "px-1",
@@ -582,63 +583,69 @@ function me({
     "text-sm",
     "font-medium",
     "transition-colors"
-  ], o = {
+  ], i = {
     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"
-  }, i = [
-    ...l,
-    o[t],
-    s
+  }, c = [
+    ...o,
+    i[s],
+    a
   ].filter(Boolean).join(" ");
-  return t === "disabled" ? /* @__PURE__ */ r.jsx("span", { className: i, "aria-disabled": "true", children: a }) : /* @__PURE__ */ r.jsx("a", { className: i, ...n, children: a });
+  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
+  ] });
 }
-function Ne({
-  content: t,
-  children: s,
+function Ee({
+  content: s,
+  children: t,
   position: a = "top",
   delay: n = 200,
   className: l = "",
   ...o
 }) {
-  const [i, c] = M(!1), [u, h] = M(null), y = () => {
+  const [i, c] = Y(!1), [d, b] = Y(null), j = () => {
     const N = setTimeout(() => {
       c(!0);
     }, n);
-    h(N);
+    b(N);
   }, m = () => {
-    u && (clearTimeout(u), h(null)), c(!1);
+    d && (clearTimeout(d), b(null)), c(!1);
   }, x = {
     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"
-  }, j = {
+  }, y = {
     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__ */ r.jsxs(
+  return /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: `relative inline-block ${l}`,
-      onMouseEnter: y,
+      onMouseEnter: j,
       onMouseLeave: m,
       ...o,
       children: [
-        s,
-        i && /* @__PURE__ */ r.jsxs(
+        t,
+        i && /* @__PURE__ */ e.jsxs(
           "div",
           {
             className: `absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap ${x[a]}`,
             role: "tooltip",
             children: [
-              t,
-              /* @__PURE__ */ r.jsx(
+              s,
+              /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: `absolute w-0 h-0 border-4 border-transparent ${j[a]}`
+                  className: `absolute w-0 h-0 border-4 border-transparent ${y[a]}`
                 }
               )
             ]
@@ -648,9 +655,9 @@ function Ne({
     }
   );
 }
-function we({
-  variant: t = "text",
-  width: s,
+function _e({
+  variant: s = "text",
+  width: t,
   height: a,
   lines: n = 1,
   className: l = "",
@@ -665,29 +672,57 @@ function we({
     card: "h-32",
     list: "h-12",
     circle: "rounded-full"
-  }, u = [
+  }, d = [
     ...i,
-    c[t],
+    c[s],
     l
-  ].filter(Boolean).join(" "), h = {};
-  return s && (h.width = s), a && (h.height = a), t === "text" && n > 1 ? /* @__PURE__ */ r.jsx("div", { className: "space-y-2", ...o, children: Array.from({ length: n }).map((y, m) => /* @__PURE__ */ r.jsx(
+  ].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(
     "div",
     {
-      className: u,
-      style: m === n - 1 ? { width: "75%" } : h
+      className: d,
+      style: m === n - 1 ? { width: "75%" } : b
     },
     m
-  )) }) : /* @__PURE__ */ r.jsx("div", { className: u, style: h, ...o });
+  )) }) : /* @__PURE__ */ e.jsx("div", { className: d, style: b, ...o });
 }
-function H({ label: t, ...s }) {
-  return s.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ r.jsxs("div", { className: "mb-medium grid gap-small", children: [
-    /* @__PURE__ */ r.jsx(F, { as: "label", htmlFor: s.id, className: "cursor-pointer", children: t }),
-    /* @__PURE__ */ r.jsx(ue, { ...s })
+function he({
+  href: s,
+  isActive: t = !1,
+  icon: a,
+  children: n,
+  className: l = "",
+  ...o
+}) {
+  const i = [
+    "flex",
+    "items-center",
+    "px-4",
+    "py-2",
+    "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
+  ].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 })
   ] });
 }
-function ke({
-  variant: t = "default",
-  padding: s = "medium",
+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 Re({
+  variant: s = "default",
+  padding: t = "medium",
   className: a = "",
   children: n,
   ...l
@@ -707,41 +742,41 @@ function ke({
     small: "p-2",
     medium: "p-4",
     large: "p-6"
-  }, u = [
+  }, d = [
     ...o,
-    i[t],
-    c[s],
+    i[s],
+    c[t],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("div", { className: u, ...l, children: n });
+  return /* @__PURE__ */ e.jsx("div", { className: d, ...l, children: n });
 }
-function Ee({
-  children: t,
-  onSubmit: s,
+function Te({
+  children: s,
+  onSubmit: t,
   loading: a = !1,
   error: n = null,
   success: l = null,
   className: o = "",
   ...i
 }) {
-  const u = [
+  const d = [
     ...[
       "space-y-4"
     ],
     o
-  ].filter(Boolean).join(" "), h = (y) => {
-    y.preventDefault(), s && !a && s(y);
+  ].filter(Boolean).join(" "), b = (j) => {
+    j.preventDefault(), t && !a && t(j);
   };
-  return /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ e.jsxs(
     "form",
     {
-      className: u,
-      onSubmit: h,
+      className: d,
+      onSubmit: b,
       noValidate: !0,
       ...i,
       children: [
-        t,
-        n && /* @__PURE__ */ r.jsx(
+        s,
+        n && /* @__PURE__ */ e.jsx(
           "div",
           {
             role: "alert",
@@ -749,7 +784,7 @@ function Ee({
             children: n
           }
         ),
-        l && /* @__PURE__ */ r.jsx(
+        l && /* @__PURE__ */ e.jsx(
           "div",
           {
             role: "alert",
@@ -761,9 +796,9 @@ function Ee({
     }
   );
 }
-function _e({
-  items: t,
-  separator: s = "/",
+function Se({
+  items: s,
+  separator: t = "/",
   className: a = "",
   ...n
 }) {
@@ -776,17 +811,17 @@ function _e({
     ],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("nav", { "aria-label": "Breadcrumb", className: o, ...n, children: /* @__PURE__ */ r.jsx("ol", { className: "flex items-center space-x-2", children: t.map((i, c) => {
-    const u = c === t.length - 1;
-    return /* @__PURE__ */ r.jsxs("li", { className: "flex items-center", children: [
-      c > 0 && /* @__PURE__ */ r.jsx("span", { className: "mx-2 text-gray-400", "aria-hidden": "true", children: s }),
-      u ? /* @__PURE__ */ r.jsx("span", { className: "text-gray-900 font-medium", "aria-current": "page", children: i.label }) : i.href ? /* @__PURE__ */ r.jsx(me, { href: i.href, variant: "default", children: i.label }) : /* @__PURE__ */ r.jsx("span", { className: "text-gray-500", children: i.label })
+  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);
   }) }) });
 }
-function Ce({
-  currentPage: t,
-  totalPages: s,
+function Ae({
+  currentPage: s,
+  totalPages: t,
   onPageChange: a,
   totalItems: n,
   itemsPerPage: l,
@@ -794,33 +829,33 @@ function Ce({
   className: i = "",
   ...c
 }) {
-  const u = () => {
-    t > 1 && a(t - 1);
-  }, h = () => {
-    t < s && a(t + 1);
-  }, y = (f) => {
-    f >= 1 && f <= s && f !== t && a(f);
+  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 (s <= 5)
-      for (let b = 1; b <= s; b++)
-        f.push(b);
-    else if (t <= 3) {
-      for (let b = 1; b <= 4; b++)
-        f.push(b);
-      f.push("ellipsis"), f.push(s);
-    } else if (t >= s - 2) {
+    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 b = s - 3; b <= s; b++)
-        f.push(b);
+      for (let h = t - 3; h <= t; h++)
+        f.push(h);
     } else {
       f.push(1), f.push("ellipsis");
-      for (let b = t - 1; b <= t + 1; b++)
-        f.push(b);
-      f.push("ellipsis"), f.push(s);
+      for (let h = s - 1; h <= s + 1; h++)
+        f.push(h);
+      f.push("ellipsis"), f.push(t);
     }
     return f;
-  }, x = n && l ? (t - 1) * l + 1 : void 0, j = n && l ? Math.min(t * l, n) : void 0, w = [
+  }, x = n && l ? (s - 1) * l + 1 : void 0, y = n && l ? Math.min(s * l, n) : void 0, w = [
     ...[
       "flex",
       "items-center",
@@ -830,59 +865,59 @@ function Ce({
     ],
     i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsxs("nav", { className: w, "aria-label": "Pagination", ...c, children: [
-    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ r.jsx(
-        R,
+  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,
         {
           variant: "secondary",
-          onClick: u,
-          disabled: t === 1,
+          onClick: d,
+          disabled: s === 1,
           className: "px-3 py-1 text-sm",
           children: "Previous"
         }
       ),
-      /* @__PURE__ */ r.jsx("div", { className: "flex items-center gap-1", children: m().map((f, k) => {
+      /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1", children: m().map((f, k) => {
         if (f === "ellipsis")
-          return /* @__PURE__ */ r.jsx("span", { className: "px-2 text-gray-500", children: "..." }, `ellipsis-${k}`);
-        const b = f, T = b === t;
-        return /* @__PURE__ */ r.jsx(
+          return /* @__PURE__ */ e.jsx("span", { className: "px-2 text-gray-500", children: "..." }, `ellipsis-${k}`);
+        const h = f, S = h === s;
+        return /* @__PURE__ */ e.jsx(
           "button",
           {
-            onClick: () => y(b),
-            className: `px-3 py-1 text-sm rounded ${T ? "bg-indigo-600 text-white" : "text-gray-700 hover:bg-gray-100"}`,
-            "aria-current": T ? "page" : void 0,
-            "aria-label": `Go to page ${b}`,
-            children: b
+            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
           },
-          b
+          h
         );
       }) }),
-      /* @__PURE__ */ r.jsx(
-        R,
+      /* @__PURE__ */ e.jsx(
+        E,
         {
           variant: "secondary",
-          onClick: h,
-          disabled: t === s,
+          onClick: b,
+          disabled: s === t,
           className: "px-3 py-1 text-sm",
           children: "Next"
         }
       )
     ] }),
-    o && n && l && /* @__PURE__ */ r.jsxs("div", { className: "text-sm text-gray-700", children: [
+    o && n && l && /* @__PURE__ */ e.jsxs("div", { className: "text-sm text-gray-700", children: [
       "Showing ",
       x,
       " to ",
-      j,
+      y,
       " of ",
       n,
       " results"
     ] })
   ] });
 }
-function Re({
-  title: t,
-  message: s,
+function Oe({
+  title: s,
+  message: t,
   actionLabel: a,
   onAction: n,
   illustration: l,
@@ -890,7 +925,7 @@ function Re({
   className: i = "",
   ...c
 }) {
-  const h = [
+  const b = [
     ...[
       "flex",
       "flex-col",
@@ -901,52 +936,52 @@ function Re({
       "px-4"
     ],
     i
-  ].filter(Boolean).join(" "), y = o === "withAction" || a && n, m = o === "withIllustration" || l;
-  return /* @__PURE__ */ r.jsxs("div", { className: h, ...c, children: [
-    m && l && /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: l }),
-    /* @__PURE__ */ r.jsx(F, { as: "h3", className: "text-lg font-semibold text-gray-900 mb-2", children: t }),
-    /* @__PURE__ */ r.jsx(F, { as: "p", className: "text-sm text-gray-500 mb-6 max-w-sm", children: s }),
-    y && a && n && /* @__PURE__ */ r.jsx(R, { variant: "regular", onClick: n, children: a })
+  ].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 })
   ] });
 }
-function Te({
-  trigger: t,
-  items: s,
+function Le({
+  trigger: s,
+  items: t,
   align: a = "right",
   variant: n = "default",
   className: l = "",
   ...o
 }) {
-  const [i, c] = M(!1), u = Y(null);
-  z(() => {
+  const [i, c] = Y(!1), d = z(null);
+  F(() => {
     const m = (x) => {
-      u.current && !u.current.contains(x.target) && c(!1);
+      d.current && !d.current.contains(x.target) && c(!1);
     };
     return i && document.addEventListener("mousedown", m), () => {
       document.removeEventListener("mousedown", m);
     };
   }, [i]);
-  const h = (m) => {
+  const b = (m) => {
     m.disabled || (m.onClick(), c(!1));
-  }, y = a === "right" ? "right-0" : "left-0";
-  return /* @__PURE__ */ r.jsxs("div", { className: `relative inline-block ${l}`, ref: u, ...o, children: [
-    /* @__PURE__ */ r.jsx("div", { onClick: () => c(!i), children: t }),
-    i && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
-      /* @__PURE__ */ r.jsx(
+  }, 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(
         "div",
         {
           className: "fixed inset-0 z-10",
           onClick: () => c(!1)
         }
       ),
-      /* @__PURE__ */ r.jsx(
+      /* @__PURE__ */ e.jsx(
         "div",
         {
-          className: `absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${y}`,
+          className: `absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${j}`,
           role: "menu",
           "aria-orientation": "vertical",
-          children: /* @__PURE__ */ r.jsx("div", { className: "py-1", role: "none", children: s.map((m, x) => {
-            const j = [
+          children: /* @__PURE__ */ e.jsx("div", { className: "py-1", role: "none", children: t.map((m, x) => {
+            const y = [
               "block",
               "px-4",
               "py-2",
@@ -955,12 +990,12 @@ function Te({
               "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"
             ].filter(Boolean).join(" ");
-            return /* @__PURE__ */ r.jsx(
+            return /* @__PURE__ */ e.jsx(
               "button",
               {
                 type: "button",
-                className: j,
-                onClick: () => h(m),
+                className: y,
+                onClick: () => b(m),
                 disabled: m.disabled,
                 role: "menuitem",
                 children: m.label
@@ -973,12 +1008,123 @@ function Te({
     ] })
   ] });
 }
-function Se({
-  onForgotPasswordClick: t,
-  className: s,
+function pe({
+  title: s,
+  children: t,
+  className: a = "",
+  ...n
+}) {
+  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 })
+  ] });
+}
+function Q({
+  title: s,
+  onClose: t,
+  showCloseButton: a = !1,
+  children: n,
+  className: l = "",
+  ...o
+}) {
+  const c = [
+    ...[
+      "flex",
+      "items-center",
+      "justify-between",
+      "px-4",
+      "py-4",
+      "border-b",
+      "border-gray-200"
+    ],
+    l
+  ].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,
+        {
+          variant: "secondary",
+          onClick: t,
+          className: "p-1",
+          "aria-label": "Close sidebar",
+          children: /* @__PURE__ */ e.jsx(
+            "svg",
+            {
+              className: "h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              children: /* @__PURE__ */ e.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M6 18L18 6M6 6l12 12"
+                }
+              )
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+function Be({
+  label: s,
+  isActive: t = !1,
+  icon: a,
+  onClick: n,
+  className: l = "",
+  children: o,
+  ...i
+}) {
+  const c = [
+    "inline-flex",
+    "items-center",
+    "px-3",
+    "py-2",
+    "text-sm",
+    "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,
+    l
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs(
+    "button",
+    {
+      type: "button",
+      className: b,
+      onClick: n,
+      "aria-expanded": t,
+      "aria-haspopup": "true",
+      ...i,
+      children: [
+        a && /* @__PURE__ */ e.jsx("span", { className: "mr-2", children: a }),
+        /* @__PURE__ */ e.jsx("span", { children: s }),
+        o
+      ]
+    }
+  );
+}
+function $e({
+  onForgotPasswordClick: s,
+  className: t,
   ...a
 }) {
-  return /* @__PURE__ */ r.jsx(fe, { className: s, children: /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ e.jsx(xe, { className: t, children: /* @__PURE__ */ e.jsxs(
     "form",
     {
       ...a,
@@ -986,16 +1132,16 @@ function Se({
         n.preventDefault(), a.onSubmit && a.onSubmit(n);
       },
       children: [
-        /* @__PURE__ */ r.jsx(
-          H,
+        /* @__PURE__ */ e.jsx(
+          Z,
           {
             id: "login-email",
             label: "Your email",
             placeholder: "myname@email.com"
           }
         ),
-        /* @__PURE__ */ r.jsx(
-          H,
+        /* @__PURE__ */ e.jsx(
+          Z,
           {
             id: "login-password",
             label: "Your password",
@@ -1003,48 +1149,48 @@ function Se({
             type: "password"
           }
         ),
-        /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ r.jsx(
-            R,
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ e.jsx(
+            E,
             {
               variant: "secondary",
               type: "button",
-              onClick: t,
+              onClick: s,
               children: "Forgot password?"
             }
           ),
-          /* @__PURE__ */ r.jsx(R, { variant: "regular", type: "submit", children: "Sign in" })
+          /* @__PURE__ */ e.jsx(E, { variant: "regular", type: "submit", children: "Sign in" })
         ] })
       ]
     }
   ) });
 }
-function Ae({
-  isOpen: t,
-  onClose: s,
+function Ie({
+  isOpen: s,
+  onClose: t,
   title: a,
   children: n,
   variant: l = "default",
   showCloseButton: o = !0,
   footer: i,
   className: c = "",
-  ...u
+  ...d
 }) {
-  const h = Y(null), y = Y(null);
-  if (z(() => {
-    if (!t) return;
-    y.current = document.activeElement;
+  const b = z(null), j = z(null);
+  if (F(() => {
+    if (!s) return;
+    j.current = document.activeElement;
     const f = setTimeout(() => {
-      h.current?.focus();
-    }, 0), k = (b) => {
-      b.key === "Escape" && s();
+      b.current?.focus();
+    }, 0), k = (h) => {
+      h.key === "Escape" && t();
     };
     return document.addEventListener("keydown", k), () => {
-      clearTimeout(f), document.removeEventListener("keydown", k), y.current?.focus();
+      clearTimeout(f), document.removeEventListener("keydown", k), j.current?.focus();
     };
-  }, [t, s]), z(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  }, [s, t]), F(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [t]), !t) return null;
+  }), [s]), !s) return null;
   const m = [
     "fixed",
     "inset-0",
@@ -1070,7 +1216,7 @@ function Ae({
     }[l],
     "p-6",
     c
-  ].filter(Boolean).join(" "), w = /* @__PURE__ */ r.jsxs(
+  ].filter(Boolean).join(" "), w = /* @__PURE__ */ e.jsxs(
     "div",
     {
       className: m.join(" "),
@@ -1078,35 +1224,35 @@ function Ae({
       "aria-modal": "true",
       "aria-labelledby": a ? "modal-title" : void 0,
       onClick: (f) => {
-        f.target === f.currentTarget && s();
+        f.target === f.currentTarget && t();
       },
       children: [
-        /* @__PURE__ */ r.jsx("div", { className: x.join(" "), "aria-hidden": "true" }),
-        /* @__PURE__ */ r.jsx("div", { className: "flex min-h-full items-center justify-center p-4", children: /* @__PURE__ */ r.jsxs(
+        /* @__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(
           "div",
           {
-            ref: h,
+            ref: b,
             tabIndex: -1,
             className: N,
             onClick: (f) => f.stopPropagation(),
-            ...u,
+            ...d,
             children: [
-              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 }),
-                o && /* @__PURE__ */ r.jsx(
+              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(
                   "button",
                   {
-                    onClick: s,
+                    onClick: t,
                     className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ r.jsx(
+                    children: /* @__PURE__ */ e.jsx(
                       "svg",
                       {
                         className: "h-6 w-6",
                         fill: "none",
                         viewBox: "0 0 24 24",
                         stroke: "currentColor",
-                        children: /* @__PURE__ */ r.jsx(
+                        children: /* @__PURE__ */ e.jsx(
                           "path",
                           {
                             strokeLinecap: "round",
@@ -1120,20 +1266,20 @@ function Ae({
                   }
                 )
               ] }),
-              !a && o && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ r.jsx(
+              !a && o && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ e.jsx(
                 "button",
                 {
-                  onClick: s,
+                  onClick: t,
                   className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                   "aria-label": "Close modal",
-                  children: /* @__PURE__ */ r.jsx(
+                  children: /* @__PURE__ */ e.jsx(
                     "svg",
                     {
                       className: "h-6 w-6",
                       fill: "none",
                       viewBox: "0 0 24 24",
                       stroke: "currentColor",
-                      children: /* @__PURE__ */ r.jsx(
+                      children: /* @__PURE__ */ e.jsx(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -1146,29 +1292,29 @@ function Ae({
                   )
                 }
               ) }),
-              /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: n }),
-              i && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end gap-2 mt-4", children: i })
+              /* @__PURE__ */ e.jsx("div", { className: "mb-4", children: n }),
+              i && /* @__PURE__ */ e.jsx("div", { className: "flex justify-end gap-2 mt-4", children: i })
             ]
           }
         ) })
       ]
     }
   );
-  return typeof window < "u" ? oe(w, document.body) : w;
+  return typeof window < "u" ? ce(w, document.body) : w;
 }
-function Oe({
-  columns: t,
-  data: s,
+function Me({
+  columns: s,
+  data: t,
   loading: a = !1,
   onSort: n,
   sortColumn: l,
   sortDirection: o,
   emptyMessage: i = "No data available",
   className: c = "",
-  ...u
+  ...d
 }) {
-  const h = (x) => {
-    if (!n || !t.find((N) => N.key === x)?.sortable)
+  const b = (x) => {
+    if (!n || !s.find((N) => N.key === x)?.sortable)
       return;
     n(x, l === x && o === "asc" ? "desc" : "asc");
   }, m = [
@@ -1179,48 +1325,92 @@ function Oe({
     ],
     c
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r.jsxs("table", { className: m, ...u, children: [
-    /* @__PURE__ */ r.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ r.jsx("tr", { children: t.map((x) => /* @__PURE__ */ r.jsx(
+  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(
       "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 && h(x.key),
-        children: /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ r.jsx("span", { children: x.label }),
-          x.sortable && l === x.key && /* @__PURE__ */ r.jsx("span", { className: "text-gray-400", children: o === "asc" ? "↑" : "↓" })
+        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" ? "↑" : "↓" })
         ] })
       },
       x.key
     )) }) }),
-    /* @__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..." }) }) : s.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: i }) }) : s.map((x, j) => /* @__PURE__ */ r.jsx("tr", { className: "hover:bg-gray-50", children: t.map((N) => {
+    /* @__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__ */ r.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: N.render ? N.render(w, x) : w }, N.key);
-    }) }, j)) })
+      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)) })
   ] }) });
 }
+function D({
+  variant: s = "default",
+  title: t,
+  showHeader: a = !0,
+  onClose: n,
+  children: l,
+  className: o = "",
+  ...i
+}) {
+  const c = [
+    "flex",
+    "flex-col",
+    "bg-white",
+    "border-r",
+    "border-gray-200",
+    "h-full"
+  ], d = {
+    default: "w-64",
+    collapsed: "w-16"
+  }, b = [
+    ...c,
+    d[s],
+    o
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e.jsxs("aside", { className: b, ...i, children: [
+    a && t && /* @__PURE__ */ e.jsx(
+      Q,
+      {
+        title: t,
+        onClose: n,
+        showCloseButton: !!n
+      }
+    ),
+    /* @__PURE__ */ e.jsx("nav", { className: "flex-1 overflow-y-auto py-4", children: l })
+  ] });
+}
+D.Group = pe;
+D.Item = he;
+D.Header = Q;
 export {
-  pe as Badge,
-  fe as BoxWrapper,
-  _e as Breadcrumb,
-  R as Button,
-  ke as Card,
-  Te as Dropdown,
-  Re as EmptyState,
-  je as ErrorMessage,
-  Ee as Form,
-  he as Info,
-  ue as Input,
-  H as InputWithLabel,
-  ye as Label,
-  Se as LoginBox,
-  Ae as Modal,
-  me as NavLink,
-  Ce as Pagination,
-  ve as Select,
-  we as Skeleton,
-  Oe as Table,
-  F as Text,
-  ge as Textarea,
-  Ne as Tooltip
+  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
 };