@telefonica/mistica 16.1.1 → 16.3.0

package/dist/navigation-bar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return Nn;
+        return fn;
     },
     MainNavigationBar: function() {
-        return fn;
+        return hn;
     },
     NavigationBar: function() {
         return vn;
@@ -23,7 +23,7 @@ _export(exports, {
         return Bn;
     },
     NavigationBarActionGroup: function() {
-        return bn;
+        return Nn;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -49,7 +49,6 @@ const _modalcontextprovider = require("./modal-context-provider.js");
 const _logo = require("./logo.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _navigationbarcssmistica = require("./navigation-bar.css-mistica.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
@@ -215,7 +214,7 @@ const Ge = (param)=>{
     }, (0, _dom.getPrefixedDataAttributes)(s)), {
         children: n
     }));
-}, B = (param)=>{
+}, b = (param)=>{
     let { right: n, children: o, desktopOnly: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
@@ -229,9 +228,9 @@ const Ge = (param)=>{
             })
         ]
     });
-}, fn = (param)=>{
+}, hn = (param)=>{
     let { sections: n = [], selectedIndex: o, right: t, variant: r = "default", topFixed: a = !0, withBorder: s = !0, burgerMenuExtra: c, logo: d, large: m = !1 } = param;
-    const { texts: u, isDarkMode: g, t: R } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), K = g ? 1 : 0.2, { isTabletOrSmaller: Q } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), X = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+    const { texts: u, isDarkMode: g, t: R } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), J = g ? 1 : 0.2, { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), Q = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
@@ -240,23 +239,23 @@ const Ge = (param)=>{
             className: _navigationbarcssmistica.desktopOnly,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                 space: 32,
-                children: n.map((_param, f)=>{
-                    var { title: I } = _param, x = _object_without_properties(_param, [
+                children: n.map((_param, v)=>{
+                    var { title: k } = _param, x = _object_without_properties(_param, [
                         "title"
                     ]);
                     return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, x), {
-                        key: f,
+                        key: v,
                         className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: f === o
+                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: v === o
                         }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" ? "inverse" : "default"])
                     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: I
+                        children: k
                     }));
                 })
             })
-        }), k = m && n.length > 0, Y = ()=>{
+        }), I = m && n.length > 0, X = ()=>{
         y(!0), w({
             isModalOpen: !0
         });
@@ -277,7 +276,7 @@ const Ge = (param)=>{
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             right: t,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: _navigationbarcssmistica.mainNavbarContent,
@@ -288,20 +287,20 @@ const Ge = (param)=>{
                                         "aria-label": l ? u.closeNavigationMenu || R(_texttokens.closeNavigationMenu) : u.openNavigationMenu || R(_texttokens.openNavigationMenu),
                                         "aria-expanded": l,
                                         "aria-controls": L,
-                                        onPress: l ? V : Y,
+                                        onPress: l ? V : X,
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
                                             isOpen: l
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _navigationbarcssmistica.logoContainer,
-                                        children: X
+                                        children: Q
                                     }),
-                                    !k && D()
+                                    !I && D()
                                 ]
                             })
                         }),
-                        k && /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        I && /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             desktopOnly: !0,
                             children: D()
                         })
@@ -309,11 +308,11 @@ const Ge = (param)=>{
                 })
             }),
             a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: k ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+                className: I ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
-    return Q ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return K ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
                 disabled: F,
@@ -340,11 +339,11 @@ const Ge = (param)=>{
                         in: l,
                         timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : He,
                         unmountOnExit: !0,
-                        children: (I)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: (k)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[I]),
+                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[k]),
                                     style: {
-                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${K})` : "none"
+                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
                                     },
                                     id: L,
                                     onClick: ()=>{
@@ -356,7 +355,7 @@ const Ge = (param)=>{
                                             children: [
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                        children: n.map((x, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), f))
+                                                        children: n.map((x, v)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), v))
                                                     })
                                                 }),
                                                 c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -375,7 +374,7 @@ const Ge = (param)=>{
     }) : H;
 }, vn = (param)=>{
     let { onBack: n, title: o, titleAs: t, right: r, variant: a = "default", topFixed: s = !0, paddingX: c = 0, withBorder: d = !0 } = param;
-    const { texts: m, t: u } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+    const { texts: m, t: u } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
         right: r,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 24,
@@ -410,11 +409,9 @@ const Ge = (param)=>{
                 children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: g
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _sprinklescssmistica.sprinkles)({
-                        width: "100%"
-                    }),
                     style: {
-                        padding: `0 ${c}px`
+                        padding: `0 ${c}px`,
+                        width: "100%"
                     },
                     children: g
                 })
@@ -424,7 +421,7 @@ const Ge = (param)=>{
             })
         ]
     });
-}, Nn = (param)=>{
+}, fn = (param)=>{
     let { logo: n, right: o, variant: t = "default", topFixed: r = !0, withBorder: a = !0 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
@@ -444,7 +441,7 @@ const Ge = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {
                             right: o,
                             children: n
                         })
@@ -456,7 +453,7 @@ const Ge = (param)=>{
             })
         ]
     });
-}, bn = (param)=>{
+}, Nn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -473,11 +470,7 @@ const Ge = (param)=>{
     ]);
     const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, o), {
-        className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
-            border: "none",
-            background: "transparent",
-            padding: 0
-        }), _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
+        className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarAction, _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "16.1.1";
+const o = "16.3.0";

package/dist/popover.d.ts

@@ -4,6 +4,7 @@ type Position = 'top' | 'bottom' | 'left' | 'right';
 type Props = {
     description?: string;
     target: React.ReactNode;
+    targetStyle?: React.CSSProperties;
     title?: string;
     asset?: React.ReactNode;
     onClose?: () => void;

package/dist/popover.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return N;
+        return A;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -14,7 +14,6 @@ const _tooltip = require("./tooltip.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _text = require("./text.js");
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _popovercssmistica = require("./popover.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _iconbuttoncssmistica = require("./icon-button.css-mistica.js");
@@ -78,8 +77,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const T = (_param)=>{
-    var { open: a, extra: m, children: c, onClose: i = ()=>{}, closeButtonLabel: l, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, f = _object_without_properties(_param, [
+const S = (_param)=>{
+    var { open: a, extra: c, children: i, onClose: l = ()=>{}, closeButtonLabel: m, dataAttributes: p, trackingEvent: s, title: o, description: e, asset: n } = _param, d = _object_without_properties(_param, [
         "open",
         "extra",
         "children",
@@ -92,7 +91,7 @@ const T = (_param)=>{
         "asset"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltip.BaseTooltip, _object_spread({
-        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
+        content: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _popovercssmistica.content,
             children: [
                 (o || e || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -120,18 +119,18 @@ const T = (_param)=>{
                         ]
                     })
                 }),
-                m !== null && m !== void 0 ? m : c
+                c !== null && c !== void 0 ? c : i
             ]
         }),
         centerContent: !1,
         open: a,
         hasPointerInteractionOnly: !0,
         delay: !1,
-        onClose: i,
-        closeButtonLabel: l,
+        onClose: l,
+        closeButtonLabel: m,
         trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
         }, p)
-    }, f));
-}, N = T;
+    }, d));
+}, A = S;

package/dist/sheet-common.js

@@ -11,7 +11,7 @@ function _export(target, all) {
 }
 _export(exports, {
     SheetBody: function() {
-        return xe;
+        return we;
     },
     default: function() {
         return Ae;
@@ -284,6 +284,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
                                     style: {
                                         paddingBottom: _css.safeAreaInsetBottom
                                     },
+                                    tabIndex: -1,
                                     children: [
                                         typeof o == "function" ? o({
                                             closeModal: s,
@@ -313,7 +314,7 @@ const ce = process.env.NODE_ENV === "test" ? 0 : _sheetcommoncssmistica.transiti
     mobile: _responsivelayoutcssmistica.MOBILE_SIDE_MARGIN,
     tablet: _responsivelayoutcssmistica.TABLET_SIDE_MARGIN,
     desktop: _responsivelayoutcssmistica.SMALL_DESKTOP_SIDE_MARGIN
-}, xe = (param)=>{
+}, we = (param)=>{
     let { title: n, subtitle: o, description: i, modalTitleId: l, button: m, secondaryButton: v, link: r, children: c } = param;
     const d = _react.useRef(null), a = _react.useRef(null), f = _react.useRef(null);
     _react.useEffect(()=>{

package/dist/skeleton-base.js

@@ -6,31 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return v;
+        return k;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _skeletonscssmistica = require("./skeletons.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-const c = (param)=>{
-    let { width: e = "100%", height: o = 8, radius: s = _skincontractcssmistica.vars.borderRadii.container, className: a, noBorderRadius: n = !1 } = param;
-    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+const l = (param)=>{
+    let { width: r = "100%", height: s = 8, radius: a = _skincontractcssmistica.vars.borderRadii.container, className: o, noBorderRadius: t = !1 } = param;
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        className: (0, _classnames.default)(a, (0, _sprinklescssmistica.sprinkles)({
-            background: t ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton
-        })),
+        className: (0, _classnames.default)(o, i ? _skeletonscssmistica.background.inverse : _skeletonscssmistica.background.default),
         style: {
-            borderRadius: n ? 0 : s,
-            width: e,
-            height: o
+            borderRadius: t ? 0 : a,
+            width: r,
+            height: s
         },
         "aria-hidden": !0
     });
-}, v = c;
+}, k = l;

package/dist/skeletons.css-mistica.js

@@ -10,18 +10,24 @@ function _export(target, all) {
 }
 _export(exports, {
     animation: function() {
-        return i;
+        return r;
+    },
+    background: function() {
+        return a;
     },
     circle: function() {
-        return o;
+        return f;
     },
     line: function() {
-        return r;
+        return i;
     },
     row: function() {
-        return f;
+        return o;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./skeletons.css.ts.vanilla.css-mistica.js");
-var i = "zopolw2 _1y2v1nfhm", o = "_1y2v1nfi2 _1y2v1nfi4", r = "zopolw6 _1y2v1nfi3", f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";
+var r = "zopolw6 _1y2v1nfhm", a = {
+    default: "_1y2v1nf42",
+    inverse: "_1y2v1nf43"
+}, f = "_1y2v1nfi2 _1y2v1nfi4", i = "zopolwa _1y2v1nfi3", o = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht";

package/dist/skeletons.css.d.ts

@@ -1,3 +1,4 @@
+export declare const background: Record<"inverse" | "default", string>;
 export declare const animation: string;
 export declare const row: string;
 export declare const circle: string;

package/dist/snackbar.css-mistica.js

@@ -13,45 +13,51 @@ _export(exports, {
         return f;
     },
     button: function() {
-        return r;
-    },
-    content: function() {
         return _;
     },
-    dismissButton: function() {
+    buttonTouchable: function() {
         return y;
     },
+    contentWithLongButton: function() {
+        return o;
+    },
+    contentWithoutLongButton: function() {
+        return r;
+    },
+    dismissButton: function() {
+        return t;
+    },
     dismissIcon: function() {
         return a;
     },
     longButton: function() {
-        return o;
+        return h;
     },
     snackbar: function() {
         return b;
     },
     snackbarContainer: function() {
-        return t;
+        return e;
     },
     snackbarOpen: function() {
-        return h;
+        return i;
     },
     wrapper: function() {
-        return e;
+        return p;
     },
     wrapperCritical: function() {
-        return p;
+        return k;
     },
     wrapperInfo: function() {
-        return i;
+        return c;
     },
     wrapperOpen: function() {
-        return k;
+        return j;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./snackbar.css.ts.vanilla.css-mistica.js");
-var f = 300, r = "o7bjb0c", _ = "_1y2v1nfhk _1y2v1nfhw", y = {
-    centered: "o7bjb0g _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
+var f = 300, _ = "o7bjb0g", y = "_1y2v1nf7j _1y2v1nf8s _1y2v1nfa4 _1y2v1nfbd _1y2v1nfk2 _1y2v1nf7c", o = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhq", r = "_1y2v1nfhk _1y2v1nfhw _1y2v1nfhp _1y2v1nfhz", t = {
+    centered: "o7bjb0l _1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo",
     topRight: "_1y2v1nfhk _1y2v1nfhf _1y2v1nfhz _1y2v1nfht _1y2v1nflo _1y2v1nfku"
-}, a = "o7bjb0j _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", o = "o7bjb0d", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", t = "o7bjb03 _1y2v1nfhe", h = "o7bjb04", e = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", p = "_1y2v1nf5e", i = "_1y2v1nf5f", k = "o7bjb09";
+}, a = "o7bjb0o _1y2v1nfih _1y2v1nfix _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfk3", h = "o7bjb0h", b = "o7bjb01 _1y2v1nfi7 _1y2v1nfhk _1y2v1nfht", e = "o7bjb03 _1y2v1nfhe", i = "o7bjb04", p = "o7bjb06 _1y2v1nfhg _1y2v1nfkd", k = "_1y2v1nf5e", c = "_1y2v1nf5f", j = "o7bjb09";

package/dist/snackbar.css.d.ts

@@ -6,9 +6,11 @@ export declare const wrapper: string;
 export declare const wrapperCritical: string;
 export declare const wrapperInfo: string;
 export declare const wrapperOpen: string;
-export declare const content: string;
+export declare const contentWithLongButton: string;
+export declare const contentWithoutLongButton: string;
 export declare const textContainer: string;
 export declare const button: string;
 export declare const longButton: string;
+export declare const buttonTouchable: string;
 export declare const dismissButton: Record<"centered" | "topRight", string>;
 export declare const dismissIcon: string;