@telefonica/mistica 14.34.0 → 14.35.0

package/dist/hero.js

@@ -13,7 +13,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _hooks = require("./hooks.js");
-const _image = require("./image.js");
 const _text = require("./text.js");
 const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
@@ -21,6 +20,7 @@ const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _buttongroup = /*#__PURE__*/ _interop_require_default(require("./button-group.js"));
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _herocssmistica = require("./hero.css-mistica.js");
+const _imagecssmistica = require("./image.css-mistica.js");
 const _carousel = require("./carousel.js");
 const _dom = require("./utils/dom.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
@@ -160,8 +160,8 @@ const N = (param)=>/* @__PURE__ */ {
             children: e
         })
     });
-}, u = (param)=>/* @__PURE__ */ {
-    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: n, button: i, secondaryButton: p, buttonLink: m } = param;
+}, g = (param)=>/* @__PURE__ */ {
+    let { headline: e, title: o, pretitle: a, description: t, descriptionLinesMax: d, extra: i, button: l, secondaryButton: f, buttonLink: m } = param;
     return (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -199,43 +199,45 @@ const N = (param)=>/* @__PURE__ */ {
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: n
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: i
                     })
                 ]
             }),
-            (i || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (l || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: i,
-                    secondaryButton: p,
+                    primaryButton: l,
+                    secondaryButton: f,
                     link: m
                 })
             })
         ]
     });
-}, k = {
+}, R = {
     default: _skincontractcssmistica.vars.colors.background,
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary
-}, $ = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
-    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, n = _object_without_properties(_param, [
+}, Y = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    var { height: e, background: o = "default", media: a, desktopMediaPosition: t = "left", dataAttributes: d } = _param, i = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), m = (0, _carousel.useIsInsideSlideshowContext)(), g = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
-        value: !1,
+    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), m = (0, _carousel.useIsInsideSlideshowContext)(), v = o === "brand" || o === "brand-secondary";
+    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        style: (0, _css.applyCssVars)({
+            [_imagecssmistica.vars.mediaBorderRadius]: "0px"
+        }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: i,
+            ref: l,
             style: _object_spread({
-                backgroundColor: k[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
             } : {}, (0, _css.applyCssVars)({
@@ -245,31 +247,33 @@ const N = (param)=>/* @__PURE__ */ {
             children: [
                 a,
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                    isInverse: g,
+                    isInverse: v,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 24,
                         paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
                     })
                 })
             ]
         }))
     });
-    const w = t === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const H = t === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
-    }), R = t === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
+    }), w = t === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(u, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_image.MediaBorderRadiusProvider, {
-        value: !0,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        style: (0, _css.applyCssVars)({
+            [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.container
+        }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
         }, d))), {
-            ref: i,
+            ref: l,
             style: _object_spread({
-                backgroundColor: k[o]
+                backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
             } : {}, (0, _css.applyCssVars)({
@@ -281,21 +285,21 @@ const N = (param)=>/* @__PURE__ */ {
                 alignItems: "center"
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                isInverse: g,
+                isInverse: v,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                     template: "6+6",
                     left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: 56,
                         className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: w
+                        children: H
                     }),
                     right: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingY: 56,
                         className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
-                        children: R
+                        children: w
                     })
                 })
             })
         }))
     });
-}), or = $;
+}), or = Y;

package/dist/hooks.d.ts

@@ -26,5 +26,16 @@ type IntersectionObserverOptions = {
     rootMargin?: string;
     threshold?: number | Array<number>;
 };
-export declare const useIsInViewport: (ref: React.RefObject<HTMLElement>, defaultValue: boolean, options?: IntersectionObserverOptions) => boolean;
+export declare const useIsInViewport: (ref: React.RefObject<Element>, defaultValue: boolean, options?: IntersectionObserverOptions) => boolean;
+export type BoundingRect = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export declare const useBoundingRect: (ref: React.RefObject<Element>, computeOnEveryFrame?: boolean, trackIfNotVisible?: boolean) => BoundingRect | undefined;
 export {};

package/dist/hooks.js

@@ -10,40 +10,43 @@ function _export(target, all) {
 }
 _export(exports, {
     useAriaId: function() {
-        return B;
+        return q;
+    },
+    useBoundingRect: function() {
+        return G;
     },
     useDisableBodyScroll: function() {
-        return z;
+        return A;
     },
     useElementDimensions: function() {
-        return R;
+        return M;
     },
     useIsInViewport: function() {
-        return k;
+        return E;
     },
     useIsWithinIFrame: function() {
-        return D;
+        return k;
     },
     useIsomorphicLayoutEffect: function() {
-        return V;
+        return $;
     },
     useScreenHeight: function() {
-        return A;
+        return V;
     },
     useScreenSize: function() {
-        return C;
+        return L;
     },
     useTheme: function() {
-        return x;
+        return v;
     },
     useWindowHeight: function() {
-        return L;
+        return D;
     },
     useWindowSize: function() {
-        return a;
+        return w;
     },
     useWindowWidth: function() {
-        return M;
+        return F;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
@@ -52,6 +55,7 @@ const _screensizecontext = /*#__PURE__*/ _interop_require_default(require("./scr
 const _ariaidgettercontext = /*#__PURE__*/ _interop_require_default(require("./aria-id-getter-context.js"));
 const _dom = require("./utils/dom.js");
 const _environment = require("./utils/environment.js");
+const _helpers = require("./utils/helpers.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -98,25 +102,25 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const x = ()=>{
+const v = ()=>{
     const t = _react.useContext(_themecontext.default);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let f = "", w = 0, h = 0;
-const z = (t)=>{
+let f = "", a = 0, l = 0;
+const A = (t)=>{
     _react.useEffect(()=>{
         if (t) {
-            const r = document.scrollingElement || document.documentElement, e = ()=>{
+            const n = document.scrollingElement || document.documentElement, e = ()=>{
                 var s;
                 var _ref, _ref1;
-                if (h++, !(h > 1) && (w = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (l++, !(l > 1) && (a = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
-                    const o = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-w}px;left:0px;right:0px;bottom:0px`;
+                    const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-a}px;left:0px;right:0px;bottom:0px`;
                 }
             }, i = ()=>{
-                h--, !(h > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = w));
+                l--, !(l > 0) && (document.body && (document.body.style.cssText = f), n && (n.scrollTop = a));
             };
             return e(), i;
         }
@@ -124,20 +128,20 @@ const z = (t)=>{
     }, [
         t
     ]);
-}, C = ()=>_react.useContext(_screensizecontext.default), R = ()=>{
-    const [t, r] = _react.useState(0), [e, i] = _react.useState(0), [s, c] = _react.useState(null), o = _react.useCallback((d)=>{
-        if (!d) {
-            r(0), i(0);
+}, L = ()=>_react.useContext(_screensizecontext.default), M = ()=>{
+    const [t, n] = _react.useState(0), [e, i] = _react.useState(0), [s, c] = _react.useState(null), o = _react.useCallback((u)=>{
+        if (!u) {
+            n(0), i(0);
             return;
         }
-        const { width: m, height: g } = d[0].contentRect;
-        r(m), i(g);
-    }, []), l = _react.useCallback((d)=>{
-        c(d);
+        const { width: m, height: g } = u[0].contentRect;
+        n(m), i(g);
+    }, []), d = _react.useCallback((u)=>{
+        c(u);
     }, []);
     return _react.useEffect(()=>{
         if (!s) {
-            r(0), i(0);
+            n(0), i(0);
             return;
         }
         return (0, _dom.listenResize)(s, o);
@@ -147,25 +151,25 @@ const z = (t)=>{
     ]), {
         width: t,
         height: e,
-        ref: l
+        ref: d
     };
-}, B = (t)=>{
-    const { useId: r } = x();
-    if (r) {
-        const e = r();
+}, q = (t)=>{
+    const { useId: n } = v();
+    if (n) {
+        const e = n();
         return t || e;
     } else {
         const e = _react.useContext(_ariaidgettercontext.default);
         return _react.useRef(t || e()).current;
     }
-}, a = ()=>{
-    const [t, r] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, l] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
+}, w = ()=>{
+    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, d] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
     return _react.useEffect(()=>{
-        const d = ()=>{
-            r(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), l(window.screen.availWidth);
+        const u = ()=>{
+            n(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), d(window.screen.availWidth);
         };
-        return window.addEventListener("resize", d), ()=>{
-            window.removeEventListener("resize", d);
+        return window.addEventListener("resize", u), ()=>{
+            window.removeEventListener("resize", u);
         };
     }, []), _react.useMemo(()=>({
             height: t,
@@ -178,17 +182,17 @@ const z = (t)=>{
         s,
         o
     ]);
-}, L = ()=>{
-    const { height: t } = a();
+}, D = ()=>{
+    const { height: t } = w();
     return t;
-}, M = ()=>{
-    const { width: t } = a();
+}, F = ()=>{
+    const { width: t } = w();
     return t;
-}, A = ()=>{
-    const { screenHeight: t } = a();
+}, V = ()=>{
+    const { screenHeight: t } = w();
     return t;
-}, D = ()=>(0, _environment.isClientSide)() && window.top !== window.self, V = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, k = (t, r, e)=>{
-    const [i, s] = _react.useState(r);
+}, k = ()=>(0, _environment.isClientSide)() && window.top !== window.self, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, E = (t, n, e)=>{
+    const [i, s] = _react.useState(n);
     return _react.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
@@ -208,4 +212,37 @@ const z = (t)=>{
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
     ]), i;
+}, I = (t)=>{
+    const { top: n, right: e, bottom: i, left: s, width: c, height: o, x: d, y: u } = t.getBoundingClientRect();
+    return {
+        top: n,
+        right: e,
+        bottom: i,
+        left: s,
+        width: c,
+        height: o,
+        x: d,
+        y: u
+    };
+}, G = function(t) {
+    let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+    const [i, s] = _react.useState(), c = E(t, !1);
+    return _react.useEffect(()=>{
+        let o;
+        const d = ()=>{
+            if (t.current && (c || e)) {
+                const u = I(t.current);
+                (0, _helpers.isEqual)(i, u) || s(u), n && (o = requestAnimationFrame(d));
+            } else s(void 0);
+        };
+        return o = requestAnimationFrame(d), ()=>{
+            cancelAnimationFrame(o);
+        };
+    }, [
+        t,
+        i,
+        c,
+        n,
+        e
+    ]), i;
 };

package/dist/image.css-mistica.js

@@ -10,12 +10,17 @@ function _export(target, all) {
 }
 _export(exports, {
     FADE_IN_DURATION_MS: function() {
-        return f;
+        return r;
     },
     image: function() {
+        return f;
+    },
+    vars: function() {
         return n;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var f = 300, n = "_17tt25r1 _1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg4 _1y2v1nfdp _1y2v1nfdq";
+var r = 300, f = "_17tt25r2 _1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg5 _1y2v1nfdp _1y2v1nfdq _1y2v1nfe1", n = {
+    mediaBorderRadius: "var(--_17tt25r0)"
+};

package/dist/image.css.d.ts

@@ -1,3 +1,6 @@
 export declare const FADE_IN_DURATION_MS = 300;
+export declare const vars: {
+    mediaBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
 export declare const image: string;
 export declare const noBorder: string;

package/dist/image.d.ts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { ExclusifyUnion } from './utils/utility-types';
 import type { DataAttributes } from './utils/types';
-export declare const useMediaBorderRadius: () => boolean;
-export declare const MediaBorderRadiusProvider: ({ children, value, }: {
-    children: React.ReactNode;
-    value: boolean;
-}) => JSX.Element;
 type ImageErrorProps = {
-    noBorderRadius?: boolean;
-    circular?: boolean;
     withIcon?: boolean;
+    borderRadius?: string | number;
     border?: boolean;
 };
 export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;