@telefonica/mistica 15.16.4 → 15.18.0

package/dist/tooltip.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     BaseTooltip: function() {
-        return jt;
+        return qt;
     },
     default: function() {
-        return ge;
+        return ve;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -163,91 +163,91 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const lt = (t)=>({
+const ct = (t)=>({
         border: `1px solid ${t ? _skincontractcssmistica.vars.colors.backgroundContainer : _skincontractcssmistica.vars.colors.border}`
-    }), ct = 496, Yt = 300, Gt = 500, Kt = 100, p = 20, w = 6, N = w + p / 2 + 1, Ut = (t)=>{
+    }), ft = 496, Gt = 300, Kt = 500, Ut = 100, f = 20, S = 6, C = S + f / 2 + 1, jt = (t)=>{
     switch(t){
         case "left":
-            return `translateX(-${w}px)`;
+            return `translateX(-${S}px)`;
         case "right":
-            return `translateX(${w}px)`;
+            return `translateX(${S}px)`;
         case "top":
-            return `translateY(-${w}px)`;
+            return `translateY(-${S}px)`;
         case "bottom":
-            return `translateY(${w}px)`;
+            return `translateY(${S}px)`;
         default:
             return "";
     }
-}, pt = (t)=>{
-    const h = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), v = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), d = t.offsetWidth - h, m = t.offsetHeight - v;
+}, dt = (t)=>{
+    const h = parseFloat(getComputedStyle(t, null).paddingLeft) + parseFloat(getComputedStyle(t, null).paddingRight), v = parseFloat(getComputedStyle(t, null).paddingTop) + parseFloat(getComputedStyle(t, null).paddingBottom), p = t.offsetWidth - h, d = t.offsetHeight - v;
     return {
-        width: d,
-        height: m
+        width: p,
+        height: d
     };
-}, ft = (t, h, v, d, m)=>{
+}, pt = (t, h, v, p, d)=>{
     if (!t || !h) return;
-    const { top: x, bottom: I, left: B, right: W } = t, o = d - I, O = m - W, R = x, a = B, { width: X, height: V } = pt(h), _ = X + N, T = V + N, b = _ <= Math.max(a, O), M = T <= Math.max(o, R);
-    if (!(!M && !b)) switch(v){
+    const { top: x, bottom: w, left: W, right: V } = t, I = p - w, o = d - V, O = x, R = W, { width: m, height: X } = dt(h), _ = m + C, N = X + C, T = _ <= Math.max(R, o), b = N <= Math.max(I, O);
+    if (!(!b && !T)) switch(v){
         case "left":
-            return b ? _ <= a ? "left" : "right" : o > R ? "bottom" : "top";
+            return T ? _ <= R ? "left" : "right" : I > O ? "bottom" : "top";
         case "right":
-            return b ? _ <= O ? "right" : "left" : o > R ? "bottom" : "top";
+            return T ? _ <= o ? "right" : "left" : I > O ? "bottom" : "top";
         case "top":
-            return M ? T <= R ? "top" : "bottom" : a > O ? "left" : "right";
+            return b ? N <= O ? "top" : "bottom" : R > o ? "left" : "right";
         case "bottom":
-            return M ? T <= o ? "bottom" : "top" : a > O ? "left" : "right";
+            return b ? N <= I ? "bottom" : "top" : R > o ? "left" : "right";
         default:
             return;
     }
-}, jt = (param)=>{
-    let { content: t, target: h, width: v, position: d = "top", dataAttributes: m, delay: x = !0, centerContent: I, open: B, onClose: W, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
-    const { texts: R } = (0, _hooks.useTheme)(), a = (0, _hooks.useAriaId)(), { openTooltipId: X } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: V, closeTooltip: _ } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, b] = _react.useState(), [M, z] = _react.useState(), P = _react.useRef(null), Y = _react.useRef(null), [C, dt] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), G = x ? Gt : 0, [et, K] = _react.useState(!1), [U, y] = _react.useState(!1), j = B !== void 0, [ot, q] = _react.useState(!1), E = j ? B : a === X, Z = (0, _themevariantcontext.useIsInverseVariant)(), f = (0, _hooks.useBoundingRect)(P, E), H = (0, _hooks.useBoundingRect)(Y, E, !0), l = (0, _hooks.useWindowSize)(), S = _react.useCallback(()=>{
-        q(!1), K(!1), y(!1);
+}, qt = (param)=>{
+    let { content: t, target: h, width: v, position: p = "top", dataAttributes: d, delay: x = !0, centerContent: w, open: W, onClose: V, closeButtonLabel: I, hasPointerInteractionOnly: o = !1, trackingEvent: O } = param;
+    const { texts: R } = (0, _hooks.useTheme)(), m = (0, _hooks.useAriaId)(), { openTooltipId: X } = (0, _tooltipcontextprovider.useTooltipState)(), { openTooltip: _, closeTooltip: N } = (0, _tooltipcontextprovider.useSetTooltipState)(), [T, b] = _react.useState(), [z, P] = _react.useState(), Y = _react.useRef(null), G = _react.useRef(null), [y, mt] = _react.useState(null), u = (0, _environment.isTouchableDevice)(), K = x ? Kt : 0, [ot, U] = _react.useState(!1), [j, L] = _react.useState(!1), q = W !== void 0, [rt, Z] = _react.useState(!1), M = q ? W : m === X, J = (0, _themevariantcontext.useIsInverseVariant)(), c = (0, _hooks.useBoundingRect)(Y, M), H = (0, _hooks.useBoundingRect)(G, M, !0), a = (0, _hooks.useWindowSize)(), E = _react.useCallback(()=>{
+        Z(!1), U(!1), L(!1);
     }, []);
     _react.useEffect(()=>{
-        E || S();
+        M || E();
     }, [
-        E,
-        S
+        M,
+        E
     ]), _react.useEffect(()=>{
-        if (!C || !E) return;
-        const s = ft(f, C, d, l.height, l.width);
-        if (!s || !f) {
-            b(void 0), z(void 0), S();
+        if (!y || !M) return;
+        const s = pt(c, y, p, a.height, a.width);
+        if (!s || !c) {
+            b(void 0), P(void 0), E();
             return;
         }
         let r, e;
         var _parseInt;
-        const { left: c, right: k, top: L, bottom: A } = f, { width: $, height: F } = pt(C), rt = l.width - $, st = l.height - F, g = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
+        const { left: l, right: k, top: A, bottom: $ } = c, { width: F, height: D } = dt(y), st = a.width - F, it = a.height - D, g = (_parseInt = parseInt((0, _dom.getCssVarValue)(_skincontractcssmistica.vars.borderRadii.popup))) !== null && _parseInt !== void 0 ? _parseInt : 8;
         switch(s){
             case "top":
                 r = {
-                    left: Math.max(0, Math.min(rt, (c + k - $) / 2)),
-                    top: L - F - p / 2,
-                    padding: `0px 0px ${N}px 0px`
+                    left: Math.max(0, Math.min(st, (l + k - F) / 2)),
+                    top: A - D - f / 2,
+                    padding: `0px 0px ${C}px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(l.width - g - p, (c + k - p) / 2)),
+                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
                     top: "100%"
                 };
                 break;
             case "bottom":
                 r = {
-                    left: Math.max(0, Math.min(rt, (c + k - $) / 2)),
-                    top: A - w,
-                    padding: `${N}px 0px 0px 0px`
+                    left: Math.max(0, Math.min(st, (l + k - F) / 2)),
+                    top: $ - S,
+                    padding: `${C}px 0px 0px 0px`
                 }, e = {
-                    left: Math.max(g, Math.min(l.width - g - p, (c + k - p) / 2)),
+                    left: Math.max(g, Math.min(a.width - g - f, (l + k - f) / 2)),
                     bottom: "100%",
                     transform: "rotate(180deg)"
                 };
                 break;
             case "left":
                 r = {
-                    left: c - $ - p / 2,
-                    top: Math.max(0, Math.min(st, (L + A - F) / 2)),
-                    padding: `0px ${N}px 0px 0px`
+                    left: l - F - f / 2,
+                    top: Math.max(0, Math.min(it, (A + $ - D) / 2)),
+                    padding: `0px ${C}px 0px 0px`
                 }, e = {
-                    top: Math.max(g, Math.min(l.height - g - p, (L + A - p) / 2)),
+                    top: Math.max(g, Math.min(a.height - g - f, (A + $ - f) / 2)),
                     left: "100%",
                     transform: "rotate(-90deg)",
                     transformOrigin: "bottom"
@@ -256,101 +256,101 @@ const lt = (t)=>({
             case "right":
             default:
                 r = {
-                    left: k - w,
-                    top: Math.max(0, Math.min(st, (L + A - F) / 2)),
-                    padding: `0px 0px 0px ${N}px`
+                    left: k - S,
+                    top: Math.max(0, Math.min(it, (A + $ - D) / 2)),
+                    padding: `0px 0px 0px ${C}px`
                 }, e = {
-                    top: Math.max(g, Math.min(l.height - g - p, (L + A - p) / 2)),
+                    top: Math.max(g, Math.min(a.height - g - f, (A + $ - f) / 2)),
                     right: "100%",
                     transform: "rotate(90deg)",
                     transformOrigin: "bottom"
                 };
                 break;
         }
-        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / F * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / $ * 100}%`), (0, _helpers.isEqual)(r, T) || b(r), (0, _helpers.isEqual)(e, M) || z(e);
+        typeof e.top == "number" && (e.top -= r.top, e.top = `${e.top / D * 100}%`), typeof e.left == "number" && (e.left -= r.left, e.left = `${e.left / F * 100}%`), (0, _helpers.isEqual)(r, T) || b(r), (0, _helpers.isEqual)(e, z) || P(e);
     }, [
-        C,
-        f,
+        y,
+        c,
         H,
-        E,
-        d,
-        l,
-        T,
         M,
-        Z,
-        u,
+        p,
         a,
-        S
+        T,
+        z,
+        J,
+        u,
+        m,
+        E
     ]);
-    const J = _react.useRef(!1);
+    const Q = _react.useRef(!1);
     _react.useEffect(()=>{
-        const s = (c)=>{
-            switch(c.key){
+        const s = (l)=>{
+            switch(l.key){
                 case _keys.ESC:
-                    o || S();
+                    o || E();
                     break;
                 case _keys.TAB:
-                    J.current = !0;
+                    Q.current = !0;
                     break;
             }
-        }, r = ()=>J.current = !1, e = (c)=>{
-            !o && u && f && (c.clientX < f.left || c.clientX > f.right || c.clientY < f.top || c.clientY > f.bottom) && S();
+        }, r = ()=>Q.current = !1, e = (l)=>{
+            !o && u && c && (l.clientX < c.left || l.clientX > c.right || l.clientY < c.top || l.clientY > c.bottom) && E();
         };
         return document.addEventListener("keydown", s, !1), document.addEventListener("keyup", r, !1), document.addEventListener("click", e, !1), ()=>{
             document.removeEventListener("keydown", s, !1), document.removeEventListener("keyup", r, !1), document.removeEventListener("click", e, !1);
         };
     }, [
         u,
-        S,
-        f,
+        E,
+        c,
         o
     ]), _react.useEffect(()=>{
-        j || (U || et || ot ? V(a) : _(a));
+        q || (j || ot || rt ? _(m) : N(m));
     }, [
-        U,
-        et,
+        j,
         ot,
-        a,
-        V,
+        rt,
+        m,
         _,
-        j
+        N,
+        q
     ]);
-    const mt = ft(f, C, d, l.height, l.width), ut = I !== void 0 ? I : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
+    const ut = pt(c, y, p, a.height, a.width), ht = w !== void 0 ? w : (H == null ? void 0 : H.width) === _tooltipcssmistica.CONTENT_MIN_WIDTH;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 ref: (s)=>{
                     const r = s == null ? void 0 : s.firstElementChild;
-                    r && r !== P.current && (P.current = r);
+                    r && r !== Y.current && (Y.current = r);
                 },
                 onMouseOver: ()=>{
-                    !u && !o && y(!0);
+                    !u && !o && L(!0);
                 },
                 onMouseLeave: ()=>{
-                    !u && !o && y(!1);
+                    !u && !o && L(!1);
                 },
                 onClick: ()=>{
-                    (u || o) && y(o ? !U : !0);
+                    (u || o) && L(o ? !j : !0);
                 },
                 onFocus: ()=>{
-                    J.current && !o && q(!0);
+                    Q.current && !o && Z(!0);
                 },
                 onBlur: ()=>{
-                    !u && !o && q(!1);
+                    !u && !o && Z(!1);
                 },
-                "aria-describedby": a,
+                "aria-describedby": m,
                 children: h
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
-                    in: E,
-                    nodeRef: Y,
+                    in: M,
+                    nodeRef: G,
                     timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : {
-                        enter: Yt + G,
-                        exit: Kt
+                        enter: Gt + K,
+                        exit: Ut
                     },
                     onExited: ()=>{
-                        b(void 0), z(void 0);
+                        b(void 0), P(void 0);
                     },
                     mountOnEnter: !0,
                     unmountOnExit: !0,
@@ -360,55 +360,55 @@ const lt = (t)=>({
                * Hack to prevent text from wrapping automatically when touching the viewport's edges,
                * even if the content's width didn't reach the max width.
                * https://stackoverflow.com/questions/66106629/how-to-disable-text-wrapping-when-viewport-border-is-reached
-               */ width: `calc(100vw + ${ct}px)`,
+               */ width: `calc(100vw + ${ft}px)`,
                                 top: 0,
                                 left: 0,
                                 position: "fixed",
                                 visibility: T ? "visible" : "hidden"
                             }
-                        }, m), {
+                        }, d), {
                             role: "tooltip",
-                            "aria-label": a,
+                            "aria-label": m,
                             tabIndex: -1,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_tooltipcssmistica.container),
                                 style: _object_spread_props(_object_spread({
                                     pointerEvents: s === "entered" ? "auto" : "none",
-                                    transform: Ut(mt)
+                                    transform: jt(ut)
                                 }, T, _tooltipcssmistica.tooltipTransitionClasses[s]), {
-                                    transition: s === "entering" ? `opacity .1s linear ${G}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${G}ms` : "opacity .1s linear"
+                                    transition: s === "entering" ? `opacity .1s linear ${K}ms,transform .3s cubic-bezier(0.215,0.61,0.335,1) ${K}ms` : "opacity .1s linear"
                                 }),
-                                ref: (0, _common.combineRefs)(dt, Y),
+                                ref: (0, _common.combineRefs)(mt, G),
                                 onMouseEnter: ()=>{
-                                    !u && s === "entered" && !o && K(!0);
+                                    !u && s === "entered" && !o && U(!0);
                                 },
                                 onMouseLeave: ()=>{
-                                    !u && !o && K(!1);
+                                    !u && !o && U(!1);
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                     className: _tooltipcssmistica.tooltip,
                                     style: _object_spread_props(_object_spread({
                                         width: v
-                                    }, lt(Z)), {
-                                        maxWidth: Math.min(ct, l.width)
+                                    }, ct(J)), {
+                                        maxWidth: Math.min(ft, a.width)
                                     }),
                                     children: [
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: (0, _classnames.default)(_tooltipcssmistica.contentContainer, {
-                                                [_tooltipcssmistica.tooltipCenter]: ut
+                                                [_tooltipcssmistica.tooltipCenter]: ht
                                             }),
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
                                                 isInverse: !1,
                                                 children: [
                                                     t,
-                                                    W && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                         className: _tooltipcssmistica.closeButtonIcon,
                                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                                                             onPress: ()=>{
-                                                                y(!1), W();
+                                                                L(!1), V();
                                                             },
                                                             trackingEvent: O,
-                                                            "aria-label": R.modalClose,
+                                                            "aria-label": I !== null && I !== void 0 ? I : R.closeButtonLabel,
                                                             Icon: _iconcloseregular.default,
                                                             small: !0
                                                         })
@@ -418,10 +418,10 @@ const lt = (t)=>({
                                         }),
                                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                             className: _tooltipcssmistica.arrowContainer,
-                                            style: M,
+                                            style: z,
                                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: (0, _classnames.default)(_tooltipcssmistica.arrow),
-                                                style: lt(Z)
+                                                style: ct(J)
                                             })
                                         })
                                     ]
@@ -432,8 +432,8 @@ const lt = (t)=>({
             })
         ]
     });
-}, qt = (_param)=>{
-    var { centerContent: t, extra: h, children: v, dataAttributes: d, title: m, description: x } = _param, I = _object_without_properties(_param, [
+}, Zt = (_param)=>{
+    var { centerContent: t, extra: h, children: v, dataAttributes: p, title: d, description: x } = _param, w = _object_without_properties(_param, [
         "centerContent",
         "extra",
         "children",
@@ -441,16 +441,16 @@ const lt = (t)=>({
         "title",
         "description"
     ]);
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(jt, _object_spread({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(qt, _object_spread({
         content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
             className: _tooltipcssmistica.content,
             children: [
-                (m || x) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                (d || x) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 4,
                     children: [
-                        m && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             medium: !0,
-                            children: m
+                            children: d
                         }),
                         x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
@@ -464,6 +464,6 @@ const lt = (t)=>({
         centerContent: t,
         dataAttributes: _object_spread({
             "component-name": "Tooltip"
-        }, d)
-    }, I));
-}, ge = qt;
+        }, p)
+    }, w));
+}, ve = Zt;

package/dist-es/box.js

@@ -50,14 +50,14 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as n } from "react/jsx-runtime";
-import * as p from "react";
-import v from "classnames";
-import { sprinkles as z } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as A } from "./utils/dom.js";
-const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
-    let { className: i, children: f, width: l, padding: a = 0, paddingX: b = a, paddingY: m = a, paddingTop: e = m, paddingBottom: o = m, paddingLeft: r = b, paddingRight: t = b, role: x, dataAttributes: y, "aria-label": j, "aria-hidden": u } = param;
-    const k = {
+import { jsx as p } from "react/jsx-runtime";
+import * as v from "react";
+import z from "classnames";
+import { sprinkles as A } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as C } from "./utils/dom.js";
+const D = /*#__PURE__*/ v.forwardRef((param, k)=>{
+    let { className: i, children: f, width: l, padding: a = 0, paddingX: b = a, paddingY: m = a, paddingTop: e = m, paddingBottom: o = m, paddingLeft: r = b, paddingRight: t = b, role: x, id: y, dataAttributes: j, "aria-label": u, "aria-hidden": S } = param;
+    const n = {
         paddingTop: e,
         paddingBottom: o,
         paddingLeft: r,
@@ -65,7 +65,7 @@ const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
     };
     let c = {}, s = "";
     try {
-        s = z(k);
+        s = A(n);
     } catch (e1) {
         c = {
             paddingTop: typeof e == "object" ? e.mobile : e,
@@ -74,17 +74,18 @@ const C = /*#__PURE__*/ p.forwardRef((param, S)=>{
             paddingRight: typeof t == "object" ? t.mobile : t
         };
     }
-    return /* @__PURE__ */ n("div", _object_spread_props(_object_spread({}, A(y)), {
+    return /* @__PURE__ */ p("div", _object_spread_props(_object_spread({}, C(j)), {
         role: x,
-        "aria-label": j,
-        "aria-hidden": u,
-        ref: S,
-        className: v(i, s),
+        "aria-label": u,
+        "aria-hidden": S,
+        ref: k,
+        className: z(i, s),
         style: _object_spread({}, l !== void 0 ? {
             width: l,
             boxSizing: "border-box"
         } : {}, s ? {} : c),
+        id: y,
         children: f
     }));
-}), q = C;
-export { q as default };
+}), w = D;
+export { w as default };

package/dist-es/callout.js

@@ -53,52 +53,52 @@ function _object_spread_props(target, source) {
 }
 import { jsx as r, jsxs as e } from "react/jsx-runtime";
 import m from "./stack.js";
-import b from "./inline.js";
-import v from "./box.js";
-import { useTheme as x } from "./hooks.js";
-import { useThemeVariant as C, ThemeVariant as B } from "./theme-variant-context.js";
-import { Text3 as k, Text2 as I } from "./text.js";
-import R from "./generated/mistica-icons/icon-close-regular.js";
-import { IconButton as T } from "./icon-button.js";
-import N from "classnames";
-import S from "./button-group.js";
-import { container as y, content as V, closeButtonContainerSize as j, closeButtonContainer as A } from "./callout.css-mistica.js";
-import { vars as P } from "./image.css-mistica.js";
-import { sprinkles as $ } from "./sprinkles.css-mistica.js";
+import v from "./inline.js";
+import x from "./box.js";
+import { useTheme as C } from "./hooks.js";
+import { useThemeVariant as B, ThemeVariant as k } from "./theme-variant-context.js";
+import { Text3 as I, Text2 as R } from "./text.js";
+import T from "./generated/mistica-icons/icon-close-regular.js";
+import { IconButton as N } from "./icon-button.js";
+import S from "classnames";
+import y from "./button-group.js";
+import { container as V, content as j, closeButtonContainerSize as A, closeButtonContainer as P } from "./callout.css-mistica.js";
+import { vars as $ } from "./image.css-mistica.js";
+import { sprinkles as w } from "./sprinkles.css-mistica.js";
 import { vars as o } from "./skins/skin-contract.css-mistica.js";
-import { getPrefixedDataAttributes as w } from "./utils/dom.js";
-import { applyCssVars as z } from "./utils/css.js";
-const D = (param)=>{
-    let { title: a, titleAs: c = "h2", description: d, icon: i, onClose: t, button: l, secondaryButton: s, buttonLink: n, "aria-label": p, dataAttributes: u, role: f } = param;
-    const h = C(), { texts: g } = x();
+import { getPrefixedDataAttributes as z } from "./utils/dom.js";
+import { applyCssVars as D } from "./utils/css.js";
+const G = (param)=>{
+    let { title: a, titleAs: c = "h2", description: d, icon: i, onClose: t, closeButtonLabel: p, button: l, secondaryButton: s, buttonLink: n, "aria-label": u, dataAttributes: f, role: h } = param;
+    const g = B(), { texts: b } = C();
     return /* @__PURE__ */ r("section", _object_spread_props(_object_spread({
-        className: N(y, $({
+        className: S(V, w({
             background: {
                 inverse: o.colors.backgroundContainer,
                 alternative: o.colors.backgroundContainer,
                 default: o.colors.backgroundContainerAlternative
-            }[h]
+            }[g]
         })),
-        style: z({
-            [P.mediaBorderRadius]: o.borderRadii.mediaSmall
+        style: D({
+            [$.mediaBorderRadius]: o.borderRadii.mediaSmall
         }),
-        "aria-label": p !== null && p !== void 0 ? p : a,
-        role: f
-    }, w(u, "Callout")), {
-        children: /* @__PURE__ */ e(B, {
+        "aria-label": u !== null && u !== void 0 ? u : a,
+        role: h
+    }, z(f, "Callout")), {
+        children: /* @__PURE__ */ e(k, {
             isInverse: !1,
             children: [
-                i && /* @__PURE__ */ r(v, {
+                i && /* @__PURE__ */ r(x, {
                     paddingRight: 16,
                     children: i
                 }),
                 /* @__PURE__ */ e("div", {
-                    className: V,
+                    className: j,
                     children: [
                         /* @__PURE__ */ e(m, {
                             space: 16,
                             children: [
-                                /* @__PURE__ */ e(b, {
+                                /* @__PURE__ */ e(v, {
                                     fullWidth: !0,
                                     alignItems: "flex-start",
                                     space: "between",
@@ -106,12 +106,12 @@ const D = (param)=>{
                                         /* @__PURE__ */ e(m, {
                                             space: 4,
                                             children: [
-                                                /* @__PURE__ */ r(k, {
+                                                /* @__PURE__ */ r(I, {
                                                     as: c,
                                                     regular: !0,
                                                     children: a
                                                 }),
-                                                /* @__PURE__ */ r(I, {
+                                                /* @__PURE__ */ r(R, {
                                                     as: "p",
                                                     regular: !0,
                                                     color: o.colors.textSecondary,
@@ -122,11 +122,11 @@ const D = (param)=>{
                                         t && // Create empty div in order to fill space that iconButton occupies.
                                         // Without this, the content's vertical alignment can be affected
                                         /* @__PURE__ */ r("div", {
-                                            className: j
+                                            className: A
                                         })
                                     ]
                                 }),
-                                (l || s || n) && /* @__PURE__ */ r(S, {
+                                (l || s || n) && /* @__PURE__ */ r(y, {
                                     primaryButton: l,
                                     secondaryButton: s,
                                     link: n
@@ -134,14 +134,14 @@ const D = (param)=>{
                             ]
                         }),
                         t && /* @__PURE__ */ r("div", {
-                            className: A,
-                            children: /* @__PURE__ */ r(T, {
+                            className: P,
+                            children: /* @__PURE__ */ r(N, {
                                 small: !0,
                                 bleedY: !0,
                                 bleedRight: !0,
-                                Icon: R,
+                                Icon: T,
                                 onPress: t,
-                                "aria-label": g.closeButtonLabel
+                                "aria-label": p !== null && p !== void 0 ? p : b.closeButtonLabel
                             })
                         })
                     ]
@@ -149,5 +149,5 @@ const D = (param)=>{
             ]
         })
     }));
-}, rr = D;
-export { rr as default };
+}, er = G;
+export { er as default };