@telefonica/mistica 13.2.2 → 13.3.0

package/dist-es/hero.css-mistica.js

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.js";
+import "./responsive-layout.css.ts.vanilla.js";
+import "./hero.css.ts.vanilla.js";
+var t = "_16rbpto6 _1y2v1nf5g _1y2v1nf62 _1y2v1nf5w", n = "_16rbpto2 _1y2v1nf5g", a = "_1y2v1nf5v _1y2v1nf83", _ = "_1y2v1nf5m", i = "_16rbpto7", p = {
+    height: "var(--_16rbpto0)"
+};
+export { t as actions, n as container, a as containerDesktop, _ as containerMobile, i as layout, p as vars };

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

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

package/dist-es/hero.js

@@ -0,0 +1,245 @@
+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;
+}
+import * as R from "react";
+import f from "classnames";
+import { useScreenSize as T } from "./hooks.js";
+import { MediaBorderRadiusProvider as g } from "./image.js";
+import { Text3 as x, Text8 as D } from "./text.js";
+import O from "./grid-layout.js";
+import t from "./box.js";
+import b from "./stack.js";
+import j from "./button-group.js";
+import { vars as s } from "./skins/skin-contract.css-mistica.js";
+import { vars as y, container as u, containerMobile as G, containerDesktop as B, layout as L, actions as A } from "./hero.css-mistica.js";
+import { assignInlineVars as N } from "@vanilla-extract/dynamic";
+import { useIsInsideSlideshowContext as V } from "./carousel.js";
+import { getPrefixedDataAttributes as S } from "./utils/dom.js";
+import { sprinkles as w } from "./sprinkles.css-mistica.js";
+import { ThemeVariant as Y } from "./theme-variant-context.js";
+import { jsx as r, jsxs as c } from "./_virtual/jsx-runtime.js";
+const k = (param)=>/* @__PURE__ */ {
+    let { children: e , isInverse: o  } = param;
+    return r(Y, {
+        isInverse: o,
+        children: /* @__PURE__ */ r("div", {
+            className: L,
+            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 c("section", {
+        className: w({
+            height: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            flexDirection: "column"
+        }),
+        children: [
+            /* @__PURE__ */ c("div", {
+                children: [
+                    /* @__PURE__ */ c(b, {
+                        space: 16,
+                        children: [
+                            e && e,
+                            /* @__PURE__ */ c(b, {
+                                space: 8,
+                                children: [
+                                    a && /* @__PURE__ */ r(x, {
+                                        as: "p",
+                                        regular: !0,
+                                        children: a
+                                    }),
+                                    o && /* @__PURE__ */ r(D, {
+                                        as: "h1",
+                                        children: o
+                                    })
+                                ]
+                            }),
+                            i && /* @__PURE__ */ r(x, {
+                                as: "p",
+                                regular: !0,
+                                color: s.colors.textSecondary,
+                                truncate: d,
+                                children: i
+                            })
+                        ]
+                    }),
+                    n && /* @__PURE__ */ r("div", {
+                        children: n
+                    })
+                ]
+            }),
+            (l || m) && /* @__PURE__ */ r("div", {
+                className: A,
+                children: /* @__PURE__ */ r(j, {
+                    primaryButton: l,
+                    secondaryButton: p,
+                    link: m
+                })
+            })
+        ]
+    });
+}, C = {
+    default: s.colors.background,
+    alternative: s.colors.backgroundAlternative,
+    brand: s.colors.backgroundBrand,
+    "brand-secondary": s.colors.backgroundBrand
+}, er = /*#__PURE__*/ R.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  } = T(), m = V(), h = o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ r(g, {
+        value: !1,
+        children: /* @__PURE__ */ c("div", _objectSpreadProps(_objectSpread({}, S(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, N({
+                [y.height]: e != null ? e : "100%"
+            })),
+            className: f(u, G),
+            children: [
+                a,
+                /* @__PURE__ */ r(k, {
+                    isInverse: h,
+                    children: /* @__PURE__ */ r(t, {
+                        paddingTop: 24,
+                        paddingBottom: m ? 48 : 24,
+                        children: /* @__PURE__ */ r(v, _objectSpread({}, n))
+                    })
+                })
+            ]
+        }))
+    });
+    const H = i === "left" ? a : /* @__PURE__ */ r(t, {
+        paddingRight: 24,
+        children: /* @__PURE__ */ r(v, _objectSpread({}, n))
+    }), I = i === "right" ? a : /* @__PURE__ */ r(t, {
+        paddingLeft: 24,
+        children: /* @__PURE__ */ r(v, _objectSpread({}, n))
+    });
+    return /* @__PURE__ */ r(g, {
+        value: !0,
+        children: /* @__PURE__ */ r("div", _objectSpreadProps(_objectSpread({}, S(_objectSpread({
+            "component-name": "Hero"
+        }, d))), {
+            ref: l,
+            style: _objectSpread({
+                backgroundColor: C[o]
+            }, e === "100vh" ? {
+                maxHeight: "-webkit-fill-available"
+            } : {}, N({
+                [y.height]: e != null ? e : "100%"
+            })),
+            className: w({
+                height: "100%",
+                display: "flex",
+                alignItems: "center"
+            }),
+            children: /* @__PURE__ */ r(k, {
+                isInverse: h,
+                children: /* @__PURE__ */ r(O, {
+                    template: "6+6",
+                    left: /* @__PURE__ */ r(t, {
+                        paddingY: 56,
+                        className: f(u, B),
+                        children: H
+                    }),
+                    right: /* @__PURE__ */ r(t, {
+                        paddingY: 56,
+                        className: f(u, B),
+                        children: I
+                    })
+                })
+            })
+        }))
+    });
+});
+export { er as default };

package/dist-es/image.js

@@ -79,21 +79,21 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 import * as i from "react";
 import A from "classnames";
-import { SkeletonRectangle as B } from "./skeletons.js";
-import { AspectRatioElement as F } from "./utils/aspect-ratio-support.js";
-import { getPrefixedDataAttributes as M } from "./utils/dom.js";
-import { useIsInverseVariant as N } from "./theme-variant-context.js";
-import { useTheme as V } from "./hooks.js";
-import { VIVO_SKIN as W } from "./skins/constants.js";
-import { sprinkles as E } from "./sprinkles.css-mistica.js";
-import { FADE_IN_DURATION_MS as L, image as T } from "./image.css-mistica.js";
+import { SkeletonRectangle as F } from "./skeletons.js";
+import { AspectRatioElement as N } from "./utils/aspect-ratio-support.js";
+import { getPrefixedDataAttributes as V } from "./utils/dom.js";
+import { useIsInverseVariant as W } from "./theme-variant-context.js";
+import { useTheme as B } from "./hooks.js";
+import { VIVO_SKIN as E } from "./skins/constants.js";
+import { sprinkles as L } from "./sprinkles.css-mistica.js";
+import { FADE_IN_DURATION_MS as T, image as _ } from "./image.css-mistica.js";
 import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { combineRefs as _ } from "./utils/common.js";
-import { jsx as e, jsxs as j } from "./_virtual/jsx-runtime.js";
-const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (param)=>/* @__PURE__ */ {
-    let { children: t  } = param;
+import { combineRefs as j } from "./utils/common.js";
+import { jsx as e, jsxs as D } from "./_virtual/jsx-runtime.js";
+const k = /*#__PURE__*/ i.createContext(!0), O = ()=>i.useContext(k), r1 = (param)=>/* @__PURE__ */ {
+    let { children: t , value: r  } = param;
     return e(k.Provider, {
-        value: !0,
+        value: r,
         children: t
     });
 }, P = (param)=>/* @__PURE__ */ {
@@ -112,7 +112,7 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
     });
 }, K = (param)=>{
     let { noBorderRadius: t  } = param;
-    const r = N(), { skinName: l  } = V();
+    const r = W(), { skinName: c  } = B();
     return /* @__PURE__ */ e("div", {
         style: {
             height: "100%",
@@ -123,7 +123,7 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
             backgroundColor: r ? s.colors.backgroundSkeletonInverse : s.colors.backgroundSkeleton,
             borderRadius: t ? void 0 : 8
         },
-        children: l === W ? /* @__PURE__ */ e(P, {
+        children: c === E ? /* @__PURE__ */ e(P, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -148,8 +148,8 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, r1 = /*#__PURE__*/ i.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__*/ i.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",
@@ -160,21 +160,21 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = i.useRef(), R = O(), m = c != null ? c : R, [u, f] = i.useState(!1), [S, g] = i.useState(!0), [D, v] = i.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 = i.useCallback(()=>{
+    const C = i.useRef(), R = O(), m = l != null ? l : !R, [u, f] = i.useState(!1), [S, g] = i.useState(!0), [M, v] = i.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 = i.useCallback(()=>{
         f(!1), g(!1), setTimeout(()=>{
             v(!0);
-        }, L), a == null || a();
+        }, T), a == null || a();
     }, [
         a
-    ]), z = /* @__PURE__ */ e("img", _objectSpreadProps(_objectSpread({}, M(l)), {
+    ]), z = /* @__PURE__ */ e("img", _objectSpreadProps(_objectSpread({}, V(c)), {
         style: _objectSpread({}, S && b ? {
             opacity: 0
         } : {
             opacity: 1
         }),
-        ref: _(C, y),
+        ref: j(C, y),
         src: I,
-        className: A(T, E({
+        className: A(_, L({
             position: n !== 0 ? "absolute" : "static",
             borderRadius: m ? void 0 : 8
         })),
@@ -189,7 +189,7 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
         (w = C.current) != null && w.complete && h();
     }, [
         h
-    ]), /* @__PURE__ */ j(F, {
+    ]), /* @__PURE__ */ D(N, {
         style: {
             position: "relative"
         },
@@ -197,13 +197,13 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
         width: o.width,
         height: o.height,
         children: [
-            b && !D && /* @__PURE__ */ e("div", {
+            b && !M && /* @__PURE__ */ e("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ e(B, {
+                children: /* @__PURE__ */ e(F, {
                     width: o.width,
                     height: o.height,
                     noBorderRadius: m
@@ -223,4 +223,4 @@ const k = /*#__PURE__*/ i.createContext(!1), O = ()=>i.useContext(k), s1 = (para
         ]
     });
 });
-export { s1 as DisableBorderRadiusProvider, U as RATIO, r1 as default, O as useDisableBorderRadius };
+export { r1 as MediaBorderRadiusProvider, U as RATIO, s1 as default, O as useMediaBorderRadius };