@telefonica/mistica 14.14.0 → 14.16.0

package/dist-es/cvv-field.js

@@ -77,56 +77,68 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as c, Fragment as A } from "react/jsx-runtime";
-import { useTheme as g } from "./hooks.js";
-import B from "./icons/icon-cvv-visa-mc.js";
-import w from "./icons/icon-cvv-amex.js";
-import b from "./tooltip.js";
-import $ from "./icon-button.js";
-import k from "./icons/icon-info-cvv.js";
-import { useForm as q, useFieldProps as D } from "./form-context.js";
-import { TextFieldBaseAutosuggest as G } from "./text-field-base.js";
-import { IntegerInput as H } from "./integer-field.js";
-import { tooltipContainer as C, cvvText as h } from "./cvv-field.css-mistica.js";
-const J = (param)=>{
-    let { acceptedCards: o  } = param;
-    const { texts: e  } = g();
-    return /* @__PURE__ */ c(A, {
-        children: [
-            /* @__PURE__ */ c("div", {
-                className: C,
+import { jsx as r, Fragment as A, jsxs as c } from "react/jsx-runtime";
+import { useTheme as h } from "./hooks.js";
+import w from "./icons/icon-cvv-visa-mc.js";
+import b from "./icons/icon-cvv-amex.js";
+import k from "./tooltip.js";
+import D from "./icon-button.js";
+import N from "./generated/mistica-icons/icon-information-regular.js";
+import { useForm as R, useFieldProps as S } from "./form-context.js";
+import { TextFieldBaseAutosuggest as $ } from "./text-field-base.js";
+import { IntegerInput as q } from "./integer-field.js";
+import C from "./inline.js";
+import G from "./stack.js";
+import H from "./box.js";
+import J from "./divider.js";
+import g from "./text.js";
+import { vars as K } from "./skins/skin-contract.css-mistica.js";
+const O = (param)=>{
+    let { acceptedCards: t  } = param;
+    const { texts: e  } = h();
+    return /* @__PURE__ */ r(A, {
+        children: /* @__PURE__ */ r(H, {
+            padding: 8,
+            children: /* @__PURE__ */ c(G, {
+                space: 8,
                 children: [
-                    /* @__PURE__ */ r(B, {
-                        size: 48,
-                        role: "img"
-                    }),
-                    /* @__PURE__ */ r("p", {
-                        className: h,
-                        children: e.formCreditCardCvvTooltipVisaMc
-                    })
-                ]
-            }),
-            (o == null ? void 0 : o.americanExpress) && /* @__PURE__ */ c("div", {
-                className: C,
-                children: [
-                    /* @__PURE__ */ r(w, {
-                        size: 48,
-                        role: "img"
+                    /* @__PURE__ */ c(C, {
+                        space: 16,
+                        alignItems: "center",
+                        children: [
+                            /* @__PURE__ */ r(w, {
+                                size: 48,
+                                role: "img"
+                            }),
+                            /* @__PURE__ */ r(g, {
+                                children: e.formCreditCardCvvTooltipVisaMc
+                            })
+                        ]
                     }),
-                    /* @__PURE__ */ r("p", {
-                        className: h,
-                        children: e.formCreditCardCvvTooltipAmex
+                    /* @__PURE__ */ r(J, {}),
+                    (t == null ? void 0 : t.americanExpress) && /* @__PURE__ */ c(C, {
+                        space: 16,
+                        alignItems: "center",
+                        children: [
+                            /* @__PURE__ */ r(b, {
+                                size: 48,
+                                role: "img"
+                            }),
+                            /* @__PURE__ */ r(g, {
+                                children: e.formCreditCardCvvTooltipAmex
+                            })
+                        ]
                     })
                 ]
             })
-        ]
+        })
     });
-}, K = (_param)=>{
-    var { disabled: o , error: e , helperText: x , name: s , optional: f , validate: n , onChange: I , onChangeValue: T , onBlur: F , acceptedCards: y = {
+}, Q = (_param)=>{
+    var { disabled: t , error: e , helperText: I , name: n , optional: f , validate: s , onChange: x , onChangeValue: T , onBlur: F , acceptedCards: y = {
         americanExpress: !0,
         visa: !0,
         masterCard: !0
-    } , maxLength: m = 4 , value: E , autoComplete: N = "cc-csc" , defaultValue: V  } = _param, j = _object_without_properties(_param, [
+    } , maxLength: m = 4 , value: E , autoComplete: M = "cc-csc" , defaultValue: V  } = _param, j = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -142,36 +154,36 @@ const J = (param)=>{
         "autoComplete",
         "defaultValue"
     ]);
-    const { texts: l  } = g(), { setFormError: z , jumpToNext: M  } = q(), p = (t, i)=>t ? t.length !== m ? l.formCreditCardCvvError : n == null ? void 0 : n(t, i) : f ? "" : l.formFieldErrorIsMandatory, a = (t)=>t, u = D({
-        name: s,
+    const { texts: l  } = h(), { setFormError: z , jumpToNext: B  } = R(), p = (o, i)=>o ? o.length !== m ? l.formCreditCardCvvError : s == null ? void 0 : s(o, i) : f ? "" : l.formFieldErrorIsMandatory, a = (o)=>o, u = S({
+        name: n,
         value: E,
         defaultValue: V,
         processValue: a,
-        helperText: x,
+        helperText: I,
         optional: f,
         error: e,
-        disabled: o,
+        disabled: t,
         onBlur: F,
         validate: p,
-        onChange: I,
+        onChange: x,
         onChangeValue: T
     });
-    return /* @__PURE__ */ r(G, _object_spread_props(_object_spread({}, j, u), {
+    return /* @__PURE__ */ r($, _object_spread_props(_object_spread({}, j, u), {
         maxLength: m,
-        onChange: (t)=>{
-            u.onChange(t);
-            const i = t.currentTarget.value, d = a(i);
+        onChange: (o)=>{
+            u.onChange(o);
+            const i = o.currentTarget.value, d = a(i);
             if (d.length === m) {
                 const v = p(d, i);
                 v ? z({
-                    name: s,
+                    name: n,
                     error: v
-                }) : M(s);
+                }) : B(n);
             }
         },
-        endIcon: /* @__PURE__ */ r(b, {
+        endIcon: /* @__PURE__ */ r(k, {
             position: "top",
-            children: /* @__PURE__ */ r(J, {
+            children: /* @__PURE__ */ r(O, {
                 acceptedCards: y
             }),
             targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
@@ -180,7 +192,7 @@ const J = (param)=>{
                     width: 16,
                     height: 16
                 },
-                children: /* @__PURE__ */ r($, {
+                children: /* @__PURE__ */ r(D, {
                     size: 40,
                     style: {
                         display: "flex",
@@ -191,14 +203,15 @@ const J = (param)=>{
                         // (40 - 16) / 2
                         top: -12
                     },
-                    children: /* @__PURE__ */ r(k, {
-                        size: 20
+                    children: /* @__PURE__ */ r(N, {
+                        size: 16,
+                        color: K.colors.neutralMedium
                     })
                 })
             })
         }),
-        autoComplete: N,
-        inputComponent: H
+        autoComplete: M,
+        inputComponent: q
     }));
-}, P = K;
-export { P as default };
+}, lr = Q;
+export { lr as default };

package/dist-es/date-time-picker.js

@@ -77,65 +77,84 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as R, Fragment as M, jsx as r } from "react/jsx-runtime";
+import { jsxs as P, Fragment as R, jsx as r } from "react/jsx-runtime";
 import * as d from "react";
 import { TextFieldBaseAutosuggest as H } from "./text-field-base.js";
 import S from "./generated/mistica-icons/icon-calendar-regular.js";
-import I from "react-datetime";
-import B from "./overlay.js";
-import { DEFAULT_WIDTH as E } from "./text-field-components.css-mistica.js";
-import h from "./icon-button.js";
-import { cancelEvent as F, createChangeEvent as L } from "./utils/dom.js";
-import { useTheme as T, useElementDimensions as V } from "./hooks.js";
+import F from "react-datetime";
+import I from "./overlay.js";
+import { DEFAULT_WIDTH as L } from "./text-field-components.css-mistica.js";
+import g from "./icon-button.js";
+import { cancelEvent as T, createChangeEvent as B } from "./utils/dom.js";
+import { useTheme as E, useElementDimensions as V } from "./hooks.js";
 import Y from "./generated/mistica-icons/icon-close-regular.js";
 import { reactDatePicker as j } from "./date-time-picker.css-mistica.js";
 import { vars as z } from "./skins/skin-contract.css-mistica.js";
-const g = navigator.language.toLocaleLowerCase().split("-")[0];
-import(/* webpackChunkName: "moment-locale" */ `moment/locale/${g}`).finally(()=>{});
-const Z = (_param)=>{
-    var { withTime: s , mode: l , isValidDate: y , optional: u  } = _param, t = _object_without_properties(_param, [
+import "moment/locale/es";
+import "moment/locale/de";
+import "moment/locale/pt-br";
+import "moment/locale/en-gb";
+const A = {
+    es: "es",
+    // spanish
+    ca: "es",
+    // catalan
+    eu: "es",
+    // euskera
+    gl: "es",
+    // gallego
+    de: "de",
+    // german
+    pt: "pt-br",
+    // portuguese
+    en: "en-gb"
+}, O = (a)=>{
+    const i = a.toLocaleLowerCase().split("-")[0];
+    return A[i] || "en-gb";
+}, ie = (_param)=>{
+    var { withTime: a , mode: i , isValidDate: h , optional: u  } = _param, t = _object_without_properties(_param, [
         "withTime",
         "mode",
         "isValidDate",
         "optional"
     ]);
-    const [m, x] = d.useState(!1), { texts: b  } = T(), n = d.useRef(null), { height: v , ref: k  } = V(), i = (e)=>{
-        t.disabled || x(e);
-    }, w = ()=>{
-        var p;
-        const { top: e = 0 , bottom: o = 0 , left: a = 0  } = ((p = n.current) == null ? void 0 : p.getBoundingClientRect()) || {}, P = 260 + o < window.innerHeight;
+    const [m, y] = d.useState(!1), { texts: x , i18n: { locale: b  }  } = E(), n = d.useRef(null), { height: k , ref: v  } = V(), l = (e)=>{
+        t.disabled || y(e);
+    }, C = ()=>{
+        var f;
+        const { top: e = 0 , bottom: o = 0 , left: c = 0  } = ((f = n.current) == null ? void 0 : f.getBoundingClientRect()) || {}, M = 260 + o < window.innerHeight;
         return {
-            width: E,
-            top: P ? o : e - v,
-            left: a,
+            width: L,
+            top: M ? o : e - k,
+            left: c,
             position: "absolute",
             borderRadius: z.borderRadii.input,
             overflow: "hidden",
             boxShadow: "0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12)"
         };
-    }, c = ()=>{
+    }, s = ()=>{
         var o;
         const e = (o = n.current) == null ? void 0 : o.value;
         return e ? new Date(e) : void 0;
-    }, C = (e)=>s ? e.format("yyyy-MM-DD HH:mm") : l === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), f = (e)=>{
-        var a;
-        const o = typeof e == "string" ? e : C(e);
-        n.current && (n.current.focus(), (a = t.onChange) == null || a.call(t, L(n.current, o)));
-    }, D = ()=>c() && u ? /* @__PURE__ */ r(h, {
-            "aria-label": b.clearButton,
+    }, D = (e)=>a ? e.format("yyyy-MM-DD HH:mm") : i === "year-month" ? e.format("yyyy-MM") : e.format("yyyy-MM-DD"), p = (e)=>{
+        var c;
+        const o = typeof e == "string" ? e : D(e);
+        n.current && (n.current.focus(), (c = t.onChange) == null || c.call(t, B(n.current, o)));
+    }, w = ()=>s() && u ? /* @__PURE__ */ r(g, {
+            "aria-label": x.clearButton,
             size: 32,
             onPress: ()=>{
-                f("");
+                p("");
             },
             children: /* @__PURE__ */ r(Y, {})
-        }) : /* @__PURE__ */ r(h, {
+        }) : /* @__PURE__ */ r(g, {
             disabled: t.disabled,
             "aria-label": "",
             size: 32,
-            onPress: ()=>i(!m),
+            onPress: ()=>l(!m),
             children: /* @__PURE__ */ r(S, {})
         });
-    return /* @__PURE__ */ R(M, {
+    return /* @__PURE__ */ P(R, {
         children: [
             /* @__PURE__ */ r(H, _object_spread_props(_object_spread({}, t), {
                 style: {
@@ -144,40 +163,40 @@ const Z = (_param)=>{
                 required: !u,
                 type: "text",
                 autoComplete: "off",
-                shrinkLabel: !!c(),
-                endIcon: D(),
+                shrinkLabel: !!s(),
+                endIcon: w(),
                 inputRef: (e)=>{
                     var o;
                     (o = t == null ? void 0 : t.inputRef) == null || o.call(t, e), n.current = e;
                 },
                 readOnly: !0,
-                onKeyDown: ()=>i(!0),
+                onKeyDown: ()=>l(!0),
                 onClick: ()=>{
-                    i(!0);
+                    l(!0);
                 }
             })),
-            m && /* @__PURE__ */ r(B, {
+            m && /* @__PURE__ */ r(I, {
                 onPress: (e)=>{
-                    F(e), i(!1);
+                    T(e), l(!1);
                 },
                 disableScroll: !0,
                 children: /* @__PURE__ */ r("div", {
-                    ref: k,
-                    style: w(),
+                    ref: v,
+                    style: C(),
                     className: j,
-                    children: /* @__PURE__ */ r(I, {
-                        initialViewMode: l === "year-month" ? "months" : void 0,
-                        dateFormat: l === "year-month" ? "YYYY-MM" : void 0,
-                        timeFormat: s ? "HH:mm" : !1,
-                        initialValue: c(),
-                        locale: g,
+                    children: /* @__PURE__ */ r(F, {
+                        initialViewMode: i === "year-month" ? "months" : void 0,
+                        dateFormat: i === "year-month" ? "YYYY-MM" : void 0,
+                        timeFormat: a ? "HH:mm" : !1,
+                        initialValue: s(),
+                        locale: O(b),
                         input: !1,
-                        onChange: f,
-                        isValidDate: y
+                        onChange: p,
+                        isValidDate: h
                     })
                 })
             })
         ]
     });
 };
-export { Z as default };
+export { ie as default };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./dialog.css.ts.vanilla.css-mistica.js";
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6x", a = "_3dl29lj _1y2v1nf6q _1y2v1nf9l", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6w _1y2v1nf7a _1y2v1nf7o _1y2v1nf82 _1y2v1nf60 _1y2v1nfam _1y2v1nfbe", o = "_3dl29la _1y2v1nf30 _1y2v1nfab", r = "_3dl29l5 _1y2v1nf61 _1y2v1nf64 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6a _1y2v1nfam _1y2v1nfbe _1y2v1nfbs _1y2v1nfb0 _1y2v1nf3b", t = {
-    dialog: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf7p _1y2v1nf83 _1y2v1nf6z _1y2v1nf7b",
-    default: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf6x _1y2v1nf7b _1y2v1nf7p _1y2v1nf83"
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf6y", a = "_3dl29lj _1y2v1nf6q _1y2v1nf9s", l = "_3dl29lm", d = "_3dl29l8 _1y2v1nf6w _1y2v1nf7b _1y2v1nf7q _1y2v1nf85 _1y2v1nf60 _1y2v1nfau _1y2v1nfbo", o = "_3dl29la _1y2v1nf30 _1y2v1nfaj", r = "_3dl29l5 _1y2v1nf61 _1y2v1nf64 _1y2v1nf6d _1y2v1nf6j _1y2v1nf6a _1y2v1nfau _1y2v1nfbo _1y2v1nfc3 _1y2v1nfb9 _1y2v1nf3b", t = {
+    dialog: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf7s _1y2v1nf87 _1y2v1nf70 _1y2v1nf7d",
+    default: "_3dl29ld _1y2v1nf64 _1y2v1nf6a _1y2v1nf6g _1y2v1nf6y _1y2v1nf7d _1y2v1nf7s _1y2v1nf87"
 }, e = "_3dl29l3 _1y2v1nf5z";
 export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, a as dialogContent, l as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, e as wrapper };

package/dist-es/double-field.css-mistica.js

@@ -2,7 +2,7 @@ import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./text-field-components.css.ts.vanilla.css-mistica.js";
 import "./double-field.css.ts.vanilla.css-mistica.js";
 var n = {
-    default: "skrulh1 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8b",
-    fullWidth: "skrulh2 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8b"
+    default: "skrulh1 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8f",
+    fullWidth: "skrulh2 _1y2v1nf64 _1y2v1nf69 _1y2v1nf8f"
 };
 export { n as variants };

package/dist-es/empty-state-card.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./empty-state-card.css.ts.vanilla.css-mistica.js";
-var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf8m _1y2v1nf91", v = "_1azor6p2 _1y2v1nf66 _1y2v1nf93";
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf8r _1y2v1nf97", v = "_1azor6p2 _1y2v1nf66 _1y2v1nf99";
 export { n as container, o as iconContainer, v as image };

package/dist-es/empty-state.css-mistica.js

@@ -3,7 +3,7 @@ import "./empty-state.css.ts.vanilla.css-mistica.js";
 var n = "_13fzrua2 _1y2v1nf64 _1y2v1nf5y", v = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf8o _1y2v1nf93", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8r", o = "_13fzrua5", u = "_13fzruab _1y2v1nf66", t = {
+}, e = "_13fzrua9 _1y2v1nf8t _1y2v1nf99", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf8w", o = "_13fzrua5", t = "_13fzruab _1y2v1nf66", u = {
     backgroundColor: "var(--_13fzrua0)"
 };
-export { n as container, v as contentVariants, e as iconContainer, f as inverseBorder, _ as largeImage, o as largeImageContainer, u as smallImage, t as vars };
+export { n as container, v as contentVariants, e as iconContainer, f as inverseBorder, _ as largeImage, o as largeImageContainer, t as smallImage, u as vars };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./feedback.css.ts.vanilla.css-mistica.js";
-var r = "gx6h6a3 _1y2v1nf64 _1y2v1nf8r _1y2v1nf8b", n = "_1y2v1nfac _1y2v1nf64 _1y2v1nf6g", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
-export { r as container, n as desktopContainer, t as desktopContent, v as feedbackData, f as feedbackDataAppear, o as feedbackDataAppearActive, p as innerContainer };
+var n = "gx6h6a3 _1y2v1nf64 _1y2v1nf8w _1y2v1nf8f", r = "_1y2v1nfak _1y2v1nf64 _1y2v1nf6g", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+export { n as container, r as desktopContainer, t as desktopContent, v as feedbackData, f as feedbackDataAppear, o as feedbackDataAppearActive, p as innerContainer };

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 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nf8b _1y2v1nf30", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf31", j = "p5j8j54", t = "p5j8j53 _1y2v1nf8f _1y2v1nf30", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
 }, p = "_1y2v1nf63";

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

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

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

@@ -1,7 +1,7 @@
 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 v = "_16rbpto6 _1y2v1nf64 _1y2v1nf6q _1y2v1nf6k", a = "_16rbpto2 _1y2v1nf64", n = "_1y2v1nf6j _1y2v1nf8r", _ = "_1y2v1nf6a", i = "_16rbpto7", p = {
+var v = "_16rbpto6 _1y2v1nf64 _1y2v1nf6q _1y2v1nf6k", a = "_16rbpto2 _1y2v1nf64", n = "_1y2v1nf6j _1y2v1nf8w", _ = "_1y2v1nf6a", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };
 export { v as actions, a as container, n as containerDesktop, _ as containerMobile, i as layout, p as vars };

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 y = "wrb8722 _1y2v1nf64 _1y2v1nf69 _1y2v1nf6g _1y2v1nf6m", f = "wrb8725 _1y2v1nf64", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6x _1y2v1nf7b _1y2v1nf7o",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6x _1y2v1nf7b _1y2v1nf7o"
-}, r = "_1y2v1nf6r _1y2v1nf75 _1y2v1nf7j _1y2v1nf7x _1y2v1nf64 _1y2v1nf6m _1y2v1nfa2 _1y2v1nf8b _1y2v1nf5y";
+    withImage: "wrb8728 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6y _1y2v1nf7d _1y2v1nf7q",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf64 _1y2v1nf6a _1y2v1nf6i _1y2v1nf6y _1y2v1nf7d _1y2v1nf7q"
+}, r = "_1y2v1nf6r _1y2v1nf76 _1y2v1nf7l _1y2v1nf80 _1y2v1nf64 _1y2v1nf6m _1y2v1nfaa _1y2v1nf8f _1y2v1nf5y";
 export { y as container, f as imageContent, _ as textContainerVariant, r as touchableContainer };