@telefonica/mistica 15.2.1 → 15.4.0

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

@@ -0,0 +1,102 @@
+"use client";
+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;
+}
+import { jsx as r } from "react/jsx-runtime";
+import { useIsInverseVariant as s } from "../../theme-variant-context.js";
+import { vars as e } from "../../skins/skin-contract.css-mistica.js";
+const i = (_param)=>{
+    var { color: a, size: o = 24 } = _param, t = _object_without_properties(_param, [
+        "color",
+        "size"
+    ]);
+    const l = s(), n = a !== null && a !== void 0 ? a : l ? e.colors.inverse : e.colors.neutralHigh;
+    return /* @__PURE__ */ r("svg", _object_spread_props(_object_spread({
+        width: o,
+        height: o,
+        viewBox: "0 0 24 24",
+        role: "presentation"
+    }, t), {
+        children: /* @__PURE__ */ r("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;
+export { h as default };

package/dist-es/grid.js

@@ -28,7 +28,7 @@ function _object_spread(target) {
 }
 import c from "classnames";
 import * as d from "react";
-import { grid as G, gridTemplateColumns as C, gridTemplateColumnsAutoRepeat as M, gridTemplateRows as T, gridTemplateRowsAutoRepeat as j, gridAutoFlow as v, gridJustifyItems as N, gridAlignItems as V, gridJustifyContent as k, gridAlignContent as E, fullColumns as J, spanColumns as h, fullRows as w, spanRows as D, columnStart as F, rowStart as I, justifySelf as P, alignSelf as q, vars as p } from "./grid.css-mistica.js";
+import { grid as G, gridTemplateColumns as C, gridTemplateColumnsAutoRepeat as M, gridTemplateRows as T, gridTemplateRowsAutoRepeat as j, gridAutoFlow as v, gridJustifyItems as V, gridAlignItems as k, gridJustifyContent as E, gridAlignContent as J, fullColumns as N, spanColumns as h, fullRows as w, spanRows as D, columnStart as F, rowStart as I, justifySelf as P, alignSelf as q, vars as p } from "./grid.css-mistica.js";
 import { applyCssVars as B } from "./utils/css.js";
 import { getPrefixedDataAttributes as R } from "./utils/dom.js";
 import { sprinkles as H } from "./sprinkles.css-mistica.js";
@@ -60,7 +60,7 @@ const K = (t, e)=>{
     }
     return /*#__PURE__*/ d.createElement(z, _object_spread({
         ref: x,
-        className: c(G, g, e ? typeof e == "number" ? C[e] : M : "", t ? typeof t == "number" ? T[t] : j : "", f ? v[f] : "", o ? N[o] : "", r ? V[r] : "", l ? k[l] : "", n ? E[n] : ""),
+        className: c(G, g, e ? typeof e == "number" ? C[e] : M : "", t ? typeof t == "number" ? T[t] : j : "", f ? v[f] : "", o ? V[o] : "", r ? k[r] : "", l ? E[l] : "", n ? J[n] : ""),
         style: _object_spread({
             height: u,
             minHeight: y
@@ -70,7 +70,7 @@ const K = (t, e)=>{
     let { rowStart: t, rowSpan: e, columnStart: i, columnSpan: f, span: o, justifySelf: r, alignSelf: l, children: n, as: u = "div", dataAttributes: y } = param;
     return o && (Array.isArray(o) ? (f = o[0], e = o[1]) : (f = o, e = o)), /*#__PURE__*/ d.createElement(u, _object_spread({
         ref: s,
-        className: c(f ? f === "full" ? J : h[f] : "", e ? e === "full" ? w : D[e] : "", i ? F[i] : "", t ? I[t] : "", r ? P[r] : "", l ? q[l] : "")
+        className: c(f ? f === "full" ? N : h[f] : "", e ? e === "full" ? w : D[e] : "", i ? F[i] : "", t ? I[t] : "", r ? P[r] : "", l ? q[l] : "")
     }, R(y)), n);
 });
 export { Y as Grid, Z as GridItem };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./header.css.ts.vanilla.css-mistica.js";
-var t = "mtk7e90 _1y2v1nf92", m = "mtk7e93", a = "mtk7e90";
+var t = "mtk7e90 _1y2v1nf9c", m = "mtk7e93", a = "mtk7e90";
 export { t as breadcrumbs, m as hideOnDesktop, a as hideOnTabletOrSmaller };

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

@@ -1,7 +1,13 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./hero.css.ts.vanilla.css-mistica.js";
-var t = "_16rbpto6 _1y2v1nfha _1y2v1nfhw _1y2v1nfhq", v = "_16rbpto2 _1y2v1nfha", n = "_1y2v1nfhp _1y2v1nfie", _ = "_1y2v1nfhg", i = "_16rbpto7", p = {
+var o = "_16rbpto7 _1y2v1nfhk _1y2v1nfi6 _1y2v1nfi0", a = "_16rbpto2 _1y2v1nfhk", e = {
+    default: "_16rbptoc",
+    alternative: "_16rbptod",
+    brand: "_16rbptoe",
+    "brand-secondary": "_16rbptof",
+    none: "_16rbptog"
+}, p = "_1y2v1nfhz _1y2v1nfio", v = "_16rbpto3", _ = "_1y2v1nfhq", b = "_16rbpto9", i = "_16rbptob _16rbptoa", c = "_16rbptoa", f = "_16rbpto8", y = {
     height: "var(--_16rbpto0)"
 };
-export { t as actions, v as container, n as containerDesktop, _ as containerMobile, i as layout, p as vars };
+export { o as actions, a as container, e as containerBackground, p as containerDesktop, v as containerMinHeight, _ as containerMobile, b as contentContainer, i as contentWrapper, c as expandedContent, f as layout, y as vars };

package/dist-es/hero.js

@@ -78,173 +78,171 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import * as I from "react";
-import u from "classnames";
-import { useScreenSize as T } from "./hooks.js";
-import { Text3 as y, Text8 as D } from "./text.js";
-import O from "./grid-layout.js";
-import d from "./box.js";
-import x from "./stack.js";
-import j from "./button-group.js";
-import { vars as a } from "./skins/skin-contract.css-mistica.js";
-import { container as g, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
-import { vars as N } from "./image.css-mistica.js";
-import { useIsInsideSlideshowContext as A } from "./carousel.js";
-import { getPrefixedDataAttributes as S } from "./utils/dom.js";
-import { sprinkles as k } from "./sprinkles.css-mistica.js";
-import { ThemeVariant as V } from "./theme-variant-context.js";
-import { applyCssVars as f } from "./utils/css.js";
-const C = (param)=>{
-    let { children: e, isInverse: o } = param;
-    return /* @__PURE__ */ r(V, {
-        isInverse: o,
-        children: /* @__PURE__ */ r("div", {
-            className: L,
-            children: e
-        })
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import * as V from "react";
+import s from "classnames";
+import { useScreenSize as G } from "./hooks.js";
+import { Text3 as B, Text8 as O } from "./text.js";
+import W from "./grid-layout.js";
+import p from "./box.js";
+import w from "./stack.js";
+import z from "./button-group.js";
+import { vars as $ } from "./skins/skin-contract.css-mistica.js";
+import { container as u, containerMobile as E, containerMinHeight as C, contentWrapper as M, containerBackground as S, expandedContent as q, layout as x, contentContainer as A, vars as H, containerDesktop as b, actions as F } from "./hero.css-mistica.js";
+import { vars as g } from "./image.css-mistica.js";
+import { useSlideshowContext as J } from "./carousel.js";
+import { getPrefixedDataAttributes as R } from "./utils/dom.js";
+import { sprinkles as D } from "./sprinkles.css-mistica.js";
+import { useIsInverseVariant as K } from "./theme-variant-context.js";
+import { applyCssVars as I } from "./utils/css.js";
+import { InternalResponsiveLayout as Q } from "./responsive-layout.js";
+const T = (param)=>{
+    let { children: r, isInverse: t, isInsideSlideShow: n } = param;
+    return /* @__PURE__ */ e(Q, {
+        isInverse: t,
+        className: x,
+        innerDivClassName: x,
+        shouldExpandWhenNested: n ? "desktop" : !0,
+        backgroundColor: "transparent",
+        children: r
     });
 }, v = (param)=>{
-    let { headline: e, title: o, titleAs: i = "h1", pretitle: t, description: n, descriptionLinesMax: l, extra: s, button: p, secondaryButton: h, buttonLink: c } = param;
-    return /* @__PURE__ */ m("section", {
-        className: k({
+    let { headline: r, title: t, titleAs: n = "h1", pretitle: i, description: l, descriptionLinesMax: o, extra: a, button: c, secondaryButton: f, buttonLink: m } = param;
+    return /* @__PURE__ */ d("section", {
+        className: D({
             height: "100%",
             display: "flex",
             justifyContent: "space-between",
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ m("div", {
+            /* @__PURE__ */ d("div", {
                 children: [
-                    /* @__PURE__ */ m(x, {
+                    /* @__PURE__ */ d(w, {
                         space: 16,
                         children: [
-                            e && e,
-                            /* @__PURE__ */ m(x, {
+                            r && r,
+                            /* @__PURE__ */ d(w, {
                                 space: 8,
                                 children: [
-                                    t && /* @__PURE__ */ r(y, {
+                                    i && /* @__PURE__ */ e(B, {
                                         as: "p",
                                         regular: !0,
-                                        children: t
+                                        children: i
                                     }),
-                                    o && /* @__PURE__ */ r(D, {
-                                        as: i,
-                                        children: o
+                                    t && /* @__PURE__ */ e(O, {
+                                        as: n,
+                                        children: t
                                     })
                                 ]
                             }),
-                            n && /* @__PURE__ */ r(y, {
+                            l && /* @__PURE__ */ e(B, {
                                 as: "p",
                                 regular: !0,
-                                color: a.colors.textSecondary,
-                                truncate: l,
-                                children: n
+                                color: $.colors.textSecondary,
+                                truncate: o,
+                                children: l
                             })
                         ]
                     }),
-                    s && /* @__PURE__ */ r("div", {
-                        children: s
+                    a && /* @__PURE__ */ e("div", {
+                        children: a
                     })
                 ]
             }),
-            (p || c) && /* @__PURE__ */ r("div", {
-                className: $,
-                children: /* @__PURE__ */ r(j, {
-                    primaryButton: p,
-                    secondaryButton: h,
-                    link: c
+            (c || m) && /* @__PURE__ */ e("div", {
+                className: F,
+                children: /* @__PURE__ */ e(z, {
+                    primaryButton: c,
+                    secondaryButton: f,
+                    link: m
                 })
             })
         ]
     });
-}, R = {
-    default: a.colors.background,
-    alternative: a.colors.backgroundAlternative,
-    brand: a.colors.backgroundBrand,
-    "brand-secondary": a.colors.backgroundBrandSecondary
-}, Y = /*#__PURE__*/ I.forwardRef((_param, s)=>{
-    var { height: e, background: o = "default", media: i, desktopMediaPosition: t = "left", dataAttributes: n } = _param, l = _object_without_properties(_param, [
+}, U = /*#__PURE__*/ V.forwardRef((_param, c)=>{
+    var { height: r, background: t = "default", media: n, desktopMediaPosition: i = "left", dataAttributes: l, noPaddingY: o } = _param, a = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
-        "dataAttributes"
+        "dataAttributes",
+        "noPaddingY"
     ]);
-    const { isTabletOrSmaller: p } = T(), h = A(), c = o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ r("div", {
-        style: f({
-            [N.mediaBorderRadius]: "0px"
+    const { isTabletOrSmaller: f } = G(), m = J(), y = !!m, h = y && m.withBullets, j = K(), N = t === "none" ? j : t === "brand" || t === "brand-secondary";
+    if (f) return /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, R(_object_spread({
+        "component-name": "Hero"
+    }, l))), {
+        ref: c,
+        style: _object_spread({}, r === "100vh" ? {
+            maxHeight: "-webkit-fill-available"
+        } : {}, I({
+            [H.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+            [g.mediaBorderRadius]: "0px"
+        })),
+        className: s(u, E, {
+            [C]: !o
         }),
-        children: /* @__PURE__ */ m("div", _object_spread_props(_object_spread({}, S(_object_spread({
-            "component-name": "Hero"
-        }, n))), {
-            ref: s,
-            style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
-                maxHeight: "-webkit-fill-available"
-            } : {}, f({
-                [B.height]: e !== null && e !== void 0 ? e : "100%"
-            })),
-            className: u(g, G),
-            children: [
-                i,
-                /* @__PURE__ */ r(C, {
-                    isInverse: c,
-                    children: /* @__PURE__ */ r(d, {
-                        paddingTop: 24,
-                        paddingBottom: h ? 48 : 24,
-                        children: /* @__PURE__ */ r(v, _object_spread({}, l))
+        children: /* @__PURE__ */ e(T, {
+            isInverse: N,
+            isInsideSlideShow: y,
+            children: /* @__PURE__ */ d("div", {
+                className: s(M),
+                children: [
+                    n,
+                    /* @__PURE__ */ e("div", {
+                        className: s(S[t], q),
+                        children: /* @__PURE__ */ e(p, {
+                            paddingTop: 24,
+                            paddingBottom: h ? 48 : o ? 0 : 24,
+                            className: s(x, A),
+                            children: /* @__PURE__ */ e(v, _object_spread({}, a))
+                        })
                     })
-                })
-            ]
-        }))
-    });
-    const H = t === "left" ? i : /* @__PURE__ */ r(d, {
+                ]
+            })
+        })
+    }));
+    const k = i === "left" ? n : /* @__PURE__ */ e(p, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(v, _object_spread({}, l))
-    }), w = t === "right" ? i : /* @__PURE__ */ r(d, {
+        children: /* @__PURE__ */ e(v, _object_spread({}, a))
+    }), L = i === "right" ? n : /* @__PURE__ */ e(p, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(v, _object_spread({}, l))
+        children: /* @__PURE__ */ e(v, _object_spread({}, a))
     });
-    return /* @__PURE__ */ r("div", {
-        style: f({
-            [N.mediaBorderRadius]: a.borderRadii.container
-        }),
-        children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, S(_object_spread({
-            "component-name": "Hero"
-        }, n))), {
-            ref: s,
-            style: _object_spread({
-                backgroundColor: R[o]
-            }, e === "100vh" ? {
-                maxHeight: "-webkit-fill-available"
-            } : {}, f({
-                [B.height]: e !== null && e !== void 0 ? e : "100%"
-            })),
-            className: k({
-                height: "100%",
-                display: "flex",
-                alignItems: "center"
-            }),
-            children: /* @__PURE__ */ r(C, {
-                isInverse: c,
-                children: /* @__PURE__ */ r(O, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ r(d, {
-                        paddingY: 56,
-                        className: u(g, b),
-                        children: H
+    return /* @__PURE__ */ e("div", _object_spread_props(_object_spread({}, R(_object_spread({
+        "component-name": "Hero"
+    }, l))), {
+        ref: c,
+        style: _object_spread({}, r === "100vh" ? {
+            maxHeight: "-webkit-fill-available"
+        } : {}, I({
+            [H.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
+            [g.mediaBorderRadius]: $.borderRadii.container
+        })),
+        className: s(D({
+            height: "100%"
+        }), S[t]),
+        children: /* @__PURE__ */ e(T, {
+            isInverse: N,
+            children: /* @__PURE__ */ e(W, {
+                template: "6+6",
+                left: /* @__PURE__ */ e(p, {
+                    paddingTop: o ? 0 : 56,
+                    paddingBottom: o && !h ? 0 : 56,
+                    className: s(u, b, {
+                        [C]: !o
                     }),
-                    right: /* @__PURE__ */ r(d, {
-                        paddingY: 56,
-                        className: u(g, b),
-                        children: w
-                    })
+                    children: k
+                }),
+                right: /* @__PURE__ */ e(p, {
+                    paddingTop: o ? 0 : 56,
+                    paddingBottom: o && !h ? 0 : 56,
+                    className: s(u, b),
+                    children: L
                 })
             })
-        }))
-    });
-}), or = Y;
-export { or as default };
+        })
+    }));
+}), de = U;
+export { de as default };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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";
-export { f as container, y as imageContent, _ as textContainerVariant, a as touchableContainer };
+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";
+export { y as container, f as imageContent, _ as textContainerVariant, a as touchableContainer };

package/dist-es/hooks.js

@@ -1,30 +1,30 @@
 import * as r from "react";
-import S from "./theme-context.js";
-import b from "./screen-size-context.js";
-import y from "./aria-id-getter-context.js";
-import { listenResize as W } from "./utils/dom.js";
+import b from "./theme-context.js";
+import y from "./screen-size-context.js";
+import W from "./aria-id-getter-context.js";
+import { listenResize as x } from "./utils/dom.js";
 import { isClientSide as h } from "./utils/environment.js";
-import { isEqual as v } from "./utils/helpers.js";
-const x = ()=>{
-    const t = r.useContext(S);
+import { isEqual as E } from "./utils/helpers.js";
+const H = ()=>{
+    const t = r.useContext(b);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let l = "", w = 0, a = 0;
-const A = (t)=>{
+let a = "", m = 0, w = 0;
+const L = (t)=>{
     r.useEffect(()=>{
         if (t) {
             const n = document.scrollingElement || document.documentElement, e = ()=>{
                 var i;
                 var _ref, _ref1;
-                if (a++, !(a > 1) && (w = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, l = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (w++, !(w > 1) && (m = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, a = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
                     const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = l + (l.endsWith(";") ? "" : ";") + [
+                    document.body.style.cssText = a + (a.endsWith(";") ? "" : ";") + [
                         "overflow: hidden;",
                         `overflow-y: ${o};`,
                         "position: fixed;",
-                        `top: ${-w}px;`,
+                        `top: ${-m}px;`,
                         "left: 0px;",
                         "right: 0px;",
                         "bottom: 0px;",
@@ -32,7 +32,7 @@ const A = (t)=>{
                     ].join("");
                 }
             }, s = ()=>{
-                a--, !(a > 0) && (document.body && (document.body.style.cssText = l), n && (n.scrollTop = w));
+                w--, !(w > 0) && (document.body && (document.body.style.cssText = a), n && (n.scrollTop = m));
             };
             return e(), s;
         }
@@ -40,14 +40,14 @@ const A = (t)=>{
     }, [
         t
     ]);
-}, L = ()=>r.useContext(b), M = ()=>{
+}, M = ()=>r.useContext(y), q = ()=>{
     const [t, n] = r.useState(0), [e, s] = r.useState(0), [i, c] = r.useState(null), o = r.useCallback((d)=>{
         if (!d) {
             n(0), s(0);
             return;
         }
-        const { width: m, height: g } = d[0].contentRect;
-        n(m), s(g);
+        const { width: f, height: l } = d[0].contentRect;
+        n(f), s(l);
     }, []), u = r.useCallback((d)=>{
         c(d);
     }, []);
@@ -56,7 +56,7 @@ const A = (t)=>{
             n(0), s(0);
             return;
         }
-        return W(i, o);
+        return x(i, o);
     }, [
         i,
         o
@@ -65,45 +65,46 @@ const A = (t)=>{
         height: e,
         ref: u
     };
-}, q = (t)=>{
-    const { useId: n } = x();
+}, D = (t)=>{
+    const { useId: n } = H();
     if (n) {
         const e = n();
         return t || e;
     } else {
-        const e = r.useContext(y);
+        const e = r.useContext(W);
         return r.useRef(t || e()).current;
     }
-}, f = ()=>{
-    const [t, n] = r.useState(h() ? window.innerHeight : 1200), [e, s] = r.useState(h() ? window.innerWidth : 800), [i, c] = r.useState(h() ? window.screen.availHeight : 1200), [o, u] = r.useState(h() ? window.screen.availWidth : 800);
+}, v = ()=>{
+    var l;
+    const [t, n] = r.useState(h() ? window.innerHeight : 1200), [e, s] = r.useState(h() ? window.innerWidth : 800), [i, c] = r.useState(h() ? window.screen.availHeight : 1200), [o, u] = r.useState(h() ? window.screen.availWidth : 800), [d, f] = r.useState(h() ? ((l = window.visualViewport) == null ? void 0 : l.height) || window.screen.availHeight : 1200);
     return r.useEffect(()=>{
-        const d = ()=>{
-            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
+        const g = ()=>{
+            var S;
+            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth), f(((S = window.visualViewport) == null ? void 0 : S.height) || window.screen.availHeight);
         };
-        return window.addEventListener("resize", d), ()=>{
-            window.removeEventListener("resize", d);
+        return window.addEventListener("resize", g), ()=>{
+            window.removeEventListener("resize", g);
         };
     }, []), r.useMemo(()=>({
             height: t,
             width: e,
             screenHeight: i,
-            screenWidth: o
+            screenWidth: o,
+            visualHeight: d
         }), [
         t,
         e,
         i,
-        o
+        o,
+        d
     ]);
-}, D = ()=>{
-    const { height: t } = f();
+}, k = ()=>{
+    const { height: t } = v();
     return t;
 }, F = ()=>{
-    const { width: t } = f();
-    return t;
-}, V = ()=>{
-    const { screenHeight: t } = f();
+    const { width: t } = v();
     return t;
-}, k = ()=>h() && window.top !== window.self, $ = h() ? r.useLayoutEffect : r.useEffect, E = (t, n, e)=>{
+}, $ = h() ? r.useLayoutEffect : r.useEffect, I = (t, n, e)=>{
     const [s, i] = r.useState(n);
     return r.useEffect(()=>{
         if (!t.current) return;
@@ -124,7 +125,7 @@ const A = (t)=>{
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
     ]), s;
-}, I = (t)=>{
+}, T = (t)=>{
     const { top: n, right: e, bottom: s, left: i, width: c, height: o, x: u, y: d } = t.getBoundingClientRect();
     return {
         top: n,
@@ -138,13 +139,13 @@ const A = (t)=>{
     };
 }, j = 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 [s, i] = r.useState(), c = E(t, !1);
+    const [s, i] = r.useState(), c = I(t, !1);
     return r.useEffect(()=>{
         let o;
         const u = ()=>{
             if (t.current && (c || e)) {
-                const d = I(t.current);
-                v(s, d) || i(d), n && (o = requestAnimationFrame(u));
+                const d = T(t.current);
+                E(s, d) || i(d), n && (o = requestAnimationFrame(u));
             } else i(void 0);
         };
         return o = requestAnimationFrame(u), ()=>{
@@ -158,4 +159,4 @@ const A = (t)=>{
         e
     ]), s;
 };
-export { q as useAriaId, j as useBoundingRect, A as useDisableBodyScroll, M as useElementDimensions, E as useIsInViewport, k as useIsWithinIFrame, $ as useIsomorphicLayoutEffect, V as useScreenHeight, L as useScreenSize, x as useTheme, D as useWindowHeight, f as useWindowSize, F as useWindowWidth };
+export { D as useAriaId, j as useBoundingRect, L as useDisableBodyScroll, q as useElementDimensions, I as useIsInViewport, $ as useIsomorphicLayoutEffect, M as useScreenSize, H as useTheme, k as useWindowHeight, v as useWindowSize, F as useWindowWidth };