@fabio.caffarello/react-design-system 1.2.1 → 1.3.0

package/dist/index.js

@@ -1,5 +1,6 @@
-import te from "react";
-var _ = { exports: {} }, p = {};
+import ae, { useRef as P, useEffect as V } from "react";
+import { createPortal as ne } from "react-dom";
+var S = { exports: {} }, _ = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +10,29 @@ var _ = { exports: {} }, p = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var F;
-function ae() {
-  if (F) return p;
-  F = 1;
-  var t = Symbol.for("react.transitional.element"), o = Symbol.for("react.fragment");
-  function a(n, s, i) {
-    var b = null;
-    if (i !== void 0 && (b = "" + i), s.key !== void 0 && (b = "" + s.key), "key" in s) {
-      i = {};
-      for (var f in s)
-        f !== "key" && (i[f] = s[f]);
-    } else i = s;
-    return s = i.ref, {
-      $$typeof: t,
+var q;
+function le() {
+  if (q) return _;
+  q = 1;
+  var s = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+  function a(n, l, o) {
+    var c = null;
+    if (o !== void 0 && (c = "" + o), l.key !== void 0 && (c = "" + l.key), "key" in l) {
+      o = {};
+      for (var u in l)
+        u !== "key" && (o[u] = l[u]);
+    } else o = l;
+    return l = o.ref, {
+      $$typeof: s,
       type: n,
-      key: b,
-      ref: s !== void 0 ? s : null,
-      props: i
+      key: c,
+      ref: l !== void 0 ? l : null,
+      props: o
     };
   }
-  return p.Fragment = o, p.jsx = a, p.jsxs = a, p;
+  return _.Fragment = t, _.jsx = a, _.jsxs = a, _;
 }
-var x = {};
+var R = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,124 +42,124 @@ var x = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var D;
-function ne() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
-    function t(e) {
+var U;
+function oe() {
+  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
+    function s(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === K ? null : e.displayName || e.name || null;
+        return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case E:
+        case d:
           return "Fragment";
-        case q:
+        case f:
           return "Profiler";
-        case U:
+        case w:
           return "StrictMode";
-        case X:
+        case Z:
           return "Suspense";
-        case H:
-          return "SuspenseList";
         case Q:
+          return "SuspenseList";
+        case ee:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case B:
+          case N:
             return "Portal";
-          case V:
+          case X:
             return e.displayName || "Context";
-          case J:
+          case T:
             return (e._context.displayName || "Context") + ".Consumer";
-          case G:
-            var r = e.render;
-            return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case Z:
-            return r = e.displayName || null, r !== null ? r : t(e.type) || "Memo";
-          case R:
-            r = e._payload, e = e._init;
+          case H:
+            var i = e.render;
+            return e = e.displayName, e || (e = i.displayName || i.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case K:
+            return i = e.displayName || null, i !== null ? i : s(e.type) || "Memo";
+          case O:
+            i = e._payload, e = e._init;
             try {
-              return t(e(r));
+              return s(e(i));
             } catch {
             }
         }
       return null;
     }
-    function o(e) {
+    function t(e) {
       return "" + e;
     }
     function a(e) {
       try {
-        o(e);
-        var r = !1;
+        t(e);
+        var i = !1;
       } catch {
-        r = !0;
+        i = !0;
       }
-      if (r) {
-        r = console;
-        var l = r.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return l.call(
-          r,
+      if (i) {
+        i = console;
+        var b = i.error, p = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return b.call(
+          i,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          c
-        ), o(e);
+          p
+        ), t(e);
       }
     }
     function n(e) {
-      if (e === E) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === R)
+      if (e === d) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
         return "<...>";
       try {
-        var r = t(e);
-        return r ? "<" + r + ">" : "<...>";
+        var i = s(e);
+        return i ? "<" + i + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = j.A;
+    function l() {
+      var e = L.A;
       return e === null ? null : e.getOwner();
     }
-    function i() {
+    function o() {
       return Error("react-stack-top-frame");
     }
-    function b(e) {
-      if (A.call(e, "key")) {
-        var r = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (r && r.isReactWarning) return !1;
+    function c(e) {
+      if (M.call(e, "key")) {
+        var i = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (i && i.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function f(e, r) {
-      function l() {
-        P || (P = !0, console.error(
+    function u(e, i) {
+      function b() {
+        z || (z = !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)",
-          r
+          i
         ));
       }
-      l.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: l,
+      b.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: b,
         configurable: !0
       });
     }
     function m() {
-      var e = t(this.type);
-      return C[e] || (C[e] = !0, console.error(
+      var e = s(this.type);
+      return I[e] || (I[e] = !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;
     }
-    function M(e, r, l, c, h, T) {
-      var d = l.ref;
+    function j(e, i, b, p, C, B) {
+      var h = b.ref;
       return e = {
-        $$typeof: O,
+        $$typeof: v,
         type: e,
-        key: r,
-        props: l,
-        _owner: c
-      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
+        key: i,
+        props: b,
+        _owner: p
+      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: m
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
@@ -175,111 +176,111 @@ function ne() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: h
+        value: C
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: T
+        value: B
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function w(e, r, l, c, h, T) {
-      var d = r.children;
-      if (d !== void 0)
-        if (c)
-          if (ee(d)) {
-            for (c = 0; c < d.length; c++)
-              N(d[c]);
-            Object.freeze && Object.freeze(d);
+    function g(e, i, b, p, C, B) {
+      var h = i.children;
+      if (h !== void 0)
+        if (p)
+          if (se(h)) {
+            for (p = 0; p < h.length; p++)
+              k(h[p]);
+            Object.freeze && Object.freeze(h);
           } 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 N(d);
-      if (A.call(r, "key")) {
-        d = t(e);
-        var g = Object.keys(r).filter(function(re) {
-          return re !== "key";
+        else k(h);
+      if (M.call(i, "key")) {
+        h = s(e);
+        var E = Object.keys(i).filter(function(te) {
+          return te !== "key";
         });
-        c = 0 < g.length ? "{key: someKey, " + g.join(": ..., ") + ": ...}" : "{key: someKey}", I[d + c] || (g = 0 < g.length ? "{" + g.join(": ..., ") + ": ...}" : "{}", console.error(
+        p = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", W[h + p] || (E = 0 < E.length ? "{" + E.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} />`,
-          c,
-          d,
-          g,
-          d
-        ), I[d + c] = !0);
+          p,
+          h,
+          E,
+          h
+        ), W[h + p] = !0);
       }
-      if (d = null, l !== void 0 && (a(l), d = "" + l), b(r) && (a(r.key), d = "" + r.key), "key" in r) {
-        l = {};
-        for (var k in r)
-          k !== "key" && (l[k] = r[k]);
-      } else l = r;
-      return d && f(
-        l,
+      if (h = null, b !== void 0 && (a(b), h = "" + b), c(i) && (a(i.key), h = "" + i.key), "key" in i) {
+        b = {};
+        for (var Y in i)
+          Y !== "key" && (b[Y] = i[Y]);
+      } else b = i;
+      return h && u(
+        b,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), M(
+      ), j(
         e,
-        d,
-        l,
-        s(),
         h,
-        T
+        b,
+        l(),
+        C,
+        B
       );
     }
-    function N(e) {
-      S(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? S(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function k(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 S(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === O;
+    function x(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === v;
     }
-    var v = te, O = Symbol.for("react.transitional.element"), B = Symbol.for("react.portal"), E = Symbol.for("react.fragment"), U = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), J = Symbol.for("react.consumer"), V = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), X = Symbol.for("react.suspense"), H = Symbol.for("react.suspense_list"), Z = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), Q = Symbol.for("react.activity"), K = Symbol.for("react.client.reference"), j = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, A = Object.prototype.hasOwnProperty, ee = Array.isArray, y = console.createTask ? console.createTask : function() {
+    var y = ae, v = Symbol.for("react.transitional.element"), N = Symbol.for("react.portal"), d = Symbol.for("react.fragment"), w = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), X = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), Q = Symbol.for("react.suspense_list"), K = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), L = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, se = Array.isArray, $ = console.createTask ? console.createTask : function() {
       return null;
     };
-    v = {
+    y = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var P, C = {}, Y = v.react_stack_bottom_frame.bind(
-      v,
-      i
-    )(), $ = y(n(i)), I = {};
-    x.Fragment = E, x.jsx = function(e, r, l) {
-      var c = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return w(
+    var z, I = {}, F = y.react_stack_bottom_frame.bind(
+      y,
+      o
+    )(), D = $(n(o)), W = {};
+    R.Fragment = d, R.jsx = function(e, i, b) {
+      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return g(
         e,
-        r,
-        l,
+        i,
+        b,
         !1,
-        c ? Error("react-stack-top-frame") : Y,
-        c ? y(n(e)) : $
+        p ? Error("react-stack-top-frame") : F,
+        p ? $(n(e)) : D
       );
-    }, x.jsxs = function(e, r, l) {
-      var c = 1e4 > j.recentlyCreatedOwnerStacks++;
-      return w(
+    }, R.jsxs = function(e, i, b) {
+      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return g(
         e,
-        r,
-        l,
+        i,
+        b,
         !0,
-        c ? Error("react-stack-top-frame") : Y,
-        c ? y(n(e)) : $
+        p ? Error("react-stack-top-frame") : F,
+        p ? $(n(e)) : D
       );
     };
-  })()), x;
+  })()), R;
 }
-var L;
-function oe() {
-  return L || (L = 1, process.env.NODE_ENV === "production" ? _.exports = ae() : _.exports = ne()), _.exports;
+var J;
+function ie() {
+  return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = le() : S.exports = oe()), S.exports;
 }
-var u = oe();
-function ce({ variant: t = "info", className: o, ...a }) {
-  const n = [o || ""];
-  switch (t) {
+var r = ie();
+function xe({ 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;
@@ -294,7 +295,7 @@ function ce({ variant: t = "info", className: o, ...a }) {
       break;
     }
   }
-  return /* @__PURE__ */ u.jsx(
+  return /* @__PURE__ */ r.jsx(
     "div",
     {
       role: "alert",
@@ -303,21 +304,21 @@ function ce({ variant: t = "info", className: o, ...a }) {
     }
   );
 }
-function se({
-  variant: t,
-  bold: o,
+function ce({
+  variant: s,
+  bold: t,
   italic: a,
   className: n,
-  as: s,
-  color: i,
-  ...b
+  as: l,
+  color: o,
+  ...c
 }) {
-  const f = [n];
+  const u = [n];
   let m;
-  if (s)
-    m = s;
+  if (l)
+    m = l;
   else
-    switch (t) {
+    switch (s) {
       case "heading":
         m = "h2";
         break;
@@ -329,11 +330,11 @@ function se({
         m = "p";
         break;
     }
-  return o && f.push("font-bold"), a && f.push("italic"), i && f.push(`text-${i}`), /* @__PURE__ */ u.jsx(m, { className: f.join(" "), ...b });
+  return t && u.push("font-bold"), a && u.push("italic"), o && u.push(`text-${o}`), /* @__PURE__ */ r.jsx(m, { className: u.join(" "), ...c });
 }
-function le({ className: t, ...o }) {
+function de({ className: s, ...t }) {
   const a = [
-    t,
+    s,
     "px-large",
     "border",
     "border-1",
@@ -343,22 +344,22 @@ function le({ className: t, ...o }) {
     "h-form-element",
     "text-base"
   ];
-  return /* @__PURE__ */ u.jsx("input", { className: a.join(" "), ...o });
+  return /* @__PURE__ */ r.jsx("input", { className: a.join(" "), ...t });
 }
-function W({
-  className: t,
-  variant: o = "regular",
+function A({
+  className: s,
+  variant: t = "regular",
   ...a
 }) {
   const n = [
-    t,
+    s,
     "rounded",
     "h-form-element",
     "lh-form-element",
     "px-large",
     "text-base"
   ];
-  switch (o) {
+  switch (t) {
     case "error":
       n.push("bg-red-light", "text-red-dark", "font-bold");
       break;
@@ -370,19 +371,19 @@ function W({
       n.push("bg-blue-light", "text-blue-dark", "font-bold");
       break;
   }
-  return /* @__PURE__ */ u.jsx("button", { className: n.join(" "), ...a });
+  return /* @__PURE__ */ r.jsx("button", { className: n.join(" "), ...a });
 }
-function ie({ className: t, ...o }) {
-  const a = [t, "p-large", "bg-bg", "rounded", "shadow-card"];
-  return /* @__PURE__ */ u.jsx("div", { className: a.join(" "), ...o });
+function ue({ className: s, ...t }) {
+  const a = [s, "p-large", "bg-bg", "rounded", "shadow-card"];
+  return /* @__PURE__ */ r.jsx("div", { className: a.join(" "), ...t });
 }
-function de({
-  variant: t = "neutral",
-  className: o = "",
+function pe({
+  variant: s = "neutral",
+  className: t = "",
   children: a,
   ...n
 }) {
-  const s = [
+  const l = [
     "inline-flex",
     "items-center",
     "px-2",
@@ -391,36 +392,36 @@ function de({
     "text-xs",
     "font-medium",
     "border"
-  ], i = {
+  ], o = {
     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"
-  }, b = [
-    ...s,
-    i[t],
-    o
+  }, c = [
+    ...l,
+    o[s],
+    t
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u.jsx(
+  return /* @__PURE__ */ r.jsx(
     "span",
     {
       role: "status",
       "aria-label": typeof a == "string" ? a : void 0,
-      className: b,
+      className: c,
       ...n,
       children: a
     }
   );
 }
-function fe({
-  options: t,
-  placeholder: o,
+function he({
+  options: s,
+  placeholder: t,
   error: a = !1,
   className: n = "",
-  ...s
+  ...l
 }) {
-  const i = [
+  const o = [
     "block",
     "w-full",
     "rounded",
@@ -431,21 +432,21 @@ function fe({
     "focus:outline-none",
     "focus:ring-2",
     "focus:ring-offset-2"
-  ], b = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", f = [
-    ...i,
-    b,
+  ], c = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", u = [
+    ...o,
+    c,
     n
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u.jsxs(
+  return /* @__PURE__ */ r.jsxs(
     "select",
     {
-      className: f,
+      className: u,
       "aria-invalid": a,
-      "aria-describedby": a ? `${s.id}-error` : void 0,
-      ...s,
+      "aria-describedby": a ? `${l.id}-error` : void 0,
+      ...l,
       children: [
-        o && /* @__PURE__ */ u.jsx("option", { value: "", disabled: !0, children: o }),
-        t.map((m) => /* @__PURE__ */ u.jsx(
+        t && /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: t }),
+        s.map((m) => /* @__PURE__ */ r.jsx(
           "option",
           {
             value: m.value,
@@ -458,13 +459,13 @@ function fe({
     }
   );
 }
-function be({
-  error: t = !1,
-  resize: o = "vertical",
+function ve({
+  error: s = !1,
+  resize: t = "vertical",
   className: a = "",
   ...n
 }) {
-  const s = [
+  const l = [
     "block",
     "w-full",
     "rounded",
@@ -475,69 +476,330 @@ function be({
     "focus:outline-none",
     "focus:ring-2",
     "focus:ring-offset-2"
-  ], i = {
+  ], o = {
     none: "resize-none",
     both: "resize",
     horizontal: "resize-x",
     vertical: "resize-y"
-  }, b = t ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", f = [
-    ...s,
-    i[o],
-    b,
+  }, c = s ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", u = [
+    ...l,
+    o[t],
+    c,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u.jsx(
+  return /* @__PURE__ */ r.jsx(
     "textarea",
     {
-      className: f,
-      "aria-invalid": t,
-      "aria-describedby": t && n.id ? `${n.id}-error` : void 0,
+      className: u,
+      "aria-invalid": s,
+      "aria-describedby": s && n.id ? `${n.id}-error` : void 0,
       ...n
     }
   );
 }
-function z({ label: t, ...o }) {
-  return o.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ u.jsxs("div", { className: "mb-medium grid gap-small", children: [
-    /* @__PURE__ */ u.jsx(se, { as: "label", htmlFor: o.id, className: "cursor-pointer", children: t }),
-    /* @__PURE__ */ u.jsx(le, { ...o })
+function ge({
+  variant: s = "default",
+  className: t = "",
+  children: a,
+  ...n
+}) {
+  const l = [
+    "block",
+    "text-sm",
+    "font-medium",
+    "text-gray-700"
+  ], o = {
+    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"
+  }, c = [
+    ...l,
+    o[s],
+    t
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsx("label", { className: c, ...n, children: a });
+}
+function je({
+  message: s,
+  id: t,
+  className: a = "",
+  ...n
+}) {
+  const o = [
+    ...[
+      "mt-1",
+      "text-sm",
+      "text-red-600",
+      "flex",
+      "items-center",
+      "gap-1"
+    ],
+    a
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      role: "alert",
+      id: t,
+      className: o,
+      "aria-live": "polite",
+      ...n,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          "svg",
+          {
+            className: "h-4 w-4 flex-shrink-0",
+            fill: "currentColor",
+            viewBox: "0 0 20 20",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ r.jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",
+                clipRule: "evenodd"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ r.jsx("span", { children: s })
+      ]
+    }
+  );
+}
+function fe({
+  variant: s = "default",
+  className: t = "",
+  children: a,
+  ...n
+}) {
+  const l = [
+    "inline-flex",
+    "items-center",
+    "px-1",
+    "pt-1",
+    "border-b-2",
+    "text-sm",
+    "font-medium",
+    "transition-colors"
+  ], o = {
+    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 = [
+    ...l,
+    o[s],
+    t
+  ].filter(Boolean).join(" ");
+  return s === "disabled" ? /* @__PURE__ */ r.jsx("span", { className: c, "aria-disabled": "true", children: a }) : /* @__PURE__ */ r.jsx("a", { className: c, ...n, children: a });
+}
+function G({ label: s, ...t }) {
+  return t.id || console.error("InputWithLabel component requires an id prop"), /* @__PURE__ */ r.jsxs("div", { className: "mb-medium grid gap-small", children: [
+    /* @__PURE__ */ r.jsx(ce, { as: "label", htmlFor: t.id, className: "cursor-pointer", children: s }),
+    /* @__PURE__ */ r.jsx(de, { ...t })
   ] });
 }
-function me({
-  variant: t = "default",
-  padding: o = "medium",
+function ye({
+  variant: s = "default",
+  padding: t = "medium",
   className: a = "",
   children: n,
-  ...s
+  ...l
 }) {
-  const i = [
+  const o = [
     "bg-white",
     "rounded-lg",
     "border",
     "border-gray-200",
     "shadow-sm"
-  ], b = {
+  ], c = {
     default: "",
     hover: "hover:shadow-md transition-shadow cursor-pointer",
     selected: "border-indigo-500 shadow-md"
-  }, f = {
+  }, u = {
     none: "",
     small: "p-2",
     medium: "p-4",
     large: "p-6"
   }, m = [
-    ...i,
-    b[t],
-    f[o],
+    ...o,
+    c[s],
+    u[t],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ u.jsx("div", { className: m, ...s, children: n });
+  return /* @__PURE__ */ r.jsx("div", { className: m, ...l, children: n });
 }
-function ge({
-  onForgotPasswordClick: t,
-  className: o,
+function Ne({
+  children: s,
+  onSubmit: t,
+  loading: a = !1,
+  error: n = null,
+  success: l = null,
+  className: o = "",
+  ...c
+}) {
+  const m = [
+    ...[
+      "space-y-4"
+    ],
+    o
+  ].filter(Boolean).join(" "), j = (g) => {
+    g.preventDefault(), t && !a && t(g);
+  };
+  return /* @__PURE__ */ r.jsxs(
+    "form",
+    {
+      className: m,
+      onSubmit: j,
+      noValidate: !0,
+      ...c,
+      children: [
+        s,
+        n && /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            role: "alert",
+            className: "p-3 text-sm text-red-800 bg-red-50 border border-red-200 rounded",
+            children: n
+          }
+        ),
+        l && /* @__PURE__ */ r.jsx(
+          "div",
+          {
+            role: "alert",
+            className: "p-3 text-sm text-green-800 bg-green-50 border border-green-200 rounded",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+function ke({
+  items: s,
+  separator: t = "/",
+  className: a = "",
+  ...n
+}) {
+  const o = [
+    ...[
+      "flex",
+      "items-center",
+      "space-x-2",
+      "text-sm"
+    ],
+    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: s.map((c, u) => {
+    const m = u === s.length - 1;
+    return /* @__PURE__ */ r.jsxs("li", { className: "flex items-center", children: [
+      u > 0 && /* @__PURE__ */ r.jsx("span", { className: "mx-2 text-gray-400", "aria-hidden": "true", children: t }),
+      m ? /* @__PURE__ */ r.jsx("span", { className: "text-gray-900 font-medium", "aria-current": "page", children: c.label }) : c.href ? /* @__PURE__ */ r.jsx(fe, { href: c.href, variant: "default", children: c.label }) : /* @__PURE__ */ r.jsx("span", { className: "text-gray-500", children: c.label })
+    ] }, u);
+  }) }) });
+}
+function we({
+  currentPage: s,
+  totalPages: t,
+  onPageChange: a,
+  totalItems: n,
+  itemsPerPage: l,
+  showPageInfo: o = !0,
+  className: c = "",
+  ...u
+}) {
+  const m = () => {
+    s > 1 && a(s - 1);
+  }, j = () => {
+    s < t && a(s + 1);
+  }, g = (d) => {
+    d >= 1 && d <= t && d !== s && a(d);
+  }, k = () => {
+    const d = [];
+    if (t <= 5)
+      for (let f = 1; f <= t; f++)
+        d.push(f);
+    else if (s <= 3) {
+      for (let f = 1; f <= 4; f++)
+        d.push(f);
+      d.push("ellipsis"), d.push(t);
+    } else if (s >= t - 2) {
+      d.push(1), d.push("ellipsis");
+      for (let f = t - 3; f <= t; f++)
+        d.push(f);
+    } else {
+      d.push(1), d.push("ellipsis");
+      for (let f = s - 1; f <= s + 1; f++)
+        d.push(f);
+      d.push("ellipsis"), d.push(t);
+    }
+    return d;
+  }, x = n && l ? (s - 1) * l + 1 : void 0, y = n && l ? Math.min(s * l, n) : void 0, N = [
+    ...[
+      "flex",
+      "items-center",
+      "justify-between",
+      "px-4",
+      "py-3"
+    ],
+    c
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("nav", { className: N, "aria-label": "Pagination", ...u, children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r.jsx(
+        A,
+        {
+          variant: "secondary",
+          onClick: m,
+          disabled: s === 1,
+          className: "px-3 py-1 text-sm",
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ r.jsx("div", { className: "flex items-center gap-1", children: k().map((d, w) => {
+        if (d === "ellipsis")
+          return /* @__PURE__ */ r.jsx("span", { className: "px-2 text-gray-500", children: "..." }, `ellipsis-${w}`);
+        const f = d, T = f === s;
+        return /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            onClick: () => g(f),
+            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 ${f}`,
+            children: f
+          },
+          f
+        );
+      }) }),
+      /* @__PURE__ */ r.jsx(
+        A,
+        {
+          variant: "secondary",
+          onClick: j,
+          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: [
+      "Showing ",
+      x,
+      " to ",
+      y,
+      " of ",
+      n,
+      " results"
+    ] })
+  ] });
+}
+function Ee({
+  onForgotPasswordClick: s,
+  className: t,
   ...a
 }) {
-  return /* @__PURE__ */ u.jsx(ie, { className: o, children: /* @__PURE__ */ u.jsxs(
+  return /* @__PURE__ */ r.jsx(ue, { className: t, children: /* @__PURE__ */ r.jsxs(
     "form",
     {
       ...a,
@@ -545,16 +807,16 @@ function ge({
         n.preventDefault(), a.onSubmit && a.onSubmit(n);
       },
       children: [
-        /* @__PURE__ */ u.jsx(
-          z,
+        /* @__PURE__ */ r.jsx(
+          G,
           {
             id: "login-email",
             label: "Your email",
             placeholder: "myname@email.com"
           }
         ),
-        /* @__PURE__ */ u.jsx(
-          z,
+        /* @__PURE__ */ r.jsx(
+          G,
           {
             id: "login-password",
             label: "Your password",
@@ -562,32 +824,220 @@ function ge({
             type: "password"
           }
         ),
-        /* @__PURE__ */ u.jsxs("div", { className: "flex justify-between", children: [
-          /* @__PURE__ */ u.jsx(
-            W,
+        /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between", children: [
+          /* @__PURE__ */ r.jsx(
+            A,
             {
               variant: "secondary",
               type: "button",
-              onClick: t,
+              onClick: s,
               children: "Forgot password?"
             }
           ),
-          /* @__PURE__ */ u.jsx(W, { variant: "regular", type: "submit", children: "Sign in" })
+          /* @__PURE__ */ r.jsx(A, { variant: "regular", type: "submit", children: "Sign in" })
         ] })
       ]
     }
   ) });
 }
+function _e({
+  isOpen: s,
+  onClose: t,
+  title: a,
+  children: n,
+  variant: l = "default",
+  showCloseButton: o = !0,
+  footer: c,
+  className: u = "",
+  ...m
+}) {
+  const j = P(null), g = P(null);
+  if (V(() => {
+    if (!s) return;
+    g.current = document.activeElement;
+    const d = setTimeout(() => {
+      j.current?.focus();
+    }, 0), w = (f) => {
+      f.key === "Escape" && t();
+    };
+    return document.addEventListener("keydown", w), () => {
+      clearTimeout(d), document.removeEventListener("keydown", w), g.current?.focus();
+    };
+  }, [s, t]), V(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [s]), !s) return null;
+  const k = [
+    "fixed",
+    "inset-0",
+    "z-50",
+    "overflow-y-auto"
+  ], x = [
+    "fixed",
+    "inset-0",
+    "bg-black",
+    "bg-opacity-50",
+    "transition-opacity"
+  ], v = [
+    "relative",
+    "bg-white",
+    "rounded-lg",
+    "shadow-xl",
+    "my-8",
+    "mx-auto",
+    {
+      default: "max-w-md",
+      large: "max-w-2xl",
+      fullscreen: "max-w-full h-full"
+    }[l],
+    "p-6",
+    u
+  ].filter(Boolean).join(" "), N = /* @__PURE__ */ r.jsxs(
+    "div",
+    {
+      className: k.join(" "),
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": a ? "modal-title" : void 0,
+      onClick: (d) => {
+        d.target === d.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(
+          "div",
+          {
+            ref: j,
+            tabIndex: -1,
+            className: v,
+            onClick: (d) => d.stopPropagation(),
+            ...m,
+            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(
+                  "button",
+                  {
+                    onClick: t,
+                    className: "text-gray-400 hover:text-gray-500 focus:outline-none",
+                    "aria-label": "Close modal",
+                    children: /* @__PURE__ */ r.jsx(
+                      "svg",
+                      {
+                        className: "h-6 w-6",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        stroke: "currentColor",
+                        children: /* @__PURE__ */ r.jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 2,
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ] }),
+              !a && o && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  onClick: t,
+                  className: "text-gray-400 hover:text-gray-500 focus:outline-none",
+                  "aria-label": "Close modal",
+                  children: /* @__PURE__ */ r.jsx(
+                    "svg",
+                    {
+                      className: "h-6 w-6",
+                      fill: "none",
+                      viewBox: "0 0 24 24",
+                      stroke: "currentColor",
+                      children: /* @__PURE__ */ r.jsx(
+                        "path",
+                        {
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          strokeWidth: 2,
+                          d: "M6 18L18 6M6 6l12 12"
+                        }
+                      )
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: n }),
+              c && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end gap-2 mt-4", children: c })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+  return typeof window < "u" ? ne(N, document.body) : N;
+}
+function Re({
+  columns: s,
+  data: t,
+  loading: a = !1,
+  onSort: n,
+  sortColumn: l,
+  sortDirection: o,
+  emptyMessage: c = "No data available",
+  className: u = "",
+  ...m
+}) {
+  const j = (x) => {
+    if (!n || !s.find((v) => v.key === x)?.sortable)
+      return;
+    n(x, l === x && o === "asc" ? "desc" : "asc");
+  }, k = [
+    ...[
+      "min-w-full",
+      "divide-y",
+      "divide-gray-200"
+    ],
+    u
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ r.jsxs("table", { className: k, ...m, children: [
+    /* @__PURE__ */ r.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ r.jsx("tr", { children: s.map((x) => /* @__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 && j(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" ? "↑" : "↓" })
+        ] })
+      },
+      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: s.length, className: "px-6 py-4 text-center text-gray-500", children: "Loading..." }) }) : t.length === 0 ? /* @__PURE__ */ r.jsx("tr", { children: /* @__PURE__ */ r.jsx("td", { colSpan: s.length, className: "px-6 py-4 text-center text-gray-500", children: c }) }) : t.map((x, y) => /* @__PURE__ */ r.jsx("tr", { className: "hover:bg-gray-50", children: s.map((v) => {
+      const N = x[v.key];
+      return /* @__PURE__ */ r.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-900", children: v.render ? v.render(N, x) : N }, v.key);
+    }) }, y)) })
+  ] }) });
+}
 export {
-  de as Badge,
-  ie as BoxWrapper,
-  W as Button,
-  me as Card,
-  ce as Info,
-  le as Input,
-  z as InputWithLabel,
-  ge as LoginBox,
-  fe as Select,
-  se as Text,
-  be as Textarea
+  pe as Badge,
+  ue as BoxWrapper,
+  ke as Breadcrumb,
+  A as Button,
+  ye as Card,
+  je as ErrorMessage,
+  Ne as Form,
+  xe as Info,
+  de as Input,
+  G as InputWithLabel,
+  ge as Label,
+  Ee as LoginBox,
+  _e as Modal,
+  fe as NavLink,
+  we as Pagination,
+  he as Select,
+  Re as Table,
+  ce as Text,
+  ve as Textarea
 };