@telefonica/mistica 14.41.0 → 14.42.0

package/dist-es/feedback.js

@@ -79,222 +79,227 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import * as S from "react";
-import { useTheme as N, useWindowHeight as se, useScreenSize as x, useIsomorphicLayoutEffect as q } from "./hooks.js";
-import { ThemeVariant as ae, useIsInverseVariant as ie } from "./theme-variant-context.js";
-import de from "./button-fixed-footer-layout.js";
-import L from "./overscroll-color-context.js";
-import { O2_CLASSIC_SKIN as E, VIVO_SKIN as W, VIVO_NEW_SKIN as K } from "./skins/constants.js";
-import R from "./icons/icon-success.js";
-import j from "./icons/icon-success-vivo.js";
-import le from "./icons/icon-error.js";
-import me from "./icons/icon-info.js";
-import { isWebViewBridgeAvailable as ue, requestVibration as pe } from "@tef-novum/webview-bridge";
-import { isRunningAcceptanceTest as be } from "./utils/platform.js";
-import { Text2 as fe, Text6 as he, Text3 as ke } from "./text.js";
-import y from "./box.js";
-import { Boxed as Se } from "./boxed.js";
-import B from "./responsive-layout.js";
-import b from "./stack.js";
-import k from "classnames";
-import ge from "./button-group.js";
-import { vars as d } from "./skins/skin-contract.css-mistica.js";
-import { innerContainer as M, iconContainer as ve, feedbackData as Fe, feedbackDataAppear as A, feedbackDataAppearActiveFast as Ie, feedbackDataAppearActiveMedium as _, feedbackDataAppearActiveSlow as Ae, desktopContainer as Be, desktopContent as Ne, container as xe } from "./feedback.css-mistica.js";
-import G from "./icons/icon-success-vivo-new.js";
-const P = (r)=>!be(r), U = (param)=>{
+import * as F from "react";
+import { useTheme as v, useWindowHeight as Q, useScreenSize as H, useIsomorphicLayoutEffect as Y } from "./hooks.js";
+import { tabletOrSmaller as Z } from "./media-queries.css-mistica.js";
+import ee from "./button-fixed-footer-layout.js";
+import oe from "./overscroll-color-context.js";
+import { O2_CLASSIC_SKIN as C, VIVO_SKIN as $, VIVO_NEW_SKIN as w } from "./skins/constants.js";
+import E from "./icons/icon-success.js";
+import _ from "./icons/icon-success-vivo.js";
+import re from "./icons/icon-error.js";
+import te from "./icons/icon-info.js";
+import { isWebViewBridgeAvailable as ce, requestVibration as ne } from "@tef-novum/webview-bridge";
+import { isRunningAcceptanceTest as ie } from "./utils/platform.js";
+import { Text2 as se, Text6 as ae, Text3 as de } from "./text.js";
+import b from "./box.js";
+import { InternalBoxed as le } from "./boxed.js";
+import me from "./responsive-layout.js";
+import u from "./stack.js";
+import p from "classnames";
+import ue from "./button-group.js";
+import { vars as a } from "./skins/skin-contract.css-mistica.js";
+import { container as pe, innerContainer as be, backgroundBrand as fe, iconContainer as ke, feedbackData as he, feedbackTextAppearFast as ge, feedbackTextAppearMedium as V, feedbackTextAppearSlow as Se, desktopContainer as Fe, desktopContent as ve, desktopImage as xe } from "./feedback.css-mistica.js";
+import D from "./icons/icon-success-vivo-new.js";
+const R = (r)=>!ie(r), L = (param)=>{
     let { primaryButton: r, secondaryButton: o } = param;
     return !!r || !!o;
-}, ye = ()=>{
-    const o = `body {background:${ie() ? d.colors.backgroundBrand : d.colors.background}}`;
+}, Ie = (param)=>{
+    let { isInverse: r } = param;
+    const o = `@media ${Z} {
+        body {background:${r ? a.colors.backgroundBrand : a.colors.background}}
+    }`;
     return /* @__PURE__ */ e("style", {
         children: o
     });
-}, $ = (r)=>{
-    ue() && pe(r).catch(()=>{});
-}, J = (r)=>{
-    S.useEffect(()=>{
+}, O = (r)=>{
+    ce() && ne(r).catch(()=>{});
+}, W = (r)=>{
+    F.useEffect(()=>{
         let o;
-        return r === "success" && (o = setTimeout(()=>$("success"), 700)), r === "error" && (o = setTimeout(()=>$("error"), 1e3)), ()=>{
+        return r === "success" && (o = setTimeout(()=>O("success"), 700)), r === "error" && (o = setTimeout(()=>O("error"), 1e3)), ()=>{
             clearTimeout(o);
         };
     }, [
         r
     ]);
-}, Q = ()=>{
-    const [r, o] = S.useState(!1);
-    return q(()=>{
-        const t = window.requestAnimationFrame(()=>{
-            o(!0);
-        });
-        return ()=>window.cancelAnimationFrame(t);
-    }, []), r;
-}, X = (param, n, s)=>{
+}, q = (param, n)=>{
     let { icon: r, title: o, description: t, extra: c } = param;
-    const a = t && Array.isArray(t) ? /* @__PURE__ */ e(b, {
+    const i = t && Array.isArray(t) ? /* @__PURE__ */ e(u, {
         space: 16,
-        children: t.map((m, u)=>/* @__PURE__ */ e("p", {
-                children: m
-            }, u))
+        children: t.map((d, m)=>/* @__PURE__ */ e("p", {
+                children: d
+            }, m))
     }) : t;
-    return /* @__PURE__ */ l(b, {
+    return /* @__PURE__ */ l(u, {
         space: 24,
         children: [
             /* @__PURE__ */ e("div", {
-                className: ve,
+                className: ke,
                 children: r
             }),
-            /* @__PURE__ */ l(b, {
+            /* @__PURE__ */ l(u, {
                 space: 16,
-                className: k(Fe),
+                className: p(he),
                 children: [
                     /* @__PURE__ */ e("div", {
-                        className: k(n && A, n && s && Ie),
-                        children: /* @__PURE__ */ e(he, {
+                        className: p(n && ge),
+                        children: /* @__PURE__ */ e(ae, {
                             as: "h1",
                             children: o
                         })
                     }),
-                    /* @__PURE__ */ e("div", {
-                        className: k(n && A, n && s && _),
-                        children: a && /* @__PURE__ */ e(ke, {
+                    i && /* @__PURE__ */ e("div", {
+                        className: p(n && V),
+                        children: i && /* @__PURE__ */ e(de, {
                             regular: !0,
-                            color: d.colors.textSecondary,
-                            children: a
+                            color: a.colors.textSecondary,
+                            children: i
                         })
                     }),
-                    /* @__PURE__ */ e("div", {
-                        className: k(n && A, n && s && (a ? Ae : _)),
+                    c && /* @__PURE__ */ e("div", {
+                        className: p(n && (i ? Se : V)),
                         children: c
                     })
                 ]
             })
         ]
     });
-}, Y = (r, o, t)=>{
-    const c = U(o);
-    return /* @__PURE__ */ l(b, {
-        space: t ? 24 : 40,
+}, K = (r, o)=>{
+    const t = L(o);
+    return /* @__PURE__ */ l(u, {
+        space: {
+            desktop: 40,
+            mobile: 24
+        },
         children: [
             r,
-            c && /* @__PURE__ */ e(ge, _object_spread({}, o))
+            t && /* @__PURE__ */ e(ue, _object_spread({}, o))
         ]
     });
-}, Z = (param)=>{
-    let { isInverse: r, inlineFeedbackBody: o, imageFit: t, imageUrl: c, dataAttributes: n } = param;
-    return /* @__PURE__ */ l(Se, {
-        className: Be,
+}, j = (param)=>{
+    let { isInverse: r, body: o, imageFit: t, imageUrl: c, dataAttributes: n } = param;
+    return /* @__PURE__ */ e(le, {
+        borderRadius: a.borderRadii.legacyDisplay,
+        desktopOnly: !0,
         isInverse: r,
         dataAttributes: n,
-        children: [
-            /* @__PURE__ */ e("div", {
-                className: Ne,
-                children: /* @__PURE__ */ e(y, {
-                    padding: 64,
-                    children: o
+        children: /* @__PURE__ */ l("div", {
+            className: Fe,
+            children: [
+                /* @__PURE__ */ e("div", {
+                    className: ve,
+                    children: /* @__PURE__ */ e(b, {
+                        padding: {
+                            desktop: 64,
+                            mobile: 0
+                        },
+                        paddingTop: 0,
+                        children: o
+                    })
+                }),
+                c && /* @__PURE__ */ e("div", {
+                    className: xe,
+                    style: {
+                        backgroundImage: `url(${c})`,
+                        backgroundPosition: t === "fit" ? "bottom right" : "center right",
+                        backgroundRepeat: "no-repeat",
+                        backgroundSize: t === "fit" ? "contain" : "cover",
+                        flex: 1,
+                        maxWidth: 600
+                    }
                 })
-            }),
-            c && /* @__PURE__ */ e("div", {
-                style: {
-                    backgroundImage: `url(${c})`,
-                    backgroundPosition: t === "fit" ? "bottom right" : "center right",
-                    backgroundRepeat: "no-repeat",
-                    backgroundSize: t === "fit" ? "contain" : "cover",
-                    flex: 1,
-                    maxWidth: 600
-                }
-            })
-        ]
+            ]
+        })
     });
-}, V = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: s, link: a, hapticFeedback: m, icon: u, animateText: f = !1, isInverse: i = !1, unstable_inlineInDesktop: h, imageUrl: g, imageFit: v, dataAttributes: C } = param;
-    J(m);
-    const { platformOverrides: F, isDarkMode: p, skinName: z } = N(), ee = se(), { isTabletOrSmaller: I } = x(), [oe, re] = S.useState(typeof self < "u"), [w, te] = S.useState(0), T = oe ? "100vh" : `${ee - w}px`, D = U({
+}, x = (param)=>{
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, hapticFeedback: m, icon: f, animateText: k = !1, isInverse: s = !1, unstable_inlineInDesktop: h, imageUrl: I, imageFit: g, dataAttributes: S } = param;
+    W(m);
+    const { platformOverrides: M, isDarkMode: N, skinName: B } = v(), G = Q(), { isTabletOrSmaller: P } = H(), [U, X] = F.useState(typeof self < "u"), [y, J] = F.useState(0), T = U ? "100vh" : `${G - y}px`, A = L({
         primaryButton: n,
-        secondaryButton: s,
-        link: a
-    }), ce = Q();
-    q(()=>{
-        re(!1);
+        secondaryButton: i,
+        link: d
+    });
+    Y(()=>{
+        X(!1);
     }, []);
-    const O = X({
-        icon: u,
+    const z = q({
+        icon: f,
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, f && P(F), ce), H = Y(O, {
+    }, k && R(M));
+    return !P && h ? K(z, {
         primaryButton: n,
-        secondaryButton: s,
-        link: a
-    }, I);
-    if (!I && h) return H;
-    const ne = /* @__PURE__ */ e("div", {
-        className: xe,
-        children: /* @__PURE__ */ e(B, {
-            children: /* @__PURE__ */ e("div", {
-                className: M,
-                children: O
-            })
-        })
-    });
-    return I ? /* @__PURE__ */ l(ae, {
-        isInverse: i,
+        secondaryButton: i,
+        link: d
+    }) : /* @__PURE__ */ l("div", {
+        style: {
+            position: "relative"
+        },
         children: [
-            i && /* @__PURE__ */ e(L, {}),
-            /* @__PURE__ */ e("div", {
-                style: {
-                    position: "relative"
-                },
-                children: /* @__PURE__ */ e(de, {
-                    isFooterVisible: D,
-                    button: n,
-                    secondaryButton: s,
-                    link: a,
-                    footerBgColor: i && !p ? d.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: i && !p ? d.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: te,
-                    children: ne
+            s && /* @__PURE__ */ e(oe, {}),
+            /* @__PURE__ */ e(me, {
+                children: /* @__PURE__ */ e(b, {
+                    paddingTop: {
+                        desktop: 64,
+                        mobile: 0
+                    },
+                    children: j({
+                        isInverse: s,
+                        body: /* @__PURE__ */ e(ee, {
+                            isFooterVisible: A,
+                            button: n,
+                            secondaryButton: i,
+                            link: d,
+                            footerBgColor: s && !N ? a.colors.backgroundFeedbackBottom : void 0,
+                            containerBgColor: s && !N ? a.colors.backgroundFeedbackBottom : void 0,
+                            onChangeFooterHeight: J,
+                            children: /* @__PURE__ */ e("div", {
+                                className: pe,
+                                children: /* @__PURE__ */ e("div", {
+                                    className: be,
+                                    children: z
+                                })
+                            })
+                        }),
+                        imageFit: g,
+                        imageUrl: I,
+                        dataAttributes: S
+                    })
                 })
             }),
-            z === E && /* @__PURE__ */ e("div", {
+            B === C && /* @__PURE__ */ e("div", {
                 style: {
                     position: "absolute",
-                    bottom: w,
+                    bottom: y,
                     top: 0,
                     left: 0,
                     right: 0,
                     // This extra height is a workaround to make sure the background div is displayed *under* the fixed footer.
                     // Otherwise in some devices (Galaxy S20+) the background and the fixed footer are rendered with some distance between them
-                    height: D ? `calc(${T} + 1px)` : `calc(${T})`,
-                    background: i ? d.colors.backgroundBrand : d.colors.background
+                    height: A ? `calc(${T} + 1px)` : `calc(${T})`,
+                    background: s ? a.colors.backgroundBrand : a.colors.background
                 }
             }),
-            z !== E && /* @__PURE__ */ e(ye, {})
-        ]
-    }) : /* @__PURE__ */ e(B, {
-        children: /* @__PURE__ */ e(y, {
-            paddingTop: 64,
-            children: Z({
-                isInverse: i,
-                inlineFeedbackBody: H,
-                imageFit: v,
-                imageUrl: g,
-                dataAttributes: C
+            B !== C && /* @__PURE__ */ e(Ie, {
+                isInverse: s
             })
-        })
+        ]
     });
-}, Qe = (_param)=>{
+}, Ge = (_param)=>{
     var { dataAttributes: r } = _param, o = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: t } = x(), { skinName: c } = N();
-    return /* @__PURE__ */ e(V, _object_spread_props(_object_spread({}, o), {
+    const { isTabletOrSmaller: t } = H(), { skinName: c } = v();
+    return /* @__PURE__ */ e(x, _object_spread_props(_object_spread({}, o), {
         isInverse: !o.unstable_inlineInDesktop || t,
         hapticFeedback: "success",
-        icon: c === W ? /* @__PURE__ */ e(j, {
+        icon: c === $ ? /* @__PURE__ */ e(_, {
             size: "100%"
-        }) : c === K ? /* @__PURE__ */ e(G, {
+        }) : c === w ? /* @__PURE__ */ e(D, {
             size: "100%"
-        }) : /* @__PURE__ */ e(R, {
+        }) : /* @__PURE__ */ e(E, {
             size: "100%"
         }),
         animateText: !0,
@@ -304,39 +309,39 @@ const P = (r)=>!be(r), U = (param)=>{
             "component-name": "SuccessFeedbackScreen"
         }, r)
     }));
-}, Xe = (_param)=>{
+}, Pe = (_param)=>{
     var { children: r, errorReference: o, dataAttributes: t } = _param, c = _object_without_properties(_param, [
         "children",
         "errorReference",
         "dataAttributes"
     ]);
-    return /* @__PURE__ */ e(V, _object_spread_props(_object_spread({}, c), {
+    return /* @__PURE__ */ e(x, _object_spread_props(_object_spread({}, c), {
         hapticFeedback: "error",
-        icon: /* @__PURE__ */ e(le, {
+        icon: /* @__PURE__ */ e(re, {
             size: "100%"
         }),
         animateText: !0,
         dataAttributes: _object_spread({
             "component-name": "ErrorFeedbackScreen"
         }, t),
-        extra: /* @__PURE__ */ l(b, {
+        extra: /* @__PURE__ */ l(u, {
             space: 16,
             children: [
                 r,
-                o && /* @__PURE__ */ e(fe, {
-                    color: d.colors.textSecondary,
+                o && /* @__PURE__ */ e(se, {
+                    color: a.colors.textSecondary,
                     regular: !0,
                     children: o
                 })
             ]
         })
     }));
-}, Ye = (_param)=>{
-    var { dataAttributes: r, Icon: o = me } = _param, t = _object_without_properties(_param, [
+}, Ue = (_param)=>{
+    var { dataAttributes: r, Icon: o = te } = _param, t = _object_without_properties(_param, [
         "dataAttributes",
         "Icon"
     ]);
-    return /* @__PURE__ */ e(V, _object_spread({
+    return /* @__PURE__ */ e(x, _object_spread({
         dataAttributes: _object_spread({
             "component-name": "InfoFeedbackScreen"
         }, r),
@@ -344,48 +349,50 @@ const P = (r)=>!be(r), U = (param)=>{
             size: "100%"
         })
     }, t));
-}, Ze = (param)=>{
-    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: s, link: a, imageUrl: m, imageFit: u, dataAttributes: f } = param;
-    J("success");
-    const { isTabletOrSmaller: i } = x(), { skinName: h, platformOverrides: g } = N(), v = Q(), F = X({
-        icon: h === W ? /* @__PURE__ */ e(j, {
+}, Xe = (param)=>{
+    let { title: r, description: o, children: t, extra: c, primaryButton: n, secondaryButton: i, link: d, imageUrl: m, imageFit: f, dataAttributes: k } = param;
+    W("success");
+    const { skinName: s, platformOverrides: h } = v(), g = q({
+        icon: s === $ ? /* @__PURE__ */ e(_, {
             size: "100%"
-        }) : h === K ? /* @__PURE__ */ e(G, {
+        }) : s === w ? /* @__PURE__ */ e(D, {
             size: "100%"
-        }) : /* @__PURE__ */ e(R, {
+        }) : /* @__PURE__ */ e(E, {
             size: "100%"
         }),
         title: r,
         description: o,
         extra: c !== null && c !== void 0 ? c : t
-    }, P(g), v), p = Y(F, {
+    }, R(h)), S = K(g, {
         primaryButton: n,
-        secondaryButton: s,
-        link: a
-    }, i);
-    return i ? /* @__PURE__ */ l(B, {
+        secondaryButton: i,
+        link: d
+    });
+    return j({
         isInverse: !0,
-        children: [
-            /* @__PURE__ */ e(L, {}),
-            /* @__PURE__ */ e(y, {
-                paddingBottom: 32,
-                dataAttributes: _object_spread({
-                    "component-name": "SuccessFeedback"
-                }, f),
-                children: /* @__PURE__ */ e("div", {
-                    className: M,
-                    children: p
+        body: /* @__PURE__ */ e("div", {
+            className: fe,
+            children: /* @__PURE__ */ e(b, {
+                paddingX: {
+                    mobile: 16,
+                    tablet: 24,
+                    desktop: 0
+                },
+                children: /* @__PURE__ */ e(b, {
+                    paddingBottom: {
+                        desktop: 0,
+                        mobile: 48
+                    },
+                    paddingTop: 64,
+                    children: S
                 })
             })
-        ]
-    }) : Z({
-        isInverse: !0,
-        inlineFeedbackBody: p,
-        imageFit: u,
+        }),
+        imageFit: f,
         imageUrl: m,
         dataAttributes: _object_spread({
             "component-name": "SuccessFeedback"
-        }, f)
+        }, k)
     });
 };
-export { Xe as ErrorFeedbackScreen, V as FeedbackScreen, Ye as InfoFeedbackScreen, Ze as SuccessFeedback, Qe as SuccessFeedbackScreen };
+export { Pe as ErrorFeedbackScreen, x as FeedbackScreen, Ue as InfoFeedbackScreen, Xe as SuccessFeedback, Ge as SuccessFeedbackScreen };

package/dist-es/fixed-footer-layout.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./fixed-footer-layout.css.ts.vanilla.css-mistica.js";
-var v = "p5j8j58", a = "p5j8j56 _1y2v1nf37", j = "p5j8j54", t = "p5j8j53 _1y2v1nfh5 _1y2v1nf36", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf37", j = "p5j8j54", t = "p5j8j53 _1y2v1nfh5", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
 }, p = "_1y2v1nfgh";

package/dist-es/fixed-footer-layout.js

@@ -53,33 +53,34 @@ function _object_spread_props(target, source) {
 }
 import { jsxs as L, Fragment as O, jsx as c } from "react/jsx-runtime";
 import * as l from "react";
-import W from "classnames";
-import { debounce as $ } from "./utils/helpers.js";
-import { isRunningAcceptanceTest as k } from "./utils/platform.js";
+import $ from "classnames";
+import { debounce as k } from "./utils/helpers.js";
+import { isRunningAcceptanceTest as W } from "./utils/platform.js";
 import { useScreenSize as z, useTheme as N, useElementDimensions as P, useIsWithinIFrame as j, useWindowHeight as B, useScreenHeight as _, useIsomorphicLayoutEffect as H } from "./hooks.js";
 import { getScrollableParentElement as V, addPassiveEventListener as v, removePassiveEventListener as h, hasScroll as q, getScrollDistanceToBottom as G } from "./utils/dom.js";
-import { container as J, vars as E, footer as K, withoutFooter as M, elevated as Q, fixedFooter as U } from "./fixed-footer-layout.css-mistica.js";
-import { applyCssVars as X, safeAreaInsetBottom as x } from "./utils/css.js";
-const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
+import { vars as J } from "./skins/skin-contract.css-mistica.js";
+import { container as K, vars as E, footer as M, withoutFooter as Q, elevated as U, fixedFooter as X } from "./fixed-footer-layout.css-mistica.js";
+import { applyCssVars as Y, safeAreaInsetBottom as x } from "./utils/css.js";
+const Z = 2, C = (e)=>e === document.documentElement ? window : e, ee = (e)=>{
     const n = setTimeout(e, 0);
     return {
         cancel: ()=>clearTimeout(n)
     };
-}, ee = (param)=>{
-    let { isFooterVisible: e = !0, footer: n, footerHeight: S = "auto", footerBgColor: T, containerBgColor: m, children: y, onChangeFooterHeight: o } = param;
-    const [g, w] = l.useState(!1), d = l.useRef(null), { isTabletOrSmaller: F } = z(), { platformOverrides: u } = N(), { height: s, ref: I } = P(), b = j(), f = B(), A = _(), i = f - s > (b ? f : A) / Y;
+}, te = (param)=>{
+    let { isFooterVisible: e = !0, footer: n, footerHeight: S = "auto", footerBgColor: T = J.colors.background, containerBgColor: m, children: y, onChangeFooterHeight: o } = param;
+    const [g, w] = l.useState(!1), d = l.useRef(null), { isTabletOrSmaller: F } = z(), { platformOverrides: u } = N(), { height: s, ref: b } = P(), I = j(), f = B(), A = _(), i = f - s > (I ? f : A) / Z;
     H(()=>{
         o == null || o(s);
     }, [
         o,
         s
     ]), l.useEffect(()=>{
-        const a = V(d.current), R = ()=>k(u) || !i ? !1 : q(a) ? G(a) > 1 : !1, t = $(()=>{
+        const a = V(d.current), R = ()=>W(u) || !i ? !1 : q(a) ? G(a) > 1 : !1, t = k(()=>{
             w(R());
         }, 50, {
             leading: !0,
             maxWait: 200
-        }), D = C(t), r = Z(a);
+        }), D = ee(t), r = C(a);
         return v(r, "resize", t), v(r, "scroll", t), ()=>{
             t.cancel(), h(r, "scroll", t), h(r, "resize", t), D.cancel();
         };
@@ -92,8 +93,8 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
         children: [
             /* @__PURE__ */ c("div", {
                 ref: d,
-                className: J,
-                style: X(_object_spread_props(_object_spread({}, m && {
+                className: K,
+                style: Y(_object_spread_props(_object_spread({}, m && {
                     [E.backgroundColor]: m
                 }), {
                     [E.footerHeight]: p ? `calc(${x} + ${s}px)` : "0px"
@@ -101,10 +102,10 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
                 children: y
             }),
             /* @__PURE__ */ c("div", {
-                className: W(K, {
-                    [M]: !e,
-                    [Q]: g,
-                    [U]: p
+                className: $(M, {
+                    [Q]: !e,
+                    [U]: g,
+                    [X]: p
                 }),
                 style: {
                     background: F ? T : void 0
@@ -112,7 +113,7 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
                 "data-testid": `fixed-footer${e ? "-visible" : "-hidden"}`,
                 "data-position-fixed": "bottom",
                 children: e && /* @__PURE__ */ c("aside", {
-                    ref: I,
+                    ref: b,
                     "data-component-name": "FixedFooter",
                     style: {
                         height: S,
@@ -123,5 +124,5 @@ const Y = 2, Z = (e)=>e === document.documentElement ? window : e, C = (e)=>{
             })
         ]
     });
-}, le = ee;
-export { le as default };
+}, de = te;
+export { de as default };