@telefonica/mistica 12.9.1 → 12.10.0

package/dist/feedback.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     ErrorFeedbackScreen: function() {
-        return Re;
+        return _e;
     },
     FeedbackScreen: function() {
         return N;
     },
     InfoFeedbackScreen: function() {
-        return _e;
+        return je;
     },
     SuccessFeedback: function() {
-        return je;
+        return Pe;
     },
     SuccessFeedbackScreen: function() {
-        return Le;
+        return Re;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -45,6 +45,7 @@ var _responsiveLayoutJs = /*#__PURE__*/ _interopRequireDefault(require("./respon
 var _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
 var _buttonGroupJs = /*#__PURE__*/ _interopRequireDefault(require("./button-group.js"));
+var _skinContractCssMisticaJs = require("./skins/skin-contract.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -340,11 +341,11 @@ var P = function P(e) {
             return window.cancelAnimationFrame(t);
         };
     }, []), e;
-}, U = function U(param, c, a, i, p) {
+}, U = function U(param, c, i, s) {
     var e = param.icon, o = param.title, t = param.description, n = param.children;
-    var d = t && Array.isArray(t) ? t.map(function(b, u) {
+    var l = t && Array.isArray(t) ? t.map(function(m, u) {
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("p", {
-            children: b
+            children: m
         }, u);
     }) : t;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
@@ -353,16 +354,16 @@ var P = function P(e) {
             e,
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
-                className: (0, _classnames.default)(i.feedbackData, c && i.feedbackDataAppear, c && a && i.feedbackDataAppearActive),
+                className: (0, _classnames.default)(s.feedbackData, c && s.feedbackDataAppear, c && i && s.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                         as: "h1",
                         children: o
                     }),
-                    d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                    l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                         regular: !0,
-                        color: p.textSecondary,
-                        children: d
+                        color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                        children: l
                     }),
                     n
                 ]
@@ -401,48 +402,48 @@ var P = function P(e) {
         })
     });
 }, N = function N(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, a = param.link, i = param.hapticFeedback, p = param.icon, tmp = param.animateText, d = tmp === void 0 ? !1 : tmp, b = param.unstable_inlineInDesktop, u = param.imageUrl, S = param.imageFit, I = param.dataAttributes;
-    G(i);
-    var l = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), s = ref.colors, x = ref.platformOverrides, F = ref.isDarkMode, h = ref.skinName, g = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), D = 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), w = ref3[0], Z = ref3[1], ee = "".concat(g - w, "px"), V = T({
+    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, i = param.link, s = param.hapticFeedback, l = param.icon, tmp = param.animateText, m = tmp === void 0 ? !1 : tmp, u = param.unstable_inlineInDesktop, b = param.imageUrl, v = param.imageFit, S = param.dataAttributes;
+    G(s);
+    var a = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), I = ref.platformOverrides, x = ref.isDarkMode, k = ref.skinName, h = (0, _hooksJs.useWindowHeight)(), ref1 = (0, _hooksJs.useScreenSize)(), D = 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), w = ref3[0], Z = ref3[1], ee = "".concat(h - w, "px"), V = T({
         primaryButton: n,
         secondaryButton: c,
-        link: a
-    }), f = K({
-        isInverse: l,
+        link: i
+    }), p = K({
+        isInverse: a,
         contentHeight: X ? "100vh" : ee,
         footerHeight: w,
-        animateText: d,
+        animateText: m,
         primaryButton: n,
-        imageUrl: u,
-        imageFit: S,
+        imageUrl: b,
+        imageFit: v,
         hasButtons: V
     }), oe = M();
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
         Y(!1);
     }, []);
     var O = U({
-        icon: p,
+        icon: l,
         title: e,
         description: o,
         children: t
-    }, d && P(x), oe, f, s), H = J(O, {
+    }, m && P(I), oe, p), H = J(O, {
         primaryButton: n,
         secondaryButton: c,
-        link: a
+        link: i
     });
-    if (!D && b) return H;
+    if (!D && u) return H;
     var re = /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: f.container,
+        className: p.container,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: f.innerContainer,
+                className: p.innerContainer,
                 children: O
             })
         })
     });
     return D ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
         children: [
-            l && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
+            a && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 style: {
                     position: "relative"
@@ -451,31 +452,31 @@ var P = function P(e) {
                     isFooterVisible: V,
                     button: n,
                     secondaryButton: c,
-                    link: a,
-                    footerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
-                    containerBgColor: l && !F ? s.backgroundFeedbackBottom : void 0,
+                    link: i,
+                    footerBgColor: a && !x ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: a && !x ? _skinContractCssMisticaJs.vars.colors.backgroundFeedbackBottom : void 0,
                     onChangeFooterHeight: Z,
                     children: re
                 })
             }),
-            h === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: f.backgroundDiv
+            k === _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+                className: p.backgroundDiv
             }),
-            h !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ve, {})
+            k !== _constantsJs.O2_CLASSIC_SKIN && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ve, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_responsiveLayoutJs.default, {
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingTop: 64,
             children: Q({
-                isInverse: l,
+                isInverse: a,
                 inlineFeedbackBody: H,
-                classes: f,
-                imageUrl: u,
-                dataAttributes: I
+                classes: p,
+                imageUrl: b,
+                dataAttributes: S
             })
         })
     });
-}, Le = function Le(e) {
+}, Re = function Re(e) {
     var ref = (0, _hooksJs.useScreenSize)(), o = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), t = ref1.skinName;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
         isInverse: !e.unstable_inlineInDesktop || o,
@@ -487,7 +488,7 @@ var P = function P(e) {
             imageFit: e.imageFit
         }))
     });
-}, Re = function Re(_param) {
+}, _e = function _e(_param) {
     var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
         "children",
         "errorReference"
@@ -506,54 +507,54 @@ var P = function P(e) {
             })
         ]
     }));
-}, _e = function _e(e) {
+}, je = function je(e) {
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(N, _objectSpreadProps(_objectSpread({}, e), {
         icon: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconInfoJs.default, {})
     }));
-}, je = function je(param) {
-    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, a = param.link, i = param.imageUrl, p = param.imageFit, d = param.dataAttributes;
+}, Pe = function Pe(param) {
+    var e = param.title, o = param.description, t = param.children, n = param.primaryButton, c = param.secondaryButton, i = param.link, s = param.imageUrl, l = param.imageFit, m = param.dataAttributes;
     G("success");
-    var ref = (0, _hooksJs.useScreenSize)(), b = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), u = ref1.skinName, S = ref1.platformOverrides, I = ref1.colors, l = T({
+    var ref = (0, _hooksJs.useScreenSize)(), u = ref.isTabletOrSmaller, ref1 = (0, _hooksJs.useTheme)(), b = ref1.skinName, v = ref1.platformOverrides, S = T({
         primaryButton: n,
         secondaryButton: c,
-        link: a
-    }), s = K({
+        link: i
+    }), a = K({
         isInverse: !0,
         animateText: !0,
         primaryButton: n,
-        imageUrl: i,
-        imageFit: p,
-        hasButtons: l
-    }), x = M(), h = U({
-        icon: u === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
+        imageUrl: s,
+        imageFit: l,
+        hasButtons: S
+    }), I = M(), k = U({
+        icon: b === _constantsJs.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessVivoJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconSuccessJs.default, {}),
         title: e,
         description: o,
         children: t
-    }, P(S), x, s, I), g = J(h, {
+    }, P(v), I, a), h = J(k, {
         primaryButton: n,
         secondaryButton: c,
-        link: a
+        link: i
     });
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_themeVariantContextJs.ThemeVariant, {
         isInverse: !0,
-        children: b ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
-            className: s.background,
+        children: u ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
+            className: a.background,
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingBottom: 32,
                     children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: s.innerContainer,
-                        children: g
+                        className: a.innerContainer,
+                        children: h
                     })
                 })
             ]
         }) : Q({
             isInverse: !0,
-            inlineFeedbackBody: g,
-            classes: s,
-            imageUrl: i,
-            dataAttributes: d
+            inlineFeedbackBody: h,
+            classes: a,
+            imageUrl: s,
+            dataAttributes: m
         })
     });
 };

package/dist/fixed-footer-layout.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return ee;
+        return tt;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
@@ -119,91 +119,90 @@ 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 U = 2, $ = function $(e) {
-    return e === document.documentElement ? window : e;
-}, G = function G(e) {
-    var t = setTimeout(e, 0);
+var H = 2, U = function U(t) {
+    return t === document.documentElement ? window : t;
+}, $ = function $(t) {
+    var e = setTimeout(t, 0);
     return {
         cancel: function cancel() {
-            return clearTimeout(t);
+            return clearTimeout(e);
         }
     };
-}, J = (0, _jssJs.createUseStyles)(function(e) {
+}, G = (0, _jssJs.createUseStyles)(function(t) {
     return _defineProperty({
-        footer: {
+        footer: _defineProperty({
             width: "100%",
-            backgroundColor: e.colors.background,
+            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: e.colors.backgroundContainer
+            backgroundColor: t.colors.backgroundContainer
         },
         withoutFooter: {
             display: "none"
         },
         containerSmall: {
             paddingBottom: function paddingBottom(param) {
-                var t = param.footerHeight;
-                return t;
+                var e = param.footerHeight;
+                return e;
             },
             backgroundColor: function backgroundColor(param) {
-                var t = param.containerBgColor;
-                return t || e.colors.background;
+                var e = param.containerBgColor;
+                return e || t.colors.background;
             }
         }
-    }, e.mq.tabletOrSmaller, {
+    }, t.mq.tabletOrSmaller, {
         containerSmall: {
             paddingBottom: function paddingBottom(param) {
-                var t = param.footerHeight, n = param.isContentWithScroll, r = param.hasContentEnoughVSpace;
-                return r || !n ? t : 0;
+                var e = param.footerHeight, n = param.isContentWithScroll, r = param.hasContentEnoughVSpace;
+                return r || !n ? e : 0;
             }
         },
-        footer: {
-            position: function position(param) {
-                var t = param.hasContentEnoughVSpace, n = param.isContentWithScroll;
-                return t || !n ? "fixed" : "initial";
-            },
-            left: 0,
-            bottom: 0,
-            zIndex: 1
-        },
         elevated: {
             boxShadow: "0 -2px 8px 0 rgba(0, 0, 0, 0.10)"
         }
     });
-}), ee = function ee(param) {
-    var tmp = param.isFooterVisible, e = tmp === void 0 ? !0 : tmp, t = 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 / U, A = function A() {
-        return (0, _domJs.hasScroll)((0, _domJs.getScrollableParentElement)(c.current));
-    };
+}), 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;
     (0, _hooksJs.useIsomorphicLayoutEffect)(function() {
         s == null || s(a);
     }, [
         s,
         a
     ]), _react.useEffect(function() {
-        var m = (0, _domJs.getScrollableParentElement)(c.current), D = function D() {
+        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(D());
+            O(A());
         }, 50, {
             leading: !0,
             maxWait: 200
-        }), z = G(o), l = $(m);
+        }), 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), z.cancel();
+            o.cancel(), (0, _domJs.removePassiveEventListener)(l, "scroll", o), (0, _domJs.removePassiveEventListener)(l, "resize", o), D.cancel();
         };
     }, [
         d,
         S
     ]);
-    var i = J({
+    var i = G({
         footerBgColor: r,
         containerBgColor: T,
         footerHeight: a,
         windowHeight: v,
         screenHeight: b,
-        isContentWithScroll: A(),
+        isContentWithScroll: function() {
+            return (0, _domJs.hasScroll)((0, _domJs.getScrollableParentElement)(c.current));
+        }(),
         hasContentEnoughVSpace: d
     });
     var _obj;
@@ -216,18 +215,18 @@ var U = 2, $ = function $(e) {
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
                 ref: R,
-                className: (0, _classnames.default)(i.footer, (_obj = {}, _defineProperty(_obj, i.withoutFooter, !e), _defineProperty(_obj, i.elevated, k), _obj)),
+                className: (0, _classnames.default)(i.footer, (_obj = {}, _defineProperty(_obj, i.withoutFooter, !t), _defineProperty(_obj, i.elevated, k), _obj)),
                 style: {
                     background: p ? r : void 0
                 },
-                "data-testid": "fixed-footer".concat(e ? "-visible" : "-hidden"),
+                "data-testid": "fixed-footer".concat(t ? "-visible" : "-hidden"),
                 "data-position-fixed": "bottom",
-                children: e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("aside", {
+                children: t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("aside", {
                     style: {
                         height: n,
                         marginBottom: "env(safe-area-inset-bottom)"
                     },
-                    children: t
+                    children: e
                 })
             })
         ]

package/dist/grid-layout.css-mistica.js

@@ -0,0 +1,26 @@
+"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, {
+    grid: function() {
+        return r;
+    },
+    span: function() {
+        return v;
+    },
+    vars: function() {
+        return d;
+    }
+});
+require("./grid-layout.css.ts.vanilla.js");
+var r = "_379jdb1", v = "_379jdb3", d = {
+    colSpan: "var(--_379jdb2)",
+    verticalSpace: "var(--_379jdb0)"
+};

package/dist/grid-layout.css.d.ts

@@ -0,0 +1,6 @@
+export declare const grid: string;
+export declare const span: string;
+export declare const vars: {
+    colSpan: import("@vanilla-extract/private").CSSVarFunction;
+    verticalSpace: import("@vanilla-extract/private").CSSVarFunction;
+};

package/dist/grid-layout.css.js.flow

@@ -0,0 +1,14 @@
+// @flow
+
+declare export var grid: string;
+declare export var span: string;
+declare export var vars: {
+  colSpan: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+  verticalSpace: $PropertyType<
+    $Exports<"@vanilla-extract/private">,
+    "CSSVarFunction"
+  >,
+};

package/dist/grid-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 a;
+    }
+});
+var a = "";