@telefonica/mistica 16.52.0 → 16.53.0

package/dist/drawer.css-mistica.js

@@ -12,35 +12,44 @@ _export(exports, {
     get ANIMATION_DURATION_MS () {
         return n;
     },
+    get bottomPadding () {
+        return i;
+    },
+    get buttonsLayoutContainer () {
+        return d;
+    },
     get closeButtonContainer () {
-        return t;
+        return e;
     },
     get closed () {
-        return a;
+        return f;
     },
     get container () {
         return w;
     },
     get drawer () {
-        return y;
+        return r;
+    },
+    get horizontalPadding () {
+        return l;
     },
     get open () {
         return c;
     },
     get overlay () {
-        return e;
+        return t;
     },
     get overlayClosed () {
-        return g;
+        return o;
     },
     get overlayOpen () {
-        return o;
+        return g;
     },
     get scrollableSection () {
-        return r;
+        return a;
     },
     get titleContainer () {
-        return f;
+        return y;
     }
 });
-/* empty css                                     */ /* empty css                                  */ var n = 350, w = "v16_52_c4ngww1 v16_52_c4ngww0 v16_52_1y2v1nfpi v16_52_1y2v1nfpm v16_52_1y2v1nf7p v16_52_1y2v1nfsw v16_52_1y2v1nftq v16_52_1y2v1nfu5 v16_52_1y2v1nfsq", y = "v16_52_c4ngww3 v16_52_c4ngww2 v16_52_1y2v1nfg6 v16_52_1y2v1nfpm v16_52_1y2v1nfps v16_52_1y2v1nfq7", f = "v16_52_c4ngww5 v16_52_c4ngww4 v16_52_1y2v1nfq4 v16_52_1y2v1nfq6", r = "v16_52_c4ngww7 v16_52_c4ngww6 v16_52_1y2v1nfq7 v16_52_1y2v1nfsv", c = "v16_52_c4ngww8", a = "v16_52_c4ngww9", e = "v16_52_c4ngwwb v16_52_c4ngwwa v16_52_1y2v1nfpi v16_52_1y2v1nfsw v16_52_1y2v1nftb v16_52_1y2v1nftq v16_52_1y2v1nfu5 v16_52_1y2v1nf85", g = "v16_52_c4ngwwc", o = "v16_52_c4ngwwd", t = "v16_52_c4ngwwe v16_52_1y2v1nfph v16_52_1y2v1nfsz v16_52_1y2v1nftt";
+/* empty css                                     */ /* empty css                                  */ var n = 350, w = "v16_53_c4ngww1 v16_53_c4ngww0 v16_53_1y2v1nfpy v16_53_1y2v1nfq2 v16_53_1y2v1nf7x v16_53_1y2v1nftc v16_53_1y2v1nfu6 v16_53_1y2v1nful v16_53_1y2v1nft6", r = "v16_53_c4ngww3 v16_53_c4ngww2 v16_53_1y2v1nfq2 v16_53_1y2v1nfq8 v16_53_1y2v1nfqn", y = "v16_53_c4ngww5 v16_53_c4ngww4 v16_53_1y2v1nfqk v16_53_1y2v1nfqm", a = "v16_53_c4ngww7 v16_53_c4ngww6 v16_53_1y2v1nfqn v16_53_1y2v1nftb", c = "v16_53_c4ngww8", f = "v16_53_c4ngww9", t = "v16_53_c4ngwwb v16_53_c4ngwwa v16_53_1y2v1nfpy v16_53_1y2v1nftc v16_53_1y2v1nftr v16_53_1y2v1nfu6 v16_53_1y2v1nful v16_53_1y2v1nf8d", o = "v16_53_c4ngwwc", g = "v16_53_c4ngwwd", e = "v16_53_c4ngwwe v16_53_1y2v1nfpx v16_53_1y2v1nftf v16_53_1y2v1nfu9", l = "v16_53_c4ngwwf", i = "v16_53_c4ngwwg", d = "v16_53_c4ngwwh";

package/dist/drawer.css.d.ts

@@ -9,3 +9,6 @@ export declare const overlay: string;
 export declare const overlayClosed: string;
 export declare const overlayOpen: string;
 export declare const closeButtonContainer: string;
+export declare const horizontalPadding: string;
+export declare const bottomPadding: string;
+export declare const buttonsLayoutContainer: string;

package/dist/drawer.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return We;
+        return Ae;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -16,7 +16,6 @@ const _text = require("./text.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbutton = require("./icon-button.js");
 const _iconcloseregular = /*#__PURE__*/ _interop_require_default(require("./generated/mistica-icons/icon-close-regular.js"));
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _drawercssmistica = require("./drawer.css-mistica.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _portal = require("./portal.js");
@@ -126,182 +125,167 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const D = 40, b = 32, pe = 16, N = 388, ve = N + D * 2, he = N + b * 2, y = (param)=>{
-    let { show: n } = param;
-    return n ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+const b = (param)=>{
+    let { show: a } = param;
+    return a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             borderBottom: "1px solid transparent"
         }
     });
-}, Ee = ()=>{
-    const n = _react.useRef(document.activeElement);
+}, ue = ()=>{
+    const a = _react.useRef(document.activeElement);
     _react.useEffect(()=>{
-        const l = n.current;
+        const i = a.current;
         return ()=>{
-            var _l_focus;
-            l === null || l === void 0 ? void 0 : (_l_focus = l.focus) === null || _l_focus === void 0 ? void 0 : _l_focus.call(l);
+            var _i_focus;
+            i === null || i === void 0 ? void 0 : (_i_focus = i.focus) === null || _i_focus === void 0 ? void 0 : _i_focus.call(i);
         };
     }, []);
-}, Te = /*#__PURE__*/ _react.forwardRef((param, T)=>{
-    let { width: n, children: l, onClose: c, onDismiss: d } = param;
-    (0, _modalcontextprovider.useSetModalStateEffect)(), Ee();
-    const { isMobile: f, isTablet: P } = (0, _hooks.useScreenSize)(), [m, p] = _react.useState(!1), o = f ? "none" : P ? he : ve, s = f ? "auto" : n, a = _react.useCallback((r)=>{
-        r && setTimeout(()=>{
-            p(!0);
+}, fe = /*#__PURE__*/ _react.forwardRef((param, v)=>{
+    let { width: a, children: i, onClose: l, onDismiss: c } = param;
+    (0, _modalcontextprovider.useSetModalStateEffect)(), ue();
+    const { isMobile: p } = (0, _hooks.useScreenSize)(), [u, d] = _react.useState(!1), h = p ? "auto" : a, o = _react.useCallback((n)=>{
+        n && setTimeout(()=>{
+            d(!0);
         }, 50);
-    }, []), u = _react.useCallback(()=>(p(!1), new Promise((r)=>{
-            setTimeout(r, _drawercssmistica.ANIMATION_DURATION_MS);
-        }).then(c)), [
-        c
-    ]), i = _react.useCallback(()=>u().then(()=>d === null || d === void 0 ? void 0 : d()), [
-        d,
-        u
+    }, []), s = _react.useCallback(()=>(d(!1), new Promise((n)=>{
+            setTimeout(n, _drawercssmistica.ANIMATION_DURATION_MS);
+        }).then(l)), [
+        l
+    ]), r = _react.useCallback(()=>s().then(()=>c === null || c === void 0 ? void 0 : c()), [
+        c,
+        s
     ]);
-    return _react.useImperativeHandle(T, ()=>({
-            close: u,
-            dismiss: i
+    return _react.useImperativeHandle(v, ()=>({
+            close: s,
+            dismiss: r
         })), _react.useEffect(()=>{
-        const r = (v)=>{
-            v.key === "Escape" && i();
+        const n = (m)=>{
+            m.key === "Escape" && r();
         };
-        return document.addEventListener("keydown", r), ()=>{
-            document.removeEventListener("keydown", r);
+        return document.addEventListener("keydown", n), ()=>{
+            document.removeEventListener("keydown", n);
         };
     }, [
-        i
+        r
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_focustrap.default, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     "data-testid": "drawerOverlay",
-                    onClick: d ? i : void 0,
-                    className: (0, _classnames.default)(_drawercssmistica.overlay, m ? _drawercssmistica.overlayOpen : _drawercssmistica.overlayClosed)
+                    onClick: c ? r : void 0,
+                    className: (0, _classnames.default)(_drawercssmistica.overlay, u ? _drawercssmistica.overlayOpen : _drawercssmistica.overlayClosed)
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     "data-testid": "drawerLayout",
-                    ref: a,
+                    ref: o,
                     style: {
-                        width: s,
-                        minWidth: o
+                        width: h
                     },
-                    className: (0, _classnames.default)(_drawercssmistica.container, m ? _drawercssmistica.open : _drawercssmistica.closed),
-                    children: l
+                    className: (0, _classnames.default)(_drawercssmistica.container, u ? _drawercssmistica.open : _drawercssmistica.closed),
+                    children: i
                 })
             ]
         })
     });
-}), We = (param)=>{
-    let { title: n, subtitle: l, description: c, titleAs: d = "h2", dismissLabel: T, width: f, onClose: P, onDismiss: m, children: p, button: o, secondaryButton: s, buttonLink: a, dataAttributes: u } = param;
-    const i = _react.useRef(null), r = !!(o || s || a), [v, A] = _react.useState(null), k = _react.useRef(null), w = _react.useRef(null), { t: R, texts: _, textPresets: B } = (0, _hooks.useTheme)(), S = {
-        mobile: pe,
-        tablet: b,
-        desktop: D
-    }, g = (M)=>{
-        var _i_current;
-        (_i_current = i.current) === null || _i_current === void 0 ? void 0 : _i_current.close().then(()=>M === null || M === void 0 ? void 0 : M());
-    }, C = !(0, _hooks.useIsInViewport)(k, !0, {
-        root: v
-    }), O = !(0, _hooks.useIsInViewport)(w, !0, {
+}), Ae = (param)=>{
+    let { title: a, subtitle: i, description: l, titleAs: c = "h2", dismissLabel: v, width: p, onClose: u, onDismiss: d, children: h, button: o, secondaryButton: s, buttonLink: r, dataAttributes: n } = param;
+    const m = _react.useRef(null), E = !!(o || s || r), [y, T] = _react.useState(null), P = _react.useRef(null), S = _react.useRef(null), { t: R, texts: N, textPresets: C } = (0, _hooks.useTheme)(), g = (D)=>{
+        var _m_current;
+        (_m_current = m.current) === null || _m_current === void 0 ? void 0 : _m_current.close().then(()=>D === null || D === void 0 ? void 0 : D());
+    }, I = !(0, _hooks.useIsInViewport)(P, !0, {
+        root: y
+    }), A = !(0, _hooks.useIsInViewport)(S, !0, {
         rootMargin: "1px",
         // bottomScrollSignal div has 0px height so we need a 1px margin to trigger the intersection observer
-        root: v
+        root: y
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(Te, {
-        width: f,
-        ref: i,
-        onClose: P,
-        onDismiss: m,
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(fe, {
+        width: p,
+        ref: m,
+        onClose: u,
+        onDismiss: d,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", _object_spread_props(_object_spread({
             role: "dialog",
             "aria-modal": "true",
             className: _drawercssmistica.drawer,
-            ref: A
-        }, (0, _dom.getPrefixedDataAttributes)(u, "Drawer")), {
+            ref: T
+        }, (0, _dom.getPrefixedDataAttributes)(n, "Drawer")), {
             children: [
-                m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _drawercssmistica.closeButtonContainer,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
                         dataAttributes: {
                             testid: "dismissButton"
                         },
                         onPress: ()=>{
-                            var _i_current;
-                            return (_i_current = i.current) === null || _i_current === void 0 ? void 0 : _i_current.dismiss();
+                            var _m_current;
+                            return (_m_current = m.current) === null || _m_current === void 0 ? void 0 : _m_current.dismiss();
                         },
                         Icon: _iconcloseregular.default,
-                        "aria-label": T || _.modalClose || R(_texttokens.modalClose),
+                        "aria-label": v || N.modalClose || R(_texttokens.modalClose),
                         type: "neutral",
                         backgroundType: "transparent"
                     })
                 }),
-                n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _drawercssmistica.titleContainer,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingX: S,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, (0, _text.getTextSizesWithWeight)({
-                            textPreset: B.drawerTitle
-                        })), {
-                            as: d,
-                            dataAttributes: {
-                                testid: "title"
-                            },
-                            children: n
-                        }))
-                    })
+                a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: (0, _classnames.default)(_drawercssmistica.titleContainer, _drawercssmistica.horizontalPadding),
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, (0, _text.getTextSizesWithWeight)({
+                        textPreset: C.drawerTitle
+                    })), {
+                        as: c,
+                        dataAttributes: {
+                            testid: "title"
+                        },
+                        children: a
+                    }))
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(y, {
-                    show: C
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+                    show: I
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _drawercssmistica.scrollableSection,
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            ref: k
+                            ref: P
                         }),
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                            paddingX: S,
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _drawercssmistica.horizontalPadding,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 16,
                                 children: [
-                                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
+                                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
                                         regular: !0,
                                         dataAttributes: {
                                             testid: "subtitle"
                                         },
-                                        children: l
+                                        children: i
                                     }),
-                                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         regular: !0,
                                         color: _skincontractcssmistica.vars.colors.textSecondary,
                                         dataAttributes: {
                                             testid: "description"
                                         },
-                                        children: c
+                                        children: l
                                     }),
-                                    p
+                                    h
                                 ]
                             })
                         }),
-                        !r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                            paddingBottom: {
-                                mobile: 16,
-                                desktop: 24
-                            }
+                        !E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _drawercssmistica.bottomPadding
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            ref: w
+                            ref: S
                         })
                     ]
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(y, {
-                    show: r && O
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
+                    show: E && A
                 }),
-                r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingX: S,
-                    paddingY: {
-                        mobile: 16,
-                        desktop: 24
-                    },
+                E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _drawercssmistica.buttonsLayoutContainer,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttonlayout.default, {
                         primaryButton: o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonPrimary, {
                             trackEvent: o.trackEvent,
@@ -317,13 +301,13 @@ const D = 40, b = 32, pe = 16, N = 388, ve = N + D * 2, he = N + b * 2, y = (par
                             disabled: s.disabled,
                             children: s.text
                         }),
-                        link: a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, {
-                            trackEvent: a.trackEvent,
-                            trackingEvent: a.trackingEvent,
-                            onPress: ()=>g(a.onPress),
+                        link: r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_button.ButtonLink, {
+                            trackEvent: r.trackEvent,
+                            trackingEvent: r.trackingEvent,
+                            onPress: ()=>g(r.onPress),
                             bleedY: !0,
-                            disabled: a.disabled,
-                            children: a.text
+                            disabled: r.disabled,
+                            children: r.text
                         })
                     })
                 })

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

@@ -13,10 +13,10 @@ _export(exports, {
         return o;
     },
     get container () {
-        return r;
+        return v;
     },
     get image () {
         return a;
     }
 });
-/* empty css                                     */ /* empty css                                            */ var r = "v16_52_1azor6p0", a = "v16_52_1azor6p2 v16_52_1azor6p1 v16_52_1y2v1nfpo v16_52_1y2v1nfr3", o = "v16_52_1azor6p4 v16_52_1azor6p3 v16_52_1y2v1nfql v16_52_1y2v1nfr1";
+/* empty css                                     */ /* empty css                                            */ var v = "v16_53_1azor6p0", a = "v16_53_1azor6p2 v16_53_1azor6p1 v16_53_1y2v1nfq4 v16_53_1y2v1nfrj", o = "v16_53_1azor6p4 v16_53_1azor6p3 v16_53_1y2v1nfr1 v16_53_1y2v1nfrh";

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

@@ -38,8 +38,8 @@ _export(exports, {
     }
 });
 /* empty css                                     */ /* empty css                                       */ var _ = {
-    backgroundColor: "var(--v16_52_13fzrua0)"
-}, v = "v16_52_13fzrua2 v16_52_13fzrua1 v16_52_1y2v1nfpm v16_52_1y2v1nffe", f = {
-    default: "v16_52_13fzrua3",
-    largeImage: "v16_52_13fzrua4"
-}, n = "v16_52_13fzrua5", e = "v16_52_13fzrua7 v16_52_13fzrua6 v16_52_1y2v1nfqq", u = "v16_52_13fzrua9 v16_52_13fzrua8 v16_52_1y2v1nfqn v16_52_1y2v1nfr3", z = "v16_52_13fzruab v16_52_13fzruaa v16_52_1y2v1nfpo", o = "v16_52_13fzruac v16_52_1y2v1nfs3", t = "v16_52_13fzruad";
+    backgroundColor: "var(--v16_53_13fzrua0)"
+}, v = "v16_53_13fzrua2 v16_53_13fzrua1 v16_53_1y2v1nfq2 v16_53_1y2v1nffu", f = {
+    default: "v16_53_13fzrua3",
+    largeImage: "v16_53_13fzrua4"
+}, n = "v16_53_13fzrua5", e = "v16_53_13fzrua7 v16_53_13fzrua6 v16_53_1y2v1nfr6", u = "v16_53_13fzrua9 v16_53_13fzrua8 v16_53_1y2v1nfr3 v16_53_1y2v1nfrj", z = "v16_53_13fzruab v16_53_13fzruaa v16_53_1y2v1nfq4", o = "v16_53_13fzruac v16_53_1y2v1nfsj", t = "v16_53_13fzruad";

package/dist/empty-state.css.d.ts

@@ -9,3 +9,4 @@ export declare const assetContainer: string;
 export declare const smallImage: string;
 export declare const border: string;
 export declare const borderOverBrand: string;
+export declare const contentContainer: string;

package/dist/fade-in.css-mistica.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "wrapper", {
         return p;
     }
 });
-/* empty css                                   */ var p = "v16_52_kq227n1";
+/* empty css                                   */ var p = "v16_53_kq227n1";

package/dist/feedback.css-mistica.js

@@ -13,7 +13,7 @@ _export(exports, {
         return g;
     },
     get backgroundBrand () {
-        return f;
+        return i;
     },
     get container () {
         return n;
@@ -44,6 +44,9 @@ _export(exports, {
     },
     get innerContainerWithButtons () {
         return x;
+    },
+    get successFeedbackContainer () {
+        return f;
     }
 });
-/* empty css                                     */ /* empty css                                    */ var v = "v16_52_gx6h6a0", e = "v16_52_gx6h6a1", r = "v16_52_gx6h6a2", n = "v16_52_gx6h6a4 v16_52_gx6h6a3 v16_52_1y2v1nfpm v16_52_1y2v1nfqq v16_52_1y2v1nfq9 v16_52_1y2v1nfps", t = "v16_52_gx6h6a5", x = "v16_52_gx6h6a6", g = "v16_52_gx6h6a7 v16_52_1y2v1nfql v16_52_1y2v1nfr1", h = "v16_52_gx6h6ab v16_52_gx6h6aa", o = "v16_52_gx6h6ac v16_52_gx6h6aa", p = "v16_52_gx6h6ad v16_52_gx6h6aa", d = "v16_52_gx6h6ae", f = "v16_52_gx6h6af";
+/* empty css                                     */ /* empty css                                    */ var v = "v16_53_gx6h6a0", e = "v16_53_gx6h6a1", r = "v16_53_gx6h6a2", n = "v16_53_gx6h6a4 v16_53_gx6h6a3 v16_53_1y2v1nfq2 v16_53_1y2v1nfr6 v16_53_1y2v1nfqp v16_53_1y2v1nfq8", t = "v16_53_gx6h6a5", x = "v16_53_gx6h6a6", g = "v16_53_gx6h6a7 v16_53_1y2v1nfr1 v16_53_1y2v1nfrh", h = "v16_53_gx6h6ab v16_53_gx6h6aa", o = "v16_53_gx6h6ac v16_53_gx6h6aa", p = "v16_53_gx6h6ad v16_53_gx6h6aa", d = "v16_53_gx6h6ae", i = "v16_53_gx6h6af", f = "v16_53_gx6h6ag";

package/dist/feedback.css.d.ts

@@ -10,3 +10,4 @@ export declare const feedbackTextAppearMedium: string;
 export declare const feedbackTextAppearSlow: string;
 export declare const feedbackData: string;
 export declare const backgroundBrand: string;
+export declare const successFeedbackContainer: string;