@telefonica/mistica 15.18.0 → 15.20.0

package/dist/navigation-bar.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { Variant } from './theme-variant-context';
 import type { TouchableProps } from './touchable';
 import type { HeadingType } from './utils/types';
 type MainNavigationBarSection = {
@@ -22,6 +23,8 @@ type MainNavigationBarPropsBase = {
     selectedIndex?: number;
     right?: React.ReactElement;
     logo?: React.ReactElement;
+    variant?: Variant;
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
     children?: undefined;
     topFixed?: boolean;
@@ -32,7 +35,9 @@ type MainNavigationBarPropsBase = {
 type MainNavigationBarProps = MainNavigationBarPropsBase;
 export declare const MainNavigationBar: React.FC<MainNavigationBarProps>;
 interface NavigationBarCommonProps {
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
+    variant?: Variant;
     onBack?: () => void;
     title?: string;
     titleAs?: HeadingType;
@@ -51,6 +56,8 @@ interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
 export declare const NavigationBar: React.FC<NavigationBarProps>;
 type FunnelNavigationBarProps = {
+    variant?: Variant;
+    /** @deprecated Use variant instead */
     isInverse?: boolean;
     logo?: React.ReactElement;
     right?: React.ReactElement;

package/dist/navigation-bar.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return pn;
+        return hn;
     },
     MainNavigationBar: function() {
-        return mn;
+        return pn;
     },
     NavigationBar: function() {
-        return un;
+        return gn;
     },
     NavigationBarAction: function() {
-        return gn;
+        return vn;
     },
     NavigationBarActionGroup: function() {
-        return hn;
+        return fn;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -179,7 +179,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const we = (param)=>{
+const De = (param)=>{
     let { isOpen: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
@@ -196,20 +196,24 @@ const we = (param)=>{
             })
         ]
     });
-}, De = 300, A = (param)=>{
-    let { children: n, topFixed: a, withBorder: t, isMenuOpen: r, isInverse: o, dataAttributes: s } = param;
-    const { isDarkMode: c } = (0, _hooks.useTheme)();
+}, Fe = 300, O = (param)=>{
+    let { children: n, topFixed: a, withBorder: t, isMenuOpen: r, variant: o, isInverse: s, dataAttributes: c } = param;
+    const { isDarkMode: d } = (0, _hooks.useTheme)(), m = o !== null && o !== void 0 ? o : s ? "inverse" : "default", p = ()=>m === "inverse" && !d || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, l = {
+        default: _skincontractcssmistica.vars.colors.background,
+        inverse: _skincontractcssmistica.vars.colors.navigationBarBackground,
+        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
+    };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)((()=>o && !c || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default)(), {
+        className: (0, _classnames.default)(p(), {
             [_navigationbarcssmistica.topFixed]: a
         }),
         style: {
-            background: o ? _skincontractcssmistica.vars.colors.navigationBarBackground : _skincontractcssmistica.vars.colors.background
+            background: l[m]
         }
-    }, (0, _dom.getPrefixedDataAttributes)(s)), {
+    }, (0, _dom.getPrefixedDataAttributes)(c)), {
         children: n
     }));
-}, v = (param)=>{
+}, N = (param)=>{
     let { right: n, children: a, desktopOnly: t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
@@ -223,102 +227,102 @@ const we = (param)=>{
             })
         ]
     });
-}, mn = (param)=>{
-    let { sections: n = [], selectedIndex: a, right: t, isInverse: r = !1, topFixed: o = !0, withBorder: s = !0, burgerMenuExtra: c, logo: l, large: p = !1 } = param;
-    const { texts: m, isDarkMode: q } = (0, _hooks.useTheme)(), [d, I] = _react.useState(!1), [O, h] = _react.useState("closed"), R = (0, _hooks.useAriaId)(), J = q ? 1 : 0.2, { isTabletOrSmaller: K } = (0, _hooks.useScreenSize)(), y = (0, _modalcontextprovider.useSetModalState)();
-    l = l !== null && l !== void 0 ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+}, pn = (param)=>{
+    let { sections: n = [], selectedIndex: a, right: t, variant: r, isInverse: o = !1, topFixed: s = !0, withBorder: c = !0, burgerMenuExtra: d, logo: m, large: p = !1 } = param;
+    const { texts: l, isDarkMode: R } = (0, _hooks.useTheme)(), [u, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = (0, _hooks.useAriaId)(), K = R ? 1 : 0.2, { isTabletOrSmaller: Q } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), X = m || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    });
-    const E = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
+    }), V = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
             className: _navigationbarcssmistica.desktopOnly,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                 space: 32,
-                children: n.map((_param, g)=>{
-                    var { title: B } = _param, M = _object_without_properties(_param, [
+                children: n.map((_param, f)=>{
+                    var { title: M } = _param, k = _object_without_properties(_param, [
                         "title"
                     ]);
-                    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, M), {
-                        key: g,
+                    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, k), {
+                        key: f,
                         className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                            [_navigationbarcssmistica.selectedSectionVariantes[r ? "inverse" : "default"]]: g === a
-                        }, _navigationbarcssmistica.textWrapperVariants[r ? "inverse" : "default"])
+                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" || o ? "inverse" : "default"]]: f === a
+                        }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" || o ? "inverse" : "default"])
                     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
                         color: "inherit",
-                        children: B
+                        children: M
                     }));
                 })
             })
-        }), b = p && n.length > 0, Q = ()=>{
-        I(!0), y({
+        }), B = p && n.length > 0, Y = ()=>{
+        y(!0), w({
             isModalOpen: !0
         });
-    }, L = ()=>{
-        I(!1), y({
+    }, D = ()=>{
+        y(!1), w({
             isModalOpen: !1
         });
-    }, w = O !== "open", D = n.length > 1, V = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        isInverse: r,
+    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        variant: r,
+        isInverse: o,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(A, {
-                topFixed: o,
-                withBorder: s,
-                isMenuOpen: d,
-                isInverse: r,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+                topFixed: s,
+                withBorder: c,
+                isMenuOpen: u,
+                variant: r,
+                isInverse: o,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                             right: t,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: _navigationbarcssmistica.mainNavbarContent,
                                 children: [
-                                    D && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                                    G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                                         className: _navigationbarcssmistica.burgerMenuButton,
                                         "aria-live": "polite",
-                                        "aria-label": d ? m.closeNavigationMenu : m.openNavigationMenu,
-                                        "aria-expanded": d,
-                                        "aria-controls": R,
-                                        onPress: d ? L : Q,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(we, {
-                                            isOpen: d
+                                        "aria-label": u ? l.closeNavigationMenu : l.openNavigationMenu,
+                                        "aria-expanded": u,
+                                        "aria-controls": L,
+                                        onPress: u ? D : Y,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(De, {
+                                            isOpen: u
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _navigationbarcssmistica.logoContainer,
-                                        children: l
+                                        children: X
                                     }),
-                                    !b && E()
+                                    !B && V()
                                 ]
                             })
                         }),
-                        b && /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
+                        B && /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                             desktopOnly: !0,
-                            children: E()
+                            children: V()
                         })
                     ]
                 })
             }),
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: b ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: B ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
-    return K ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return Q ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                disabled: w,
+                disabled: F,
                 group: "burger-menu-lock",
-                children: V
+                children: H
             }),
-            D && /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+            G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                    disabled: w,
+                    disabled: F,
                     group: "burger-menu-lock",
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
                         onEntering: ()=>{
@@ -333,18 +337,18 @@ const we = (param)=>{
                         onExited: ()=>{
                             h("closed");
                         },
-                        in: d,
-                        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : De,
+                        in: u,
+                        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Fe,
                         unmountOnExit: !0,
-                        children: (B)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: (M)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[B]),
+                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[M]),
                                     style: {
-                                        boxShadow: O !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
+                                        boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${K})` : "none"
                                     },
-                                    id: R,
+                                    id: L,
                                     onClick: ()=>{
-                                        L();
+                                        D();
                                     },
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -352,12 +356,12 @@ const we = (param)=>{
                                             children: [
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                        children: n.map((M, g)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, M), g))
+                                                        children: n.map((k, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, k), f))
                                                     })
                                                 }),
-                                                c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                                     paddingBottom: 16,
-                                                    children: c
+                                                    children: d
                                                 })
                                             ]
                                         })
@@ -368,10 +372,10 @@ const we = (param)=>{
                 })
             })
         ]
-    }) : V;
-}, un = (param)=>{
-    let { onBack: n, title: a, titleAs: t, right: r, isInverse: o = !1, topFixed: s = !0, paddingX: c = 0, withBorder: l = !0 } = param;
-    const { texts: p } = (0, _hooks.useTheme)(), m = /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
+    }) : H;
+}, gn = (param)=>{
+    let { onBack: n, title: a, titleAs: t, right: r, variant: o, isInverse: s = !1, topFixed: c = !0, paddingX: d = 0, withBorder: m = !0 } = param;
+    const { texts: p } = (0, _hooks.useTheme)(), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
         right: r,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 24,
@@ -394,65 +398,69 @@ const we = (param)=>{
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        isInverse: o,
+        variant: o,
+        isInverse: s,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(A, {
-                topFixed: s,
-                withBorder: l,
-                isInverse: o,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+                topFixed: c,
+                withBorder: m,
+                variant: o,
+                isInverse: s,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: m
+                children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: l
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _sprinklescssmistica.sprinkles)({
                         width: "100%"
                     }),
                     style: {
-                        padding: `0 ${c}px`
+                        padding: `0 ${d}px`
                     },
-                    children: m
+                    children: l
                 })
             }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, pn = (param)=>{
-    let { logo: n, right: a, isInverse: t = !1, topFixed: r = !0, withBorder: o = !0 } = param;
+}, hn = (param)=>{
+    let { logo: n, right: a, variant: t, isInverse: r = !1, topFixed: o = !0, withBorder: s = !0 } = param;
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
     }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        isInverse: t,
+        variant: t,
+        isInverse: r,
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(A, {
-                topFixed: r,
-                withBorder: o,
-                isInverse: t,
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
+                topFixed: o,
+                withBorder: s,
+                variant: t,
+                isInverse: r,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                             right: a,
                             children: n
                         })
                     })
                 })
             }),
-            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, hn = (param)=>{
+}, fn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -463,7 +471,7 @@ const we = (param)=>{
             children: n
         })
     });
-}, gn = (_param)=>{
+}, vn = (_param)=>{
     var { children: n } = _param, a = _object_without_properties(_param, [
         "children"
     ]);

package/dist/navigation-breadcrumbs.d.ts

@@ -9,6 +9,7 @@ export type NavigationBreadcrumbsProps = {
     breadcrumbs: ReadonlyArray<{
         readonly title: string;
         readonly url: string;
+        onNavigate?: () => void;
     }>;
     children?: void;
     dataAttributes?: DataAttributes;

package/dist/navigation-breadcrumbs.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return D;
+        return S;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -73,7 +73,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const N = " / ", b = (param)=>{
+const b = " / ", B = (param)=>{
     let { title: s, breadcrumbs: n, dataAttributes: c, "aria-label": m = "Breadcrumb" } = param;
     const i = (0, _themevariantcontext.useIsInverseVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", _object_spread_props(_object_spread({
@@ -82,8 +82,8 @@ const N = " / ", b = (param)=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("ol", {
             className: _navigationbreadcrumbscssmistica.list,
             children: [
-                n.map((param, u)=>{
-                    let { title: a, url: d } = param;
+                n.map((param, p)=>{
+                    let { title: a, url: d, onNavigate: u } = param;
                     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("li", {
                         className: _navigationbreadcrumbscssmistica.listItem,
                         children: [
@@ -95,6 +95,7 @@ const N = " / ", b = (param)=>{
                                         color: i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textPrimary
                                     },
                                     className: _navigationbreadcrumbscssmistica.link,
+                                    onNavigate: u,
                                     children: a
                                 })
                             }),
@@ -102,11 +103,11 @@ const N = " / ", b = (param)=>{
                                 role: "presentation",
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                                     regular: !0,
-                                    children: N
+                                    children: b
                                 })
                             })
                         ]
-                    }, u);
+                    }, p);
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("li", {
                     className: _navigationbreadcrumbscssmistica.listItem,
@@ -127,4 +128,4 @@ const N = " / ", b = (param)=>{
             ]
         })
     }));
-}, D = b;
+}, S = B;

package/dist/package-version.js

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

package/dist/text.d.ts

@@ -21,6 +21,7 @@ export interface TextPresetProps {
     as?: React.ComponentType<any> | string;
     role?: string;
     'aria-level'?: number;
+    'aria-label'?: string;
     dataAttributes?: DataAttributes;
     forceMobileSizes?: boolean;
     textShadow?: string;