@fabio.caffarello/react-design-system 1.3.2 → 1.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import ae, { useRef as P, useEffect as V } from "react";
-import { createPortal as ne } from "react-dom";
-var S = { exports: {} }, _ = {};
+import le, { useState as M, useRef as Y, useEffect as z } from "react";
+import { createPortal as oe } from "react-dom";
+var A = { exports: {} }, _ = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -10,29 +10,29 @@ var S = { exports: {} }, _ = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var q;
-function le() {
-  if (q) return _;
-  q = 1;
-  var s = Symbol.for("react.transitional.element"), t = Symbol.for("react.fragment");
+var J;
+function ie() {
+  if (J) return _;
+  J = 1;
+  var t = Symbol.for("react.transitional.element"), s = 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) {
+    var i = null;
+    if (o !== void 0 && (i = "" + o), l.key !== void 0 && (i = "" + l.key), "key" in l) {
       o = {};
-      for (var u in l)
-        u !== "key" && (o[u] = l[u]);
+      for (var c in l)
+        c !== "key" && (o[c] = l[c]);
     } else o = l;
     return l = o.ref, {
-      $$typeof: s,
+      $$typeof: t,
       type: n,
-      key: c,
+      key: i,
       ref: l !== void 0 ? l : null,
       props: o
     };
   }
-  return _.Fragment = t, _.jsx = a, _.jsxs = a, _;
+  return _.Fragment = s, _.jsx = a, _.jsxs = a, _;
 }
-var R = {};
+var C = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -42,79 +42,79 @@ var R = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var U;
-function oe() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
-    function s(e) {
+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 === re ? null : e.displayName || e.name || null;
+        return e.$$typeof === se ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case d:
-          return "Fragment";
         case f:
+          return "Fragment";
+        case b:
           return "Profiler";
-        case w:
+        case k:
           return "StrictMode";
-        case Z:
+        case K:
           return "Suspense";
-        case Q:
-          return "SuspenseList";
         case ee:
+          return "SuspenseList";
+        case te:
           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 N:
+          case w:
             return "Portal";
-          case X:
+          case Z:
             return e.displayName || "Context";
           case T:
             return (e._context.displayName || "Context") + ".Consumer";
-          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 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:
-            i = e._payload, e = e._init;
+            d = e._payload, e = e._init;
             try {
-              return s(e(i));
+              return t(e(d));
             } catch {
             }
         }
       return null;
     }
-    function t(e) {
+    function s(e) {
       return "" + e;
     }
     function a(e) {
       try {
-        t(e);
-        var i = !1;
+        s(e);
+        var d = !1;
       } catch {
-        i = !0;
+        d = !0;
       }
-      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,
+      if (d) {
+        d = console;
+        var p = d.error, v = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return p.call(
+          d,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          p
-        ), t(e);
+          v
+        ), s(e);
       }
     }
     function n(e) {
-      if (e === d) return "<>";
+      if (e === f) return "<>";
       if (typeof e == "object" && e !== null && e.$$typeof === O)
         return "<...>";
       try {
-        var i = s(e);
-        return i ? "<" + i + ">" : "<...>";
+        var d = t(e);
+        return d ? "<" + d + ">" : "<...>";
       } catch {
         return "<...>";
       }
@@ -126,42 +126,42 @@ function oe() {
     function o() {
       return Error("react-stack-top-frame");
     }
-    function c(e) {
-      if (M.call(e, "key")) {
-        var i = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (i && i.isReactWarning) return !1;
+    function i(e) {
+      if (D.call(e, "key")) {
+        var d = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (d && d.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function u(e, i) {
-      function b() {
-        z || (z = !0, console.error(
+    function c(e, d) {
+      function p() {
+        W || (W = !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)",
-          i
+          d
         ));
       }
-      b.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: b,
+      p.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: p,
         configurable: !0
       });
     }
-    function m() {
-      var e = s(this.type);
-      return I[e] || (I[e] = !0, console.error(
+    function u() {
+      var e = t(this.type);
+      return P[e] || (P[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 j(e, i, b, p, C, B) {
-      var h = b.ref;
+    function h(e, d, p, v, S, B) {
+      var g = p.ref;
       return e = {
-        $$typeof: v,
+        $$typeof: N,
         type: e,
-        key: i,
-        props: b,
-        _owner: p
-      }, (h !== void 0 ? h : null) !== null ? Object.defineProperty(e, "ref", {
+        key: d,
+        props: p,
+        _owner: v
+      }, (g !== void 0 ? g : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: m
+        get: u
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -176,7 +176,7 @@ function oe() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: C
+        value: S
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
@@ -184,103 +184,103 @@ function oe() {
         value: B
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    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);
+    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);
           } 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 k(h);
-      if (M.call(i, "key")) {
-        h = s(e);
-        var E = Object.keys(i).filter(function(te) {
-          return te !== "key";
+        else m(g);
+      if (D.call(d, "key")) {
+        g = t(e);
+        var E = Object.keys(d).filter(function(ne) {
+          return ne !== "key";
         });
-        p = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", W[h + p] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+        v = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", U[g + v] || (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} />`,
-          p,
-          h,
+          v,
+          g,
           E,
-          h
-        ), W[h + p] = !0);
+          g
+        ), U[g + v] = !0);
       }
-      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,
+      if (g = null, p !== void 0 && (a(p), g = "" + p), i(d) && (a(d.key), g = "" + d.key), "key" in d) {
+        p = {};
+        for (var I in d)
+          I !== "key" && (p[I] = d[I]);
+      } else p = d;
+      return g && c(
+        p,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), j(
+      ), h(
         e,
-        h,
-        b,
+        g,
+        p,
         l(),
-        C,
+        S,
         B
       );
     }
-    function k(e) {
+    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 x(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === v;
+      return typeof e == "object" && e !== null && e.$$typeof === N;
     }
-    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() {
+    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() {
       return null;
     };
-    y = {
+    j = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var z, I = {}, F = y.react_stack_bottom_frame.bind(
-      y,
+    var W, P = {}, V = j.react_stack_bottom_frame.bind(
+      j,
       o
-    )(), D = $(n(o)), W = {};
-    R.Fragment = d, R.jsx = function(e, i, b) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return g(
+    )(), q = $(n(o)), U = {};
+    C.Fragment = f, C.jsx = function(e, d, p) {
+      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return y(
         e,
-        i,
-        b,
+        d,
+        p,
         !1,
-        p ? Error("react-stack-top-frame") : F,
-        p ? $(n(e)) : D
+        v ? Error("react-stack-top-frame") : V,
+        v ? $(n(e)) : q
       );
-    }, R.jsxs = function(e, i, b) {
-      var p = 1e4 > L.recentlyCreatedOwnerStacks++;
-      return g(
+    }, C.jsxs = function(e, d, p) {
+      var v = 1e4 > L.recentlyCreatedOwnerStacks++;
+      return y(
         e,
-        i,
-        b,
+        d,
+        p,
         !0,
-        p ? Error("react-stack-top-frame") : F,
-        p ? $(n(e)) : D
+        v ? Error("react-stack-top-frame") : V,
+        v ? $(n(e)) : q
       );
     };
-  })()), R;
+  })()), C;
 }
-var J;
-function ie() {
-  return J || (J = 1, process.env.NODE_ENV === "production" ? S.exports = le() : S.exports = oe()), S.exports;
+var X;
+function de() {
+  return X || (X = 1, process.env.NODE_ENV === "production" ? A.exports = ie() : A.exports = ce()), A.exports;
 }
-var r = ie();
-function xe({ variant: s = "info", className: t, ...a }) {
-  const n = [t || ""];
-  switch (s) {
+var r = de();
+function he({ variant: t = "info", className: s, ...a }) {
+  const n = [s || ""];
+  switch (t) {
     case "warning": {
       n.push("bg-yellow-100 text-yellow-800 border-yellow-500");
       break;
@@ -304,37 +304,37 @@ function xe({ variant: s = "info", className: t, ...a }) {
     }
   );
 }
-function ce({
-  variant: s,
-  bold: t,
+function F({
+  variant: t,
+  bold: s,
   italic: a,
   className: n,
   as: l,
   color: o,
-  ...c
+  ...i
 }) {
-  const u = [n];
-  let m;
+  const c = [n];
+  let u;
   if (l)
-    m = l;
+    u = l;
   else
-    switch (s) {
+    switch (t) {
       case "heading":
-        m = "h2";
+        u = "h2";
         break;
       case "list":
-        m = "li";
+        u = "li";
         break;
       case "paragraph":
       default:
-        m = "p";
+        u = "p";
         break;
     }
-  return t && u.push("font-bold"), a && u.push("italic"), o && u.push(`text-${o}`), /* @__PURE__ */ r.jsx(m, { className: u.join(" "), ...c });
+  return s && c.push("font-bold"), a && c.push("italic"), o && c.push(`text-${o}`), /* @__PURE__ */ r.jsx(u, { className: c.join(" "), ...i });
 }
-function de({ className: s, ...t }) {
+function ue({ className: t, ...s }) {
   const a = [
-    s,
+    t,
     "px-large",
     "border",
     "border-1",
@@ -344,22 +344,22 @@ function de({ className: s, ...t }) {
     "h-form-element",
     "text-base"
   ];
-  return /* @__PURE__ */ r.jsx("input", { className: a.join(" "), ...t });
+  return /* @__PURE__ */ r.jsx("input", { className: a.join(" "), ...s });
 }
-function A({
-  className: s,
-  variant: t = "regular",
+function R({
+  className: t,
+  variant: s = "regular",
   ...a
 }) {
   const n = [
-    s,
+    t,
     "rounded",
     "h-form-element",
     "lh-form-element",
     "px-large",
     "text-base"
   ];
-  switch (t) {
+  switch (s) {
     case "error":
       n.push("bg-red-light", "text-red-dark", "font-bold");
       break;
@@ -373,13 +373,13 @@ function A({
   }
   return /* @__PURE__ */ r.jsx("button", { className: n.join(" "), ...a });
 }
-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 fe({ className: t, ...s }) {
+  const a = [t, "p-large", "bg-bg", "rounded", "shadow-card"];
+  return /* @__PURE__ */ r.jsx("div", { className: a.join(" "), ...s });
 }
 function pe({
-  variant: s = "neutral",
-  className: t = "",
+  variant: t = "neutral",
+  className: s = "",
   children: a,
   ...n
 }) {
@@ -398,25 +398,25 @@ function pe({
     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"
-  }, c = [
+  }, i = [
     ...l,
-    o[s],
-    t
+    o[t],
+    s
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ r.jsx(
     "span",
     {
       role: "status",
       "aria-label": typeof a == "string" ? a : void 0,
-      className: c,
+      className: i,
       ...n,
       children: a
     }
   );
 }
-function he({
-  options: s,
-  placeholder: t,
+function ve({
+  options: t,
+  placeholder: s,
   error: a = !1,
   className: n = "",
   ...l
@@ -432,36 +432,36 @@ function he({
     "focus:outline-none",
     "focus:ring-2",
     "focus:ring-offset-2"
-  ], c = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", u = [
+  ], i = a ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
     ...o,
-    c,
+    i,
     n
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ r.jsxs(
     "select",
     {
-      className: u,
+      className: c,
       "aria-invalid": a,
       "aria-describedby": a ? `${l.id}-error` : void 0,
       ...l,
       children: [
-        t && /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: t }),
-        s.map((m) => /* @__PURE__ */ r.jsx(
+        s && /* @__PURE__ */ r.jsx("option", { value: "", disabled: !0, children: s }),
+        t.map((u) => /* @__PURE__ */ r.jsx(
           "option",
           {
-            value: m.value,
-            disabled: m.disabled,
-            children: m.label
+            value: u.value,
+            disabled: u.disabled,
+            children: u.label
           },
-          m.value
+          u.value
         ))
       ]
     }
   );
 }
-function ve({
-  error: s = !1,
-  resize: t = "vertical",
+function ge({
+  error: t = !1,
+  resize: s = "vertical",
   className: a = "",
   ...n
 }) {
@@ -481,25 +481,25 @@ function ve({
     both: "resize",
     horizontal: "resize-x",
     vertical: "resize-y"
-  }, c = s ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", u = [
+  }, i = t ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-indigo-500", c = [
     ...l,
-    o[t],
-    c,
+    o[s],
+    i,
     a
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ r.jsx(
     "textarea",
     {
-      className: u,
-      "aria-invalid": s,
-      "aria-describedby": s && n.id ? `${n.id}-error` : void 0,
+      className: c,
+      "aria-invalid": t,
+      "aria-describedby": t && n.id ? `${n.id}-error` : void 0,
       ...n
     }
   );
 }
-function ge({
-  variant: s = "default",
-  className: t = "",
+function ye({
+  variant: t = "default",
+  className: s = "",
   children: a,
   ...n
 }) {
@@ -512,16 +512,16 @@ function ge({
     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 = [
+  }, i = [
     ...l,
-    o[s],
-    t
+    o[t],
+    s
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("label", { className: c, ...n, children: a });
+  return /* @__PURE__ */ r.jsx("label", { className: i, ...n, children: a });
 }
 function je({
-  message: s,
-  id: t,
+  message: t,
+  id: s,
   className: a = "",
   ...n
 }) {
@@ -540,7 +540,7 @@ function je({
     "div",
     {
       role: "alert",
-      id: t,
+      id: s,
       className: o,
       "aria-live": "polite",
       ...n,
@@ -562,14 +562,14 @@ function je({
             )
           }
         ),
-        /* @__PURE__ */ r.jsx("span", { children: s })
+        /* @__PURE__ */ r.jsx("span", { children: t })
       ]
     }
   );
 }
-function fe({
-  variant: s = "default",
-  className: t = "",
+function me({
+  variant: t = "default",
+  className: s = "",
   children: a,
   ...n
 }) {
@@ -586,22 +586,108 @@ function fe({
     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 = [
+  }, i = [
     ...l,
-    o[s],
-    t
+    o[t],
+    s
   ].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 });
+  return t === "disabled" ? /* @__PURE__ */ r.jsx("span", { className: i, "aria-disabled": "true", children: a }) : /* @__PURE__ */ r.jsx("a", { className: i, ...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 Ne({
+  content: t,
+  children: s,
+  position: a = "top",
+  delay: n = 200,
+  className: l = "",
+  ...o
+}) {
+  const [i, c] = M(!1), [u, h] = M(null), y = () => {
+    const N = setTimeout(() => {
+      c(!0);
+    }, n);
+    h(N);
+  }, m = () => {
+    u && (clearTimeout(u), h(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 = {
+    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(
+    "div",
+    {
+      className: `relative inline-block ${l}`,
+      onMouseEnter: y,
+      onMouseLeave: m,
+      ...o,
+      children: [
+        s,
+        i && /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: `absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap ${x[a]}`,
+            role: "tooltip",
+            children: [
+              t,
+              /* @__PURE__ */ r.jsx(
+                "div",
+                {
+                  className: `absolute w-0 h-0 border-4 border-transparent ${j[a]}`
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function we({
+  variant: t = "text",
+  width: s,
+  height: a,
+  lines: n = 1,
+  className: l = "",
+  ...o
+}) {
+  const i = [
+    "animate-pulse",
+    "bg-gray-200",
+    "rounded"
+  ], c = {
+    text: "h-4",
+    card: "h-32",
+    list: "h-12",
+    circle: "rounded-full"
+  }, u = [
+    ...i,
+    c[t],
+    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(
+    "div",
+    {
+      className: u,
+      style: m === n - 1 ? { width: "75%" } : h
+    },
+    m
+  )) }) : /* @__PURE__ */ r.jsx("div", { className: u, style: h, ...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 ye({
-  variant: s = "default",
-  padding: t = "medium",
+function ke({
+  variant: t = "default",
+  padding: s = "medium",
   className: a = "",
   children: n,
   ...l
@@ -612,49 +698,49 @@ function ye({
     "border",
     "border-gray-200",
     "shadow-sm"
-  ], c = {
+  ], i = {
     default: "",
     hover: "hover:shadow-md transition-shadow cursor-pointer",
     selected: "border-indigo-500 shadow-md"
-  }, u = {
+  }, c = {
     none: "",
     small: "p-2",
     medium: "p-4",
     large: "p-6"
-  }, m = [
+  }, u = [
     ...o,
+    i[t],
     c[s],
-    u[t],
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsx("div", { className: m, ...l, children: n });
+  return /* @__PURE__ */ r.jsx("div", { className: u, ...l, children: n });
 }
-function Ne({
-  children: s,
-  onSubmit: t,
+function Ee({
+  children: t,
+  onSubmit: s,
   loading: a = !1,
   error: n = null,
   success: l = null,
   className: o = "",
-  ...c
+  ...i
 }) {
-  const m = [
+  const u = [
     ...[
       "space-y-4"
     ],
     o
-  ].filter(Boolean).join(" "), j = (g) => {
-    g.preventDefault(), t && !a && t(g);
+  ].filter(Boolean).join(" "), h = (y) => {
+    y.preventDefault(), s && !a && s(y);
   };
   return /* @__PURE__ */ r.jsxs(
     "form",
     {
-      className: m,
-      onSubmit: j,
+      className: u,
+      onSubmit: h,
       noValidate: !0,
-      ...c,
+      ...i,
       children: [
-        s,
+        t,
         n && /* @__PURE__ */ r.jsx(
           "div",
           {
@@ -675,9 +761,9 @@ function Ne({
     }
   );
 }
-function ke({
-  items: s,
-  separator: t = "/",
+function _e({
+  items: t,
+  separator: s = "/",
   className: a = "",
   ...n
 }) {
@@ -690,51 +776,51 @@ function ke({
     ],
     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.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: [
-      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);
+      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 })
+    ] }, c);
   }) }) });
 }
-function we({
-  currentPage: s,
-  totalPages: t,
+function Ce({
+  currentPage: t,
+  totalPages: s,
   onPageChange: a,
   totalItems: n,
   itemsPerPage: l,
   showPageInfo: o = !0,
-  className: c = "",
-  ...u
+  className: i = "",
+  ...c
 }) {
-  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);
+  const u = () => {
+    t > 1 && a(t - 1);
+  }, h = () => {
+    t < s && a(t + 1);
+  }, y = (f) => {
+    f >= 1 && f <= s && f !== t && 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) {
+      f.push(1), f.push("ellipsis");
+      for (let b = s - 3; b <= s; b++)
+        f.push(b);
     } 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);
+      f.push(1), f.push("ellipsis");
+      for (let b = t - 1; b <= t + 1; b++)
+        f.push(b);
+      f.push("ellipsis"), f.push(s);
     }
-    return d;
-  }, x = n && l ? (s - 1) * l + 1 : void 0, y = n && l ? Math.min(s * l, n) : void 0, N = [
+    return f;
+  }, x = n && l ? (t - 1) * l + 1 : void 0, j = n && l ? Math.min(t * l, n) : void 0, w = [
     ...[
       "flex",
       "items-center",
@@ -742,42 +828,42 @@ function we({
       "px-4",
       "py-3"
     ],
-    c
+    i
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r.jsxs("nav", { className: N, "aria-label": "Pagination", ...u, children: [
+  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(
-        A,
+        R,
         {
           variant: "secondary",
-          onClick: m,
-          disabled: s === 1,
+          onClick: u,
+          disabled: t === 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;
+      /* @__PURE__ */ r.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(
           "button",
           {
-            onClick: () => g(f),
+            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 ${f}`,
-            children: f
+            "aria-label": `Go to page ${b}`,
+            children: b
           },
-          f
+          b
         );
       }) }),
       /* @__PURE__ */ r.jsx(
-        A,
+        R,
         {
           variant: "secondary",
-          onClick: j,
-          disabled: s === t,
+          onClick: h,
+          disabled: t === s,
           className: "px-3 py-1 text-sm",
           children: "Next"
         }
@@ -787,19 +873,112 @@ function we({
       "Showing ",
       x,
       " to ",
-      y,
+      j,
       " of ",
       n,
       " results"
     ] })
   ] });
 }
-function Ee({
-  onForgotPasswordClick: s,
-  className: t,
+function Re({
+  title: t,
+  message: s,
+  actionLabel: a,
+  onAction: n,
+  illustration: l,
+  variant: o = "default",
+  className: i = "",
+  ...c
+}) {
+  const h = [
+    ...[
+      "flex",
+      "flex-col",
+      "items-center",
+      "justify-center",
+      "text-center",
+      "py-12",
+      "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 })
+  ] });
+}
+function Te({
+  trigger: t,
+  items: s,
+  align: a = "right",
+  variant: n = "default",
+  className: l = "",
+  ...o
+}) {
+  const [i, c] = M(!1), u = Y(null);
+  z(() => {
+    const m = (x) => {
+      u.current && !u.current.contains(x.target) && c(!1);
+    };
+    return i && document.addEventListener("mousedown", m), () => {
+      document.removeEventListener("mousedown", m);
+    };
+  }, [i]);
+  const h = (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(
+        "div",
+        {
+          className: "fixed inset-0 z-10",
+          onClick: () => c(!1)
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        "div",
+        {
+          className: `absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${y}`,
+          role: "menu",
+          "aria-orientation": "vertical",
+          children: /* @__PURE__ */ r.jsx("div", { className: "py-1", role: "none", children: s.map((m, x) => {
+            const j = [
+              "block",
+              "px-4",
+              "py-2",
+              "text-sm",
+              "w-full",
+              "text-left",
+              m.disabled ? "text-gray-400 cursor-not-allowed" : m.variant === "danger" ? "text-red-700 hover:bg-red-50" : "text-gray-700 hover:bg-gray-100"
+            ].filter(Boolean).join(" ");
+            return /* @__PURE__ */ r.jsx(
+              "button",
+              {
+                type: "button",
+                className: j,
+                onClick: () => h(m),
+                disabled: m.disabled,
+                role: "menuitem",
+                children: m.label
+              },
+              x
+            );
+          }) })
+        }
+      )
+    ] })
+  ] });
+}
+function Se({
+  onForgotPasswordClick: t,
+  className: s,
   ...a
 }) {
-  return /* @__PURE__ */ r.jsx(ue, { className: t, children: /* @__PURE__ */ r.jsxs(
+  return /* @__PURE__ */ r.jsx(fe, { className: s, children: /* @__PURE__ */ r.jsxs(
     "form",
     {
       ...a,
@@ -808,7 +987,7 @@ function Ee({
       },
       children: [
         /* @__PURE__ */ r.jsx(
-          G,
+          H,
           {
             id: "login-email",
             label: "Your email",
@@ -816,7 +995,7 @@ function Ee({
           }
         ),
         /* @__PURE__ */ r.jsx(
-          G,
+          H,
           {
             id: "login-password",
             label: "Your password",
@@ -826,47 +1005,47 @@ function Ee({
         ),
         /* @__PURE__ */ r.jsxs("div", { className: "flex justify-between", children: [
           /* @__PURE__ */ r.jsx(
-            A,
+            R,
             {
               variant: "secondary",
               type: "button",
-              onClick: s,
+              onClick: t,
               children: "Forgot password?"
             }
           ),
-          /* @__PURE__ */ r.jsx(A, { variant: "regular", type: "submit", children: "Sign in" })
+          /* @__PURE__ */ r.jsx(R, { variant: "regular", type: "submit", children: "Sign in" })
         ] })
       ]
     }
   ) });
 }
-function _e({
-  isOpen: s,
-  onClose: t,
+function Ae({
+  isOpen: t,
+  onClose: s,
   title: a,
   children: n,
   variant: l = "default",
   showCloseButton: o = !0,
-  footer: c,
-  className: u = "",
-  ...m
+  footer: i,
+  className: c = "",
+  ...u
 }) {
-  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();
+  const h = Y(null), y = Y(null);
+  if (z(() => {
+    if (!t) return;
+    y.current = document.activeElement;
+    const f = setTimeout(() => {
+      h.current?.focus();
+    }, 0), k = (b) => {
+      b.key === "Escape" && s();
     };
-    return document.addEventListener("keydown", w), () => {
-      clearTimeout(d), document.removeEventListener("keydown", w), g.current?.focus();
+    return document.addEventListener("keydown", k), () => {
+      clearTimeout(f), document.removeEventListener("keydown", k), y.current?.focus();
     };
-  }, [s, t]), V(() => (s ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+  }, [t, s]), z(() => (t ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
     document.body.style.overflow = "";
-  }), [s]), !s) return null;
-  const k = [
+  }), [t]), !t) return null;
+  const m = [
     "fixed",
     "inset-0",
     "z-50",
@@ -877,7 +1056,7 @@ function _e({
     "bg-black",
     "bg-opacity-50",
     "transition-opacity"
-  ], v = [
+  ], N = [
     "relative",
     "bg-white",
     "rounded-lg",
@@ -890,34 +1069,34 @@ function _e({
       fullscreen: "max-w-full h-full"
     }[l],
     "p-6",
-    u
-  ].filter(Boolean).join(" "), N = /* @__PURE__ */ r.jsxs(
+    c
+  ].filter(Boolean).join(" "), w = /* @__PURE__ */ r.jsxs(
     "div",
     {
-      className: k.join(" "),
+      className: m.join(" "),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": a ? "modal-title" : void 0,
-      onClick: (d) => {
-        d.target === d.currentTarget && t();
+      onClick: (f) => {
+        f.target === f.currentTarget && s();
       },
       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,
+            ref: h,
             tabIndex: -1,
-            className: v,
-            onClick: (d) => d.stopPropagation(),
-            ...m,
+            className: N,
+            onClick: (f) => f.stopPropagation(),
+            ...u,
             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,
+                    onClick: s,
                     className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                     "aria-label": "Close modal",
                     children: /* @__PURE__ */ r.jsx(
@@ -944,7 +1123,7 @@ function _e({
               !a && o && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end mb-4", children: /* @__PURE__ */ r.jsx(
                 "button",
                 {
-                  onClick: t,
+                  onClick: s,
                   className: "text-gray-400 hover:text-gray-500 focus:outline-none",
                   "aria-label": "Close modal",
                   children: /* @__PURE__ */ r.jsx(
@@ -968,45 +1147,45 @@ function _e({
                 }
               ) }),
               /* @__PURE__ */ r.jsx("div", { className: "mb-4", children: n }),
-              c && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end gap-2 mt-4", children: c })
+              i && /* @__PURE__ */ r.jsx("div", { className: "flex justify-end gap-2 mt-4", children: i })
             ]
           }
         ) })
       ]
     }
   );
-  return typeof window < "u" ? ne(N, document.body) : N;
+  return typeof window < "u" ? oe(w, document.body) : w;
 }
-function Re({
-  columns: s,
-  data: t,
+function Oe({
+  columns: t,
+  data: s,
   loading: a = !1,
   onSort: n,
   sortColumn: l,
   sortDirection: o,
-  emptyMessage: c = "No data available",
-  className: u = "",
-  ...m
+  emptyMessage: i = "No data available",
+  className: c = "",
+  ...u
 }) {
-  const j = (x) => {
-    if (!n || !s.find((v) => v.key === x)?.sortable)
+  const h = (x) => {
+    if (!n || !t.find((N) => N.key === x)?.sortable)
       return;
     n(x, l === x && o === "asc" ? "desc" : "asc");
-  }, k = [
+  }, m = [
     ...[
       "min-w-full",
       "divide-y",
       "divide-gray-200"
     ],
-    u
+    c
   ].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(
+  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(
       "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),
+        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" ? "↑" : "↓" })
@@ -1014,30 +1193,34 @@ function Re({
       },
       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)) })
+    /* @__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) => {
+      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)) })
   ] }) });
 }
 export {
   pe as Badge,
-  ue as BoxWrapper,
-  ke as Breadcrumb,
-  A as Button,
-  ye as Card,
+  fe as BoxWrapper,
+  _e as Breadcrumb,
+  R as Button,
+  ke as Card,
+  Te as Dropdown,
+  Re as EmptyState,
   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
+  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
 };