@telefonica/mistica 14.45.0 → 14.46.0

package/dist-es/icon-button.js

@@ -78,30 +78,30 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as n, jsxs as E } from "react/jsx-runtime";
-import * as l from "react";
-import { BaseTouchable as d } from "./touchable.js";
-import { buttonContainer as W, iconButtonTokens as L, disabled as j, overlayContainer as Y, bleedLeft as _, bleedRight as D, bleedY as K, iconContainer as Z, isLoading as q, overlay as F, icon as G, iconSize as I, spinner as H, deprecatedIconButtonBase as v } from "./icon-button.css-mistica.js";
-import b from "classnames";
-import J from "./spinner.js";
-import { useThemeVariant as M } from "./theme-variant-context.js";
-const y = 24, Q = (e, t, r, a, o)=>{
-    const s = a ? `${a}px ${a}px` : "100% 100%";
+import { jsx as t, jsxs as A } from "react/jsx-runtime";
+import * as i from "react";
+import { BaseTouchable as u } from "./touchable.js";
+import { buttonContainer as j, iconButtonTokens as L, disabled as _, overlayContainer as $, bleedLeft as D, bleedRight as K, bleedY as M, interactiveAreaBleed as Y, iconContainer as Z, isLoading as q, overlay as F, icon as G, iconSize as k, spinner as H, deprecatedIconButtonBase as J } from "./icon-button.css-mistica.js";
+import v from "classnames";
+import Q from "./spinner.js";
+import { useThemeVariant as X } from "./theme-variant-context.js";
+const U = 24, p = (e, r, o, a, n)=>{
+    const c = a ? `${a}px ${a}px` : "100% 100%";
     return {
         padding: 0,
-        backgroundColor: r,
+        backgroundColor: o,
         backgroundImage: e ? `url(${e})` : "initial",
-        backgroundSize: s,
-        cursor: o ? "default" : "pointer",
-        height: t,
-        width: t,
+        backgroundSize: c,
+        cursor: n ? "default" : "pointer",
+        height: r,
+        width: r,
         verticalAlign: "middle",
         textAlign: "center"
     };
-}, B = /*#__PURE__*/ l.forwardRef((e, t)=>{
-    const { icon: r, children: a } = e, o = {
+}, ee = /*#__PURE__*/ i.forwardRef((e, r)=>{
+    const { icon: o, children: a } = e, n = {
         className: e.className || "",
-        ref: t,
+        ref: r,
         disabled: e.disabled,
         style: e.style,
         trackingEvent: e.trackingEvent,
@@ -110,139 +110,158 @@ const y = 24, Q = (e, t, r, a, o)=>{
             "component-name": "IconButton"
         }, e.dataAttributes)
     };
-    return e.href ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, o), {
+    return e.href ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, n), {
         href: e.href,
         newTab: e.newTab,
         "aria-label": e["aria-label"],
-        children: !r && l.Children.only(a)
-    })) : e.to ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, o), {
+        children: !o && i.Children.only(a)
+    })) : e.to ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, n), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
         replace: e.replace,
         "aria-label": e["aria-label"],
-        children: !r && l.Children.only(a)
-    })) : e.onPress ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, o), {
-        onPress: (s)=>{
-            s.stopPropagation(), e.onPress(s);
+        children: !o && i.Children.only(a)
+    })) : e.onPress ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, n), {
+        onPress: (c)=>{
+            c.stopPropagation(), e.onPress(c);
         },
         "aria-label": e["aria-label"],
-        children: !r && l.Children.only(a)
-    })) : /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, o), {
+        children: !o && i.Children.only(a)
+    })) : /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, n), {
         maybe: !0,
-        children: !r && l.Children.only(a)
+        children: !o && i.Children.only(a)
     }));
-}), R = /*#__PURE__*/ l.forwardRef((_param, A)=>{
-    var { disabled: e, trackingEvent: t, dataAttributes: r, type: a = "neutral", backgroundType: o = "transparent", isOverMedia: s, "aria-label": S, small: N, Icon: C, bleedLeft: T, bleedRight: x, bleedY: z } = _param, i = _object_without_properties(_param, [
+}), x = /*#__PURE__*/ i.forwardRef((_param, z)=>{
+    var { disabled: e, trackingEvent: r, dataAttributes: o, type: a = "neutral", backgroundType: n = "transparent", isOverMedia: c, hasOverlay: S = !0, "aria-label": I, "aria-labelledby": h, small: w, Icon: R, bleedLeft: m, bleedRight: f, bleedY: T, hasInteractiveAreaBleed: b } = _param, l = _object_without_properties(_param, [
         "disabled",
         "trackingEvent",
         "dataAttributes",
         "type",
         "backgroundType",
         "isOverMedia",
+        "hasOverlay",
         "aria-label",
+        "aria-labelledby",
         "small",
         "Icon",
         "bleedLeft",
         "bleedRight",
-        "bleedY"
+        "bleedY",
+        "hasInteractiveAreaBleed"
     ]);
-    const O = M(), [k, g] = l.useState(!1), c = i.showSpinner || k, [f, w] = l.useState(!!c);
-    l.useEffect(()=>{
-        c && !f && w(!0);
+    const V = X(), [E, B] = i.useState(!1), s = l.showSpinner || E, [P, N] = i.useState(!!s);
+    i.useEffect(()=>{
+        s && !P && N(!0);
     }, [
-        c,
-        f
+        s,
+        P
     ]);
-    const u = N ? "small" : "default", V = s ? `${a}-media` : `${a}-${o}-${O}`, m = {
-        disabled: e || c,
-        ref: A,
-        trackingEvent: t,
-        "aria-label": S,
-        role: i.onPress || i.to || i.href ? "button" : void 0,
+    const d = w ? "small" : "default", C = c ? `${a}-media` : `${a}-${n}-${V}`, g = {
+        disabled: e || s,
+        ref: z,
+        trackingEvent: r,
+        "aria-label": I,
+        "aria-labelledby": h,
+        role: l.onPress || l.to || l.href ? "button" : void 0,
         dataAttributes: _object_spread({
             "component-name": "IconButton"
-        }, r),
-        className: b(W[u], L[V], {
-            [j]: e,
-            [Y]: !e && !c,
-            [_[u]]: T,
-            [D[u]]: x,
-            [K[u]]: z
-        })
-    }, h = /* @__PURE__ */ E("div", {
-        className: b(Z[u], {
-            [q]: c
+        }, o),
+        className: v(j[d], L[C], {
+            [_]: e,
+            [$]: !e && !s,
+            [D[d]]: m && !b,
+            [K[d]]: f && !b,
+            [M[d]]: T && !b,
+            [Y[d]]: b
+        }),
+        resetMargin: !m && !f && !T && !b
+    }, y = /* @__PURE__ */ A("div", {
+        className: v(Z[d], {
+            [q]: s
         }),
         children: [
-            /* @__PURE__ */ n("div", {
+            S && /* @__PURE__ */ t("div", {
                 className: F
             }),
-            /* @__PURE__ */ n("div", {
-                "aria-hidden": c ? !0 : void 0,
+            /* @__PURE__ */ t("div", {
+                "aria-hidden": s ? !0 : void 0,
                 className: G,
-                children: /* @__PURE__ */ n(C, {
-                    size: I[u],
+                children: /* @__PURE__ */ t(R, {
+                    size: k[d],
                     color: "currentColor"
                 })
             }),
-            /* @__PURE__ */ n("div", {
-                "aria-hidden": c ? void 0 : !0,
+            /* @__PURE__ */ t("div", {
+                "aria-hidden": s ? void 0 : !0,
                 className: H,
                 onTransitionEnd: ()=>{
-                    c !== f && w(c);
+                    s !== P && N(s);
                 },
-                children: f && /* @__PURE__ */ n(J, {
-                    size: I[u],
+                children: P && /* @__PURE__ */ t(Q, {
+                    size: k[d],
                     color: "currentColor",
                     delay: "0s"
                 })
             })
         ]
     });
-    return i.href ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, m), {
-        href: i.href,
-        newTab: i.newTab,
-        children: h
-    })) : i.to ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, m), {
-        to: i.to,
-        fullPageOnWebView: i.fullPageOnWebView,
-        replace: i.replace,
-        children: h
-    })) : i.onPress ? /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, m), {
-        onPress: ($)=>{
-            const P = i.onPress($);
-            P && (g(!0), P.finally(()=>g(!1)));
+    return l.href ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, g), {
+        href: l.href,
+        newTab: l.newTab,
+        children: y
+    })) : l.to ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, g), {
+        to: l.to,
+        fullPageOnWebView: l.fullPageOnWebView,
+        replace: l.replace,
+        children: y
+    })) : l.onPress ? /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, g), {
+        onPress: (W)=>{
+            const O = l.onPress(W);
+            O && (B(!0), O.finally(()=>B(!1)));
         },
-        children: h
-    })) : /* @__PURE__ */ n(d, _object_spread_props(_object_spread({}, m), {
+        children: y
+    })) : /* @__PURE__ */ t(u, _object_spread_props(_object_spread({}, g), {
         maybe: !0,
-        children: h
+        children: y
     }));
-}), X = /*#__PURE__*/ l.forwardRef((e, t)=>{
-    if (e.Icon) return /* @__PURE__ */ n(R, _object_spread({
-        ref: t
+}), te = /*#__PURE__*/ i.forwardRef((e, r)=>{
+    if (e.Icon) return /* @__PURE__ */ t(x, _object_spread({
+        ref: r
     }, e));
-    const { icon: r, backgroundColor: a = "transparent", iconSize: o, size: s = y } = e;
-    return /* @__PURE__ */ n(B, _object_spread_props(_object_spread({
-        ref: t
+    const { icon: o, backgroundColor: a = "transparent", iconSize: n, size: c = U } = e;
+    return /* @__PURE__ */ t(ee, _object_spread_props(_object_spread({
+        ref: r
     }, e), {
-        className: b(v, e.className),
-        style: _object_spread({}, Q(r, s, a, o, e.disabled), e.style)
+        className: v(J, e.className),
+        style: _object_spread({}, p(o, c, a, n, e.disabled), e.style)
     }));
-}), U = /*#__PURE__*/ l.forwardRef((e, t)=>/* @__PURE__ */ n(X, _object_spread({
-        ref: t
-    }, e))), re = (e)=>{
-    if (e.Icon) return /* @__PURE__ */ n(R, _object_spread({}, e));
-    const { size: t = y, disabled: r } = e;
-    return /* @__PURE__ */ n(B, _object_spread_props(_object_spread({}, e), {
-        className: b(v, e.className),
-        style: {
-            height: t,
-            width: t,
-            cursor: r ? "default" : "pointer",
-            verticalAlign: "middle",
-            textAlign: "center"
-        }
+}), se = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ t(te, _object_spread({
+        ref: r
+    }, e))), ne = /*#__PURE__*/ i.forwardRef((_param, I)=>{
+    var { checked: e, defaultChecked: r, checkedProps: o, uncheckedProps: a, onChange: n, dataAttributes: c } = _param, S = _object_without_properties(_param, [
+        "checked",
+        "defaultChecked",
+        "checkedProps",
+        "uncheckedProps",
+        "onChange",
+        "dataAttributes"
+    ]);
+    const [h, w] = i.useState(!!r), R = ()=>{
+        if (e === void 0) {
+            const m = n == null ? void 0 : n(!h);
+            if (m) return m.then(()=>w((f)=>!f)).catch(()=>{});
+            w((f)=>!f);
+        } else return n == null ? void 0 : n(!e);
+    };
+    return /* @__PURE__ */ t(x, _object_spread_props(_object_spread({
+        ref: I
+    }, S, (e !== null && e !== void 0 ? e : h) ? o : a), {
+        dataAttributes: _object_spread({
+            "component-name": "ToggleIconButton"
+        }, c),
+        onPress: R
     }));
-}, le = U;
-export { re as BaseIconButton, U as IconButton, X as InternalIconButton, B as RawDeprecatedIconButton, R as RawIconButton, le as default };
+}), de = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ t(ne, _object_spread({
+        ref: r
+    }, e)));
+export { se as IconButton, te as InternalIconButton, ne as InternalToggleIconButton, ee as RawDeprecatedIconButton, x as RawIconButton, de as ToggleIconButton };

package/dist-es/image.js

@@ -80,9 +80,9 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as t, jsxs as R, Fragment as k } from "react/jsx-runtime";
 import * as r from "react";
-import F from "classnames";
-import { SkeletonAnimation as L } from "./skeletons.js";
-import { AspectRatioContainer as N } from "./utils/aspect-ratio-support.js";
+import z from "classnames";
+import { SkeletonAnimation as F } from "./skeletons.js";
+import { AspectRatioContainer as L } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as W } from "./utils/dom.js";
 import { useIsInverseVariant as M } from "./theme-variant-context.js";
 import { useTheme as V, useAriaId as D } from "./hooks.js";
@@ -163,7 +163,7 @@ const X = (param)=>{
         "errorFallback"
     ]);
     var v;
-    const h = D(), l = r.useRef(), u = i.circular ? $ : m ? P : U, [b, w] = r.useState(!c), [H, I] = r.useState(!1), g = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], f = A && !!(g !== 0 || i.width && i.height), T = B && !!(g !== 0 || i.width && i.height), C = r.useCallback(()=>{
+    const h = D(), l = r.useRef(), u = i.circular ? $ : m ? P : U, [b, w] = r.useState(!c), [H, I] = r.useState(!1), g = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], f = A && !!(g !== 0 || i.width && i.height), N = B && !!(g !== 0 || i.width && i.height), C = r.useCallback(()=>{
         w(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
             I(!0);
         }, K), a == null || a();
@@ -176,17 +176,17 @@ const X = (param)=>{
     }, [
         C
     ]);
-    const _ = Q() || !((v = document.getElementById(h)) != null && v.complete), z = /* @__PURE__ */ R(k, {
+    const T = Q() || !((v = document.getElementById(h)) != null && v.complete), _ = /* @__PURE__ */ R(k, {
         children: [
             /* @__PURE__ */ t("img", {
                 suppressHydrationWarning: !0,
                 id: h,
                 style: {
-                    opacity: _ && f ? 0 : 1
+                    opacity: T && f ? 0 : 1
                 },
                 ref: G(l, E),
                 src: c,
-                className: F(u, Z, {
+                className: z(u, Z, {
                     [q]: i.border
                 }, j({
                     position: g !== 0 ? "absolute" : "static"
@@ -213,7 +213,7 @@ const X = (param)=>{
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ t(L, {
+                children: /* @__PURE__ */ t(F, {
                     height: (_i_height = i.height) !== null && _i_height !== void 0 ? _i_height : "100%",
                     width: (_i_width = i.width) !== null && _i_width !== void 0 ? _i_width : "100%",
                     children: /* @__PURE__ */ t(J, {
@@ -223,7 +223,7 @@ const X = (param)=>{
                     })
                 })
             }),
-            b && T && /* @__PURE__ */ t("div", {
+            b && N && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -235,13 +235,13 @@ const X = (param)=>{
                     className: u
                 })
             }),
-            !b && z
+            !b && _
         ]
     });
 }), e1 = /*#__PURE__*/ r.forwardRef((e, s)=>{
     var _e_aspectRatio;
     const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : S[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : x];
-    return /* @__PURE__ */ t(N, {
+    return /* @__PURE__ */ t(L, {
         style: {
             position: "relative"
         },