@telefonica/mistica 16.1.0 → 16.2.0

package/dist-es/hero.js

@@ -81,30 +81,29 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import * as $ from "react";
 import h from "classnames";
-import { useScreenSize as j } from "./hooks.js";
-import { Text3 as g, Text8 as G } from "./text.js";
-import A from "./grid-layout.js";
+import { useScreenSize as D } from "./hooks.js";
+import { Text3 as R, Text8 as G } from "./text.js";
+import j from "./grid-layout.js";
 import m from "./box.js";
-import R from "./stack.js";
-import E from "./button-group.js";
+import g from "./stack.js";
+import A from "./button-group.js";
 import { vars as i } from "./skins/skin-contract.css-mistica.js";
-import { container as v, containerMobile as M, containerMinHeight as C, expandedContent as V, layout as B, vars as H, containerDesktop as S, actions as _ } from "./hero.css-mistica.js";
+import { container as v, containerMobile as E, containerMinHeight as C, expandedContent as M, layout as B, vars as H, hero as V, containerDesktop as S, contentContainer as _, actions as z } from "./hero.css-mistica.js";
 import { vars as y } from "./image.css-mistica.js";
-import { useSlideshowContext as z } from "./carousel.js";
+import { useSlideshowContext as K } from "./carousel.js";
 import { getPrefixedDataAttributes as T } from "./utils/dom.js";
-import { sprinkles as w } from "./sprinkles.css-mistica.js";
-import { useIsInverseOrMediaVariant as K } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as U } from "./theme-variant-context.js";
 import { applyCssVars as x } from "./utils/css.js";
-import { ResetResponsiveLayout as U, InternalResponsiveLayout as W } from "./responsive-layout.js";
-const k = {
+import { ResetResponsiveLayout as W, InternalResponsiveLayout as q } from "./responsive-layout.js";
+const O = {
     default: i.colors.background,
     alternative: i.colors.backgroundAlternative,
     brand: i.colors.backgroundBrand,
     "brand-secondary": i.colors.backgroundBrandSecondary,
     none: "transparent"
-}, O = (param)=>{
+}, k = (param)=>{
     let { children: e, isInverse: o, backgroundColor: t } = param;
-    return /* @__PURE__ */ r(W, {
+    return /* @__PURE__ */ r(q, {
         isInverse: o,
         className: B,
         innerDivClassName: B,
@@ -113,25 +112,20 @@ const k = {
         children: e
     });
 }, b = (param)=>{
-    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: f, buttonLink: s } = param;
+    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: u, buttonLink: s } = param;
     return /* @__PURE__ */ p("section", {
-        className: w({
-            height: "100%",
-            display: "flex",
-            justifyContent: "space-between",
-            flexDirection: "column"
-        }),
+        className: _,
         children: [
             /* @__PURE__ */ p("div", {
                 children: [
-                    /* @__PURE__ */ p(R, {
+                    /* @__PURE__ */ p(g, {
                         space: 16,
                         children: [
                             e && e,
-                            /* @__PURE__ */ p(R, {
+                            /* @__PURE__ */ p(g, {
                                 space: 8,
                                 children: [
-                                    l && /* @__PURE__ */ r(g, {
+                                    l && /* @__PURE__ */ r(R, {
                                         as: "p",
                                         regular: !0,
                                         children: l
@@ -142,7 +136,7 @@ const k = {
                                     })
                                 ]
                             }),
-                            c && /* @__PURE__ */ r(g, {
+                            c && /* @__PURE__ */ r(R, {
                                 as: "p",
                                 regular: !0,
                                 color: i.colors.textSecondary,
@@ -157,16 +151,16 @@ const k = {
                 ]
             }),
             (d || s) && /* @__PURE__ */ r("div", {
-                className: _,
-                children: /* @__PURE__ */ r(E, {
+                className: z,
+                children: /* @__PURE__ */ r(A, {
                     primaryButton: d,
-                    secondaryButton: f,
+                    secondaryButton: u,
                     link: s
                 })
             })
         ]
     });
-}, q = /*#__PURE__*/ $.forwardRef((_param, d)=>{
+}, F = /*#__PURE__*/ $.forwardRef((_param, d)=>{
     var { height: e, background: o = "default", media: t, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: a } = _param, n = _object_without_properties(_param, [
         "height",
         "background",
@@ -175,8 +169,8 @@ const k = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: f } = j(), s = z(), u = !!(s != null && s.withBullets), D = K(), N = o === "none" ? D : o === "brand" || o === "brand-secondary";
-    if (f) return /* @__PURE__ */ r(U, {
+    const { isTabletOrSmaller: u } = D(), s = K(), f = !!(s != null && s.withBullets), w = U(), N = o === "none" ? w : o === "brand" || o === "brand-secondary";
+    if (u) return /* @__PURE__ */ r(W, {
         children: /* @__PURE__ */ r("div", {
             style: x({
                 [y.mediaBorderRadius]: "0px"
@@ -191,19 +185,19 @@ const k = {
                     [H.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
                     [y.mediaBorderRadius]: "0px"
                 })),
-                className: h(v, M, {
+                className: h(v, E, {
                     [C]: !a
                 }),
                 children: [
                     t,
-                    /* @__PURE__ */ r(O, {
+                    /* @__PURE__ */ r(k, {
                         isInverse: N,
-                        backgroundColor: k[o],
+                        backgroundColor: O[o],
                         children: /* @__PURE__ */ r("div", {
-                            className: V,
+                            className: M,
                             children: /* @__PURE__ */ r(m, {
                                 paddingTop: 24,
-                                paddingBottom: u ? 48 : a ? 0 : 24,
+                                paddingBottom: f ? 48 : a ? 0 : 24,
                                 className: B,
                                 children: /* @__PURE__ */ r(b, _object_spread({}, n))
                             })
@@ -230,18 +224,16 @@ const k = {
             [H.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
             [y.mediaBorderRadius]: i.borderRadii.container
         })), {
-            background: k[o]
-        }),
-        className: w({
-            height: "100%"
+            background: O[o]
         }),
-        children: /* @__PURE__ */ r(O, {
+        className: V,
+        children: /* @__PURE__ */ r(k, {
             isInverse: N,
-            children: /* @__PURE__ */ r(A, {
+            children: /* @__PURE__ */ r(j, {
                 template: "6+6",
                 left: /* @__PURE__ */ r(m, {
                     paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !u ? 0 : 56,
+                    paddingBottom: a && !f ? 0 : 56,
                     className: h(v, S, {
                         [C]: !a
                     }),
@@ -249,12 +241,12 @@ const k = {
                 }),
                 right: /* @__PURE__ */ r(m, {
                     paddingTop: a ? 0 : 56,
-                    paddingBottom: a && !u ? 0 : 56,
+                    paddingBottom: a && !f ? 0 : 56,
                     className: h(v, S),
                     children: L
                 })
             })
         })
     }));
-}), dr = q;
+}), dr = F;
 export { dr as default };

package/dist-es/image.js

@@ -87,13 +87,12 @@ import { getPrefixedDataAttributes as Z } from "./utils/dom.js";
 import { useIsInverseVariant as z } from "./theme-variant-context.js";
 import { useTheme as F } from "./hooks.js";
 import { VIVO_SKIN as T, VIVO_NEW_SKIN as O } from "./skins/constants.js";
-import { sprinkles as j } from "./sprinkles.css-mistica.js";
-import { circularBorderRadius as D, noBorderRadius as $, defaultBorderRadius as p, FADE_IN_DURATION_MS as K, image as P, imageWithBorder as U } from "./image.css-mistica.js";
+import { circularBorderRadius as j, noBorderRadius as D, defaultBorderRadius as $, FADE_IN_DURATION_MS as K, image as P, imageWithBorder as U } from "./image.css-mistica.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
-import { combineRefs as q } from "./utils/common.js";
-import G from "./skeleton-base.js";
-import { isServerSide as J } from "./utils/environment.js";
-const Q = (param)=>{
+import { combineRefs as p } from "./utils/common.js";
+import q from "./skeleton-base.js";
+import { isServerSide as G } from "./utils/environment.js";
+const J = (param)=>{
     let { style: e } = param;
     return /* @__PURE__ */ t("svg", {
         width: "48",
@@ -107,9 +106,9 @@ const Q = (param)=>{
             strokeWidth: "2"
         })
     });
-}, X = /*#__PURE__*/ o.forwardRef((param, s)=>{
+}, Q = /*#__PURE__*/ o.forwardRef((param, n)=>{
     let { borderRadius: e, withIcon: C = !0, border: d, className: m } = param;
-    const a = z(), { skinName: n } = F();
+    const a = z(), { skinName: s } = F();
     return /* @__PURE__ */ t("div", {
         style: {
             height: "100%",
@@ -122,15 +121,15 @@ const Q = (param)=>{
             border: d ? `1px solid ${r.colors.borderLow}` : "none",
             borderRadius: e
         },
-        ref: s,
+        ref: n,
         className: m,
-        children: C ? n === T ? /* @__PURE__ */ t(Q, {
+        children: C ? s === T ? /* @__PURE__ */ t(J, {
             style: {
                 width: "10%",
                 minWidth: 24,
                 maxWidth: 48
             }
-        }) : n === O ? /* @__PURE__ */ w("svg", {
+        }) : s === O ? /* @__PURE__ */ w("svg", {
             viewBox: "0 0 24 24",
             role: "presentation",
             style: {
@@ -172,8 +171,8 @@ const Q = (param)=>{
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, Y = /*#__PURE__*/ o.forwardRef((_param, S)=>{
-    var { aspectRatio: e = 0, alt: C = "", dataAttributes: d, noBorderRadius: m, src: s, srcSet: a, onError: n, onLoad: l, loadingFallback: M = !0, errorFallback: x = !0 } = _param, i = _object_without_properties(_param, [
+}, X = /*#__PURE__*/ o.forwardRef((_param, S)=>{
+    var { aspectRatio: e = 0, alt: C = "", dataAttributes: d, noBorderRadius: m, src: n, srcSet: a, onError: s, onLoad: l, loadingFallback: M = !0, errorFallback: x = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -186,7 +185,7 @@ const Q = (param)=>{
         "errorFallback"
     ]);
     var I;
-    const h = o.useId(), c = o.useRef(), u = i.circular ? D : m ? $ : p, [y, f] = o.useState(!s), [B, g] = o.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), A = x && !!(L !== 0 || i.width && i.height), v = o.useCallback(()=>{
+    const h = o.useId(), c = o.useRef(), u = i.circular ? j : m ? D : $, [y, f] = o.useState(!n), [B, g] = o.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), A = x && !!(L !== 0 || i.width && i.height), v = o.useCallback(()=>{
         f(!1), c.current && (c.current.style.opacity = "1"), setTimeout(()=>{
             g(!0);
         }, K), l == null || l();
@@ -194,34 +193,33 @@ const Q = (param)=>{
         l
     ]);
     o.useEffect(()=>{
-        f(!s), g(!1);
+        f(!n), g(!1);
     }, [
-        s
+        n
     ]), o.useEffect(()=>{
         var R;
         (R = c.current) != null && R.complete && v();
     }, [
         v
     ]);
-    const N = J() || !((I = document.getElementById(h)) != null && I.complete), W = /* @__PURE__ */ w(k, {
+    const N = G() || !((I = document.getElementById(h)) != null && I.complete), W = /* @__PURE__ */ w(k, {
         children: [
             /* @__PURE__ */ t("img", {
                 suppressHydrationWarning: !0,
                 id: h,
                 style: {
-                    opacity: N && b ? 0 : 1
+                    opacity: N && b ? 0 : 1,
+                    position: L !== 0 ? "absolute" : "static"
                 },
-                ref: q(c, S),
-                src: s,
+                ref: p(c, S),
+                src: n,
                 srcSet: a,
                 className: E(u, P, {
                     [U]: i.border
-                }, j({
-                    position: L !== 0 ? "absolute" : "static"
-                })),
+                }),
                 alt: C,
                 onError: ()=>{
-                    f(!0), g(!0), n == null || n();
+                    f(!0), g(!0), s == null || s();
                 },
                 onLoad: v,
                 decoding: "async"
@@ -247,7 +245,7 @@ const Q = (param)=>{
                 children: /* @__PURE__ */ t(V, {
                     height: (_i_height = i.height) !== null && _i_height !== void 0 ? _i_height : "100%",
                     width: (_i_width = i.width) !== null && _i_width !== void 0 ? _i_width : "100%",
-                    children: /* @__PURE__ */ t(G, {
+                    children: /* @__PURE__ */ t(q, {
                         height: "100%",
                         width: "100%",
                         noBorderRadius: !0
@@ -260,7 +258,7 @@ const Q = (param)=>{
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ t(X, {
+                children: /* @__PURE__ */ t(Q, {
                     border: i.border,
                     className: u
                 })
@@ -268,7 +266,7 @@ const Q = (param)=>{
             !y && W
         ]
     });
-}), e1 = /*#__PURE__*/ o.forwardRef((e, C)=>{
+}), Y = /*#__PURE__*/ o.forwardRef((e, C)=>{
     var _e_aspectRatio;
     const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" || !e.aspectRatio ? (_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : 0 : H[e.aspectRatio];
     return /* @__PURE__ */ t(_, {
@@ -280,9 +278,9 @@ const Q = (param)=>{
         height: e.height,
         dataAttributes: Z(e.dataAttributes, "Image"),
         forceNonCssAspectRatio: e.forceNonCssAspectRatio,
-        children: /* @__PURE__ */ t(Y, _object_spread_props(_object_spread({}, e), {
+        children: /* @__PURE__ */ t(X, _object_spread_props(_object_spread({}, e), {
             ref: C
         }))
     });
-}), f1 = e1;
-export { Y as ImageContent, X as ImageError, H as RATIO, f1 as default };
+}), h1 = Y;
+export { X as ImageContent, Q as ImageError, H as RATIO, h1 as default };