@telefonica/mistica 12.11.0 → 12.12.0

package/dist/feedback.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     ErrorFeedbackScreen: function() {
-        return Ue;
+        return Me;
     },
     FeedbackScreen: function() {
-        return T;
+        return x;
     },
     InfoFeedbackScreen: function() {
-        return Je;
+        return Pe;
     },
     SuccessFeedback: function() {
-        return Qe;
+        return Ue;
     },
     SuccessFeedbackScreen: function() {
-        return Pe;
+        return Ge;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -46,7 +46,6 @@ var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
 var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _feedbackCssMisticaJs = require("./feedback.css-mistica.js");
-var _sprinklesCssMisticaJs = require("./sprinkles.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -221,94 +220,94 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var j = function j(e) {
-    return !(0, _platformJs.isOldChrome)(e) && !(0, _platformJs.isRunningAcceptanceTest)(e);
-}, K = function K(param) {
-    var e = param.primaryButton, o = param.secondaryButton;
-    return !!e || !!o;
-}, xe = function xe() {
-    var ref = (0, _hooksJs.useTheme)(), e = ref.colors, t = "body {background:".concat((0, _themeVariantContextJs.useIsInverseVariant)() ? e.backgroundBrand : e.background, "}");
+var W = function W(o) {
+    return !(0, _platformJs.isOldChrome)(o) && !(0, _platformJs.isRunningAcceptanceTest)(o);
+}, j = function j(param) {
+    var o = param.primaryButton, r = param.secondaryButton;
+    return !!o || !!r;
+}, Be = function Be() {
+    var ref = (0, _hooksJs.useTheme)(), o = ref.colors, t = "body {background:".concat((0, _themeVariantContextJs.useIsInverseVariant)() ? o.backgroundBrand : o.background, "}");
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("style", {
         children: t
     });
-}, D = function D(e) {
-    (0, _webviewBridge.isWebViewBridgeAvailable)() && (0, _webviewBridge.requestVibration)(e).catch(function() {});
-}, G = function G(e) {
+}, D = function D(o) {
+    (0, _webviewBridge.isWebViewBridgeAvailable)() && (0, _webviewBridge.requestVibration)(o).catch(function() {});
+}, K = function K(o) {
     _react.useEffect(function() {
-        var o;
-        return e === "success" && (o = setTimeout(function() {
+        var r;
+        return o === "success" && (r = setTimeout(function() {
             return D("success");
-        }, 700)), e === "error" && (o = setTimeout(function() {
+        }, 700)), o === "error" && (r = setTimeout(function() {
             return D("error");
         }, 1e3)), function() {
-            clearTimeout(o);
+            clearTimeout(r);
         };
     }, [
-        e
+        o
     ]);
-}, M = function M() {
-    var ref = _slicedToArray(_react.useState(!1), 2), e = ref[0], o = ref[1];
+}, G = function G() {
+    var ref = _slicedToArray(_react.useState(!1), 2), o = ref[0], r = ref[1];
     return (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
         var t = window.requestAnimationFrame(function() {
-            o(!0);
+            r(!0);
         });
         return function() {
             return window.cancelAnimationFrame(t);
         };
-    }, []), e;
-}, P = function P(param, c, s) {
-    var e = param.icon, o = param.title, t = param.description, n = param.children;
-    var a = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
+    }, []), o;
+}, M = function M(param, c, s) {
+    var o = param.icon, r = param.title, t = param.description, n = param.children;
+    var i = t && Array.isArray(t) ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
         space: 16,
-        children: t.map(function(m, u) {
+        children: t.map(function(l, d) {
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
-                children: m
-            }, u);
+                children: l
+            }, d);
         })
     }) : t;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         children: [
-            e,
+            o,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 className: (0, _classnames.default)(_feedbackCssMisticaJs.feedbackData, c && _feedbackCssMisticaJs.feedbackDataAppear, c && s && _feedbackCssMisticaJs.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         as: "h1",
-                        children: o
+                        children: r
                     }),
-                    a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
                         color: _skinContractCssMisticaJs.vars.colors.textSecondary,
-                        children: a
+                        children: i
                     }),
                     n
                 ]
             })
         ]
     });
-}, U = function U(e, o) {
-    var t = K(o);
+}, P = function P(o, r) {
+    var t = j(r);
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 24,
         children: [
-            e,
-            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, o))
+            o,
+            t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, _objectSpread({}, r))
         ]
     });
-}, J = function J(param) {
-    var e = param.isInverse, o = param.inlineFeedbackBody, t = param.imageFit, n = param.imageUrl, c = param.dataAttributes;
+}, U = function U(param) {
+    var o = param.isInverse, r = param.inlineFeedbackBody, t = param.imageFit, n = param.imageUrl, c = param.dataAttributes;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxedJs.Boxed, {
         className: _feedbackCssMisticaJs.desktopContainer,
-        isInverse: e,
+        isInverse: o,
         dataAttributes: c,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 className: _feedbackCssMisticaJs.desktopContent,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     padding: 64,
-                    children: o
+                    children: r
                 })
             }),
             n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -323,29 +322,29 @@ var j = function j(e) {
             })
         ]
     });
-}, T = function T(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, a = param.hapticFeedback, m = param.icon, tmp = param.animateText, u = tmp === void 0 ? !1 : tmp, k = param.unstable_inlineInDesktop, g = param.imageUrl, S = param.imageFit, v = param.dataAttributes;
-    G(a);
-    var d = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), I = ref.platformOverrides, p = ref.isDarkMode, y = ref.skinName, Q = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), A = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(_react.useState(0), 2), C = ref3[0], Z = ref3[1], N = X ? "100vh" : "".concat(Q - C, "px"), V = K({
+}, x = function x(param) {
+    var o = param.title, r = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, i = param.hapticFeedback, l = param.icon, tmp = param.animateText, d = tmp === void 0 ? !1 : tmp, k = param.unstable_inlineInDesktop, g = param.imageUrl, S = param.imageFit, F = param.dataAttributes;
+    K(i);
+    var m = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), v = ref.platformOverrides, u = ref.isDarkMode, T = ref.skinName, J = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), y = ref1.isTabletOrSmaller, ref2 = _slicedToArray(_react.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), Q = ref2[0], X = ref2[1], ref3 = _slicedToArray(_react.useState(0), 2), C = ref3[0], Y = ref3[1], N = Q ? "100vh" : "".concat(J - C, "px"), V = j({
         primaryButton: n,
         secondaryButton: c,
         link: s
-    }), ee = M();
+    }), Z = G();
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        Y(!1);
+        X(!1);
     }, []);
-    var w = P({
-        icon: m,
-        title: e,
-        description: o,
+    var w = M({
+        icon: l,
+        title: o,
+        description: r,
         children: t
-    }, u && j(I), ee), H = U(w, {
+    }, d && W(v), Z), H = P(w, {
         primaryButton: n,
         secondaryButton: c,
         link: s
     });
-    if (!A && k) return H;
-    var re = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+    if (!y && k) return H;
+    var ee = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
         className: _feedbackCssMisticaJs.container,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -354,9 +353,9 @@ var j = function j(e) {
             })
         })
     });
-    return A ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
+    return y ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            m && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "relative"
@@ -366,13 +365,13 @@ var j = function j(e) {
                     button: n,
                     secondaryButton: c,
                     link: s,
-                    footerBgColor: d && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    containerBgColor: d && !p ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
-                    onChangeFooterHeight: Z,
-                    children: re
+                    footerBgColor: m && !u ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: m && !u ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    onChangeFooterHeight: Y,
+                    children: ee
                 })
             }),
-            y === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+            T === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "absolute",
                     bottom: C,
@@ -380,93 +379,109 @@ var j = function j(e) {
                     left: 0,
                     right: 0,
                     height: V ? "calc(".concat(N, " + 1px)") : "calc(".concat(N, ")"),
-                    background: d ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
+                    background: m ? _skinContractCssMisticaJs.vars.colors.backgroundBrand : _skinContractCssMisticaJs.vars.colors.background
                 }
             }),
-            y !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(xe, {})
+            T !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Be, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingTop: 64,
-            children: J({
-                isInverse: d,
+            children: U({
+                isInverse: m,
                 inlineFeedbackBody: H,
                 imageFit: S,
                 imageUrl: g,
-                dataAttributes: v
+                dataAttributes: F
             })
         })
     });
-}, Pe = function Pe(e) {
-    var ref = (0, _hooksJs.useScreenSize)(), o = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), t = ref1.skinName;
+}, Ge = function Ge(_param) {
+    var o = _param.dataAttributes, r = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    var ref = (0, _hooksJs.useScreenSize)(), t = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), n = ref1.skinName;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
-        isInverse: !e.unstable_inlineInDesktop || o,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
+        isInverse: !r.unstable_inlineInDesktop || t,
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(x, _objectSpreadProps(_objectSpread({}, r), {
             hapticFeedback: "success",
-            icon: t === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+            icon: n === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
             animateText: !0,
-            imageUrl: e.imageUrl,
-            imageFit: e.imageFit
+            imageUrl: r.imageUrl,
+            imageFit: r.imageFit,
+            dataAttributes: _objectSpread({
+                "component-name": "SuccessFeedbackScreen"
+            }, o)
         }))
     });
-}, Ue = function Ue(_param) {
-    var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
+}, Me = function Me(_param) {
+    var o = _param.children, r = _param.errorReference, t = _param.dataAttributes, n = _objectWithoutProperties(_param, [
         "children",
-        "errorReference"
+        "errorReference",
+        "dataAttributes"
     ]);
-    var ref = (0, _hooksJs.useTheme)(), n = ref.colors;
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(T, _objectSpreadProps(_objectSpread({}, t), {
+    var ref = (0, _hooksJs.useTheme)(), c = ref.colors;
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(x, _objectSpreadProps(_objectSpread({}, n), {
         hapticFeedback: "error",
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconErrorJs.default, {}),
         animateText: !0,
+        dataAttributes: _objectSpread({
+            "component-name": "ErrorFeedbackScreen"
+        }, t),
         children: [
-            e,
-            o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
-                color: n.textSecondary,
+            o,
+            r && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                color: c.textSecondary,
                 regular: !0,
-                children: o
+                children: r
             })
         ]
     }));
-}, Je = function Je(e) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(T, _objectSpreadProps(_objectSpread({}, e), {
+}, Pe = function Pe(_param) /* @__PURE__ */ {
+    var o = _param.dataAttributes, r = _objectWithoutProperties(_param, [
+        "dataAttributes"
+    ]);
+    return (0, _jsxRuntimeJs.jsx)(x, _objectSpread({
+        dataAttributes: _objectSpread({
+            "component-name": "InfoFeedbackScreen"
+        }, o),
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconInfoJs.default, {})
-    }));
-}, Qe = function Qe(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, a = param.imageUrl, m = param.imageFit, u = param.dataAttributes;
-    G("success");
-    var ref = (0, _hooksJs.useScreenSize)(), k = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), g = ref1.skinName, S = ref1.platformOverrides, v = M(), I = P({
+    }, r));
+}, Ue = function Ue(param) {
+    var o = param.title, r = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, s = param.link, i = param.imageUrl, l = param.imageFit, d = param.dataAttributes;
+    K("success");
+    var ref = (0, _hooksJs.useScreenSize)(), k = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), g = ref1.skinName, S = ref1.platformOverrides, F = G(), v = M({
         icon: g === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
-        title: e,
-        description: o,
+        title: o,
+        description: r,
         children: t
-    }, j(S), v), p = U(I, {
+    }, W(S), F), u = P(v, {
         primaryButton: n,
         secondaryButton: c,
         link: s
     });
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
+    return k ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: !0,
-        children: k ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-            className: (0, _sprinklesCssMisticaJs.sprinkles)({
-                background: _skinContractCssMisticaJs.vars.colors.backgroundBrand
-            }),
-            children: [
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-                /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
-                    paddingBottom: 32,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: _feedbackCssMisticaJs.innerContainer,
-                        children: p
-                    })
+        children: [
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                paddingBottom: 32,
+                dataAttributes: _objectSpread({
+                    "component-name": "SuccessFeedback"
+                }, d),
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                    className: _feedbackCssMisticaJs.innerContainer,
+                    children: u
                 })
-            ]
-        }) : J({
-            isInverse: !0,
-            inlineFeedbackBody: p,
-            imageFit: m,
-            imageUrl: a,
-            dataAttributes: u
-        })
+            })
+        ]
+    }) : U({
+        isInverse: !0,
+        inlineFeedbackBody: u,
+        imageFit: l,
+        imageUrl: i,
+        dataAttributes: _objectSpread({
+            "component-name": "SuccessFeedback"
+        }, d)
     });
 };

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

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    container: function() {
+        return v;
+    },
+    elevated: function() {
+        return a;
+    },
+    fixedFooter: function() {
+        return j;
+    },
+    footer: function() {
+        return t;
+    },
+    vars: function() {
+        return e;
+    },
+    withoutFooter: function() {
+        return p;
+    }
+});
+require("./sprinkles.css.ts.vanilla.js");
+require("./fixed-footer-layout.css.ts.vanilla.js");
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2g", j = "p5j8j54", t = "p5j8j53 _1y2v1nf75 _1y2v1nf2f", e = {
+    footerHeight: "var(--p5j8j50)",
+    backgroundColor: "var(--p5j8j51)"
+}, p = "_1y2v1nf4x";

package/dist/fixed-footer-layout.css.d.ts

@@ -0,0 +1,9 @@
+export declare const vars: {
+    footerHeight: import("@vanilla-extract/private").CSSVarFunction;
+    backgroundColor: import("@vanilla-extract/private").CSSVarFunction;
+};
+export declare const footer: string;
+export declare const fixedFooter: string;
+export declare const elevated: string;
+export declare const withoutFooter: string;
+export declare const container: string;

package/dist/fixed-footer-layout.css.js.flow

@@ -0,0 +1,17 @@
+// @flow
+
+declare export var vars: {
+  footerHeight: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  backgroundColor: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};
+declare export var footer: string;
+declare export var fixedFooter: string;
+declare export var elevated: string;
+declare export var withoutFooter: string;
+declare export var container: string;

package/dist/fixed-footer-layout.css.ts.vanilla.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return t;
+    }
+});
+var t = "";

package/dist/fixed-footer-layout.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return tt;
+        return ie;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _debounce = /*#__PURE__*/ _interopRequireDefault(require("lodash/debounce"));
-var _jssJs = require("./jss.js");
 var _platformJs = require("./utils/platform.js");
 var _hooksJs = require("./hooks.js");
 var _domJs = require("./utils/dom.js");
+var _fixedFooterLayoutCssMisticaJs = require("./fixed-footer-layout.css-mistica.js");
+var _dynamic = require("@vanilla-extract/dynamic");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -119,114 +120,64 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var H = 2, U = function U(t) {
-    return t === document.documentElement ? window : t;
-}, $ = function $(t) {
-    var e = setTimeout(t, 0);
+var X = 2, Y = function Y(e) {
+    return e === document.documentElement ? window : e;
+}, Z = function Z(e) {
+    var n = setTimeout(e, 0);
     return {
         cancel: function cancel() {
-            return clearTimeout(e);
+            return clearTimeout(n);
         }
     };
-}, G = (0, _jssJs.createUseStyles)(function(t) {
-    return _defineProperty({
-        footer: _defineProperty({
-            width: "100%",
-            backgroundColor: t.colors.background,
-            transition: "background 0.2s linear, box-shadow 0.2s linear"
-        }, t.mq.tabletOrSmaller, {
-            position: function position(param) {
-                var e = param.hasContentEnoughVSpace, n = param.isContentWithScroll;
-                return e || !n ? "fixed" : "initial";
-            },
-            left: 0,
-            bottom: 0,
-            zIndex: 1
-        }),
-        elevated: {
-            backgroundColor: t.colors.backgroundContainer
-        },
-        withoutFooter: {
-            display: "none"
-        },
-        containerSmall: {
-            paddingBottom: function paddingBottom(param) {
-                var e = param.footerHeight;
-                return e;
-            },
-            backgroundColor: function backgroundColor(param) {
-                var e = param.containerBgColor;
-                return e || t.colors.background;
-            }
-        }
-    }, t.mq.tabletOrSmaller, {
-        containerSmall: {
-            paddingBottom: function paddingBottom(param) {
-                var e = param.footerHeight, n = param.isContentWithScroll, r = param.hasContentEnoughVSpace;
-                return r || !n ? e : 0;
-            }
-        },
-        elevated: {
-            boxShadow: "0 -2px 8px 0 rgba(0, 0, 0, 0.10)"
-        }
-    });
-}), tt = function tt(param) {
-    var tmp = param.isFooterVisible, t = tmp === void 0 ? !0 : tmp, e = param.footer, tmp1 = param.footerHeight, n = tmp1 === void 0 ? "auto" : tmp1, r = param.footerBgColor, T = param.containerBgColor, y = param.children, s = param.onChangeFooterHeight;
-    var ref = _slicedToArray(_react.useState(!1), 2), k = ref[0], O = ref[1], c = _react.useRef(null), ref1 = (0, _hooksJs.useScreenSize)(), p = ref1.isTabletOrSmaller, ref2 = (0, _hooksJs.useTheme)(), S = ref2.platformOverrides, ref3 = (0, _hooksJs.useElementDimensions)(), a = ref3.height, R = ref3.ref, v = (0, _hooksJs.useWindowHeight)(), b = (0, _hooksJs.useScreenHeight)(), d = v - a > b / H;
+}, ie = function ie(param) {
+    var tmp = param.isFooterVisible, e = tmp === void 0 ? !0 : tmp, n = param.footer, tmp1 = param.footerHeight, x = tmp1 === void 0 ? "auto" : tmp1, T = param.footerBgColor, i = param.containerBgColor, w = param.children, s = param.onChangeFooterHeight;
+    var ref = _slicedToArray(_react.useState(!1), 2), y = ref[0], b = ref[1], a = _react.useRef(null), ref1 = (0, _hooksJs.useScreenSize)(), g = ref1.isTabletOrSmaller, ref2 = (0, _hooksJs.useTheme)(), d = ref2.platformOverrides, ref3 = (0, _hooksJs.useElementDimensions)(), o = ref3.height, R = ref3.ref, A = (0, _hooksJs.useWindowHeight)(), D = (0, _hooksJs.useScreenHeight)(), c = A - o > D / X;
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
-        s == null || s(a);
+        s == null || s(o);
     }, [
         s,
-        a
+        o
     ]), _react.useEffect(function() {
-        var m = (0, _domJs.getScrollableParentElement)(c.current), A = function A() {
-            return (0, _platformJs.isRunningAcceptanceTest)(S) || !d ? !1 : (0, _domJs.hasScroll)(m) ? (0, _domJs.getScrollDistanceToBottom)(m) > 1 : !1;
-        }, o = (0, _debounce.default)(function() {
-            O(A());
+        var l = (0, _domJs.getScrollableParentElement)(a.current), O = function O() {
+            return (0, _platformJs.isRunningAcceptanceTest)(d) || !c ? !1 : (0, _domJs.hasScroll)(l) ? (0, _domJs.getScrollDistanceToBottom)(l) > 1 : !1;
+        }, t = (0, _debounce.default)(function() {
+            b(O());
         }, 50, {
             leading: !0,
             maxWait: 200
-        }), D = $(o), l = U(m);
-        return (0, _domJs.addPassiveEventListener)(l, "resize", o), (0, _domJs.addPassiveEventListener)(l, "scroll", o), function() {
-            o.cancel(), (0, _domJs.removePassiveEventListener)(l, "scroll", o), (0, _domJs.removePassiveEventListener)(l, "resize", o), D.cancel();
+        }), I = Z(t), r = Y(l);
+        return (0, _domJs.addPassiveEventListener)(r, "resize", t), (0, _domJs.addPassiveEventListener)(r, "scroll", t), function() {
+            t.cancel(), (0, _domJs.removePassiveEventListener)(r, "scroll", t), (0, _domJs.removePassiveEventListener)(r, "resize", t), I.cancel();
         };
     }, [
-        d,
-        S
+        c,
+        d
     ]);
-    var i = G({
-        footerBgColor: r,
-        containerBgColor: T,
-        footerHeight: a,
-        windowHeight: v,
-        screenHeight: b,
-        isContentWithScroll: function() {
-            return (0, _domJs.hasScroll)((0, _domJs.getScrollableParentElement)(c.current));
-        }(),
-        hasContentEnoughVSpace: d
-    });
-    var _obj;
+    var F = (0, _domJs.hasScroll)((0, _domJs.getScrollableParentElement)(a.current)), f = c || !F;
+    var _obj, _obj1;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                ref: c,
-                className: (0, _classnames.default)(_defineProperty({}, i.containerSmall, p)),
-                children: y
+                ref: a,
+                className: _fixedFooterLayoutCssMisticaJs.container,
+                style: (0, _dynamic.assignInlineVars)((_obj = {}, _defineProperty(_obj, _fixedFooterLayoutCssMisticaJs.vars.backgroundColor, i != null ? i : ""), _defineProperty(_obj, _fixedFooterLayoutCssMisticaJs.vars.footerHeight, f ? "".concat(o, "px") : "0px"), _obj)),
+                children: w
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 ref: R,
-                className: (0, _classnames.default)(i.footer, (_obj = {}, _defineProperty(_obj, i.withoutFooter, !t), _defineProperty(_obj, i.elevated, k), _obj)),
+                className: (0, _classnames.default)(_fixedFooterLayoutCssMisticaJs.footer, (_obj1 = {}, _defineProperty(_obj1, _fixedFooterLayoutCssMisticaJs.withoutFooter, !e), _defineProperty(_obj1, _fixedFooterLayoutCssMisticaJs.elevated, y), _defineProperty(_obj1, _fixedFooterLayoutCssMisticaJs.fixedFooter, f), _obj1)),
                 style: {
-                    background: p ? r : void 0
+                    background: g ? T : void 0
                 },
-                "data-testid": "fixed-footer".concat(t ? "-visible" : "-hidden"),
+                "data-testid": "fixed-footer".concat(e ? "-visible" : "-hidden"),
                 "data-position-fixed": "bottom",
-                children: t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("aside", {
+                children: e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("aside", {
+                    "data-component-name": "FixedFooter",
                     style: {
-                        height: n,
+                        height: x,
                         marginBottom: "env(safe-area-inset-bottom)"
                     },
-                    children: e
+                    children: n
                 })
             })
         ]