@telefonica/mistica 12.9.1 → 12.10.0

package/dist-es/feedback.js

@@ -127,9 +127,9 @@ 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);
 }
-import * as v from "react";
+import * as g from "react";
 import { createUseStyles as te } from "./jss.js";
-import { useTheme as k, useWindowHeight as ne, useScreenSize as A, useIsomorphicLayoutEffect as z } from "./hooks.js";
+import { useTheme as f, useWindowHeight as ne, useScreenSize as A, useIsomorphicLayoutEffect as z } from "./hooks.js";
 import { useIsInverseVariant as W, ThemeVariant as E } from "./theme-variant-context.js";
 import ce from "./button-fixed-footer-layout.js";
 import L from "./overscroll-color-context.js";
@@ -140,14 +140,15 @@ import ae from "./icons/icon-error.js";
 import ie from "./icons/icon-info.js";
 import { isWebViewBridgeAvailable as se, requestVibration as de } from "@tef-novum/webview-bridge";
 import { isOldChrome as le, isRunningAcceptanceTest as me } from "./utils/platform.js";
-import { Text2 as ue, Text6 as pe, Text3 as be } from "./text.js";
+import { Text2 as ue, Text6 as pe, Text3 as fe } from "./text.js";
 import C from "./box.js";
-import { Boxed as fe } from "./boxed.js";
-import B from "./responsive-layout.js";
-import y from "./stack.js";
+import { Boxed as be } from "./boxed.js";
+import F from "./responsive-layout.js";
+import B from "./stack.js";
 import ke from "classnames";
 import he from "./button-group.js";
-import { jsx as r, jsxs as m, Fragment as ge } from "./_virtual/jsx-runtime.js";
+import { vars as y } from "./skins/skin-contract.css-mistica.js";
+import { jsx as r, jsxs as d, Fragment as ge } from "./_virtual/jsx-runtime.js";
 var P = function(e) {
     return !le(e) && !me(e);
 }, T = function(param) {
@@ -240,14 +241,14 @@ var P = function(e) {
         }
     };
 }), ve = function() {
-    var ref = k(), e = ref.colors, t = "body {background:".concat(W() ? e.backgroundBrand : e.background, "}");
+    var ref = f(), e = ref.colors, t = "body {background:".concat(W() ? e.backgroundBrand : e.background, "}");
     return /* @__PURE__ */ r("style", {
         children: t
     });
 }, $ = function(e) {
     se() && de(e).catch(function() {});
 }, G = function(e) {
-    v.useEffect(function() {
+    g.useEffect(function() {
         var o;
         return e === "success" && (o = setTimeout(function() {
             return $("success");
@@ -260,7 +261,7 @@ var P = function(e) {
         e
     ]);
 }, M = function() {
-    var ref = _slicedToArray(v.useState(!1), 2), e = ref[0], o = ref[1];
+    var ref = _slicedToArray(g.useState(!1), 2), e = ref[0], o = ref[1];
     return z(function() {
         var t = window.requestAnimationFrame(function() {
             o(!0);
@@ -269,29 +270,29 @@ var P = function(e) {
             return window.cancelAnimationFrame(t);
         };
     }, []), e;
-}, U = function(param, c, a, i, p) {
+}, U = function(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__ */ r("p", {
-            children: b
+            children: m
         }, u);
     }) : t;
-    return /* @__PURE__ */ m(y, {
+    return /* @__PURE__ */ d(B, {
         space: 24,
         children: [
             e,
-            /* @__PURE__ */ m(y, {
+            /* @__PURE__ */ d(B, {
                 space: 16,
-                className: ke(i.feedbackData, c && i.feedbackDataAppear, c && a && i.feedbackDataAppearActive),
+                className: ke(s.feedbackData, c && s.feedbackDataAppear, c && i && s.feedbackDataAppearActive),
                 children: [
                     /* @__PURE__ */ r(pe, {
                         as: "h1",
                         children: o
                     }),
-                    d && /* @__PURE__ */ r(be, {
+                    l && /* @__PURE__ */ r(fe, {
                         regular: !0,
-                        color: p.textSecondary,
-                        children: d
+                        color: y.colors.textSecondary,
+                        children: l
                     }),
                     n
                 ]
@@ -300,7 +301,7 @@ var P = function(e) {
     });
 }, J = function(e, o) {
     var t = T(o);
-    return /* @__PURE__ */ m(y, {
+    return /* @__PURE__ */ d(B, {
         space: 24,
         children: [
             e,
@@ -309,11 +310,11 @@ var P = function(e) {
     });
 }, Q = function(param) {
     var e = param.isInverse, o = param.inlineFeedbackBody, t = param.classes, n = param.imageUrl, c = param.dataAttributes;
-    return /* @__PURE__ */ r(fe, {
+    return /* @__PURE__ */ r(be, {
         className: t.desktopBoxed,
         isInverse: e,
         dataAttributes: c,
-        children: /* @__PURE__ */ m("div", {
+        children: /* @__PURE__ */ d("div", {
             className: t.desktopContainer,
             children: [
                 /* @__PURE__ */ r("div", {
@@ -330,48 +331,48 @@ var P = function(e) {
         })
     });
 }, N = function(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 = W(), ref = k(), s = ref.colors, x = ref.platformOverrides, F = ref.isDarkMode, h = ref.skinName, g = ne(), ref1 = A(), D = ref1.isTabletOrSmaller, ref2 = _slicedToArray(v.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(v.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 = W(), ref = f(), I = ref.platformOverrides, x = ref.isDarkMode, k = ref.skinName, h = ne(), ref1 = A(), D = ref1.isTabletOrSmaller, ref2 = _slicedToArray(g.useState((typeof self === "undefined" ? "undefined" : _typeof(self)) < "u"), 2), X = ref2[0], Y = ref2[1], ref3 = _slicedToArray(g.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();
     z(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__ */ r("div", {
-        className: f.container,
-        children: /* @__PURE__ */ r(B, {
+        className: p.container,
+        children: /* @__PURE__ */ r(F, {
             children: /* @__PURE__ */ r("div", {
-                className: f.innerContainer,
+                className: p.innerContainer,
                 children: O
             })
         })
     });
-    return D ? /* @__PURE__ */ m(ge, {
+    return D ? /* @__PURE__ */ d(ge, {
         children: [
-            l && /* @__PURE__ */ r(L, {}),
+            a && /* @__PURE__ */ r(L, {}),
             /* @__PURE__ */ r("div", {
                 style: {
                     position: "relative"
@@ -380,32 +381,32 @@ var P = function(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 ? y.colors.backgroundFeedbackBottom : void 0,
+                    containerBgColor: a && !x ? y.colors.backgroundFeedbackBottom : void 0,
                     onChangeFooterHeight: Z,
                     children: re
                 })
             }),
-            h === q && /* @__PURE__ */ r("div", {
-                className: f.backgroundDiv
+            k === q && /* @__PURE__ */ r("div", {
+                className: p.backgroundDiv
             }),
-            h !== q && /* @__PURE__ */ r(ve, {})
+            k !== q && /* @__PURE__ */ r(ve, {})
         ]
-    }) : /* @__PURE__ */ r(B, {
+    }) : /* @__PURE__ */ r(F, {
         children: /* @__PURE__ */ r(C, {
             paddingTop: 64,
             children: Q({
-                isInverse: l,
+                isInverse: a,
                 inlineFeedbackBody: H,
-                classes: f,
-                imageUrl: u,
-                dataAttributes: I
+                classes: p,
+                imageUrl: b,
+                dataAttributes: S
             })
         })
     });
-}, Le = function(e) {
-    var ref = A(), o = ref.isTabletOrSmaller, ref1 = k(), t = ref1.skinName;
+}, Re = function(e) {
+    var ref = A(), o = ref.isTabletOrSmaller, ref1 = f(), t = ref1.skinName;
     return /* @__PURE__ */ r(E, {
         isInverse: !e.unstable_inlineInDesktop || o,
         children: /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
@@ -416,13 +417,13 @@ var P = function(e) {
             imageFit: e.imageFit
         }))
     });
-}, Re = function(_param) {
+}, _e = function(_param) {
     var e = _param.children, o = _param.errorReference, t = _objectWithoutProperties(_param, [
         "children",
         "errorReference"
     ]);
-    var ref = k(), n = ref.colors;
-    return /* @__PURE__ */ m(N, _objectSpreadProps(_objectSpread({}, t), {
+    var ref = f(), n = ref.colors;
+    return /* @__PURE__ */ d(N, _objectSpreadProps(_objectSpread({}, t), {
         hapticFeedback: "error",
         icon: /* @__PURE__ */ r(ae, {}),
         animateText: !0,
@@ -435,55 +436,55 @@ var P = function(e) {
             })
         ]
     }));
-}, _e = function(e) {
+}, je = function(e) {
     return /* @__PURE__ */ r(N, _objectSpreadProps(_objectSpread({}, e), {
         icon: /* @__PURE__ */ r(ie, {})
     }));
-}, je = function(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(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 = A(), b = ref.isTabletOrSmaller, ref1 = k(), u = ref1.skinName, S = ref1.platformOverrides, I = ref1.colors, l = T({
+    var ref = A(), u = ref.isTabletOrSmaller, ref1 = f(), 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 === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
+        imageUrl: s,
+        imageFit: l,
+        hasButtons: S
+    }), I = M(), k = U({
+        icon: b === R ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(_, {}),
         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__ */ r(E, {
         isInverse: !0,
-        children: b ? /* @__PURE__ */ m(B, {
-            className: s.background,
+        children: u ? /* @__PURE__ */ d(F, {
+            className: a.background,
             children: [
                 /* @__PURE__ */ r(L, {}),
                 /* @__PURE__ */ r(C, {
                     paddingBottom: 32,
                     children: /* @__PURE__ */ r("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
         })
     });
 };
-export { Re as ErrorFeedbackScreen, N as FeedbackScreen, _e as InfoFeedbackScreen, je as SuccessFeedback, Le as SuccessFeedbackScreen };
+export { _e as ErrorFeedbackScreen, N as FeedbackScreen, je as InfoFeedbackScreen, Pe as SuccessFeedback, Re as SuccessFeedbackScreen };

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

@@ -59,101 +59,100 @@ function _unsupportedIterableToArray(o, minLen) {
 }
 import * as u from "react";
 import g from "classnames";
-import I from "lodash/debounce";
-import { createUseStyles as L } from "./jss.js";
-import { isRunningAcceptanceTest as B } from "./utils/platform.js";
-import { useScreenSize as N, useTheme as P, useElementDimensions as W, useWindowHeight as j, useScreenHeight as C, useIsomorphicLayoutEffect as _ } from "./hooks.js";
+import z from "lodash/debounce";
+import { createUseStyles as I } from "./jss.js";
+import { isRunningAcceptanceTest as L } from "./utils/platform.js";
+import { useScreenSize as B, useTheme as C, useElementDimensions as N, useWindowHeight as P, useScreenHeight as W, useIsomorphicLayoutEffect as j } from "./hooks.js";
 import { getScrollableParentElement as h, addPassiveEventListener as E, removePassiveEventListener as w, hasScroll as x, getScrollDistanceToBottom as q } from "./utils/dom.js";
-import { jsxs as F, Fragment as H, jsx as f } from "./_virtual/jsx-runtime.js";
-var U = 2, $ = function(e) {
-    return e === document.documentElement ? window : e;
-}, G = function(e) {
-    var t = setTimeout(e, 0);
+import { jsxs as _, Fragment as F, jsx as f } from "./_virtual/jsx-runtime.js";
+var H = 2, U = function(t) {
+    return t === document.documentElement ? window : t;
+}, $ = function(t) {
+    var e = setTimeout(t, 0);
     return {
         cancel: function() {
-            return clearTimeout(t);
+            return clearTimeout(e);
         }
     };
-}, J = L(function(e) {
+}, G = I(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(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(param) {
-                var t = param.footerHeight;
-                return t;
+                var e = param.footerHeight;
+                return e;
             },
             backgroundColor: function(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(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(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(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(u.useState(!1), 2), k = ref[0], O = ref[1], c = u.useRef(null), ref1 = N(), p = ref1.isTabletOrSmaller, ref2 = P(), S = ref2.platformOverrides, ref3 = W(), a = ref3.height, R = ref3.ref, v = j(), b = C(), d = v - a > b / U, A = function() {
-        return x(h(c.current));
-    };
-    _(function() {
+}), tt = function(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(u.useState(!1), 2), k = ref[0], O = ref[1], c = u.useRef(null), ref1 = B(), p = ref1.isTabletOrSmaller, ref2 = C(), S = ref2.platformOverrides, ref3 = N(), a = ref3.height, R = ref3.ref, v = P(), b = W(), d = v - a > b / H;
+    j(function() {
         s == null || s(a);
     }, [
         s,
         a
     ]), u.useEffect(function() {
-        var m = h(c.current), D = function() {
-            return B(S) || !d ? !1 : x(m) ? q(m) > 1 : !1;
-        }, o = I(function() {
-            O(D());
+        var m = h(c.current), A = function() {
+            return L(S) || !d ? !1 : x(m) ? q(m) > 1 : !1;
+        }, o = z(function() {
+            O(A());
         }, 50, {
             leading: !0,
             maxWait: 200
-        }), z = G(o), l = $(m);
+        }), D = $(o), l = U(m);
         return E(l, "resize", o), E(l, "scroll", o), function() {
-            o.cancel(), w(l, "scroll", o), w(l, "resize", o), z.cancel();
+            o.cancel(), w(l, "scroll", o), w(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 x(h(c.current));
+        }(),
         hasContentEnoughVSpace: d
     });
     var _obj;
-    return /* @__PURE__ */ F(H, {
+    return /* @__PURE__ */ _(F, {
         children: [
             /* @__PURE__ */ f("div", {
                 ref: c,
@@ -162,21 +161,21 @@ var U = 2, $ = function(e) {
             }),
             /* @__PURE__ */ f("div", {
                 ref: R,
-                className: g(i.footer, (_obj = {}, _defineProperty(_obj, i.withoutFooter, !e), _defineProperty(_obj, i.elevated, k), _obj)),
+                className: g(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__ */ f("aside", {
+                children: t && /* @__PURE__ */ f("aside", {
                     style: {
                         height: n,
                         marginBottom: "env(safe-area-inset-bottom)"
                     },
-                    children: t
+                    children: e
                 })
             })
         ]
     });
 };
-export { ee as default };
+export { tt as default };

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

@@ -0,0 +1,6 @@
+import "./grid-layout.css.ts.vanilla.js";
+var r = "_379jdb1", v = "_379jdb3", d = {
+    colSpan: "var(--_379jdb2)",
+    verticalSpace: "var(--_379jdb0)"
+};
+export { r as grid, v as span, d as vars };

package/dist-es/grid-layout.css.ts.vanilla.js

@@ -0,0 +1,2 @@
+var a = "";
+export { a as default };