prometeo-design-system 4.6.4 → 4.7.0

package/dist/DialogModal.es.js

@@ -1,162 +1,173 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { forwardRef as _, memo as b, useState as H, useRef as R, useCallback as p, useImperativeHandle as $, Children as q, isValidElement as I } from "react";
-import { createPortal as B } from "react-dom";
-import { c } from "./cn-B6yFEsav.js";
-const A = _(
-  ({ children: r, onClose: a, className: n, attachToParent: o = !1, zindex: y = 40, debugMode: l = !1, safeMarginSize: S = 24, title: j, scroll: x = "content" }, G) => {
-    const [C, F] = H(!1), [v, T] = H(null), z = R(a), N = R(v);
-    z.current = a, N.current = v;
-    const O = p((e) => {
-      T(e ?? null), F(!0);
-    }, []), D = p(() => {
-      F(!1), z.current?.(N.current), setTimeout(() => T(null), 300);
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { forwardRef as Q, memo as j, useState as L, useRef as F, useCallback as x, useImperativeHandle as W, Children as R, isValidElement as U } from "react";
+import { createPortal as X } from "react-dom";
+import { c as p } from "./cn-B6yFEsav.js";
+const V = Q(
+  ({ children: t, onClose: n, className: o, attachToParent: s = !1, zindex: v = 40, debugMode: a = !1, safeMarginSize: _ = 24, title: T, scroll: m = "content" }, $) => {
+    const [N, z] = L(!1), [D, O] = L(null), k = F(n), w = F(D);
+    k.current = n, w.current = D;
+    const P = x((f) => {
+      O(f ?? null), z(!0);
+    }, []), E = x(() => {
+      z(!1), k.current?.(w.current), setTimeout(() => O(null), 300);
     }, []);
-    $(
-      G,
+    W(
+      $,
       () => ({
-        open: O,
-        close: D,
-        isOpen: C,
-        getContext: () => N.current
+        open: P,
+        close: E,
+        isOpen: N,
+        getContext: () => w.current
       }),
-      [O, D, C]
+      [P, E, N]
     );
-    const L = `max-[500px]:max-w-[calc(100%-32px)]
+    const q = `max-[500px]:max-w-[calc(100%-32px)]
       max-[1200px]:max-w-[min(800px,calc(100%-32px))]
-      min-[1200px]:max-w-[min(1224px,calc(100%-100px))] min-[1200px]:min-w-[1100px]`, U = typeof r == "function" ? r(v) : r, V = q.toArray(U);
-    let s = null, u = null, w = null;
-    const h = [];
-    let E = null;
-    if (V.forEach((e) => {
-      if (!I(e)) {
-        h.push(e);
-        return;
-      }
-      if (e.type === g && !j) {
-        u = e;
-        return;
-      }
-      if (e.type === i && !s) {
-        const f = e.props;
-        s = /* @__PURE__ */ t.jsx(i, { ...f, debugMode: l, children: f.children });
-        return;
-      }
-      if (e.type === d && !w) {
-        const f = e.props;
-        w = /* @__PURE__ */ t.jsx(d, { ...f, debugMode: l, scroll: x, children: f.children });
-        return;
-      }
-      if (e.type === m && !E) {
-        const f = e.props;
-        E = /* @__PURE__ */ t.jsx(m, { ...f, debugMode: l, children: f.children });
-        return;
-      }
-      e.type !== i && e.type !== d && e.type !== m && e.type !== g && h.push(e);
-    }), !s && j && (s = /* @__PURE__ */ t.jsx(i, { title: j, debugMode: l }), u = null), s && u && I(s)) {
-      const e = s.props;
-      e.title && (s = /* @__PURE__ */ t.jsx(i, { ...e, title: "", debugMode: l, children: u }), u = null);
+      min-[1200px]:max-w-[min(1224px,calc(100%-100px))] min-[1200px]:min-w-[1100px]`;
+    let C, b;
+    typeof t == "function" ? (console.log("es un child de tipo function"), C = t(D), b = R.toArray(C), console.log(b, "Child array")) : (C = t, b = R.toArray(C));
+    const B = (f) => {
+      const l = {
+        header: null,
+        titleContent: null,
+        content: null,
+        footer: null,
+        middleChildren: []
+      }, S = (r) => {
+        if (!U(r)) {
+          l.middleChildren.push(r);
+          return;
+        }
+        if (r.type === g && !l.titleContent) {
+          l.titleContent = r;
+          return;
+        }
+        if (r.type === d && !l.header) {
+          const i = r.props;
+          l.header = /* @__PURE__ */ e.jsx(d, { ...i, debugMode: a, children: i.children });
+          return;
+        }
+        if (r.type === u && !l.content) {
+          const i = r.props;
+          l.content = /* @__PURE__ */ e.jsx(u, { ...i, debugMode: a, scroll: m, children: i.children });
+          return;
+        }
+        if (r.type === h && !l.footer) {
+          const i = r.props;
+          l.footer = /* @__PURE__ */ e.jsx(h, { ...i, debugMode: a, children: i.children });
+          return;
+        }
+        const G = r.props;
+        G?.children && R.toArray(G.children).forEach(S), r.type !== d && r.type !== u && r.type !== h && r.type !== g && l.middleChildren.push(r);
+      };
+      return f.forEach(S), l;
+    };
+    let { header: c, titleContent: y, content: J, footer: K, middleChildren: A } = B(b);
+    if (!c && T && (c = /* @__PURE__ */ e.jsx(d, { title: T, debugMode: a }), y = null), c && y && U(c)) {
+      const f = c.props;
+      f.title && (c = /* @__PURE__ */ e.jsx(d, { ...f, title: "", debugMode: a, children: y }), y = null);
     }
-    const k = w ?? (h.length ? /* @__PURE__ */ t.jsx(d, { debugMode: l, scroll: x, children: h }) : null), P = /* @__PURE__ */ t.jsx(t.Fragment, { children: C && /* @__PURE__ */ t.jsx(
+    const H = J ?? (A.length ? /* @__PURE__ */ e.jsx(u, { debugMode: a, scroll: m, children: A }) : null), I = /* @__PURE__ */ e.jsx(e.Fragment, { children: N && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-[1.5px]",
-        style: { zIndex: y },
-        onClick: D,
-        children: /* @__PURE__ */ t.jsxs(
+        style: { zIndex: v },
+        onClick: E,
+        children: /* @__PURE__ */ e.jsxs(
           "div",
           {
-            onClick: (e) => e.stopPropagation(),
-            className: c(
+            onClick: (f) => f.stopPropagation(),
+            className: p(
               "bg-neutral-default-default rounded-lg shadow-lg border-neutral-strong-default border relative ",
               "max-h-[calc(100%-128px)] h-dvh w-full",
               "flex flex-col ",
-              L,
-              n
+              q,
+              o
             ),
             style: {
-              "--safe-margin-size": `${S}px`
+              "--safe-margin-size": `${_}px`
             },
             children: [
-              /* @__PURE__ */ t.jsx(
+              /* @__PURE__ */ e.jsx(
                 "div",
                 {
-                  className: c(
+                  className: p(
                     "absolute bg-transparent z-[-1] -top-(--safe-margin-size) -left-(--safe-margin-size) -right-(--safe-margin-size) -bottom-(--safe-margin-size)",
-                    l && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
+                    a && "after:content-['SECURE_MARGIN'] after:text-red-300 after:prometeo-fonts-label-small after:ml-2 "
                   ),
                   style: {
-                    background: l ? "#FF393973" : "auto",
-                    border: l ? "solid 1px #FF3939" : ""
+                    background: a ? "#FF393973" : "auto",
+                    border: a ? "solid 1px #FF3939" : ""
                   }
                 }
               ),
-              /* @__PURE__ */ t.jsxs("div", { className: c(
+              /* @__PURE__ */ e.jsxs("div", { className: p(
                 "flex flex-col h-full",
-                x === "dialog" && "overflow-y-auto",
-                x === "content" && "overflow-hidden"
+                m === "dialog" && "overflow-y-auto",
+                m === "content" && "overflow-hidden"
               ), children: [
-                s,
-                x === "dialog" ? /* @__PURE__ */ t.jsx("div", { className: "flex flex-col flex-1", children: k }) : k,
-                E
+                c,
+                m === "dialog" ? /* @__PURE__ */ e.jsx("div", { className: "flex flex-col flex-1", children: H }) : H,
+                K
               ] })
             ]
           }
         )
       }
     ) });
-    return o ? P : B(P, document.body);
+    return s ? I : X(I, document.body);
   }
 );
-A.displayName = "Dialog";
-const d = b(({ children: r, className: a, debugMode: n, scroll: o }) => /* @__PURE__ */ t.jsx("div", { className: c(
-  "flex flex-col gap-4 p-4",
-  n && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
-  a,
+V.displayName = "Dialog";
+const u = j(({ children: t, className: n, debugMode: o, scroll: s }) => /* @__PURE__ */ e.jsx("div", { className: p(
+  "flex flex-col p-4",
+  o && "border-2 border-dashed border-red-500 bg-red-200/40 relative after:content-['CONTENT'] after:absolute after:top-2 after:left-1/2 after:w-max after:h-full after:text-red-500 ",
+  n,
   // Para scroll='content', este componente necesita su propio scroll y altura mínima
-  o === "content" && "overflow-y-auto min-h-0  flex-1 ",
+  s === "content" && "overflow-y-auto min-h-0  flex-1 ",
   // Para scroll='dialog', el contenido debe ocupar todo el espacio disponible pero sin scroll
-  o === "dialog" && "flex-1 min-h-max "
-), children: r }));
-d.displayName = "DialogContent";
-const g = b(({ children: r, className: a, debugMode: n }) => /* @__PURE__ */ t.jsx("h1", { className: c("prometeo-fonts-headline-small text-neutral-strong-default w-max", n && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', a), children: r }));
+  s === "dialog" && "flex-1 min-h-max "
+), children: t }));
+u.displayName = "DialogContent";
+const g = j(({ children: t, className: n, debugMode: o }) => /* @__PURE__ */ e.jsx("h1", { className: p("prometeo-fonts-headline-small text-neutral-strong-default w-max", o && 'bg-red-400/40 relative after:content-["TITLE"] after:absolute after:top-0 after:-translate-y-5 after:left-0 after:w-max after:h-full after:text-red-500 after:prometeo-fonts-label-large', n), children: t }));
 g.displayName = "DialogTitle";
-const i = b(({ children: r, className: a, title: n, debugMode: o }) => /* @__PURE__ */ t.jsxs("div", { className: c(
+const d = j(({ children: t, className: n, title: o, debugMode: s }) => /* @__PURE__ */ e.jsxs("div", { className: p(
   "p-4",
-  o && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
-  a
+  s && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['HEADER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+  n
 ), children: [
-  n && /* @__PURE__ */ t.jsx(g, { debugMode: o, children: n }),
-  r
+  o && /* @__PURE__ */ e.jsx(g, { debugMode: s, children: o }),
+  t
 ] }));
-i.displayName = "DialogHeader";
-const m = b(({ children: r, className: a, debugMode: n }) => /* @__PURE__ */ t.jsx("div", { className: c(
-  n && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
+d.displayName = "DialogHeader";
+const h = j(({ children: t, className: n, debugMode: o }) => /* @__PURE__ */ e.jsx("div", { className: p(
+  o && "border-2 border-dashed border-red-600 bg-red-200/40! relative after:content-['FOOTER'] after:absolute after:top-1 after:left-1/2 after:w-max after:h-full after:text-red-500",
   "border-t border-neutral-strong-default p-4",
-  a
-), children: r }));
-m.displayName = "DialogFooter";
-const J = Object.assign(A, {
-  Content: d,
-  Header: i,
-  Footer: m,
+  n
+), children: t }));
+h.displayName = "DialogFooter";
+const Y = Object.assign(V, {
+  Content: u,
+  Header: d,
+  Footer: h,
   Title: g
 });
-J.displayName = "DialogModal";
-const Y = () => {
-  const r = R(null), a = p((l) => {
-    r.current?.open(l);
-  }, []), n = p(() => {
-    r.current?.close();
-  }, []), o = p(() => r.current?.isOpen ?? !1, []), y = p(() => r.current?.getContext() ?? null, []);
+Y.displayName = "DialogModal";
+const re = () => {
+  const t = F(null), n = x((a) => {
+    t.current?.open(a);
+  }, []), o = x(() => {
+    t.current?.close();
+  }, []), s = x(() => t.current?.isOpen ?? !1, []), v = x(() => t.current?.getContext() ?? null, []);
   return {
-    ref: r,
-    open: a,
-    close: n,
-    isOpen: o,
-    getContext: y
+    ref: t,
+    open: n,
+    close: o,
+    isOpen: s,
+    getContext: v
   };
 };
 export {
-  J as default,
-  Y as useDialogControl
+  Y as default,
+  re as useDialogControl
 };

package/dist/Header.es.js

@@ -1,34 +1,34 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { c as a } from "./cn-B6yFEsav.js";
-import { motion as n } from "framer-motion";
+import { j as s } from "./jsx-runtime-DKDX3adD.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { motion as o } from "framer-motion";
 import { memo as f } from "react";
-const c = ({ title: e, subtitle: l, children: s, className: r, subtitleClassName: d, titleClassName: m, mainActionSlot: i }) => /* @__PURE__ */ t.jsxs(
-  n.header,
+const c = ({ title: e, subtitle: l, children: m, className: d, subtitleClassName: r, titleClassName: n, mainActionSlot: a, secondarySlot: t }) => /* @__PURE__ */ s.jsxs(
+  o.header,
   {
     initial: { opacity: 0, y: -10 },
     animate: { opacity: 1, y: 0 },
     transition: { duration: 0.6, ease: "easeOut" },
-    className: a(
-      "flex items-center sm:min-h-20 md:min-h-24 lg:min-h-28 xl:min-h-32 2xl:min-h-36 overflow-hidden px-4 md:px-4 py-2 md:py-3",
-      "flex justify-between items-center w-full max-w-full overflow-hidden",
-      r
+    className: i(
+      "flex md:flex-col gap-1 w-full max-w-full",
+      d
     ),
     children: [
-      /* @__PURE__ */ t.jsxs("div", { className: a(
-        "flex items-center md:items-start md:flex-col leading-6 h-full justify-center overflow-hidden",
-        i && "justify-start gap-1 w-full"
-      ), children: [
-        i && /* @__PURE__ */ t.jsx("div", { className: "", children: typeof i == "function" ? i() : i }),
-        /* @__PURE__ */ t.jsxs("div", { className: a("flex flex-col leading-6 justify-center relative overflow-hidden md:px-2 "), children: [
-          l && /* @__PURE__ */ t.jsx("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full", d), children: l }),
-          e && /* @__PURE__ */ t.jsx("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", m), children: e })
-        ] })
+      /* @__PURE__ */ s.jsxs("div", { className: "md:w-full min-h-12 md:px-3 flex justify-between", children: [
+        a && /* @__PURE__ */ s.jsx("div", { className: "", children: typeof a == "function" ? a() : a }),
+        t && /* @__PURE__ */ s.jsx("div", { className: "hidden md:flex", children: typeof t == "function" ? t() : t })
       ] }),
-      s && /* @__PURE__ */ t.jsx("div", { className: "shrink relative", children: s })
+      /* @__PURE__ */ s.jsxs("div", { className: "w-full min-h-12 flex justify-between md:px-6", children: [
+        /* @__PURE__ */ s.jsxs("div", { className: i("flex flex-col leading-6 justify-center relative overflow-hidden"), children: [
+          l && /* @__PURE__ */ s.jsx("h3", { className: i(" prometeo-fonts-body-small md:prometeo-fonts-body-medium text-neutral-medium-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full", r), children: l }),
+          e && /* @__PURE__ */ s.jsx("h1", { className: i("prometeo-fonts-headline-xsmall md:prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", n), children: e })
+        ] }),
+        m,
+        t && /* @__PURE__ */ s.jsx("div", { className: "md:hidden", children: typeof t == "function" ? t() : t })
+      ] })
     ]
   }
-), o = f(c, (e, l) => e.title !== l.title || e.subtitle !== l.subtitle || e.className !== l.className ? !1 : e.children !== l.children ? !e.children && !l.children : !0);
-o.displayName = "Header";
+), x = f(c, (e, l) => e.title === l.title && e.subtitle === l.subtitle && e.className === l.className && e.subtitleClassName === l.subtitleClassName && e.titleClassName === l.titleClassName && e.mainActionSlot === l.mainActionSlot && e.secondarySlot === l.secondarySlot && e.children === l.children);
+x.displayName = "Header";
 export {
-  o as default
+  x as default
 };

package/dist/IconButton.es.js

@@ -1,9 +1,10 @@
-import { j as r } from "./jsx-runtime-DKDX3adD.js";
-import { memo as C, useMemo as E } from "react";
-import R from "./Spinner.es.js";
-import { c as b } from "./index-BOQuZ0gG.js";
-import { c as f } from "./cn-B6yFEsav.js";
-const u = {
+import { j as a } from "./jsx-runtime-DKDX3adD.js";
+import { memo as A, useMemo as M, isValidElement as h } from "react";
+import { i as v } from "./iconUtils-rTOfKDxE.js";
+import T from "./Spinner.es.js";
+import { c as I } from "./index-BOQuZ0gG.js";
+import { c as y } from "./cn-B6yFEsav.js";
+const g = {
   small: {
     container: "w-8 h-8 p-0 rounded-[6px]"
   },
@@ -100,7 +101,7 @@ const u = {
       icon: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused"
     }
   }
-}, a = {
+}, c = {
   small: {
     container: "",
     icon: ""
@@ -113,29 +114,29 @@ const u = {
     container: "",
     icon: ""
   }
-}, h = {
+}, V = {
   container: "flex justify-center items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
   icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center"
-}, p = {
+}, w = {
   true: {
     container: "hover:scale-105 active:scale-95 disabled:scale-100"
   },
   false: {
     container: ""
   }
-}, g = {
+}, j = {
   true: {
     icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
   },
   false: {
     icon: ""
   }
-}, q = b(h.container, {
+}, q = I(V.container, {
   variants: {
     size: {
-      small: `${a.small.container} ${u.small.container}`,
-      medium: `${a.medium.container} ${u.medium.container}`,
-      large: `${a.large.container} ${u.large.container}`
+      small: `${c.small.container} ${g.small.container}`,
+      medium: `${c.medium.container} ${g.medium.container}`,
+      large: `${c.large.container} ${g.large.container}`
     },
     variant: {
       fill: "",
@@ -151,8 +152,8 @@ const u = {
       disabled: ""
     },
     animation: {
-      true: p.true.container,
-      false: p.false.container
+      true: w.true.container,
+      false: w.false.container
     }
   },
   compoundVariants: [
@@ -181,12 +182,12 @@ const u = {
     color: "primary",
     animation: !0
   }
-}), A = b(h.icon, {
+}), f = I(V.icon, {
   variants: {
     size: {
-      small: a.small.icon,
-      medium: a.medium.icon,
-      large: a.large.icon
+      small: c.small.icon,
+      medium: c.medium.icon,
+      large: c.large.icon
     },
     variant: {
       fill: "",
@@ -202,8 +203,8 @@ const u = {
       disabled: ""
     },
     animateIcon: {
-      true: g.true.icon,
-      false: g.false.icon
+      true: j.true.icon,
+      false: j.false.icon
     }
   },
   compoundVariants: [
@@ -232,75 +233,121 @@ const u = {
     color: "primary",
     animateIcon: !0
   }
-}), M = ({
-  onClick: x,
-  icon: y,
-  contentClassName: n,
-  animate: w = !1,
-  animateIcon: j = !1,
-  isLoading: t = !1,
-  children: V,
-  hideSpinner: d = !1,
-  spinner: v = /* @__PURE__ */ r.jsx(R, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
-  type: I,
-  className: $,
-  disabled: o,
+}), D = ({
+  onClick: $,
+  icon: d,
+  contentClassName: p,
+  animate: N = !1,
+  animateIcon: k = !1,
+  isLoading: n = !1,
+  children: r,
+  hideSpinner: b = !1,
+  spinner: x = /* @__PURE__ */ a.jsx(T, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
+  type: S,
+  className: z,
+  disabled: m,
   variant: i = "fill",
-  form: k,
-  size: l = "medium",
-  color: z = "primary"
+  form: B,
+  size: s = "medium",
+  color: C = "primary"
 }) => {
-  const s = V || y;
-  if (!s)
-    throw new Error('IconButton: Se requiere un icon (prop "icon" o "children")');
-  const m = !!(j && !o && !t), S = !!(w && !o && !t), c = o || t ? "disabled" : z, N = E(() => {
-    if (t)
-      return /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: !d && v });
-    const B = s;
-    return /* @__PURE__ */ r.jsx("div", { className: f("flex items-center justify-center select-none", n), children: /* @__PURE__ */ r.jsx(
-      "span",
-      {
-        className: A({
-          size: l,
-          variant: i,
-          color: c,
-          animateIcon: m
-        }),
-        children: /* @__PURE__ */ r.jsx(B, {})
-      }
-    ) });
+  const u = !!(k && !m && !n), E = !!(N && !m && !n), l = m || n ? "disabled" : C, R = M(() => {
+    if (n)
+      return /* @__PURE__ */ a.jsx("div", { className: "flex items-center justify-center", children: !b && x });
+    let t = null;
+    if (console.log(typeof r), r)
+      if (h(r))
+        v(r.type) ? t = t = /* @__PURE__ */ a.jsx(
+          "span",
+          {
+            className: f({
+              size: s,
+              variant: i,
+              color: l,
+              animateIcon: u
+            }),
+            children: r
+          }
+        ) : t = r;
+      else if (typeof r == "function")
+        try {
+          const o = r();
+          h(o) && (v(o.type) ? t = /* @__PURE__ */ a.jsx(
+            "span",
+            {
+              className: f({
+                size: s,
+                variant: i,
+                color: l,
+                animateIcon: u
+              }),
+              children: o
+            }
+          ) : t = o);
+        } catch {
+          t = null;
+        }
+      else typeof r == "object" && (v(r) ? t = /* @__PURE__ */ a.jsx(
+        "span",
+        {
+          className: f({
+            size: s,
+            variant: i,
+            color: l,
+            animateIcon: u
+          }),
+          children: r
+        }
+      ) : t = r);
+    else if (d && v(d)) {
+      const o = d;
+      t = /* @__PURE__ */ a.jsx(
+        "span",
+        {
+          className: f({
+            size: s,
+            variant: i,
+            color: l,
+            animateIcon: u
+          }),
+          children: /* @__PURE__ */ a.jsx(o, {})
+        }
+      );
+    }
+    return t ? /* @__PURE__ */ a.jsx("div", { className: y("flex items-center justify-center select-none", p), children: t }) : null;
   }, [
-    n,
-    s,
+    p,
+    r,
+    d,
     i,
+    s,
     l,
-    c,
-    t,
-    d,
-    v,
-    m
+    n,
+    b,
+    x,
+    u
   ]);
-  return /* @__PURE__ */ r.jsx(
+  return /* @__PURE__ */ a.jsx(
     "button",
     {
-      type: I,
-      className: f(
+      type: S,
+      className: y(
         "group",
         q({
-          size: l,
+          size: s,
           variant: i,
-          color: c,
-          animation: S
+          color: l,
+          animation: E
         }),
-        $
+        z
       ),
-      disabled: o || t,
-      form: k,
-      onClick: x,
-      children: /* @__PURE__ */ r.jsx("div", { className: `flex items-center gap-1 ${n}`, children: N })
+      disabled: m || n,
+      form: B,
+      onClick: $,
+      children: /* @__PURE__ */ a.jsx("div", { className: `flex items-center gap-1 ${p}`, children: R })
     }
   );
-}, J = C(M);
+}, P = A(D);
 export {
-  J as default
+  P as default
 };

package/dist/Icons/AccountCircle.es.js

@@ -1,5 +1,5 @@
 import { j as t } from "../jsx-runtime-DKDX3adD.js";
-import { m as o } from "../iconUtils-D0lVAgGT.js";
+import { m as o } from "../iconUtils-rTOfKDxE.js";
 const e = o(
   ({ size: q = 24, className: T, ...m }) => /* @__PURE__ */ t.jsx(
     "svg",

package/dist/Icons/Add.es.js

@@ -1,5 +1,5 @@
 import { j as o } from "../jsx-runtime-DKDX3adD.js";
-import { m as s } from "../iconUtils-D0lVAgGT.js";
+import { m as s } from "../iconUtils-rTOfKDxE.js";
 const e = s(({ size: t = 24, className: r, ...h }) => /* @__PURE__ */ o.jsx(
   "svg",
   {