prometeo-design-system 4.6.4 → 4.7.0

package/dist/Scrollable.es.js

@@ -1,11 +1,11 @@
 import { j as y } from "./jsx-runtime-DKDX3adD.js";
-import { u as At } from "./useDevice-vwn4GLwK.js";
-import { g as gt, r as V } from "./useLabelBackground-D5SzHhl_.js";
+import { u as Rt } from "./useDevice-vwn4GLwK.js";
+import { g as vt, r as q } from "./useLabelBackground-D5SzHhl_.js";
 import { c as M } from "./cn-B6yFEsav.js";
-import { c as K } from "./index-BOQuZ0gG.js";
-import mt, { useRef as i, useState as Rt, useCallback as C, useImperativeHandle as Bt, useLayoutEffect as $t, useEffect as Ot } from "react";
-import { CrevronLeft as bt } from "./Icons/CrevronLeft.es.js";
-const vt = K(
+import { c as X } from "./index-BOQuZ0gG.js";
+import yt, { useRef as i, useState as Bt, useCallback as C, useImperativeHandle as $t, useLayoutEffect as Ot, useEffect as Wt } from "react";
+import { CrevronLeft as Tt } from "./Icons/CrevronLeft.es.js";
+const wt = X(
   "",
   {
     variants: {
@@ -16,7 +16,7 @@ const vt = K(
       }
     }
   }
-), yt = K("", {
+), xt = X("", {
   variants: {
     position: {
       top: "",
@@ -39,7 +39,7 @@ const vt = K(
     { type: "shadow", position: "left", className: "left-0 top-0 h-full w-5" },
     { type: "shadow", position: "right", className: "right-0 top-0 h-full w-5 rotate-180" }
   ]
-}), Wt = K("", {
+}), Vt = X("", {
   variants: {
     hide: {
       true: " prometeo-scrollbar-none",
@@ -50,27 +50,28 @@ const vt = K(
       medium: ""
     }
   }
-}), Yt = (X) => {
-  const { defaultBehavior: z = "scroll-on-click" } = X, Tt = At(), Y = {
-    top: { show: !0, type: "shadow", behavior: z },
-    bottom: { show: !0, type: "shadow", behavior: z },
-    left: { show: !0, type: "icon", behavior: z },
-    right: { show: !0, type: "icon", behavior: z }
-  }, G = {
+}), Gt = (Y) => {
+  const { defaultBehavior: A = "scroll-on-click" } = Y, St = Rt(), G = {
+    top: { show: !0, type: "shadow", behavior: A },
+    bottom: { show: !0, type: "shadow", behavior: A },
+    left: { show: !0, type: "icon", behavior: A },
+    right: { show: !0, type: "icon", behavior: A }
+  }, Q = {
     hide: !1,
     size: "medium"
   }, {
-    debugMode: wt = !1,
-    className: Q,
+    debugMode: Lt = !1,
+    className: Z,
     axis: v = "both",
-    children: xt,
-    indicators: St = Y,
-    scrollbarProps: Lt = G,
-    disableMouseScroll: Z = !1,
-    persistScroll: A = !1,
-    controls: Mt,
-    scrollTopButton: w
-  } = X, c = i({}), n = i(null), u = i(null), N = i(null), a = i(null), f = i(5), d = i({}), j = i(null), g = i(!1), tt = i(!1), R = i(null), D = i(null), [Nt, Et] = Rt(!1), P = { ...Y, ...St }, et = { ...G, ...Lt }, H = i([]), rt = i(/* @__PURE__ */ new Map()), ot = i({ scrollTop: 0, scrollLeft: 0 }), q = (t) => {
+    children: Mt,
+    indicators: Nt = G,
+    scrollbarProps: Et = Q,
+    disableMouseScroll: tt = !1,
+    persistScroll: j = !1,
+    controls: It,
+    scrollTopButton: w,
+    scrollMetadata: R
+  } = Y, c = i({}), n = i(null), u = i(null), N = i(null), a = i(null), f = i(5), d = i({}), D = i(null), g = i(!1), et = i(!1), B = i(null), P = i(null), [kt, Ct] = Bt(!1), H = { ...G, ...Nt }, rt = { ...Q, ...Et }, z = i([]), ot = i(/* @__PURE__ */ new Map()), nt = i({ scrollTop: 0, scrollLeft: 0 }), F = (t) => {
     if (!n.current) return 0;
     const { scrollTop: r, scrollLeft: e, scrollHeight: o, clientHeight: s, scrollWidth: l, clientWidth: h } = n.current;
     switch (t) {
@@ -85,7 +86,7 @@ const vt = K(
       default:
         return 0;
     }
-  }, nt = C((t) => {
+  }, st = C((t) => {
     if (!t || !n.current) return 0;
     const { clientHeight: r, scrollHeight: e } = n.current;
     if (t.includes("%")) {
@@ -98,21 +99,21 @@ const vt = K(
         return parseFloat(t.replace("vh", "")) / 100 * window.innerHeight;
     }
     return 0;
-  }, []), It = C(() => {
+  }, []), lt = C(() => {
     if (!n.current || !w) return;
-    const { scrollTop: t } = n.current, r = nt(w.target || "40vh");
-    Et(t >= r);
-  }, [w, nt]), st = C(() => {
+    const { scrollTop: t } = n.current, r = st(w.target || "40vh");
+    Ct(t >= r);
+  }, [w, st]), ct = C(() => {
     if (!n.current) return { x: 0, y: 0 };
     const { scrollTop: t, scrollLeft: r, scrollHeight: e, scrollWidth: o, clientHeight: s, clientWidth: l } = n.current, h = Math.max(0, e - s), m = Math.max(0, o - l), T = h > 0 ? t / h * 100 : 0;
     return { x: m > 0 ? r / m * 100 : 0, y: T };
-  }, []), lt = C((t) => {
-    const r = ot.current;
+  }, []), at = C((t) => {
+    const r = nt.current;
     let e = null;
-    return t.scrollTop > r.scrollTop ? e = "down" : t.scrollTop < r.scrollTop ? e = "up" : t.scrollLeft > r.scrollLeft ? e = "right" : t.scrollLeft < r.scrollLeft && (e = "left"), ot.current = t, e;
-  }, []), kt = C((t) => {
+    return t.scrollTop > r.scrollTop ? e = "down" : t.scrollTop < r.scrollTop ? e = "up" : t.scrollLeft > r.scrollLeft ? e = "right" : t.scrollLeft < r.scrollLeft && (e = "left"), nt.current = t, e;
+  }, []), it = C((t) => {
     if (!n.current) return;
-    const { scrollTop: r, scrollLeft: e, scrollHeight: o, scrollWidth: s, clientHeight: l, clientWidth: h } = n.current, m = lt(t), { x: T, y: S } = st(), L = {
+    const { scrollTop: r, scrollLeft: e, scrollHeight: o, scrollWidth: s, clientHeight: l, clientWidth: h } = n.current, m = at(t), { x: T, y: S } = ct(), L = {
       percentage: S,
       direction: m,
       scrollTop: r,
@@ -120,8 +121,9 @@ const vt = K(
       scrollHeight: o,
       scrollWidth: s,
       clientHeight: l,
-      clientWidth: h
-    }, _ = {
+      clientWidth: h,
+      metadata: R
+    }, J = {
       percentage: T,
       direction: m,
       scrollTop: r,
@@ -129,51 +131,52 @@ const vt = K(
       scrollHeight: o,
       scrollWidth: s,
       clientHeight: l,
-      clientWidth: h
+      clientWidth: h,
+      metadata: R
     };
-    H.current.forEach((p) => {
-      const { config: b, triggered: $ } = p;
+    z.current.forEach((p) => {
+      const { config: b, triggered: O } = p;
       if (!b) {
-        (v === "y" || v === "both") && p.callback(L), (v === "x" || v === "both") && p.callback(_);
+        (v === "y" || v === "both") && p.callback(L), (v === "x" || v === "both") && p.callback(J);
         return;
       }
-      const J = (b.direction === "y" || b.direction === "both") && (v === "y" || v === "both"), pt = (b.direction === "x" || b.direction === "both") && (v === "x" || v === "both");
-      if (!J && !pt) return;
-      const E = (J ? L : _).percentage, I = b.target * 100;
+      const K = (b.direction === "y" || b.direction === "both") && (v === "y" || v === "both"), bt = (b.direction === "x" || b.direction === "both") && (v === "x" || v === "both");
+      if (!K && !bt) return;
+      const E = (K ? L : J).percentage, I = b.target * 100;
       let k = !1;
       if (b.trip === "forth")
-        k = !$ && E >= I, k && (p.triggered = !0), $ && E < I && (p.triggered = !1);
+        k = !O && E >= I, k && (p.triggered = !0), O && E < I && (p.triggered = !1);
       else if (b.trip === "back")
-        k = $ && E < I, k && (p.triggered = !1), !$ && E >= I && (p.triggered = !0);
+        k = O && E < I, k && (p.triggered = !1), !O && E >= I && (p.triggered = !0);
       else if (b.trip === "round-trip") {
-        const O = E >= I;
-        k = p.triggered !== O;
+        const W = E >= I;
+        k = p.triggered !== W;
       }
       if (k) {
-        const O = `${H.current.indexOf(p)}-${b?.target || 0}-${b?.direction || "y"}`, W = Date.now(), zt = rt.current.get(O) || 0;
-        if (W - zt < 500)
+        const W = `${z.current.indexOf(p)}-${b?.target || 0}-${b?.direction || "y"}`, V = Date.now(), At = ot.current.get(W) || 0;
+        if (V - At < 500)
           return;
-        b.trip === "round-trip" && (p.triggered = E >= I, p.lastDirection = m || void 0), rt.current.set(O, W), p.lastTriggerTime = W, J ? p.callback(L) : pt && p.callback(_);
+        b.trip === "round-trip" && (p.triggered = E >= I, p.lastDirection = m || void 0), ot.current.set(W, V), p.lastTriggerTime = V, K ? p.callback(L) : bt && p.callback(J);
       }
     });
-  }, [v, lt, st]), ct = C((t, r) => {
+  }, [v, at, ct, R]), ut = C((t, r) => {
     const e = {
       callback: t,
       config: r,
       triggered: !1,
       lastDirection: void 0
     };
-    return H.current.push(e), () => {
-      const o = H.current.indexOf(e);
-      o > -1 && H.current.splice(o, 1);
+    return z.current.push(e), () => {
+      const o = z.current.indexOf(e);
+      o > -1 && z.current.splice(o, 1);
     };
   }, []);
-  Bt(Mt, () => ({
-    subscribeToScrollTarget: ct
-  }), [ct]);
-  const B = (t, r = 100, e = !0) => {
+  $t(It, () => ({
+    subscribeToScrollTarget: ut
+  }), [ut]);
+  const $ = (t, r = 100, e = !0) => {
     if (!n.current) return;
-    const o = q(t), s = Math.min(Math.abs(r), o);
+    const o = F(t), s = Math.min(Math.abs(r), o);
     if (s === 0) return;
     const l = t === "top" || t === "left" ? -s : s, h = {
       top: { top: l, left: 0 },
@@ -182,7 +185,7 @@ const vt = K(
       right: { top: 0, left: l }
     };
     n.current.scrollBy({ ...h[t], behavior: e ? "smooth" : "auto" });
-  }, Ct = (t) => {
+  }, jt = (t) => {
     if (!n.current) return;
     const r = n.current, e = {
       top: { top: 0, left: r.scrollLeft },
@@ -191,17 +194,17 @@ const vt = K(
       right: { top: r.scrollTop, left: r.scrollWidth }
     };
     r.scrollTo({ ...e[t], behavior: "smooth" });
-  }, jt = () => {
+  }, Dt = () => {
     n.current && n.current.scrollTo({ top: 0, behavior: "smooth" });
-  }, Dt = (t, r) => {
+  }, Pt = (t, r) => {
     const e = c.current[t];
     if (e) {
       if (e.style.cursor = "pointer", r === "icon") {
         const o = e.querySelector("svg");
         o && (o.style.transition = "all 0.3s ease-in-out", o.style.transform = "scale(1.3)", o.style.backgroundColor = "rgba(255, 255, 255, 0.2)", o.style.borderRadius = "100%");
       } else if (r === "shadow") {
-        const o = e.querySelector("span"), s = gt(n.current);
-        o && (t === "top" || t === "bottom" ? (o.style.height = "110px", o.style.background = `linear-gradient(to bottom, ${s} 5%, ${V(s, -2)} 10%, ${V(s, -5, 30)} 70%, transparent)`, o.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
+        const o = e.querySelector("span"), s = vt(n.current);
+        o && (t === "top" || t === "bottom" ? (o.style.height = "110px", o.style.background = `linear-gradient(to bottom, ${s} 5%, ${q(s, -2)} 10%, ${q(s, -5, 30)} 70%, transparent)`, o.style.animation = "scrollToEndPulse 3.5s ease-out", setTimeout(() => {
           o.style.animation = "";
         }, 3500)) : (o.style.width = "40px", o.style.animation = "scrollToEndPulseVertical 1.5s ease-out", setTimeout(() => {
           o.style.animation = "";
@@ -216,87 +219,87 @@ const vt = K(
     e && (e.style.transform = "", e.style.backgroundColor = "", e.style.borderRadius = "");
     const o = r.querySelector("span");
     o && (o.style.height = "", o.style.width = "");
-  }, at = (t, r) => {
+  }, ft = (t, r) => {
     if (r === "scroll-on-click" && g.current) {
       g.current = !1;
       return;
     }
     if (d.current[t]) {
-      a.current && (clearTimeout(a.current), a.current = null), u.current && (clearInterval(u.current), u.current = null), x(t), d.current[t] = !1, Ct(t);
+      a.current && (clearTimeout(a.current), a.current = null), u.current && (clearInterval(u.current), u.current = null), x(t), d.current[t] = !1, jt(t);
       return;
     }
     if (r === "scroll-on-click") {
       if (!n.current) return;
       const { clientHeight: e, clientWidth: o } = n.current, s = t === "top" || t === "bottom" ? e * 0.8 : o * 0.8;
-      B(t, s);
+      $(t, s);
     }
-  }, it = (t, r) => {
+  }, dt = (t, r) => {
     a.current && (clearTimeout(a.current), a.current = null), g.current = !0, f.current = 3;
     let e = 0;
-    j.current = t, d.current[t] = !1, B(t, f.current, !1), u.current = setInterval(() => {
+    D.current = t, d.current[t] = !1, $(t, f.current, !1), u.current = setInterval(() => {
       e += 16;
       const o = e / 1e3;
-      if (q(t) === 0) {
-        F(t);
+      if (F(t) === 0) {
+        U(t);
         return;
       }
-      if (o >= 2 && !d.current[t] && (d.current[t] = !0, Dt(t, r)), o <= 2)
+      if (o >= 2 && !d.current[t] && (d.current[t] = !0, Pt(t, r)), o <= 2)
         f.current = 5 + o * 0.4;
       else {
         const l = o - 2;
         f.current += Math.pow(l, 1.1) * 2;
       }
-      f.current = Math.min(f.current, 100), B(t, f.current, !1);
+      f.current = Math.min(f.current, 100), $(t, f.current, !1);
     }, 16);
-  }, F = (t, r = !1) => {
+  }, U = (t, r = !1) => {
     N.current && (clearTimeout(N.current), N.current = null);
-    const e = t || j.current;
+    const e = t || D.current;
     if (!r && e && u.current) {
       let o = 0;
       const s = f.current, l = 800, h = setInterval(() => {
         o += 16;
         const m = o / l, T = 1 - Math.pow(1 - m, 3);
-        if (f.current = s * (1 - T), q(e) === 0 || f.current <= 0.5) {
+        if (f.current = s * (1 - T), F(e) === 0 || f.current <= 0.5) {
           clearInterval(h), u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
             x(e), d.current[e] = !1, g.current = !1;
-          }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, j.current = null;
+          }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
           return;
         }
-        B(e, f.current, !1);
+        $(e, f.current, !1);
       }, 16);
       N.current = setTimeout(() => {
         clearInterval(h), u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
           x(e), d.current[e] = !1, g.current = !1;
-        }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, j.current = null;
+        }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
       }, l);
     } else
       u.current && (clearInterval(u.current), u.current = null), f.current = 5, e ? d.current[e] ? (a.current && clearTimeout(a.current), a.current = setTimeout(() => {
         x(e), d.current[e] = !1, g.current = !1;
-      }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, j.current = null;
-  }, ut = (t, r, e) => {
-    Tt || r === "scroll-on-hover" && (N.current = setTimeout(() => {
-      it(t, e);
+      }, 1e3)) : (x(e), d.current[e] = !1, g.current = !1) : g.current = !1, D.current = null;
+  }, ht = (t, r, e) => {
+    St || r === "scroll-on-hover" && (N.current = setTimeout(() => {
+      dt(t, e);
     }, 200));
-  }, ft = (t, r) => {
-    r === "scroll-on-hover" && F(t, !0);
-  }, dt = (t, r, e) => {
+  }, pt = (t, r) => {
+    r === "scroll-on-hover" && U(t, !0);
+  }, gt = (t, r, e) => {
     r === "scroll-on-click" && (g.current = !1, N.current = setTimeout(() => {
-      it(t, e);
+      dt(t, e);
     }, 200));
-  }, ht = (t, r) => {
-    r === "scroll-on-click" && F(t, !1);
-  }, U = () => {
+  }, mt = (t, r) => {
+    r === "scroll-on-click" && U(t, !1);
+  }, _ = () => {
     if (!n.current) return;
     const t = n.current, { scrollTop: r, scrollLeft: e, scrollHeight: o, scrollWidth: s, clientHeight: l, clientWidth: h } = t, m = r <= 10, T = r + l >= o - 10, S = e <= 10, L = e + h >= s - 10;
     c.current.top?.classList.toggle("opacity-0", m), c.current.top?.classList.toggle("pointer-events-none", m), c.current.top?.classList.toggle("pointer-events-auto", !m), c.current.bottom?.classList.toggle("opacity-0", T), c.current.bottom?.classList.toggle("pointer-events-none", T), c.current.bottom?.classList.toggle("pointer-events-auto", !T), c.current.left?.classList.toggle("opacity-0", S), c.current.left?.classList.toggle("pointer-events-none", S), c.current.left?.classList.toggle("pointer-events-auto", !S), c.current.right?.classList.toggle("opacity-0", L), c.current.right?.classList.toggle("pointer-events-none", L), c.current.right?.classList.toggle("pointer-events-auto", !L);
   };
-  $t(() => {
+  Ot(() => {
     if (!n.current) return;
     const t = n.current;
-    if (A) {
-      R.current = typeof A == "string" ? `scrollable-${A}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
+    if (j) {
+      B.current = typeof j == "string" ? `scrollable-${j}` : `scrollable-${Math.random().toString(36).substr(2, 9)}`;
       try {
-        const o = sessionStorage.getItem(R.current);
+        const o = sessionStorage.getItem(B.current);
         if (o) {
           const { scrollTop: s, scrollLeft: l } = JSON.parse(o);
           t.scrollTop = s, t.scrollLeft = l;
@@ -304,71 +307,71 @@ const vt = K(
       } catch {
       }
     }
-    U(), tt.current || (tt.current = !0, requestAnimationFrame(() => {
+    _(), et.current || (et.current = !0, requestAnimationFrame(() => {
       Object.values(c.current).forEach((o) => {
         o?.classList.add("transition-all", "duration-300");
       }), setTimeout(() => {
-        U();
+        _();
       }, 0);
     }));
     const r = () => {
-      if (U(), It(), n.current) {
+      if (_(), lt(), n.current) {
         const o = {
           scrollTop: n.current.scrollTop,
           scrollLeft: n.current.scrollLeft
         };
-        kt(o);
+        it(o);
       }
-      A && R.current && (D.current && clearTimeout(D.current), D.current = setTimeout(() => {
+      j && B.current && (P.current && clearTimeout(P.current), P.current = setTimeout(() => {
         try {
           const o = {
             scrollTop: t.scrollTop,
             scrollLeft: t.scrollLeft
           };
-          sessionStorage.setItem(R.current, JSON.stringify(o));
+          sessionStorage.setItem(B.current, JSON.stringify(o));
         } catch {
         }
       }, 150));
     };
     t.addEventListener("scroll", r);
     const e = (o) => {
-      Z && o.preventDefault();
+      tt && o.preventDefault();
     };
     return t.addEventListener("wheel", e, { passive: !1 }), () => {
-      t.removeEventListener("scroll", r), t.removeEventListener("wheel", e), D.current && clearTimeout(D.current);
+      t.removeEventListener("scroll", r), t.removeEventListener("wheel", e), P.current && clearTimeout(P.current);
     };
-  }, [Z]), Ot(() => {
+  }, [tt, j, R, lt, it]), Wt(() => {
     if (!n.current) return;
-    let t = gt(n.current);
-    Object.entries(P).forEach(([r, e]) => {
+    let t = vt(n.current);
+    Object.entries(H).forEach(([r, e]) => {
       if (e?.show && e.type === "shadow") {
         const s = c.current[r]?.querySelector("span");
         if (s) {
           s.dataset.bgColor = t;
           const l = r === "left" || r === "right" ? "to right" : "to bottom";
-          s.style.background = `linear-gradient(${l}, ${t} 5%, ${V(t, 0)} 10%, ${V(t, -2, 30)} 70%, transparent)`;
+          s.style.background = `linear-gradient(${l}, ${t} 5%, ${q(t, 0)} 10%, ${q(t, -2, 30)} 70%, transparent)`;
         }
       }
     });
-  }, [P]);
-  const Pt = mt.Children.toArray(xt), Ht = Object.values(P).some((t) => t?.show && t?.type === "icon");
-  return /* @__PURE__ */ y.jsxs("div", { className: M("relative p-0", Q, vt({ axis: v }), "scrolleable", Ht ? "overflow-visible" : "overflow-hidden!"), children: [
+  }, [H]);
+  const Ht = yt.Children.toArray(Mt), zt = Object.values(H).some((t) => t?.show && t?.type === "icon");
+  return /* @__PURE__ */ y.jsxs("div", { className: M("relative p-0", Z, wt({ axis: v }), "scrolleable", zt ? "overflow-visible" : "overflow-hidden!"), children: [
     /* @__PURE__ */ y.jsx(
       "div",
       {
         ref: n,
         className: M(
-          wt && "border border-red-900 border-dashed",
-          Q,
+          Lt && "border border-red-900 border-dashed",
+          Z,
           "py-2  relative w-full h-full min-h-full",
-          vt({ axis: v }),
-          Wt({ hide: et?.hide, size: et?.size }),
+          wt({ axis: v }),
+          Vt({ hide: rt?.hide, size: rt?.size }),
           ""
         ),
-        children: Pt?.map((t) => mt.cloneElement(t, { className: M(t?.props?.className, "shrink-0! pointer-events-auto") }))
+        children: Ht?.map((t) => yt.cloneElement(t, { className: M(t?.props?.className, "shrink-0! pointer-events-auto") }))
       }
     ),
-    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(P).map(([t, r]) => {
+    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit]", children: Object.entries(H).map(([t, r]) => {
       if (!r?.show || r.type !== "shadow") return null;
       const e = t;
       return /* @__PURE__ */ y.jsx(
@@ -381,17 +384,17 @@ const vt = K(
             "cursor-default ease-in-out z-100",
             "opacity-0 pointer-events-none"
           ),
-          onClick: () => at(e, r.behavior),
-          onMouseEnter: () => ut(e, r.behavior, r.type),
-          onMouseLeave: () => ft(e, r.behavior),
-          onMouseDown: () => dt(e, r.behavior, r.type),
-          onMouseUp: () => ht(e, r.behavior),
-          children: /* @__PURE__ */ y.jsx("span", { className: M(yt({ position: e, type: "shadow" }), r.className) })
+          onClick: () => ft(e, r.behavior),
+          onMouseEnter: () => ht(e, r.behavior, r.type),
+          onMouseLeave: () => pt(e, r.behavior),
+          onMouseDown: () => gt(e, r.behavior, r.type),
+          onMouseUp: () => mt(e, r.behavior),
+          children: /* @__PURE__ */ y.jsx("span", { className: M(xt({ position: e, type: "shadow" }), r.className) })
         },
         t
       );
     }) }),
-    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(P).map(([t, r]) => {
+    /* @__PURE__ */ y.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none", children: Object.entries(H).map(([t, r]) => {
       if (!r?.show || r.type !== "icon") return null;
       const e = t;
       return /* @__PURE__ */ y.jsx(
@@ -401,12 +404,12 @@ const vt = K(
             c.current[t] = o;
           },
           className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
-          onClick: () => at(e, r.behavior),
-          onMouseEnter: () => ut(e, r.behavior, r.type),
-          onMouseLeave: () => ft(e, r.behavior),
-          onMouseDown: () => dt(e, r.behavior, r.type),
-          onMouseUp: () => ht(e, r.behavior),
-          children: /* @__PURE__ */ y.jsx(bt, { size: 20, className: M(yt({ position: e, type: "icon" }), r.className) })
+          onClick: () => ft(e, r.behavior),
+          onMouseEnter: () => ht(e, r.behavior, r.type),
+          onMouseLeave: () => pt(e, r.behavior),
+          onMouseDown: () => gt(e, r.behavior, r.type),
+          onMouseUp: () => mt(e, r.behavior),
+          children: /* @__PURE__ */ y.jsx(Tt, { size: 20, className: M(xt({ position: e, type: "icon" }), r.className) })
         },
         t
       );
@@ -414,24 +417,24 @@ const vt = K(
     w && /* @__PURE__ */ y.jsx(
       "button",
       {
-        onClick: jt,
+        onClick: Dt,
         className: M(
           "absolute bottom-6 right-6 z-50 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 pointer-events-auto cursor-pointer",
           "bg-primary-default-default hover:bg-primary-default-hover text-white",
           // Transiciones de aparición/desaparición
           "transform translate-y-0 opacity-70",
-          !Nt && "translate-y-4 opacity-0 pointer-events-none",
+          !kt && "translate-y-4 opacity-0 pointer-events-none",
           w.className
         ),
         "aria-label": "Scroll to top",
         style: {
           transition: "all 0.3s ease-in-out"
         },
-        children: w.icon ? /* @__PURE__ */ y.jsx(w.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ y.jsx(bt, { size: 20, className: "text-white rotate-90" })
+        children: w.icon ? /* @__PURE__ */ y.jsx(w.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ y.jsx(Tt, { size: 20, className: "text-white rotate-90" })
       }
     )
   ] });
 };
 export {
-  Yt as Scrollable
+  Gt as Scrollable
 };

package/dist/Skeleton.es.js

@@ -47,7 +47,7 @@ const y = (n) => {
     }
   }, [d, m, i, b]);
   const S = {
-    circle: "rounded-full aspect-square",
+    circle: "rounded-full aspect-square shrink-0",
     square: "rounded-none",
     rounded: "rounded"
   };

package/dist/components/Header/Header.d.ts

@@ -7,6 +7,7 @@ export interface IHeader {
     subtitleClassName?: string;
     titleClassName?: string;
     mainActionSlot?: ReactNode | (() => ReactNode);
+    secondarySlot?: ReactNode | (() => ReactNode);
 }
-declare const Header: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName, titleClassName, mainActionSlot }: IHeader) => import("react/jsx-runtime").JSX.Element>;
+declare const Header: import('react').MemoExoticComponent<({ title, subtitle, children, className, subtitleClassName, titleClassName, mainActionSlot, secondarySlot }: IHeader) => import("react/jsx-runtime").JSX.Element>;
 export default Header;

package/dist/components/IconButton/IconButton.d.ts

@@ -7,7 +7,7 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     animate?: boolean;
     animateIcon?: boolean;
     isLoading?: boolean;
-    children?: IconComponent;
+    children?: React.ReactNode | (() => React.ReactNode);
     spinner?: React.ReactNode;
     type?: 'button' | "submit" | "reset";
     className?: string;

package/dist/components/PyrionNavigationDrawer/PLNotificationsList.d.ts

@@ -1,4 +1,5 @@
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
+import { default as React } from 'react';
 import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 interface PLNotificationsDrawerProps<NotificationMetadata> {
     onCloseClick?: VoidFunction;
@@ -6,13 +7,15 @@ interface PLNotificationsDrawerProps<NotificationMetadata> {
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<NotificationMetadata> | null>;
     scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 }
+export type NotificationLoaderType = 'skeletons' | 'load_more';
 export interface NotificationsListControlsHandler<NotificationMetadata> {
     addNewNotification: (notification: NotificationCardProps<NotificationMetadata> | NotificationCardProps<NotificationMetadata>[], position?: 'top' | 'bottom') => void;
     subscribeToUpdates: (callback: (notifications: NotificationCardProps<NotificationMetadata>[], count: number) => void) => () => void;
     removeNotification: (id: string | string[]) => void;
     removeAllNotifications: () => void;
     setNotifications: (notifications: NotificationCardProps<NotificationMetadata>[]) => void;
-    setLoading: (loading: boolean) => void;
+    setLoading: (loading: boolean, type: NotificationLoaderType) => void;
+    setError: (hasError: boolean, children?: React.ReactNode | (() => React.ReactNode)) => void;
 }
 declare const PLNotificationsList: <NotificationMetadata = unknown>({ onCloseClick, onMarkAllAsRead, notificationsListControls, scrollableControls }: PLNotificationsDrawerProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
 export default PLNotificationsList;

package/dist/components/PyrionNavigationDrawer/PLNotificationsLoader.d.ts

@@ -0,0 +1,6 @@
+import { NotificationLoaderType } from './PLNotificationsList';
+export interface PLNotificationsLoaderProps {
+    type: NotificationLoaderType;
+}
+declare const PLNotificationsLoader: ({ type }: PLNotificationsLoaderProps) => import("react/jsx-runtime").JSX.Element | undefined;
+export default PLNotificationsLoader;

package/dist/components/PyrionNavigationDrawer/PyrionLayout.d.ts

@@ -6,6 +6,7 @@ import { NotificationCardProps } from '../NotificationCard/NotificationCard';
 import { ScrollTargetData, ScrollTargetConfig } from '../Scrollable/Scrollable';
 import { AllOptionAccessor } from '../Shared/types';
 import { TabSwitchElement } from '../TabSwitch/TabSwitch';
+import { NotificationLoaderType } from './PLNotificationsList';
 import { subImageUrlAccessor } from './PLSystemSessions';
 type TProduct = {
     name: string;
@@ -141,7 +142,8 @@ export type PyrionNavigationControls<TNotificationMetadata = unknown> = {
     setNotifications?: (notifications: NotificationCardProps<TNotificationMetadata>[]) => void;
     removeAllNotifications?: () => void;
     removeNotification?: (id: string | string[]) => void;
-    setNotificationsLoading?: (loading: boolean) => void;
+    setNotificationsLoading?: (loading: boolean, type?: NotificationLoaderType) => void;
+    setNotificationsError?: (hasError: boolean, children?: React.ReactNode | (() => React.ReactNode)) => void;
     subscribeToNotificationsScroll?: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
 };
 export declare const usePyrionLayout: <TNotificationMetadata = unknown>() => PyrionNavigationControls<TNotificationMetadata>;

package/dist/components/Scrollable/Scrollable.d.ts

@@ -26,6 +26,7 @@ export interface ScrollTargetData {
     scrollWidth: number;
     clientHeight: number;
     clientWidth: number;
+    metadata?: Record<string, any>;
 }
 export interface ScrollTargetConfig {
     target: number;
@@ -56,6 +57,7 @@ export interface ScrollableProps {
     persistScroll?: boolean | string;
     controls?: React.RefObject<ScrollableControlsHandler | null>;
     scrollTopButton?: ScrollTopButtonProps;
+    scrollMetadata?: Record<string, any>;
 }
 declare const Scrollable: (props: ScrollableProps) => import("react/jsx-runtime").JSX.Element;
 export default Scrollable;

package/dist/iconUtils-rTOfKDxE.js

@@ -0,0 +1,9 @@
+import { memo as n } from "react";
+const t = "__isPrometeoIcon", r = (o) => {
+  const s = n(o, (e, m) => e.size === m.size && e.className === m.className && e.props === m.props);
+  return s[t] = !0, s;
+}, i = (o) => o && o[t] === !0;
+export {
+  i,
+  r as m
+};

package/package.json

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