prometeo-design-system 4.3.6 → 4.4.0

package/dist/PyrionLayout.es.js

@@ -16,7 +16,7 @@ import Ye from "./UserCard.es.js";
 import pe from "./Button.es.js";
 import { Logout as St } from "./Icons/Logout.es.js";
 import jt from "./NotificationCard.es.js";
-import { T as kt, a as Dt } from "./TabLinks-DxqprStp.js";
+import { T as kt, a as Dt } from "./TabLinks-BjGwvqR9.js";
 import { Notifications as Xe } from "./Icons/Notifications.es.js";
 import { Close as _e } from "./Icons/Close.es.js";
 import { Help as Je } from "./Icons/Help.es.js";

package/dist/{TabLinks-DxqprStp.js → TabLinks-BjGwvqR9.js}

@@ -1,59 +1,59 @@
-import { j as o } from "./jsx-runtime-GkKLlHH4.js";
-import { motion as v } from "framer-motion";
-import { memo as I, isValidElement as z } from "react";
+import { j as n } from "./jsx-runtime-GkKLlHH4.js";
+import { motion as I } from "framer-motion";
+import { memo as $, useId as w, useRef as z, useEffect as E, isValidElement as L } from "react";
 import { c as d } from "./cn-B6yFEsav.js";
-import $ from "./PlainTooltip.es.js";
-const w = /* @__PURE__ */ Symbol.for("react.memo"), E = (e, a, l) => {
+import M from "./PlainTooltip.es.js";
+const R = /* @__PURE__ */ Symbol.for("react.memo"), S = (e, a, o) => {
   if (!e)
     return null;
   if (typeof e == "function") {
     const i = e;
-    return /* @__PURE__ */ o.jsx(i, { size: l, className: a });
+    return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
   }
   if (typeof e == "object") {
-    if (z(e))
+    if (L(e))
       return e;
-    if ("$$typeof" in e && e.$$typeof === w) {
+    if ("$$typeof" in e && e.$$typeof === R) {
       const i = e;
-      return /* @__PURE__ */ o.jsx(i, { size: l, className: a });
+      return /* @__PURE__ */ n.jsx(i, { size: o, className: a });
     }
   }
   return e;
 };
-function j({
+function v({
   items: e,
   activeTab: a,
-  onTabChange: l,
+  onTabChange: o,
   className: i,
-  tabClassName: n,
+  tabClassName: l,
   activeTabClassName: s,
-  indicatorClassName: f,
+  indicatorClassName: b,
   animated: r = !0,
   renderTab: u
 }) {
-  const b = (t) => {
-    t.disabled || l?.(t.id, t);
-  };
-  return /* @__PURE__ */ o.jsx(
+  const p = (t) => {
+    t.disabled || o?.(t.id, t);
+  }, x = w();
+  return /* @__PURE__ */ n.jsx(
     "div",
     {
       className: d(
-        "flex flex-row justify-around items-end relative border-b border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5",
+        "flex flex-row justify-around items-end relative border-b border-neutral-strong-default w-full md:justify-start md:px-10 md:gap-5 overflow-hidden",
         i
       ),
       role: "tablist",
       children: e?.map((t) => {
-        const c = a === t.id, m = () => b(t), { iconPosition: p = "top", iconSize: x = 24 } = t;
-        return u ? /* @__PURE__ */ o.jsx("div", { children: u(t, c, m, t.onIconClick, t.onIconHover, t.iconTooltipTitle, t.iconTooltipProps, t.iconSize) }, t.id) : /* @__PURE__ */ o.jsx(
-          L,
+        const c = a === t.id, f = () => p(t), { iconPosition: h = "top", iconSize: m = 24 } = t;
+        return u ? /* @__PURE__ */ n.jsx("div", { children: u(t, c, f, t.onIconClick, t.onIconHover, t.iconTooltipTitle, t.iconTooltipProps, t.iconSize) }, t.id) : /* @__PURE__ */ n.jsx(
+          H,
           {
             id: t.id,
             title: t.title,
             icon: t.icon,
-            iconPosition: p,
-            onClick: m,
+            iconPosition: h,
+            onClick: f,
             disabled: t.disabled,
-            className: n,
+            className: l,
             isActive: c,
             activeClassName: s,
             animated: r,
@@ -61,37 +61,43 @@ function j({
             onIconClick: t.onIconClick,
             iconTooltipTitle: t.iconTooltipTitle,
             iconTooltipProps: t.iconTooltipProps,
-            iconSize: x,
-            indicatorClassName: f
-          }
+            iconSize: m,
+            indicatorClassName: b,
+            layoutId: x
+          },
+          t.id
         );
       })
     }
   );
 }
-j.displayName = "TabLinks";
-const W = I(j, (e, a) => {
+v.displayName = "TabLinks";
+const D = $(v, (e, a) => {
   if (e.activeTab !== a.activeTab || e.className !== a.className || e.tabClassName !== a.tabClassName || e.activeTabClassName !== a.activeTabClassName || e.indicatorClassName !== a.indicatorClassName || e.animated !== a.animated || e.onTabChange !== a.onTabChange || e.renderTab !== a.renderTab || e.items.length !== a.items.length)
     return !1;
-  for (let l = 0; l < e.items.length; l++) {
-    const i = e.items[l], n = a.items[l];
-    if (i.id !== n.id || i.title !== n.title || i.disabled !== n.disabled || i.description !== n.description)
+  for (let o = 0; o < e.items.length; o++) {
+    const i = e.items[o], l = a.items[o];
+    if (i.id !== l.id || i.title !== l.title || i.disabled !== l.disabled || i.description !== l.description)
       return !1;
   }
   return !0;
-}), L = ({ id: e, title: a, icon: l, iconPosition: i = "top", onClick: n, disabled: s = !1, className: f, isActive: r = !1, activeClassName: u, animated: b = !0, onIconHover: t, onIconClick: c, iconTooltipTitle: m, iconTooltipProps: p, iconSize: x = 20, indicatorClassName: k }) => {
-  const C = (h, y, T, N, g) => T ? /* @__PURE__ */ o.jsx($, { title: T, ...N, children: /* @__PURE__ */ o.jsx("div", { onMouseEnter: y, onClick: g, children: h }) }) : /* @__PURE__ */ o.jsx("div", { onMouseEnter: y, onClick: g, children: h });
-  return /* @__PURE__ */ o.jsxs(
+}), H = ({ id: e, title: a, icon: o, iconPosition: i = "top", onClick: l, disabled: s = !1, className: b, isActive: r, activeClassName: u, onIconHover: p, onIconClick: x, iconTooltipTitle: t, iconTooltipProps: c, iconSize: f = 20, indicatorClassName: h, layoutId: m }) => {
+  const y = z(!0);
+  E(() => {
+    y.current && (y.current = !1);
+  }, []);
+  const C = (T, g, j, N, k) => j ? /* @__PURE__ */ n.jsx(M, { title: j, ...N, children: /* @__PURE__ */ n.jsx("div", { onMouseEnter: g, onClick: k, children: T }) }) : /* @__PURE__ */ n.jsx("div", { onMouseEnter: g, onClick: k, children: T });
+  return /* @__PURE__ */ n.jsxs(
     "button",
     {
-      onClick: n,
+      onClick: l,
       disabled: s,
       className: d(
         "group/tablink-item",
         "relative flex flex-col pb-[14px] justify-center items-center h-max px-4 font-medium focus:outline-none transition-colors pt-[14px]",
         s && "hover:text-primary-default-default cursor-pointer",
         s && "opacity-50 cursor-default",
-        f,
+        b,
         r && u
       ),
       tabIndex: s ? -1 : 0,
@@ -99,12 +105,12 @@ const W = I(j, (e, a) => {
       role: "tab",
       "aria-selected": r,
       children: [
-        /* @__PURE__ */ o.jsxs("div", { className: d(
+        /* @__PURE__ */ n.jsxs("div", { className: d(
           "flex items-center gap-0.5",
           i === "left" && "flex-row-reverse",
           i === "top" ? "flex-col-reverse" : "gap-1"
         ), children: [
-          /* @__PURE__ */ o.jsx(
+          /* @__PURE__ */ n.jsx(
             "label",
             {
               className: d(
@@ -115,33 +121,34 @@ const W = I(j, (e, a) => {
               children: a
             }
           ),
-          C(E(l, d(
+          C(S(o, d(
             "transition-all duration-300 ease-in-out group-hover/tablink-item:text-neutral-medium-hover ",
             r ? "text-primary-default-default prometeo-fonts-title-medium group-hover/tablink-item:text-primary-default-default" : "text-neutral-medium-default prometeo-fonts-body-large"
-          ), x), t, m, p, c)
+          ), f), p, t, c, x)
         ] }),
-        r && b && /* @__PURE__ */ o.jsx(
-          v.div,
+        r ? /* @__PURE__ */ n.jsx(
+          I.div,
           {
-            layoutId: "tab-indicator",
+            layoutId: m ? `tab-indicator-${m}` : "tab-indicator",
+            id: `tab-indicator-${e}`,
+            initial: y.current ? !1 : void 0,
             className: d(
-              "absolute -bottom-px left-1/2 -translate-x-1/2  h-[4px] rounded-t-xl bg-primary-default-default z-0 w-[calc(100%-32px)]",
-              k
+              "absolute bottom-0 left-1/2 -translate-x-1/2 h-[4px] rounded-t-xl bg-primary-default-default z-10 w-[calc(100%-32px)]",
+              h
             ),
             transition: {
               type: "spring",
               stiffness: 250,
               damping: 17
-            },
-            "aria-hidden": "true"
+            }
           }
-        )
+        ) : null
       ]
     },
-    e
+    `tablink-${e}`
   );
 };
 export {
-  W as T,
-  L as a
+  D as T,
+  H as a
 };

package/dist/TabLinks.es.js

@@ -1,4 +1,4 @@
-import { T as f } from "./TabLinks-DxqprStp.js";
+import { T as f } from "./TabLinks-BjGwvqR9.js";
 export {
   f as default
 };

package/dist/Toast.es.js

@@ -1,31 +1,31 @@
-import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { c as p } from "./cn-B6yFEsav.js";
-import P, { useRef as C, useEffect as E } from "react";
-import { toast as w } from "sonner";
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { c as g } from "./cn-B6yFEsav.js";
+import I, { useRef as j, useEffect as E } from "react";
+import { toast as y } from "sonner";
 import { Info as k } from "./Icons/Info.es.js";
-import { Error as N } from "./Icons/Error.es.js";
-import { Cancel as T } from "./Icons/Cancel.es.js";
-import { CheckCircle as M } from "./Icons/CheckCircle.es.js";
-import I from "./Button.es.js";
-import { Close as R } from "./Icons/Close.es.js";
-const y = {
+import { Error as T } from "./Icons/Error.es.js";
+import { Cancel as M } from "./Icons/Cancel.es.js";
+import { CheckCircle as P } from "./Icons/CheckCircle.es.js";
+import R from "./Button.es.js";
+import { Close as L } from "./Icons/Close.es.js";
+const v = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: M,
+      icon: P,
       loading: "bg-success-default-default"
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: T,
+      icon: M,
       loading: "bg-error-default-default"
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: N,
+      icon: T,
       loading: "bg-warning-default-default"
     },
     info: {
@@ -39,19 +39,19 @@ const y = {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: M,
+      icon: P,
       loading: "bg-success-default-pressed"
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: T,
+      icon: M,
       loading: "bg-error-medium-pressed"
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: N,
+      icon: T,
       loading: "bg-warning-medium-pressed"
     },
     info: {
@@ -61,7 +61,7 @@ const y = {
       loading: "bg-primary-default-pressed"
     }
   }
-}, v = {
+}, C = {
   dark: {
     container: "bg-neutral-default-default",
     title: "text-neutral-strong-default",
@@ -74,197 +74,238 @@ const y = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, j = (d) => {
-  const { title: n, description: l, button: s, id: c, icon: a, variant: o = "info", colorMode: e = "dark", showClose: m = !1, loading: u = !1, loadingTimeout: g = 2500, finishLoader: f = !1 } = d;
-  return /* @__PURE__ */ t.jsxs(
+}, N = (x) => {
+  const { title: l, description: f, button: o, id: d, icon: n, variant: i = "info", colorMode: t = "dark", showClose: h = !1, loading: m = !1, loadingTimeout: p = 2500, finishLoader: c = !1, customContent: u } = x;
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
       style: {
-        boxShadow: v[e].shadow
+        boxShadow: C[t].shadow
       },
-      className: p(
-        "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
-        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px] relative",
-        v[e].container,
-        y[e][o].container,
-        u && "border-b-0"
+      className: g(
+        "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] rounded-lg gap-2",
+        "w-[345px] max-w-[345px] min-w-[345px] relative",
+        // Altura fija solo cuando no hay customContent
+        !u && "md:h-[68px] md:max-h-[68px] h-[68px] max-h-[68px]",
+        // Cuando hay customContent, permitir crecimiento pero con mínimo
+        u && "md:min-h-[68px] min-h-[68px]",
+        C[t].container,
+        v[t][i].container,
+        m && "border-b-0"
       ),
       children: [
-        /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ r.jsxs(
           "div",
           {
-            className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
+            className: g(
+              "flex items-start gap-2 flex-1",
+              // Restricciones de altura solo cuando no hay customContent
+              !u && "justify-start items-center max-h-[38px] h-[38px] overflow-hidden",
+              // Cuando hay customContent, permitir crecimiento
+              u && "justify-start"
+            ),
             children: [
-              /* @__PURE__ */ t.jsx("div", { className: "f", style: { color: "inherit" }, children: P.createElement(a || y[e][o].icon, { size: 24, className: y[e][o].iconClass }) }),
-              /* @__PURE__ */ t.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ t.jsx("p", { className: p("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", v[e].title), children: n }),
-                l && /* @__PURE__ */ t.jsx("p", { className: p("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", v[e].description), children: l })
+              /* @__PURE__ */ r.jsx("div", { className: "f shrink-0", style: { color: "inherit" }, children: I.createElement(n || v[t][i].icon, { size: 24, className: v[t][i].iconClass }) }),
+              u ? /* @__PURE__ */ r.jsx("div", { className: "flex-1 min-w-0", children: u }) : /* @__PURE__ */ r.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ r.jsx("p", { className: g("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", C[t].title), children: l }),
+                f && /* @__PURE__ */ r.jsx("p", { className: g("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", C[t].description), children: f })
               ] })
             ]
           }
         ),
-        u && /* @__PURE__ */ t.jsx(L, { color: o, timeOut: g, finished: f, colorMode: e }),
-        s?.label && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          I,
+        m && /* @__PURE__ */ r.jsx(V, { color: i, timeOut: p, finished: c, colorMode: t }),
+        o?.label && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ r.jsx(
+          R,
           {
-            label: s?.label,
+            label: o?.label,
             onClick: () => {
-              s?.onClick(), w.dismiss(c);
+              o?.onClick(), y.dismiss(d);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        m && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          I,
+        h && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ r.jsx(
+          R,
           {
             onClick: () => {
-              w.dismiss(c);
+              y.dismiss(d);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ t.jsx(R, { className: p(e === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ r.jsx(L, { className: g(t === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: p(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: g(t === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
-}, L = ({ className: d, color: n, timeOut: l, finished: s, colorMode: c }) => {
-  const a = C(0), o = C(Date.now()), e = C(null);
+}, V = ({ className: x, color: l, timeOut: f, finished: o, colorMode: d }) => {
+  const n = j(0), i = j(Date.now()), t = j(null);
   E(() => {
-    if (s) {
-      a.current = 1, e.current && (e.current.style.width = "100%");
+    if (o) {
+      n.current = 1, t.current && (t.current.style.width = "100%");
       return;
     }
-    o.current = Date.now(), a.current = 0;
-    const u = setInterval(() => {
-      const g = Date.now() - o.current, f = Math.min(g / l, 1), b = f * 0.95, h = Math.sin(f * Math.PI * 2) * 0.15 + 0.05, r = Math.random() < h;
-      let i;
-      if (r)
-        i = a.current;
+    i.current = Date.now(), n.current = 0;
+    const m = setInterval(() => {
+      const p = Date.now() - i.current, c = Math.min(p / f, 1), u = c * 0.95, b = Math.sin(c * Math.PI * 2) * 0.15 + 0.05, w = Math.random() < b;
+      let e;
+      if (w)
+        e = n.current;
       else {
-        const x = (Math.random() - 0.5) * 0.25;
-        i = Math.max(a.current, Math.min(0.95, b + x));
+        const a = (Math.random() - 0.5) * 0.25;
+        e = Math.max(n.current, Math.min(0.95, u + a));
       }
-      a.current = i, e.current && (e.current.style.width = `${i * 100}%`), (f >= 1 || s) && clearInterval(u);
+      n.current = e, t.current && (t.current.style.width = `${e * 100}%`), (c >= 1 || o) && clearInterval(m);
     }, 50);
-    return () => clearInterval(u);
-  }, [l, s]);
-  const m = y[c][n].loading;
-  return /* @__PURE__ */ t.jsx("div", { className: p(
+    return () => clearInterval(m);
+  }, [f, o]);
+  const h = v[d][l].loading;
+  return /* @__PURE__ */ r.jsx("div", { className: g(
     "absolute bottom-0 translate-y-0 left-0 w-full h-2 overflow-hidden rounded-b-xl",
     'after:content-[""] after:w-[calc(100%-0px)] after:absolute after:bottom-0 after:left-1/2 after:bg-neutral-default-default after:h-2 after:-translate-x-1/2 after:-translate-y-[2px] after:rounded-b-full after:overflow-hidden',
-    d
-  ), children: /* @__PURE__ */ t.jsx(
+    x
+  ), children: /* @__PURE__ */ r.jsx(
     "div",
     {
-      ref: e,
-      className: p("h-full transition-all duration-300 ease-out", m),
+      ref: t,
+      className: g("h-full transition-all duration-300 ease-out", h),
       style: { width: "0%" }
     }
   ) });
 };
-function F(d, n) {
-  const { duration: l = 2500, showClose: s = !1, colorMode: c = "dark", position: a } = n || {};
-  return w.custom((o) => /* @__PURE__ */ t.jsx(
-    j,
+function G(x, l) {
+  const { duration: f = 2500, showClose: o = !1, colorMode: d = "dark", position: n } = l || {};
+  return y.custom((i) => /* @__PURE__ */ r.jsx(
+    N,
     {
-      id: o,
-      variant: n?.variant || "success",
-      title: d,
-      description: n?.description,
-      icon: n?.icon,
-      button: n?.button,
-      showClose: s,
-      colorMode: c
+      id: i,
+      variant: l?.variant || "success",
+      title: x,
+      description: l?.description,
+      icon: l?.icon,
+      button: l?.button,
+      showClose: o,
+      colorMode: d
     }
   ), {
-    duration: l,
-    position: a,
+    duration: f,
+    position: n,
     unstyled: !0
   });
 }
-const G = (d, n = {}) => {
+const H = (x, l = {}) => {
   const {
-    loading: l,
-    success: s,
-    error: c,
-    colorMode: a = "dark",
-    position: o,
-    timeOut: e = 5e3
-  } = n, m = { title: "Cargando...", variant: "info", ...l }, u = { variant: "success", showClose: !0, ...s }, g = { variant: "error", showClose: !0, ...c };
-  let f, b = !1;
-  const h = (r) => {
-    w.custom((i) => /* @__PURE__ */ t.jsx(
-      j,
+    loading: f,
+    success: o,
+    error: d,
+    colorMode: n = "dark",
+    position: i,
+    timeOut: t = 5e3
+  } = l, h = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean" || e === null || e === void 0 || typeof e == "object" && ("$$typeof" in e || I.isValidElement(e)), m = { title: "Cargando...", variant: "info", ...f }, p = typeof o == "function" ? { variant: "success", showClose: !0 } : { variant: "success", showClose: !0, ...o }, c = typeof d == "function" ? { variant: "error", showClose: !0 } : { variant: "error", showClose: !0, ...d };
+  let u, b = !1;
+  const w = (e) => {
+    y.custom((a) => /* @__PURE__ */ r.jsx(
+      N,
       {
-        id: i,
-        ...r,
-        colorMode: a
+        id: a,
+        ...e,
+        colorMode: n
       }
     ), {
-      id: f,
+      id: u,
       // Usar el mismo id para reemplazar
-      duration: r.duration || 1 / 0,
-      position: o,
+      duration: e.duration || 1 / 0,
+      position: i,
       unstyled: !0
     });
   };
-  return f = w.custom((r) => /* @__PURE__ */ t.jsx(
-    j,
+  return u = y.custom((e) => /* @__PURE__ */ r.jsx(
+    N,
     {
-      id: r,
-      loadingTimeout: e,
+      id: e,
+      loadingTimeout: t,
       loading: !0,
       ...m,
-      colorMode: a
+      colorMode: n
     }
   ), {
     duration: 1 / 0,
-    position: o,
+    position: i,
     unstyled: !0
-  }), d.then((r) => {
-    if (b) return;
-    b = !0, console.log(r, "-----promise result", typeof r);
-    const i = u.title || (typeof r == "string" ? r : "Operación completada con éxito!"), x = { ...u, title: i };
-    return h({
+  }), x.then((e) => {
+    if (!b)
+      return b = !0, w({
+        ...m,
+        loadingTimeout: t,
+        loading: !0,
+        finishLoader: !0,
+        variant: "info",
+        duration: 1e3
+      }), setTimeout(() => {
+        let a;
+        if (typeof o == "function") {
+          const s = o(e);
+          h(s) ? a = {
+            ...p,
+            customContent: s,
+            duration: p.duration || 2500
+          } : a = {
+            variant: "success",
+            showClose: !0,
+            ...s,
+            duration: s.duration || 2500
+          };
+        } else {
+          const s = p.title || (typeof e == "string" ? e : "Operación completada con éxito!");
+          a = {
+            ...p,
+            title: s,
+            duration: p.duration || 2500
+          };
+        }
+        w(a);
+      }, 500), e;
+  }).catch((e) => {
+    b || (b = !0, w({
       ...m,
-      loadingTimeout: e,
+      loadingTimeout: t,
       loading: !0,
       finishLoader: !0,
       variant: "info",
       duration: 1e3
     }), setTimeout(() => {
-      h({
-        ...x,
-        duration: x.duration || 2500
-      });
-    }, 500), r;
-  }).catch((r) => {
-    if (b) return;
-    b = !0;
-    const i = g.title || (typeof r == "string" ? r : r.message || "Error!"), x = { ...g, title: i };
-    h({
-      ...m,
-      loadingTimeout: e,
-      loading: !0,
-      finishLoader: !0,
-      variant: "info",
-      duration: 1e3
-    }), setTimeout(() => {
-      h({
-        ...x,
-        duration: x.duration || 2500
-      });
-    }, 500);
-  }), d;
+      let a;
+      if (typeof d == "function") {
+        const s = d(e);
+        h(s) ? a = {
+          ...c,
+          customContent: s,
+          duration: c.duration || 2500
+        } : a = {
+          variant: "error",
+          showClose: !0,
+          ...s,
+          duration: s.duration || 2500
+        };
+      } else {
+        const s = c.title || (typeof e == "string" ? e : e.message || "Error!");
+        a = {
+          ...c,
+          title: s,
+          duration: c.duration || 2500
+        };
+      }
+      w(a);
+    }, 500));
+  }), x;
 };
 export {
-  j as default,
-  G as toastPyrionPromise,
-  F as toastpyrion
+  N as default,
+  H as toastPyrionPromise,
+  G as toastpyrion
 };

package/dist/components/TabLinks/TabLinks.d.ts

@@ -47,5 +47,6 @@ interface TabLinkItemProps {
     iconTooltipTitle?: string;
     iconTooltipProps?: PlainTooltipProps;
     iconSize?: number;
+    layoutId?: string;
 }
-export declare const TabLinkItem: ({ id, title, icon, iconPosition, onClick, disabled, className, isActive, activeClassName, animated, onIconHover, onIconClick, iconTooltipTitle, iconTooltipProps, iconSize, indicatorClassName }: TabLinkItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabLinkItem: ({ id, title, icon, iconPosition, onClick, disabled, className, isActive, activeClassName, onIconHover, onIconClick, iconTooltipTitle, iconTooltipProps, iconSize, indicatorClassName, layoutId }: TabLinkItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/Toaster.d.ts

@@ -1,4 +1,5 @@
 import { IconComponent } from '../../Icons/types';
+import { ReactNode } from 'react';
 import { ColorMode } from '../Shared/types';
 type ToastElementsProps = {
     container: string;
@@ -34,15 +35,16 @@ export interface PyrionToastProps {
     loading?: boolean;
     loadingTimeout?: number;
     finishLoader?: boolean;
+    customContent?: ReactNode;
 }
 declare const PyrionToast: (props: PyrionToastProps) => import("react/jsx-runtime").JSX.Element;
 export default PyrionToast;
 export declare function toastpyrion(title: string, options?: Omit<PyrionToastProps, 'id'>): string | number;
-export declare const toastPyrionPromise: (promise: Promise<any>, options?: {
+export declare const toastPyrionPromise: <TData = any, TError = any>(promise: Promise<TData>, options?: {
     loading?: Omit<PyrionToastProps, "id">;
-    success?: Omit<PyrionToastProps, "id">;
-    error?: Omit<PyrionToastProps, "id">;
+    success?: Omit<PyrionToastProps, "id"> | ((data: TData) => Omit<PyrionToastProps, "id"> | ReactNode);
+    error?: Omit<PyrionToastProps, "id"> | ((error: TError) => Omit<PyrionToastProps, "id"> | ReactNode);
     colorMode?: ColorMode;
     position?: ToastPosition;
     timeOut?: number;
-}) => Promise<any>;
+}) => Promise<TData>;

package/dist/prometeo-design-system.es.js

@@ -21,7 +21,7 @@ import { D as ne } from "./DatePicker-QuBgR5DQ.js";
 import { RecurrentDatePicker as me } from "./RecurrentDatePicker.es.js";
 import { RecurrentDatePickerRRule as ie } from "./RecurrentDatePickerRRule.es.js";
 import { Table as ce, TableBody as be, TableCaption as De, TableCell as ve, TableFooter as Te, TableHead as ge, TableHeader as ke, TableRow as he } from "./Table.es.js";
-import { T as Ce } from "./TabLinks-DxqprStp.js";
+import { T as Ce } from "./TabLinks-BjGwvqR9.js";
 import { default as Ee } from "./TextArea.es.js";
 import { default as Re } from "./Tooltip.es.js";
 import { default as Se } from "./Skeleton.es.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.3.6",
+  "version": "4.4.0",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",