@telefonica/mistica 12.11.0 → 12.12.0

package/dist-es/header.js

@@ -78,47 +78,46 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 import a from "./box.js";
-import l from "./stack.js";
-import { createUseStyles as O } from "./jss.js";
-import { useIsInverseVariant as P, ThemeVariant as T } from "./theme-variant-context.js";
-import v from "./responsive-layout.js";
+import n from "./stack.js";
+import { useIsInverseVariant as I } from "./theme-variant-context.js";
+import y from "./responsive-layout.js";
 import f from "./grid-layout.js";
-import { useScreenSize as g } from "./hooks.js";
-import x from "./overscroll-color-context.js";
-import { Text6 as B, Text8 as R, Text7 as j, Text3 as S } from "./text.js";
-import C from "./button-group.js";
-import { vars as h } from "./skins/skin-contract.css-mistica.js";
-import { jsxs as c, jsx as r } from "./_virtual/jsx-runtime.js";
-var K = function(param) {
-    var o = param.pretitle, e = param.title, i = param.preamount, n = param.amount, t = param.button, s = param.subtitle, d = param.isErrorAmount, m = param.secondaryButton, I = param.dataAttributes;
-    var ref = g(), N = ref.isTabletOrSmaller, H = P(), u = function(p, y) {
-        if (typeof p == "string") return /* @__PURE__ */ r(S, _objectSpreadProps(_objectSpread({
+import { useScreenSize as m } from "./hooks.js";
+import S from "./overscroll-color-context.js";
+import { Text6 as v, Text8 as P, Text7 as R, Text3 as T } from "./text.js";
+import j from "./button-group.js";
+import { vars as s } from "./skins/skin-contract.css-mistica.js";
+import { jsxs as t, jsx as r } from "./_virtual/jsx-runtime.js";
+var F = function(param) {
+    var i = param.pretitle, e = param.title, o = param.preamount, l = param.amount, c = param.button, d = param.subtitle, h = param.isErrorAmount, u = param.secondaryButton, B = param.dataAttributes;
+    var ref = m(), H = ref.isTabletOrSmaller, L = I(), g = function(p, x) {
+        if (typeof p == "string") return /* @__PURE__ */ r(T, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y), {
+        }, x), {
             children: p
         }));
-        var G = p.text, L = _objectWithoutProperties(p, [
+        var G = p.text, O = _objectWithoutProperties(p, [
             "text"
         ]);
-        return /* @__PURE__ */ r(S, _objectSpreadProps(_objectSpread({
+        return /* @__PURE__ */ r(T, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, y, L), {
+        }, x, O), {
             children: p.text
         }));
     };
-    return /* @__PURE__ */ c(l, {
-        space: N ? 24 : 32,
-        dataAttributes: I,
+    return /* @__PURE__ */ t(n, {
+        space: H ? 24 : 32,
+        dataAttributes: B,
         children: [
-            (e || o) && /* @__PURE__ */ r(a, {
+            (e || i) && /* @__PURE__ */ r(a, {
                 paddingRight: 16,
-                children: /* @__PURE__ */ c(l, {
+                children: /* @__PURE__ */ t(n, {
                     space: 8,
                     children: [
-                        o && u(o, {
-                            color: h.colors.textPrimary
+                        i && g(i, {
+                            color: s.colors.textPrimary
                         }),
-                        /* @__PURE__ */ r(B, {
+                        /* @__PURE__ */ r(v, {
                             role: "heading",
                             "aria-level": 2,
                             children: e
@@ -126,158 +125,129 @@ var K = function(param) {
                     ]
                 })
             }),
-            (i || n || t || s) && /* @__PURE__ */ c(l, {
+            (o || l || c || d) && /* @__PURE__ */ t(n, {
                 space: 16,
                 children: [
-                    (i || n) && /* @__PURE__ */ c(l, {
+                    (o || l) && /* @__PURE__ */ t(n, {
                         space: 8,
                         children: [
-                            i && u(i, {
-                                color: h.colors.textPrimary
+                            o && g(o, {
+                                color: s.colors.textPrimary
                             }),
-                            /* @__PURE__ */ r(R, {
-                                color: d && !H ? h.colors.highlight : h.colors.textPrimary,
-                                children: n
+                            /* @__PURE__ */ r(P, {
+                                color: h && !L ? s.colors.highlight : s.colors.textPrimary,
+                                children: l
                             })
                         ]
                     }),
-                    (t || m) && /* @__PURE__ */ r(C, {
-                        primaryButton: t,
-                        secondaryButton: m
+                    (c || u) && /* @__PURE__ */ r(j, {
+                        primaryButton: c,
+                        secondaryButton: u
                     }),
-                    s && u(s, {})
+                    d && g(d, {})
                 ]
             })
         ]
     });
-}, Q = function(param) {
-    var o = param.title, e = param.description, i = param.button;
-    var ref = g(), n = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ c(l, {
+}, J = function(param) {
+    var i = param.title, e = param.description, o = param.button;
+    var ref = m(), l = ref.isTabletOrSmaller;
+    return /* @__PURE__ */ t(n, {
         space: 32,
         children: [
-            /* @__PURE__ */ c(l, {
-                space: n ? 12 : 16,
+            /* @__PURE__ */ t(n, {
+                space: l ? 12 : 16,
                 children: [
-                    o && /* @__PURE__ */ r(j, {
+                    i && /* @__PURE__ */ r(R, {
                         role: "heading",
                         "aria-level": 1,
-                        children: o
+                        children: i
                     }),
-                    e && /* @__PURE__ */ r(B, {
+                    e && /* @__PURE__ */ r(v, {
                         children: e
                     })
                 ]
             }),
-            i
+            o
         ]
     });
-}, k = O(function(o) {
-    return {
-        background: {
-            background: function(param) {
-                var e = param.isInverse;
-                return e ? o.colors.backgroundBrand : "initial";
-            }
-        },
-        gridItem: {
-            gridColumn: "span 6"
-        }
-    };
-}), W = function(param) {
-    var tmp = param.isInverse, o = tmp === void 0 ? !0 : tmp, e = param.breadcrumbs, i = param.header, n = param.extra, tmp1 = param.sideBySideExtraOnDesktop, t = tmp1 === void 0 ? !1 : tmp1, s = param.dataAttributes;
-    var d = k({
-        isInverse: o
-    }), ref = g(), m = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ r(v, {
-        className: d.background,
-        dataAttributes: s,
-        children: /* @__PURE__ */ c(T, {
-            isInverse: o,
-            children: [
-                /* @__PURE__ */ r(x, {}),
-                m ? /* @__PURE__ */ r(a, {
-                    paddingTop: 32,
-                    paddingBottom: 24,
-                    children: /* @__PURE__ */ c(l, {
-                        space: 24,
+}, K = function(param) {
+    var tmp = param.isInverse, i = tmp === void 0 ? !0 : tmp, e = param.breadcrumbs, o = param.header, l = param.extra, tmp1 = param.sideBySideExtraOnDesktop, c = tmp1 === void 0 ? !1 : tmp1, d = param.dataAttributes;
+    var ref = m(), h = ref.isTabletOrSmaller;
+    return /* @__PURE__ */ t(y, {
+        isInverse: i,
+        dataAttributes: _objectSpread({
+            "component-name": "HeaderLayout"
+        }, d),
+        children: [
+            /* @__PURE__ */ r(S, {}),
+            h ? /* @__PURE__ */ r(a, {
+                paddingTop: 32,
+                paddingBottom: 24,
+                children: /* @__PURE__ */ t(n, {
+                    space: 24,
+                    children: [
+                        o,
+                        l
+                    ]
+                })
+            }) : c ? /* @__PURE__ */ r(a, {
+                paddingTop: e ? 16 : 48,
+                paddingBottom: 48,
+                children: /* @__PURE__ */ r(f, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ t(n, {
+                        space: 32,
                         children: [
-                            i,
-                            n
+                            e,
+                            o
                         ]
-                    })
-                }) : t ? /* @__PURE__ */ r(a, {
-                    paddingTop: e ? 16 : 48,
-                    paddingBottom: 48,
-                    children: /* @__PURE__ */ c(f, {
+                    }),
+                    right: l
+                })
+            }) : /* @__PURE__ */ r(a, {
+                paddingTop: e ? 16 : 48,
+                paddingBottom: 48,
+                children: /* @__PURE__ */ r(f, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ t(n, {
+                        space: 24,
                         children: [
-                            /* @__PURE__ */ r("div", {
-                                className: d.gridItem,
-                                children: /* @__PURE__ */ c(l, {
-                                    space: 32,
-                                    children: [
-                                        e,
-                                        i
-                                    ]
-                                })
-                            }),
-                            n && /* @__PURE__ */ r("div", {
-                                className: d.gridItem,
-                                children: n
-                            })
-                        ]
-                    })
-                }) : /* @__PURE__ */ r(a, {
-                    paddingTop: e ? 16 : 48,
-                    paddingBottom: 48,
-                    children: /* @__PURE__ */ r(f, {
-                        children: /* @__PURE__ */ r("div", {
-                            className: d.gridItem,
-                            children: /* @__PURE__ */ c(l, {
-                                space: 24,
+                            /* @__PURE__ */ t(n, {
+                                space: 32,
                                 children: [
-                                    /* @__PURE__ */ c(l, {
-                                        space: 32,
-                                        children: [
-                                            e,
-                                            i
-                                        ]
-                                    }),
-                                    n
+                                    e,
+                                    o
                                 ]
-                            })
-                        })
-                    })
+                            }),
+                            l
+                        ]
+                    }),
+                    right: null
                 })
-            ]
-        })
+            })
+        ]
     });
-}, X = function(param) {
-    var tmp = param.isInverse, o = tmp === void 0 ? !0 : tmp, e = param.children;
-    var i = k({
-        isInverse: o
-    }), ref = g(), n = ref.isTabletOrSmaller;
-    return /* @__PURE__ */ r(v, {
-        className: i.background,
-        children: /* @__PURE__ */ c(T, {
-            isInverse: o,
-            children: [
-                /* @__PURE__ */ r(x, {}),
-                n ? /* @__PURE__ */ r(a, {
-                    paddingTop: 12,
-                    paddingBottom: 24,
+}, N = function(param) {
+    var tmp = param.isInverse, i = tmp === void 0 ? !0 : tmp, e = param.children;
+    var ref = m(), o = ref.isTabletOrSmaller;
+    return /* @__PURE__ */ t(y, {
+        isInverse: i,
+        children: [
+            /* @__PURE__ */ r(S, {}),
+            o ? /* @__PURE__ */ r(a, {
+                paddingTop: 12,
+                paddingBottom: 24,
+                children: e
+            }) : /* @__PURE__ */ r(f, {
+                template: "6+6",
+                left: /* @__PURE__ */ r(a, {
+                    paddingY: 48,
                     children: e
-                }) : /* @__PURE__ */ r(f, {
-                    children: /* @__PURE__ */ r("div", {
-                        className: i.gridItem,
-                        children: /* @__PURE__ */ r(a, {
-                            paddingY: 48,
-                            children: e
-                        })
-                    })
-                })
-            ]
-        })
+                }),
+                right: null
+            })
+        ]
     });
 };
-export { K as Header, W as HeaderLayout, Q as MainSectionHeader, X as MainSectionHeaderLayout };
+export { F as Header, K as HeaderLayout, J as MainSectionHeader, N as MainSectionHeaderLayout };

package/dist-es/highlighted-card.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./highlighted-card.css.ts.vanilla.js";
-var y = "wrb8722 _1y2v1nf7b _1y2v1nf7g _1y2v1nf7n _1y2v1nf7t", f = "wrb8725 _1y2v1nf7b", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf7b _1y2v1nf7h _1y2v1nf7p _1y2v1nf84 _1y2v1nf8i _1y2v1nf8v"
-}, r = "_1y2v1nf7y _1y2v1nf8c _1y2v1nf8q _1y2v1nf94 _1y2v1nf7b _1y2v1nf7t _1y2v1nfb9 _1y2v1nf9i _1y2v1nf74";
-export { y as container, f as imageContent, _ as textContainerVariant, r as touchableContainer };
+var v = "wrb8722 _1y2v1nf4y _1y2v1nf53 _1y2v1nf5a _1y2v1nf5g", f = "wrb8725 _1y2v1nf4y", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf4y _1y2v1nf54 _1y2v1nf5c _1y2v1nf5r _1y2v1nf65 _1y2v1nf6i",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf4y _1y2v1nf54 _1y2v1nf5c _1y2v1nf5r _1y2v1nf65 _1y2v1nf6i"
+}, r = "_1y2v1nf5l _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf4y _1y2v1nf5g _1y2v1nf8w _1y2v1nf75 _1y2v1nf4s";
+export { v as container, f as imageContent, _ as textContainerVariant, r as touchableContainer };

package/dist-es/highlighted-card.js

@@ -77,45 +77,49 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import { useIsInverseVariant as g } from "./theme-variant-context.js";
-import f from "./box.js";
-import { BaseTouchable as o } from "./touchable.js";
-import { Text4 as b, Text2 as v } from "./text.js";
-import { Boxed as x } from "./boxed.js";
-import w, { useIsDismissable as k } from "./maybe-dismissable.js";
-import { container as I, textContainerVariant as C, imageContent as E, touchableContainer as c } from "./highlighted-card.css-mistica.js";
-import { vars as N } from "./skins/skin-contract.css-mistica.js";
-import { jsx as t, jsxs as s, Fragment as P } from "./_virtual/jsx-runtime.js";
-var T = function(e) {
-    var m;
-    var i = e.title, r = e.description, a = e.imageUrl, l = e.imageFit, u = g(), h = (m = e.isInverse) != null ? m : u, d = k(), n = /* @__PURE__ */ s(x, {
-        isInverse: h,
-        className: I,
-        dataAttributes: e.dataAttributes,
+import * as u from "react";
+import { useIsInverseVariant as b } from "./theme-variant-context.js";
+import v from "./box.js";
+import { BaseTouchable as c } from "./touchable.js";
+import { Text4 as w, Text2 as x } from "./text.js";
+import { Boxed as k } from "./boxed.js";
+import C, { useIsDismissable as I } from "./maybe-dismissable.js";
+import { container as E, textContainerVariant as N, imageContent as P, touchableContainer as s } from "./highlighted-card.css-mistica.js";
+import { vars as T } from "./skins/skin-contract.css-mistica.js";
+import { jsxs as d, jsx as t, Fragment as y } from "./_virtual/jsx-runtime.js";
+var V = /*#__PURE__*/ u.forwardRef(function(e, i) {
+    var h;
+    var a = e.title, r = e.description, o = e.imageUrl, l = e.imageFit, f = b(), g = (h = e.isInverse) != null ? h : f, m = I(), n = /* @__PURE__ */ d(k, {
+        ref: i,
+        isInverse: g,
+        className: E,
+        dataAttributes: _objectSpread({
+            "component-name": "HighlightedCard"
+        }, e.dataAttributes),
         width: e.width ? "".concat(e.width, "px") : "100%",
         children: [
-            /* @__PURE__ */ s("div", {
-                role: d ? void 0 : "region",
-                className: C[a ? "withImage" : "withoutImage"],
-                "aria-label": d ? void 0 : e["aria-label"],
+            /* @__PURE__ */ d("div", {
+                role: m ? void 0 : "region",
+                className: N[o ? "withImage" : "withoutImage"],
+                "aria-label": m ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ t(b, {
+                    /* @__PURE__ */ t(w, {
                         as: "h1",
                         regular: !0,
                         truncate: e.titleLinesMax,
-                        children: i
+                        children: a
                     }),
-                    /* @__PURE__ */ t(f, {
+                    /* @__PURE__ */ t(v, {
                         paddingTop: 8,
-                        children: /* @__PURE__ */ t(v, {
+                        children: /* @__PURE__ */ t(x, {
                             regular: !0,
-                            color: N.colors.textSecondary,
+                            color: T.colors.textSecondary,
                             truncate: e.descriptionLinesMax,
                             as: "p",
                             children: r
                         })
                     }),
-                    e.button && /* @__PURE__ */ s(P, {
+                    e.button && /* @__PURE__ */ d(y, {
                         children: [
                             /* @__PURE__ */ t("div", {
                                 style: {
@@ -128,46 +132,47 @@ var T = function(e) {
                     })
                 ]
             }),
-            a && /* @__PURE__ */ t("div", {
-                className: E,
+            o && /* @__PURE__ */ t("div", {
+                className: P,
                 style: {
-                    background: "url(".concat(a, ") no-repeat"),
+                    background: "url(".concat(o, ") no-repeat"),
                     backgroundSize: l === "fit" ? "contain" : "cover",
                     backgroundPosition: l === "fit" ? "bottom right" : "center ".concat(l === "fill-center" ? "center" : "right")
                 }
             })
         ]
     });
-    return e.button ? n : e.onPress ? /* @__PURE__ */ t(o, {
+    return e.button ? n : e.onPress ? /* @__PURE__ */ t(c, {
         onPress: e.onPress,
         trackingEvent: e.trackingEvent,
-        className: c,
+        className: s,
         children: n
-    }) : e.to ? /* @__PURE__ */ t(o, {
+    }) : e.to ? /* @__PURE__ */ t(c, {
         to: e.to,
         trackingEvent: e.trackingEvent,
         fullPageOnWebView: e.fullPageOnWebView,
-        className: c,
+        className: s,
         children: n
-    }) : e.href ? /* @__PURE__ */ t(o, {
+    }) : e.href ? /* @__PURE__ */ t(c, {
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        className: c,
+        className: s,
         children: n
     }) : n;
-}, F = function(_param) {
+}), F = /*#__PURE__*/ u.forwardRef(function(_param, a) {
     var e = _param["aria-label"], i = _objectWithoutProperties(_param, [
         "aria-label"
     ]);
     var r = e != null ? e : i.title;
-    return /* @__PURE__ */ t(w, {
+    return /* @__PURE__ */ t(C, {
         onClose: i.onClose,
         "aria-label": r,
         width: i.width,
-        children: /* @__PURE__ */ t(T, _objectSpreadProps(_objectSpread({}, i), {
-            "aria-label": r
+        children: /* @__PURE__ */ t(V, _objectSpreadProps(_objectSpread({}, i), {
+            "aria-label": r,
+            ref: a
         }))
     });
-};
+});
 export { F as default };

package/dist-es/icon-button.css-mistica.js

@@ -0,0 +1,4 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./icon-button.css.ts.vanilla.js";
+var t = "yqt1oe1 _1y2v1nf52";
+export { t as base };

package/dist-es/icon-button.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var t = "";
+export { t as default };

package/dist-es/icon-button.js

@@ -51,51 +51,66 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import * as i from "react";
-import r from "./touchable.js";
-import { jsx as c } from "./_virtual/jsx-runtime.js";
-var b = 24, u = function(e, a, n, t, d) {
-    var o = t ? "".concat(t, "px ").concat(t, "px") : "100% 100%";
+import o from "classnames";
+import { BaseTouchable as r } from "./touchable.js";
+import { base as d } from "./icon-button.css-mistica.js";
+import { jsx as l } from "./_virtual/jsx-runtime.js";
+var s = 24, b = function(e, a, t, n, c) {
+    var m = n ? "".concat(n, "px ").concat(n, "px") : "100% 100%";
     return {
-        display: "inline-block",
-        verticalAlign: "middle",
-        textAlign: "center",
-        backgroundColor: n,
+        padding: 0,
+        backgroundColor: t,
         backgroundImage: e ? "url(".concat(e, ")") : "",
-        backgroundPosition: "50% 50%",
-        backgroundSize: o,
-        backgroundRepeat: "no-repeat",
-        border: 0,
-        cursor: d ? "default" : "pointer",
+        backgroundSize: m,
+        cursor: c ? "default" : "pointer",
         height: a,
         width: a
     };
-}, f = function(e) {
-    var a = e.icon, n = e.children, tmp = e.backgroundColor, t = tmp === void 0 ? "transparent" : tmp, d = e.iconSize, tmp1 = e.size, o = tmp1 === void 0 ? b : tmp1, l = {
+}, u = function(e) {
+    var a = e.icon, t = e.children, n = {
         className: e.className || "",
         disabled: e.disabled,
-        style: _objectSpread({}, u(a, o, t, d, e.disabled), e.style),
+        style: e.style,
         trackingEvent: e.trackingEvent,
         "aria-live": e["aria-live"],
-        dataAttributes: e.dataAttributes
+        dataAttributes: _objectSpread({
+            "component-name": "IconButton"
+        }, e.dataAttributes)
     };
-    return e.href ? /* @__PURE__ */ c(r, _objectSpreadProps(_objectSpread({}, l), {
+    return e.href ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
         href: e.href,
         newTab: e.newTab,
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(n)
-    })) : e.to ? /* @__PURE__ */ c(r, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && i.Children.only(t)
+    })) : e.to ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
         replace: e.replace,
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(n)
-    })) : e.onPress ? /* @__PURE__ */ c(r, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && i.Children.only(t)
+    })) : e.onPress ? /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
         onPress: e.onPress,
         "aria-label": e["aria-label"],
-        children: !a && i.Children.only(n)
-    })) : /* @__PURE__ */ c(r, _objectSpreadProps(_objectSpread({}, l), {
+        children: !a && i.Children.only(t)
+    })) : /* @__PURE__ */ l(r, _objectSpreadProps(_objectSpread({}, n), {
         maybe: !0,
-        children: !a && i.Children.only(n)
+        children: !a && i.Children.only(t)
+    }));
+}, I = function(e) {
+    var a = e.icon, tmp = e.backgroundColor, t = tmp === void 0 ? "transparent" : tmp, n = e.iconSize, tmp1 = e.size, c = tmp1 === void 0 ? s : tmp1;
+    return /* @__PURE__ */ l(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: o(d, e.className),
+        style: _objectSpread({}, b(a, c, t, n, e.disabled), e.style)
+    }));
+}, w = function(e) {
+    var tmp = e.size, a = tmp === void 0 ? s : tmp, t = e.disabled;
+    return /* @__PURE__ */ l(u, _objectSpreadProps(_objectSpread({}, e), {
+        className: o(d, e.className),
+        style: {
+            height: a,
+            width: a,
+            cursor: t ? "default" : "pointer"
+        }
     }));
 };
-export { f as default };
+export { w as BaseIconButton, I as default };

package/dist-es/icons/icon-error.css-mistica.js

@@ -0,0 +1,3 @@
+import "./icon-error.css.ts.vanilla.js";
+var a = "_1ao3f5e2", i = "_1ao3f5e1";
+export { a as innerAnimation, i as outerAnimation };

package/dist-es/icons/icon-error.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var s = "";
+export { s as default };