prometeo-design-system 7.7.0 → 7.7.2

package/dist/Dialog.es.js

@@ -1,8 +1,8 @@
 import { j as n } from "./jsx-runtime-GkKLlHH4.js";
-import { useContext as Z, createContext as $, forwardRef as ee, memo as O, useRef as h, useState as R, useCallback as p, useEffect as I, useImperativeHandle as ne, useMemo as q } from "react";
+import { useContext as Z, createContext as $, forwardRef as ee, memo as F, useRef as h, useState as I, useCallback as p, useEffect as k, useImperativeHandle as ne, useMemo as q } from "react";
 import { createPortal as te } from "react-dom";
-import { c as v } from "./cn-B6yFEsav.js";
-import { M as re } from "./MenuFloating-SbwgI4UF.js";
+import { c as N } from "./cn-B6yFEsav.js";
+import { M as re } from "./MenuFloating-ColYjZe9.js";
 import oe from "./CardBackground.es.js";
 import se from "./IconButton.es.js";
 import { Close as le } from "./Icons/Close.es.js";
@@ -15,16 +15,16 @@ function ae() {
     );
   return e;
 }
-const M = 100, k = O(function({
-  title: r,
-  description: t,
+const M = 100, w = F(function({
+  title: t,
+  description: r,
   className: l
 }) {
-  const { hideCloseButton: s, closeDialog: a } = ae();
-  return /* @__PURE__ */ n.jsxs("div", { className: v("flex flex-col gap-4  pt-2 ", l), children: [
+  const { hideCloseButton: o, closeDialog: a } = ae();
+  return /* @__PURE__ */ n.jsxs("div", { className: N("flex flex-col gap-4  pt-2 ", l), children: [
     /* @__PURE__ */ n.jsxs("div", { className: "flex items-baseline justify-center gap-2 pl-4 pr-2 ", children: [
-      r && /* @__PURE__ */ n.jsx("span", { className: "prometeo-fonts-title-medium text-neutral-default-default", children: r }),
-      !s && /* @__PURE__ */ n.jsx("div", { className: "flex-1 flex justify-end", children: /* @__PURE__ */ n.jsx(
+      t && /* @__PURE__ */ n.jsx("span", { className: "prometeo-fonts-title-medium text-neutral-default-default", children: t }),
+      !o && /* @__PURE__ */ n.jsx("div", { className: "flex-1 flex justify-end", children: /* @__PURE__ */ n.jsx(
         se,
         {
           icon: le,
@@ -35,62 +35,62 @@ const M = 100, k = O(function({
         }
       ) })
     ] }),
-    t && /* @__PURE__ */ n.jsx("p", { className: "prometeo-fonts-body-small text-neutral-secondary-default px-4", children: t })
+    r && /* @__PURE__ */ n.jsx("p", { className: "prometeo-fonts-body-small text-neutral-secondary-default px-4", children: r })
   ] });
 });
-k.displayName = "Dialog.Header";
-const P = O(function({
-  children: r,
-  className: t
+w.displayName = "Dialog.Header";
+const P = F(function({
+  children: t,
+  className: r
 }) {
-  return /* @__PURE__ */ n.jsx("div", { className: v("px-4 py-0 flex flex-col gap-4 ", t), children: r });
+  return /* @__PURE__ */ n.jsx("div", { className: N("px-4 py-0 flex flex-col gap-4 ", r), children: t });
 });
 P.displayName = "Dialog.Content";
-const U = O(function({
-  children: r,
-  className: t
+const U = F(function({
+  children: t,
+  className: r
 }) {
   return /* @__PURE__ */ n.jsx(
     "div",
     {
-      className: v(
+      className: N(
         "p-4 pt-2 flex flex-row gap-3 items-center",
-        t
+        r
       ),
-      children: r
+      children: t
     }
   );
 });
 U.displayName = "Dialog.Footer";
-const X = O(function({
-  layoutContext: r,
-  shouldRenderChildren: t,
+const X = F(function({
+  layoutContext: t,
+  shouldRenderChildren: r,
   hasAutoHeader: l,
-  title: s,
+  title: o,
   description: a,
-  cardBackground: o,
-  className: c,
-  children: i
+  cardBackground: i,
+  className: s,
+  children: c
 }) {
   return /* @__PURE__ */ n.jsxs(
     "div",
     {
-      className: v(
+      className: N(
         "relative flex flex-col radius-medium overflow-hidden dropshadow-400",
         "border border-neutral-default-default",
-        c
+        s
       ),
       children: [
         /* @__PURE__ */ n.jsx(
           oe,
           {
-            ...o ?? {},
-            className: v("absolute inset-0 z-0", o?.className)
+            ...i ?? {},
+            className: N("absolute inset-0 z-0", i?.className)
           }
         ),
-        /* @__PURE__ */ n.jsx("div", { className: "relative z-10 flex flex-col gap-4 min-h-0 overflow-hidden", children: /* @__PURE__ */ n.jsx(L.Provider, { value: r, children: t && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-          l && /* @__PURE__ */ n.jsx(k, { title: s, description: a }),
-          i
+        /* @__PURE__ */ n.jsx("div", { className: "relative z-10 flex flex-col gap-4 min-h-0 overflow-hidden", children: /* @__PURE__ */ n.jsx(L.Provider, { value: t, children: r && /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
+          l && /* @__PURE__ */ n.jsx(w, { title: o, description: a }),
+          c
         ] }) }) })
       ]
     }
@@ -99,21 +99,21 @@ const X = O(function({
 X.displayName = "Dialog.Card";
 function ce({
   triggerRef: e,
-  anchorRef: r,
-  placement: t,
+  anchorRef: t,
+  placement: r,
   offset: l = 4,
-  matchTriggerWidth: s,
+  matchTriggerWidth: o,
   attachToParent: a = !1,
-  closeOnScroll: o = !0,
-  closeOnClickOutside: c = !0,
-  zIndex: i = 50,
+  closeOnScroll: i = !0,
+  closeOnClickOutside: s = !0,
+  zIndex: c = 50,
   avoidElements: u,
-  cardBackground: N,
+  cardBackground: y,
   title: b,
   description: D,
-  hideCloseButton: w = !1,
+  hideCloseButton: j = !1,
   modal: m = !1,
-  unmountChildrenOnClose: j = !0,
+  unmountChildrenOnClose: C = !0,
   onClose: T,
   onOpen: A,
   children: _,
@@ -121,35 +121,35 @@ function ce({
 }, J) {
   const f = h(null), H = h(T), S = h(A);
   H.current = T, S.current = A;
-  const [F, C] = R("hidden"), [K, E] = R(
-    () => !j
+  const [R, v] = I("hidden"), [K, E] = I(
+    () => !C
   ), g = h(null), d = p(() => {
     g.current && (clearTimeout(g.current), g.current = null);
   }, []), z = p(
     (x) => {
-      d(), m && C("open"), j && E(!0), f.current?.open(x), S.current?.(x);
+      d(), m && v("open"), C && E(!0), f.current?.open(x), S.current?.(x);
     },
-    [m, j, d]
-  ), y = p(() => {
-    m && (d(), C("closing"), g.current = setTimeout(() => {
-      C("hidden"), g.current = null;
+    [m, C, d]
+  ), O = p(() => {
+    m && (d(), v("closing"), g.current = setTimeout(() => {
+      v("hidden"), g.current = null;
     }, M)), f.current?.close();
   }, [m, d]), Q = p(() => {
-    j && E(!1), H.current?.(f.current?.getContext() ?? null);
-  }, [j]);
-  I(() => {
+    C && E(!1), H.current?.(f.current?.getContext() ?? null);
+  }, [C]);
+  k(() => {
     const x = f.current;
     if (!(!x || !m))
       return x.subscribeOpenChange((Y) => {
-        Y || C((B) => B !== "open" ? B : (d(), g.current = setTimeout(() => {
-          C("hidden"), g.current = null;
+        Y || v((B) => B !== "open" ? B : (d(), g.current = setTimeout(() => {
+          v("hidden"), g.current = null;
         }, M), "closing"));
       });
-  }, [m, d]), I(() => d, [d]), ne(
+  }, [m, d]), k(() => d, [d]), ne(
     J,
     () => ({
       open: z,
-      close: y,
+      close: O,
       get isOpen() {
         return f.current?.isOpen ?? !1;
       },
@@ -157,21 +157,21 @@ function ce({
       subscribeOpenChange: (x) => f.current?.subscribeOpenChange(x) ?? (() => {
       })
     }),
-    [z, y]
+    [z, O]
   );
   const V = q(
-    () => ({ hideCloseButton: w, closeDialog: y }),
-    [w, y]
+    () => ({ hideCloseButton: j, closeDialog: O }),
+    [j, O]
   ), W = b != null || D != null;
   return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
-    m && F !== "hidden" && te(
+    m && R !== "hidden" && te(
       /* @__PURE__ */ n.jsx(
         "div",
         {
           className: "prometeo-dialog-backdrop",
-          "data-open": F === "open" ? "true" : void 0,
-          "data-closing": F === "closing" ? "true" : void 0,
-          style: { zIndex: i - 1 }
+          "data-open": R === "open" ? "true" : void 0,
+          "data-closing": R === "closing" ? "true" : void 0,
+          style: { zIndex: c - 1 }
         }
       ),
       document.body
@@ -181,14 +181,14 @@ function ce({
       {
         ref: f,
         triggerRef: e,
-        anchorRef: r,
-        placement: t,
+        anchorRef: t,
+        placement: r,
         offset: l,
-        matchTriggerWidth: s,
+        matchTriggerWidth: o,
         attachToParent: a,
-        closeOnScroll: o,
-        closeOnClickOutside: c,
-        zIndex: i,
+        closeOnScroll: i,
+        closeOnClickOutside: s,
+        zIndex: c,
         avoidElements: u,
         onClose: Q,
         children: /* @__PURE__ */ n.jsx(
@@ -199,7 +199,7 @@ function ce({
             hasAutoHeader: W,
             title: b,
             description: D,
-            cardBackground: N,
+            cardBackground: y,
             className: G,
             children: _
           }
@@ -209,66 +209,67 @@ function ce({
   ] });
 }
 const ie = ee(ce), be = Object.assign(ie, {
-  Header: k,
+  Header: w,
   Content: P,
   Footer: U
 });
 function De() {
-  const e = h(null), r = h(null), t = p((o) => {
-    e.current?.open(o);
-  }, []), l = p(() => {
+  const e = h(null), t = h(null), r = h(null), l = p((s) => {
+    e.current?.open(s);
+  }, []), o = p(() => {
     e.current?.close();
-  }, []), s = p((o) => {
-    e.current?.isOpen ? e.current.close() : e.current?.open(o);
-  }, []), a = p((o) => {
-    let c = null, i = null, u = !0, N = 0;
-    const b = () => {
-      if (!u) return;
-      const D = e.current;
-      if (!D) {
-        N < 10 && (N++, c = requestAnimationFrame(b));
+  }, []), a = p((s) => {
+    e.current?.isOpen ? e.current.close() : e.current?.open(s);
+  }, []), i = p((s) => {
+    let c = null, u = null, y = !0, b = 0;
+    const D = () => {
+      if (!y) return;
+      const j = e.current;
+      if (!j) {
+        b < 10 && (b++, c = requestAnimationFrame(D));
         return;
       }
-      i = D.subscribeOpenChange(o);
+      u = j.subscribeOpenChange(s);
     };
-    return b(), () => {
-      u = !1, c !== null && cancelAnimationFrame(c), i?.();
+    return D(), () => {
+      y = !1, c !== null && cancelAnimationFrame(c), u?.();
     };
   }, []);
   return q(
     () => ({
       ref: e,
-      triggerRef: r,
-      open: t,
-      close: l,
-      toggle: s,
+      triggerRef: t,
+      anchorRef: r,
+      open: l,
+      close: o,
+      toggle: a,
       get isOpen() {
         return e.current?.isOpen ?? !1;
       },
-      subscribeOpenChange: a
+      subscribeOpenChange: i
     }),
-    [t, l, s, a]
+    [l, o, a, i]
   );
 }
-function je(e, r) {
-  const [t, l] = R(
+function je(e, t) {
+  const [r, l] = I(
     () => e.current?.isOpen ?? !1
   );
-  return I(() => {
-    let s = null, a = null, o = !0, c = 0;
-    const i = () => {
-      if (!o) return;
+  return k(() => {
+    let o = null, a = null, i = !0, s = 0;
+    const c = () => {
+      if (!i) return;
       const u = e.current;
       if (!u) {
-        c < 10 && (c++, s = requestAnimationFrame(i));
+        s < 10 && (s++, o = requestAnimationFrame(c));
         return;
       }
       l(u.isOpen), a = u.subscribeOpenChange(l);
     };
-    return i(), () => {
-      o = !1, s !== null && cancelAnimationFrame(s), a?.();
+    return c(), () => {
+      i = !1, o !== null && cancelAnimationFrame(o), a?.();
     };
-  }, [e, r]), t;
+  }, [e, t]), r;
 }
 export {
   be as Dialog,

package/dist/IconButton.es.js

@@ -51,26 +51,23 @@ const u = {
   },
   outline: {
     brand: {
-      container: `bg-transparent border-brand-onneutral-default border
-            hover:bg-neutral-primary-hover hover:border-brand-onneutral-hover
-            active:bg-neutral-primary-pressed active:border-brand-onneutral-pressed
-            `,
+      container: "bg-neutral-primary-default border-brand-onneutral-default border hover:bg-brand-overlay-hover hover:border-brand-onneutral-hover active:bg-brand-overlay-pressed active:border-brand-onneutral-pressed",
       icon: "icon-brand-onneutral-default group-hover:icon-brand-onneutral-hover group-active:icon-brand-onneutral-pressed"
     },
     neutral: {
-      container: "bg-transparent border-neutral-primary-default border hover:bg-neutral-primary-hover hover:border-neutral-primary-hover active:bg-neutral-primary-pressed active:border-neutral-primary-pressed",
+      container: "bg-neutral-primary-default border-neutral-primary-default border hover:bg-neutral-primary-hover hover:border-neutral-primary-hover active:bg-neutral-primary-pressed active:border-neutral-primary-pressed",
       icon: "icon-neutral-default-default group-hover:icon-neutral-default-hover group-active:icon-neutral-default-pressed"
     },
     success: {
-      container: "border border-success-onneutral-default hover:border-success-onneutral-hover hover:bg-neutral-primary-hover active:border-success-onneutral-pressed active:bg-neutral-primary-pressed",
+      container: "bg-transparent border border-success-onneutral-default hover:bg-success-overlay-hover hover:border-success-onneutral-hover active:bg-success-overlay-pressed active:border-success-onneutral-pressed",
       icon: "icon-semantic-success-onneutral-default group-hover:icon-semantic-success-onneutral-hover group-active:icon-semantic-success-onneutral-pressed"
     },
     error: {
-      container: "border border-error-onneutral-default hover:border-error-onneutral-hover hover:bg-neutral-primary-hover active:border-error-onneutral-pressed active:bg-neutral-primary-pressed",
+      container: "bg-transparent border border-error-onneutral-default hover:bg-error-overlay-hover hover:border-error-onneutral-hover active:bg-error-overlay-pressed active:border-error-onneutral-pressed",
       icon: "icon-semantic-error-onneutral-default group-hover:icon-semantic-error-onneutral-hover group-active:icon-semantic-error-onneutral-pressed"
     },
     warning: {
-      container: "border border-warning-onneutral-default hover:border-warning-onneutral-hover hover:bg-neutral-primary-hover active:border-warning-onneutral-pressed active:bg-neutral-primary-pressed",
+      container: "bg-transparent border border-warning-onneutral-default hover:bg-warning-overlay-hover hover:border-warning-onneutral-hover active:bg-warning-overlay-pressed active:border-warning-onneutral-pressed",
       icon: "icon-semantic-warning-onneutral-default group-hover:icon-semantic-warning-onneutral-hover group-active:icon-semantic-warning-onneutral-pressed"
     },
     disabled: {
@@ -80,7 +77,7 @@ const u = {
   },
   text: {
     brand: {
-      container: " bg-transparent border-0 hover:bg-neutral-primary-hover active:bg-neutral-primary-pressed",
+      container: "bg-transparent border-0 hover:bg-brand-overlay-hover active:bg-brand-overlay-pressed",
       icon: "icon-brand-onneutral-default group-hover:icon-brand-onneutral-hover group-active:icon-brand-onneutral-pressed"
     },
     neutral: {
@@ -88,15 +85,15 @@ const u = {
       icon: "icon-neutral-default-default group-hover:icon-neutral-default-hover group-active:icon-neutral-default-pressed"
     },
     success: {
-      container: "border-0 border-success-onneutral-default hover:bg-neutral-primary-hover active:bg-neutral-primary-pressed",
+      container: "bg-transparent border-0 hover:bg-success-overlay-hover active:bg-success-overlay-pressed",
       icon: "icon-semantic-success-onneutral-default group-hover:icon-semantic-success-onneutral-hover group-active:icon-semantic-success-onneutral-pressed"
     },
     error: {
-      container: "border-0 border-error-onneutral-default hover:bg-neutral-primary-hover active:bg-neutral-primary-pressed",
+      container: "bg-transparent border-0 hover:bg-error-overlay-hover active:bg-error-overlay-pressed",
       icon: "icon-semantic-error-onneutral-default group-hover:icon-semantic-error-onneutral-hover group-active:icon-semantic-error-onneutral-pressed"
     },
     warning: {
-      container: "border-0 border-warning-onneutral-default hover:bg-neutral-primary-hover active:bg-neutral-primary-pressed",
+      container: "bg-transparent border-0 hover:bg-warning-overlay-hover active:bg-warning-overlay-pressed",
       icon: "icon-semantic-warning-onneutral-default group-hover:icon-semantic-warning-onneutral-hover group-active:icon-semantic-warning-onneutral-pressed"
     },
     disabled: {
@@ -201,7 +198,7 @@ const u = {
     color: "brand",
     animation: !0
   }
-}), m = x(w.icon, {
+}), f = x(w.icon, {
   variants: {
     size: {
       small: u.small.icon,
@@ -259,10 +256,10 @@ const u = {
 }), $ = G(({
   onClick: z,
   icon: b,
-  contentClassName: p,
+  contentClassName: m,
   animate: S = !1,
   animateIcon: B = !1,
-  isLoading: f = !1,
+  isLoading: p = !1,
   children: r,
   hideSpinner: j = !1,
   spinner: g,
@@ -275,12 +272,12 @@ const u = {
   color: k = "brand",
   ...A
 }, C) => {
-  const l = !!(i || f), d = !!(B && !l), D = !!(S && !l), c = k, T = {
+  const l = !!(i || p), d = !!(B && !l), D = !!(S && !l), c = k, T = {
     small: "small",
     medium: "medium",
     large: "medium"
   }, q = H(() => {
-    if (f)
+    if (p)
       return /* @__PURE__ */ n.jsx("div", { className: "flex items-center justify-center", children: !j && (g || /* @__PURE__ */ n.jsx(J, { size: T[o], color: "brand" })) });
     let a = null;
     if (r)
@@ -288,7 +285,7 @@ const u = {
         v(r.type) ? a = /* @__PURE__ */ n.jsx(
           "span",
           {
-            className: m({
+            className: f({
               size: o,
               variant: s,
               color: c,
@@ -304,7 +301,7 @@ const u = {
           I(t) && (v(t.type) ? a = /* @__PURE__ */ n.jsx(
             "span",
             {
-              className: m({
+              className: f({
                 size: o,
                 variant: s,
                 color: c,
@@ -320,7 +317,7 @@ const u = {
       else typeof r == "object" && (v(r) ? a = /* @__PURE__ */ n.jsx(
         "span",
         {
-          className: m({
+          className: f({
             size: o,
             variant: s,
             color: c,
@@ -335,7 +332,7 @@ const u = {
       a = /* @__PURE__ */ n.jsx(
         "span",
         {
-          className: m({
+          className: f({
             size: o,
             variant: s,
             color: c,
@@ -346,15 +343,15 @@ const u = {
         }
       );
     }
-    return a ? /* @__PURE__ */ n.jsx("div", { className: h("flex items-center justify-center select-none", p), children: a }) : null;
+    return a ? /* @__PURE__ */ n.jsx("div", { className: h("flex items-center justify-center select-none", m), children: a }) : null;
   }, [
-    p,
+    m,
     r,
     b,
     s,
     o,
     c,
-    f,
+    p,
     j,
     g,
     d,
@@ -382,7 +379,7 @@ const u = {
         l && "pointer-events-none",
         O({ size: o, variant: s, color: c, animation: D, disabled: l }),
         "w-full h-full grid place-items-center",
-        p
+        m
       ), children: q })
     }
   );