@telefonica/mistica 15.3.0 → 15.5.0

package/dist/generated/mistica-icons/icon-routine-regular.js

@@ -0,0 +1,111 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return h;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _themevariantcontext = require("../../theme-variant-context.js");
+const _skincontractcssmistica = require("../../skins/skin-contract.css-mistica.js");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+const i = (_param)=>{
+    var { color: a, size: o = 24 } = _param, t = _object_without_properties(_param, [
+        "color",
+        "size"
+    ]);
+    const l = (0, _themevariantcontext.useIsInverseVariant)(), n = a !== null && a !== void 0 ? a : l ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralHigh;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", _object_spread_props(_object_spread({
+        width: o,
+        height: o,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+            fill: n,
+            d: "M11.129 2.166a.568.568 0 1 0-.803.804l.872.873C6.001 4.133 3 7.046 3 12.912 3 19.105 6.345 22 12.088 22c5.701 0 9.044-2.852 9.093-8.952v-.137h-.01a.568.568 0 0 0-1.114 0h-.01l-.001.09v.036c-.04 5.265-2.644 7.827-7.958 7.827-5.35 0-7.952-2.602-7.952-7.952 0-5.12 2.378-7.724 7.262-7.943l-.67.895a.568.568 0 1 0 .908.681L13 4.727a.57.57 0 0 0-.053-.742zm4.162 13.392-2.63-2.633.002-3.552a.57.57 0 0 0-1.138 0v3.787c0 .15.059.295.165.401l2.828 2.828a.566.566 0 0 0 .801-.029.566.566 0 0 0-.028-.802m5.3-5.717a.568.568 0 1 1-1.136 0 .568.568 0 0 1 1.136 0m-2.296-2.16a.568.568 0 1 0 0-1.136.568.568 0 0 0 0 1.137M16.41 5.296a.568.568 0 1 1-1.136 0 .568.568 0 0 1 1.136 0"
+        })
+    }));
+}, h = i;

package/dist/header.css-mistica.js

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./header.css.ts.vanilla.css-mistica.js");
-var t = "mtk7e90 _1y2v1nf92", m = "mtk7e93", a = "mtk7e90";
+var t = "mtk7e90 _1y2v1nf9c", m = "mtk7e93", a = "mtk7e90";

package/dist/hero.css-mistica.js

@@ -10,33 +10,32 @@ function _export(target, all) {
 }
 _export(exports, {
     actions: function() {
-        return n;
+        return t;
     },
     container: function() {
         return o;
     },
     containerDesktop: function() {
-        return v;
+        return a;
     },
     containerMinHeight: function() {
-        return i;
+        return v;
     },
     containerMobile: function() {
+        return i;
+    },
+    expandedContent: function() {
         return _;
     },
     layout: function() {
         return e;
     },
-    mediaContainer: function() {
-        return p;
-    },
     vars: function() {
-        return h;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
-require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var n = "_16rbpto7 _1y2v1nfha _1y2v1nfhw _1y2v1nfhq", o = "_16rbpto2 _1y2v1nfha", v = "_1y2v1nfhp _1y2v1nfie", i = "_16rbpto3", _ = "_1y2v1nfhg", e = "_16rbpto8", p = "_16rbpto9", h = {
+var t = "_16rbpto7 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", o = "_16rbpto2 _1y2v1nfhk", a = "_1y2v1nfhz _1y2v1nfio", v = "_16rbpto3", i = "_1y2v1nfhq", _ = "_16rbpto9", e = "_16rbpto8", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/hero.css.d.ts

@@ -7,4 +7,4 @@ export declare const containerMobile: string;
 export declare const containerDesktop: string;
 export declare const actions: string;
 export declare const layout: string;
-export declare const mediaContainer: string;
+export declare const expandedContent: string;

package/dist/hero.d.ts

@@ -5,7 +5,7 @@ import type { ButtonLink, ButtonPrimary } from './button';
 import type Tag from './tag';
 import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
 type HeroProps = {
-    height?: string;
+    height?: string | number;
     background?: 'default' | 'alternative' | 'brand' | 'brand-secondary' | 'none';
     noPaddingY?: boolean;
     media: RendersElement<typeof Image> | RendersElement<typeof Video>;

package/dist/hero.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return lr;
+        return dr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -152,18 +152,24 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const H = (param)=>{
-    let { children: o, isInverse: e, isInsideSlideShow: a } = param;
+const k = {
+    default: _skincontractcssmistica.vars.colors.background,
+    alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
+    brand: _skincontractcssmistica.vars.colors.backgroundBrand,
+    "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
+    none: "transparent"
+}, w = (param)=>{
+    let { children: e, isInverse: o, backgroundColor: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
-        isInverse: e,
+        isInverse: o,
         className: _herocssmistica.layout,
         innerDivClassName: _herocssmistica.layout,
-        shouldExpandWhenNested: a ? "desktop" : !0,
-        backgroundColor: "transparent",
-        children: o
+        shouldExpandWhenNested: !0,
+        backgroundColor: a !== null && a !== void 0 ? a : "transparent",
+        children: e
     });
-}, g = (param)=>{
-    let { headline: o, title: e, titleAs: a = "h1", pretitle: s, description: l, descriptionLinesMax: n, extra: t, button: c, secondaryButton: f, buttonLink: d } = param;
+}, b = (param)=>{
+    let { headline: e, title: o, titleAs: a = "h1", pretitle: l, description: c, descriptionLinesMax: t, extra: n, button: d, secondaryButton: f, buttonLink: s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -177,53 +183,47 @@ const H = (param)=>{
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 16,
                         children: [
-                            o && o,
+                            e && e,
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 8,
                                 children: [
-                                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         as: "p",
                                         regular: !0,
-                                        children: s
+                                        children: l
                                     }),
-                                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
                                         as: a,
-                                        children: e
+                                        children: o
                                     })
                                 ]
                             }),
-                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                truncate: n,
-                                children: l
+                                truncate: t,
+                                children: c
                             })
                         ]
                     }),
-                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: t
+                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: n
                     })
                 ]
             }),
-            (c || d) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (d || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: c,
+                    primaryButton: d,
                     secondaryButton: f,
-                    link: d
+                    link: s
                 })
             })
         ]
     });
-}, I = {
-    default: _skincontractcssmistica.vars.colors.background,
-    alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
-    brand: _skincontractcssmistica.vars.colors.backgroundBrand,
-    "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
-    none: "transparent"
-}, W = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
-    var { height: o, background: e = "default", media: a, desktopMediaPosition: s = "left", dataAttributes: l, noPaddingY: n } = _param, t = _object_without_properties(_param, [
+}, q = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: t } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
         "media",
@@ -231,86 +231,85 @@ const H = (param)=>{
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), d = (0, _carousel.useIsInsideSlideshowContext)(), D = (0, _themevariantcontext.useIsInverseVariant)(), x = e === "none" ? D : e === "brand" || e === "brand-secondary";
-    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        style: (0, _css.applyCssVars)({
-            [_imagecssmistica.vars.mediaBorderRadius]: "0px"
-        }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-            "component-name": "Hero"
-        }, l))), {
-            ref: c,
-            style: _object_spread({
-                backgroundColor: I[e]
-            }, o === "100vh" ? {
-                maxHeight: "-webkit-fill-available"
-            } : {}, (0, _css.applyCssVars)({
-                [_herocssmistica.vars.height]: o !== null && o !== void 0 ? o : "100%"
-            })),
-            className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
-                [_herocssmistica.containerMinHeight]: !n
+    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), D = (0, _themevariantcontext.useIsInverseVariant)(), N = o === "none" ? D : o === "brand" || o === "brand-secondary";
+    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            style: (0, _css.applyCssVars)({
+                [_imagecssmistica.vars.mediaBorderRadius]: "0px"
             }),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(H, {
-                isInverse: x,
-                isInsideSlideShow: d,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+                "component-name": "Hero"
+            }, c))), {
+                ref: d,
+                style: _object_spread({}, e === "100vh" ? {
+                    maxHeight: "-webkit-fill-available"
+                } : {}, (0, _css.applyCssVars)({
+                    [_herocssmistica.vars.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
+                    [_imagecssmistica.vars.mediaBorderRadius]: "0px"
+                })),
+                className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
+                    [_herocssmistica.containerMinHeight]: !t
+                }),
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _herocssmistica.mediaContainer,
-                        children: a
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: 24,
-                        paddingBottom: d ? 48 : n ? 0 : 24,
-                        className: _herocssmistica.layout,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
+                    a,
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(w, {
+                        isInverse: N,
+                        backgroundColor: k[o],
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _herocssmistica.expandedContent,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingTop: 24,
+                                paddingBottom: u ? 48 : t ? 0 : 24,
+                                className: _herocssmistica.layout,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+                            })
+                        })
                     })
                 ]
-            })
-        }))
+            }))
+        })
     });
-    const O = s === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const I = l === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
-    }), L = s === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
+    }), L = l === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, t))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        style: (0, _css.applyCssVars)({
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+        "component-name": "Hero"
+    }, c))), {
+        ref: d,
+        style: _object_spread_props(_object_spread({}, e === "100vh" ? {
+            maxHeight: "-webkit-fill-available"
+        } : {}, (0, _css.applyCssVars)({
+            [_herocssmistica.vars.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.container
+        })), {
+            background: k[o]
         }),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-            "component-name": "Hero"
-        }, l))), {
-            ref: c,
-            style: _object_spread({
-                backgroundColor: I[e]
-            }, o === "100vh" ? {
-                maxHeight: "-webkit-fill-available"
-            } : {}, (0, _css.applyCssVars)({
-                [_herocssmistica.vars.height]: o !== null && o !== void 0 ? o : "100%"
-            })),
-            className: (0, _sprinklescssmistica.sprinkles)({
-                height: "100%"
-            }),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(H, {
-                isInverse: x,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingY: n ? 0 : 56,
-                        className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
-                            [_herocssmistica.containerMinHeight]: !n
-                        }),
-                        children: O
+        className: (0, _sprinklescssmistica.sprinkles)({
+            height: "100%"
+        }),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(w, {
+            isInverse: N,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                template: "6+6",
+                left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingTop: t ? 0 : 56,
+                    paddingBottom: t && !u ? 0 : 56,
+                    className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
+                        [_herocssmistica.containerMinHeight]: !t
                     }),
-                    right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingY: n ? 0 : 56,
-                        className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: L
-                    })
+                    children: I
+                }),
+                right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingTop: t ? 0 : 56,
+                    paddingBottom: t && !u ? 0 : 56,
+                    className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
+                    children: L
                 })
             })
-        }))
-    });
-}), lr = W;
+        })
+    }));
+}), dr = q;

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

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return f;
+        return y;
     },
     imageContent: function() {
-        return y;
+        return f;
     },
     textContainerVariant: function() {
         return _;
@@ -24,7 +24,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./highlighted-card.css.ts.vanilla.css-mistica.js");
-var f = "wrb8722 _1y2v1nfha _1y2v1nfhf _1y2v1nfhm _1y2v1nfhs", y = "wrb8725 _1y2v1nfha", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nfha _1y2v1nfhg _1y2v1nfho _1y2v1nf7o _1y2v1nf8x _1y2v1nfa0",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nfha _1y2v1nfhg _1y2v1nfho _1y2v1nf7o _1y2v1nf8x _1y2v1nfa0"
-}, a = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfha _1y2v1nfhs _1y2v1nfjs _1y2v1nfhx _1y2v1nf72";
+var y = "wrb8722 _1y2v1nfhk _1y2v1nfhp _1y2v1nfhw _1y2v1nfi2", f = "wrb8725 _1y2v1nfhk", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nfhk _1y2v1nfhq _1y2v1nfhy _1y2v1nf7y _1y2v1nf97 _1y2v1nfaa",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nfhk _1y2v1nfhq _1y2v1nfhy _1y2v1nf7y _1y2v1nf97 _1y2v1nfaa"
+}, a = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfhk _1y2v1nfi2 _1y2v1nfk2 _1y2v1nfi7 _1y2v1nf7c";

package/dist/hooks.d.ts

@@ -15,6 +15,8 @@ export declare const useWindowSize: () => {
     width: number;
     screenHeight: number;
     screenWidth: number;
+    /** Size of the available window size, removing virtual keyboard and native navigation bar or status bar */
+    visualHeight: number;
 };
 export declare const useWindowHeight: () => number;
 export declare const useWindowWidth: () => number;