@telefonica/mistica 13.2.3 → 13.4.0

package/dist/header.js

@@ -110,7 +110,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     return target;
 }
 const J = (param)=>{
-    let { pretitle: i , title: e , description: t , dataAttributes: n , preamount: a , amount: s , button: c , subtitle: g , isErrorAmount: H , secondaryButton: x  } = param;
+    let { pretitle: i , title: e , description: o , dataAttributes: n , preamount: c , amount: s , button: a , subtitle: g , isErrorAmount: H , secondaryButton: x  } = param;
     const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (m, y)=>{
         if (typeof m == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
@@ -130,7 +130,7 @@ const J = (param)=>{
         space: L ? 24 : 32,
         dataAttributes: n,
         children: [
-            (e || i || t) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            (e || i || o) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 8,
@@ -143,21 +143,21 @@ const J = (param)=>{
                             "aria-level": 2,
                             children: e
                         }),
-                        t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                        o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                             regular: !0,
                             color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                            children: t
+                            children: o
                         })
                     ]
                 })
             }),
-            (a || s || c || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+            (c || s || a || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 children: [
-                    (a || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    (c || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            a && f(a, {
+                            c && f(c, {
                                 color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
@@ -166,8 +166,8 @@ const J = (param)=>{
                             })
                         ]
                     }),
-                    (c || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
-                        primaryButton: c,
+                    (a || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                        primaryButton: a,
                         secondaryButton: x
                     }),
                     g && f(g, {})
@@ -176,7 +176,7 @@ const J = (param)=>{
         ]
     });
 }, K = (param)=>{
-    let { title: i , description: e , button: t  } = param;
+    let { title: i , description: e , button: o  } = param;
     const { isTabletOrSmaller: n  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 32,
@@ -194,12 +194,12 @@ const J = (param)=>{
                     })
                 ]
             }),
-            t
+            o
         ]
     });
 }, N = (param)=>{
-    let { isInverse: i = !0 , breadcrumbs: e , header: t , extra: n , sideBySideExtraOnDesktop: a = !1 , dataAttributes: s  } = param;
-    const { isTabletOrSmaller: c  } = (0, _hooksJs.useScreenSize)();
+    let { isInverse: i = !0 , breadcrumbs: e , header: o , extra: n , sideBySideExtraOnDesktop: c = !1 , dataAttributes: s  } = param;
+    const { isTabletOrSmaller: a  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: i,
         dataAttributes: _objectSpread({
@@ -207,17 +207,17 @@ const J = (param)=>{
         }, s),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                paddingTop: 32,
+            a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingTop: o ? 32 : 0,
                 paddingBottom: 24,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 24,
                     children: [
-                        t,
+                        o,
                         n
                     ]
                 })
-            }) : a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
@@ -226,7 +226,7 @@ const J = (param)=>{
                         space: 32,
                         children: [
                             e,
-                            t
+                            o
                         ]
                     }),
                     right: n
@@ -235,13 +235,13 @@ const J = (param)=>{
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                    space: c ? 24 : 32,
+                    space: a ? 24 : 32,
                     children: [
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                             space: 32,
                             children: [
                                 e,
-                                t
+                                o
                             ]
                         }),
                         n
@@ -252,12 +252,12 @@ const J = (param)=>{
     });
 }, Q = (param)=>{
     let { isInverse: i = !0 , children: e  } = param;
-    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)();
+    const { isTabletOrSmaller: o  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: i,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: 12,
                 paddingBottom: 24,
                 children: e

package/dist/hero.css-mistica.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    actions: ()=>t,
+    container: ()=>n,
+    containerDesktop: ()=>a,
+    containerMobile: ()=>_,
+    layout: ()=>i,
+    vars: ()=>p
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./responsive-layout.css.ts.vanilla.js");
+require("./hero.css.ts.vanilla.js");
+var t = "_16rbpto6 _1y2v1nf5g _1y2v1nf62 _1y2v1nf5w", n = "_16rbpto2 _1y2v1nf5g", a = "_1y2v1nf5v _1y2v1nf83", _ = "_1y2v1nf5m", i = "_16rbpto7", p = {
+    height: "var(--_16rbpto0)"
+};

package/dist/hero.css.d.ts

@@ -0,0 +1,8 @@
+export declare const vars: {
+    height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
+export declare const container: string;
+export declare const containerMobile: string;
+export declare const containerDesktop: string;
+export declare const actions: string;
+export declare const layout: string;

package/dist/hero.css.ts.vanilla.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>s
+});
+const s = "";

package/dist/hero.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import Tag from './tag';
+import { ButtonLink, ButtonPrimary } from './button';
+import Video from './video';
+import Image from './image';
+import type { DataAttributes, RendersElement, RendersNullableElement } from './utils/types';
+type HeroProps = {
+    height?: string;
+    background?: 'default' | 'alternative' | 'brand' | 'brand-secondary';
+    media: RendersElement<typeof Image> | RendersElement<typeof Video>;
+    headline?: RendersNullableElement<typeof Tag>;
+    pretitle?: string;
+    title?: string;
+    description?: string;
+    descriptionLinesMax?: number;
+    extra?: React.ReactNode;
+    button?: RendersNullableElement<typeof ButtonPrimary>;
+    buttonLink?: RendersNullableElement<typeof ButtonLink>;
+    dataAttributes?: DataAttributes;
+    desktopMediaPosition?: 'left' | 'right';
+};
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement>>;
+export default Hero;

package/dist/hero.js

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: ()=>er
+});
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
+const _hooksJs = require("./hooks.js");
+const _imageJs = require("./image.js");
+const _textJs = require("./text.js");
+const _gridLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./grid-layout.js"));
+const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
+const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
+const _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+const _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
+const _heroCssMisticaJs = require("./hero.css-mistica.js");
+const _dynamic = require("@vanilla-extract/dynamic");
+const _carouselJs = require("./carousel.js");
+const _domJs = require("./utils/dom.js");
+const _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
+const _themeVariantContextJs = require("./theme-variant-context.js");
+const _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _defineProperty(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 _objectSpread(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) {
+            _defineProperty(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 _objectSpreadProps(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 _objectWithoutProperties(source, excluded) {
+    if (source == null) return {};
+    var target = _objectWithoutPropertiesLoose(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 _objectWithoutPropertiesLoose(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 k = (param)=>/* @__PURE__ */ {
+    let { children: e , isInverse: o  } = param;
+    return (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+        isInverse: o,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            className: _heroCssMisticaJs.layout,
+            children: e
+        })
+    });
+}, v = (param)=>/* @__PURE__ */ {
+    let { headline: e , title: o , pretitle: a , description: i , descriptionLinesMax: d , extra: n , button: l , secondaryButton: p , buttonLink: m  } = param;
+    return (0, _jsxRuntimeJs.jsxs)("section", {
+        className: (0, _sprinklesCssMisticaJs.sprinkles)({
+            height: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column"
+        }),
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
+                children: [
+                    /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                        space: 16,
+                        children: [
+                            e && e,
+                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                                space: 8,
+                                children: [
+                                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                        as: "p",
+                                        regular: !0,
+                                        children: a
+                                    }),
+                                    o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
+                                        as: "h1",
+                                        children: o
+                                    })
+                                ]
+                            }),
+                            i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                                as: "p",
+                                regular: !0,
+                                color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                                truncate: d,
+                                children: i
+                            })
+                        ]
+                    }),
+                    n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                        children: n
+                    })
+                ]
+            }),
+            (l || m) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: _heroCssMisticaJs.actions,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                    primaryButton: l,
+                    secondaryButton: p,
+                    link: m
+                })
+            })
+        ]
+    });
+}, C = {
+    default: _skinContractCssMisticaJs.vars.colors.background,
+    alternative: _skinContractCssMisticaJs.vars.colors.backgroundAlternative,
+    brand: _skinContractCssMisticaJs.vars.colors.backgroundBrand,
+    "brand-secondary": _skinContractCssMisticaJs.vars.colors.backgroundBrand
+}, er = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    var { height: e , background: o = "default" , media: a , desktopMediaPosition: i = "left" , dataAttributes: d  } = _param, n = _objectWithoutProperties(_param, [
+        "height",
+        "background",
+        "media",
+        "desktopMediaPosition",
+        "dataAttributes"
+    ]);
+    const { isTabletOrSmaller: p  } = (0, _hooksJs.useScreenSize)(), m = (0, _carouselJs.useIsInsideSlideshowContext)(), h = o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+        value: !1,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, (0, _dynamic.assignInlineVars)({
+                [_heroCssMisticaJs.vars.height]: e != null ? e : "100%"
+            })),
+            className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerMobile),
+            children: [
+                a,
+                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(k, {
+                    isInverse: h,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingTop: 24,
+                        paddingBottom: m ? 48 : 24,
+                        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+                    })
+                })
+            ]
+        }))
+    });
+    const H = i === "left" ? a : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+        paddingRight: 24,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+    }), I = i === "right" ? a : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+        paddingLeft: 24,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(v, _objectSpread({}, n))
+    });
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_imageJs.MediaBorderRadiusProvider, {
+        value: !0,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, (0, _dynamic.assignInlineVars)({
+                [_heroCssMisticaJs.vars.height]: e != null ? e : "100%"
+            })),
+            className: (0, _sprinklesCssMisticaJs.sprinkles)({
+                height: "100%",
+                display: "flex",
+                alignItems: "center"
+            }),
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(k, {
+                isInverse: h,
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingY: 56,
+                        className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerDesktop),
+                        children: H
+                    }),
+                    right: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                        paddingY: 56,
+                        className: (0, _classnames.default)(_heroCssMisticaJs.container, _heroCssMisticaJs.containerDesktop),
+                        children: I
+                    })
+                })
+            })
+        }))
+    });
+});

package/dist/image.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
-export declare const useDisableBorderRadius: () => boolean;
-export declare const DisableBorderRadiusProvider: ({ children }: {
+export declare const useMediaBorderRadius: () => boolean;
+export declare const MediaBorderRadiusProvider: ({ children, value, }: {
     children: React.ReactNode;
+    value: boolean;
 }) => JSX.Element;
 export type AspectRatio = '1:1' | '16:9' | '7:10' | '4:3';
 export declare const RATIO: {

package/dist/image.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DisableBorderRadiusProvider: ()=>s1,
+    MediaBorderRadiusProvider: ()=>r1,
     RATIO: ()=>U,
-    default: ()=>r1,
-    useDisableBorderRadius: ()=>O
+    default: ()=>s1,
+    useMediaBorderRadius: ()=>O
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
@@ -150,10 +150,10 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k), s1 = (param)=>/* @__PURE__ */ {
-    let { children: t  } = param;
+const k = /*#__PURE__*/ _react.createContext(!0), O = ()=>_react.useContext(k), r1 = (param)=>/* @__PURE__ */ {
+    let { children: t , value: r  } = param;
     return (0, _jsxRuntimeJs.jsx)(k.Provider, {
-        value: !0,
+        value: r,
         children: t
     });
 }, P = (param)=>/* @__PURE__ */ {
@@ -172,7 +172,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
     });
 }, K = (param)=>{
     let { noBorderRadius: t  } = param;
-    const r = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: l  } = (0, _hooksJs.useTheme)();
+    const r = (0, _themeVariantContextJs.useIsInverseVariant)(), { skinName: c  } = (0, _hooksJs.useTheme)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         style: {
             height: "100%",
@@ -183,7 +183,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
             backgroundColor: r ? _skinContractCssMisticaJs.vars.colors.backgroundSkeletonInverse : _skinContractCssMisticaJs.vars.colors.backgroundSkeleton,
             borderRadius: t ? void 0 : 8
         },
-        children: l === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
+        children: c === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(P, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -208,8 +208,8 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, r1 = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
-    var { aspectRatio: t = "1:1" , alt: r = "" , dataAttributes: l , noBorderRadius: c , src: I , onError: d , onLoad: a , loadingFallback: p = !0 , errorFallback: x = !0  } = _param, o = _objectWithoutProperties(_param, [
+}, s1 = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
+    var { aspectRatio: t = "1:1" , alt: r = "" , dataAttributes: c , noBorderRadius: l , src: I , onError: d , onLoad: a , loadingFallback: p = !0 , errorFallback: x = !0  } = _param, o = _objectWithoutProperties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -220,13 +220,13 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), R = O(), m = c != null ? c : R, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [D, v] = _react.useState(!1), n = typeof t == "number" ? t : U[t], b = p && !!(n !== 0 || o.width && o.height), H = x && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
+    const C = _react.useRef(), R = O(), m = l != null ? l : !R, [u, f] = _react.useState(!1), [S, g] = _react.useState(!0), [M, v] = _react.useState(!1), n = typeof t == "number" ? t : U[t], b = p && !!(n !== 0 || o.width && o.height), H = x && !!(n !== 0 || o.width && o.height), h = _react.useCallback(()=>{
         f(!1), g(!1), setTimeout(()=>{
             v(!0);
         }, _imageCssMisticaJs.FADE_IN_DURATION_MS), a == null || a();
     }, [
         a
-    ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(l)), {
+    ]), z = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("img", _objectSpreadProps(_objectSpread({}, (0, _domJs.getPrefixedDataAttributes)(c)), {
         style: _objectSpread({}, S && b ? {
             opacity: 0
         } : {
@@ -257,7 +257,7 @@ const k = /*#__PURE__*/ _react.createContext(!1), O = ()=>_react.useContext(k),
         width: o.width,
         height: o.height,
         children: [
-            b && !D && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            b && !M && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",

package/dist/index.d.ts

@@ -51,6 +51,7 @@ export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { default as ProgressBar } from './progress-bar';
 export { MediaCard, DataCard, SnapCard } from './card';
+export { default as Hero } from './hero';
 export { default as Divider } from './divider';
 export { default as Menu } from './menu';
 export { default as EmptyState } from './empty-state';

package/dist/index.js

@@ -52,6 +52,7 @@ _export(exports, {
     GridLayout: ()=>_gridLayoutJs.default,
     Header: ()=>_headerJs.Header,
     HeaderLayout: ()=>_headerJs.HeaderLayout,
+    Hero: ()=>_heroJs.default,
     HighlightedCard: ()=>_highlightedCardJs.default,
     IbanField: ()=>_ibanFieldJs.default,
     Icon2GFilled: ()=>_icon2GFilledJs.default,
@@ -1873,6 +1874,7 @@ const _highlightedCardJs = /*#__PURE__*/ _interopRequireDefault(require("./highl
 const _stepperJs = /*#__PURE__*/ _interopRequireDefault(require("./stepper.js"));
 const _progressBarJs = /*#__PURE__*/ _interopRequireDefault(require("./progress-bar.js"));
 const _cardJs = require("./card.js");
+const _heroJs = /*#__PURE__*/ _interopRequireDefault(require("./hero.js"));
 const _dividerJs = /*#__PURE__*/ _interopRequireDefault(require("./divider.js"));
 const _menuJs = /*#__PURE__*/ _interopRequireDefault(require("./menu.js"));
 const _emptyStateJs = /*#__PURE__*/ _interopRequireDefault(require("./empty-state.js"));

package/dist/package-version.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
     enumerable: true,
     get: ()=>o
 });
-const o = "13.2.3";
+const o = "13.4.0";

package/dist/responsive-layout.css.d.ts

@@ -1,3 +1,7 @@
+export declare const MOBILE_SIDE_MARGIN = 16;
+export declare const TABLET_SIDE_MARGIN = 32;
+export declare const SMALL_DESKTOP_SIDE_MARGIN = 40;
+export declare const LARGE_DESKTOP_MAX_WIDTH = 1224;
 export declare const vars: {
     sideMargin: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };

package/dist/search-field.d.ts

@@ -4,5 +4,5 @@ export interface SearchFieldProps extends CommonFormFieldProps {
     onChangeValue?: (value: string, rawValue: string) => void;
     getSuggestions?: (value: string) => ReadonlyArray<string>;
 }
-declare const SearchField: React.FC<SearchFieldProps>;
+declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<any>>;
 export default SearchField;