@telefonica/mistica 15.17.0 → 15.19.0

package/dist-es/navigation-bar.js

@@ -78,177 +78,181 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as i, jsx as e, Fragment as F } from "react/jsx-runtime";
-import * as x from "react";
-import { createElement as X } from "react";
-import { Transition as Y } from "react-transition-group";
-import u from "classnames";
-import f from "./responsive-layout.js";
-import N from "./inline.js";
-import Z, { BaseTouchable as P } from "./touchable.js";
-import { Text3 as _, Text2 as ee } from "./text.js";
-import { useTheme as C, useAriaId as ne, useScreenSize as re } from "./hooks.js";
-import te from "./generated/mistica-icons/icon-menu-regular.js";
-import ae from "./generated/mistica-icons/icon-close-regular.js";
-import oe from "./generated/mistica-icons/icon-chevron-left-regular.js";
-import { IconButton as ie } from "./icon-button.js";
-import se from "./negative-box.js";
-import { RowList as ce, Row as le } from "./list.js";
-import { ThemeVariant as S, useIsInverseVariant as de } from "./theme-variant-context.js";
-import G from "./focus-trap.js";
-import { Portal as me } from "./portal.js";
-import ue from "./grid-layout.js";
-import { useSetModalState as pe } from "./modal-context-provider.js";
-import { Logo as z } from "./logo.js";
-import { vars as H } from "./skins/skin-contract.css-mistica.js";
-import { mainNavbarContent as he, burgerMenuButton as ge, logoContainer as fe, spacerLarge as ve, spacer as T, burgerMenu as Ne, burgerMenuTransition as be, lineHeightFix as U, textWrapperVariants as j, burgerIconContainer as Be, iconCloseOpen as Me, iconCloseHidden as ke, iconMenuHidden as xe, iconMenuOpen as Ce, topFixed as Se, navigationBarContent as Te, desktopOnly as $, navigationBarContentRight as Ae, section as Ie, selectedSectionVariantes as Oe, navbarBorderColorVariants as k } from "./navigation-bar.css-mistica.js";
-import { sprinkles as W } from "./sprinkles.css-mistica.js";
-import { getPrefixedDataAttributes as Re } from "./utils/dom.js";
-import ye from "./stack.js";
-import Ee from "./box.js";
-import { isRunningAcceptanceTest as Le } from "./utils/platform.js";
-const we = (param)=>{
+import { jsxs as i, jsx as e, Fragment as P } from "react/jsx-runtime";
+import * as C from "react";
+import { createElement as Z } from "react";
+import { Transition as ee } from "react-transition-group";
+import g from "classnames";
+import v from "./responsive-layout.js";
+import b from "./inline.js";
+import ne, { BaseTouchable as z } from "./touchable.js";
+import { Text3 as U, Text2 as re } from "./text.js";
+import { useTheme as I, useAriaId as te, useScreenSize as oe } from "./hooks.js";
+import ae from "./generated/mistica-icons/icon-menu-regular.js";
+import ie from "./generated/mistica-icons/icon-close-regular.js";
+import se from "./generated/mistica-icons/icon-chevron-left-regular.js";
+import { IconButton as ce } from "./icon-button.js";
+import le from "./negative-box.js";
+import { RowList as de, Row as me } from "./list.js";
+import { ThemeVariant as S, useIsInverseVariant as ue } from "./theme-variant-context.js";
+import _ from "./focus-trap.js";
+import { Portal as pe } from "./portal.js";
+import ge from "./grid-layout.js";
+import { useSetModalState as he } from "./modal-context-provider.js";
+import { Logo as j } from "./logo.js";
+import { vars as x } from "./skins/skin-contract.css-mistica.js";
+import { mainNavbarContent as fe, burgerMenuButton as ve, logoContainer as Ne, spacerLarge as be, spacer as T, burgerMenu as Be, burgerMenuTransition as Me, lineHeightFix as $, textWrapperVariants as W, burgerIconContainer as ke, iconCloseOpen as xe, iconCloseHidden as Ae, iconMenuHidden as Ce, iconMenuOpen as Ie, topFixed as Se, navigationBarContent as Te, desktopOnly as q, navigationBarContentRight as Oe, section as Re, selectedSectionVariantes as ye, navbarBorderColorVariants as A } from "./navigation-bar.css-mistica.js";
+import { sprinkles as J } from "./sprinkles.css-mistica.js";
+import { getPrefixedDataAttributes as Ee } from "./utils/dom.js";
+import Le from "./stack.js";
+import we from "./box.js";
+import { isRunningAcceptanceTest as Ve } from "./utils/platform.js";
+const De = (param)=>{
     let { isOpen: n } = param;
     return /* @__PURE__ */ i("div", {
-        className: Be,
+        className: ke,
         role: "presentation",
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ e("div", {
-                className: n ? Me : ke,
-                children: /* @__PURE__ */ e(ae, {})
+                className: n ? xe : Ae,
+                children: /* @__PURE__ */ e(ie, {})
             }),
             /* @__PURE__ */ e("div", {
-                className: n ? xe : Ce,
-                children: /* @__PURE__ */ e(te, {})
+                className: n ? Ce : Ie,
+                children: /* @__PURE__ */ e(ae, {})
             })
         ]
     });
-}, De = 300, A = (param)=>{
-    let { children: n, topFixed: a, withBorder: t, isMenuOpen: r, isInverse: o, dataAttributes: s } = param;
-    const { isDarkMode: c } = C();
+}, Fe = 300, O = (param)=>{
+    let { children: n, topFixed: a, withBorder: t, isMenuOpen: r, variant: o, isInverse: s, dataAttributes: c } = param;
+    const { isDarkMode: d } = I(), m = o !== null && o !== void 0 ? o : s ? "inverse" : "default", p = ()=>m === "inverse" && !d || !t ? A.noBorder : r ? A.menuOpen : A.default, l = {
+        default: x.colors.background,
+        inverse: x.colors.navigationBarBackground,
+        alternative: x.colors.backgroundAlternative
+    };
     return /* @__PURE__ */ e("header", _object_spread_props(_object_spread({
-        className: u((()=>o && !c || !t ? k.noBorder : r ? k.menuOpen : k.default)(), {
+        className: g(p(), {
             [Se]: a
         }),
         style: {
-            background: o ? H.colors.navigationBarBackground : H.colors.background
+            background: l[m]
         }
-    }, Re(s)), {
+    }, Ee(c)), {
         children: n
     }));
-}, v = (param)=>{
+}, N = (param)=>{
     let { right: n, children: a, desktopOnly: t } = param;
     return /* @__PURE__ */ i("div", {
-        className: u(Te, {
-            [$]: t
+        className: g(Te, {
+            [q]: t
         }),
         children: [
             a,
             n && /* @__PURE__ */ e("div", {
-                className: Ae,
+                className: Oe,
                 children: n
             })
         ]
     });
-}, 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 } = C(), [d, I] = x.useState(!1), [O, h] = x.useState("closed"), R = ne(), J = q ? 1 : 0.2, { isTabletOrSmaller: K } = re(), y = pe();
-    l = l !== null && l !== void 0 ? l : /* @__PURE__ */ e(z, {
+}, 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 } = I(), [u, y] = C.useState(!1), [E, h] = C.useState("closed"), L = te(), K = R ? 1 : 0.2, { isTabletOrSmaller: Q } = oe(), w = he(), X = m || /* @__PURE__ */ e(j, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    });
-    const E = ()=>/* @__PURE__ */ e("nav", {
-            className: $,
-            children: /* @__PURE__ */ e(N, {
+    }), V = ()=>/* @__PURE__ */ e("nav", {
+            className: q,
+            children: /* @__PURE__ */ e(b, {
                 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__*/ X(P, _object_spread_props(_object_spread({}, M), {
-                        key: g,
-                        className: u(Ie, {
-                            [Oe[r ? "inverse" : "default"]]: g === a
-                        }, j[r ? "inverse" : "default"])
-                    }), /* @__PURE__ */ e(_, {
+                    return /* @__PURE__ */ /*#__PURE__*/ Z(z, _object_spread_props(_object_spread({}, k), {
+                        key: f,
+                        className: g(Re, {
+                            [ye[r === "inverse" || o ? "inverse" : "default"]]: f === a
+                        }, W[r === "inverse" || o ? "inverse" : "default"])
+                    }), /* @__PURE__ */ e(U, {
                         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__ */ i(S, {
-        isInverse: r,
+    }, F = E !== "open", G = n.length > 1, H = /* @__PURE__ */ i(S, {
+        variant: r,
+        isInverse: o,
         children: [
-            /* @__PURE__ */ e(A, {
-                topFixed: o,
-                withBorder: s,
-                isMenuOpen: d,
-                isInverse: r,
+            /* @__PURE__ */ e(O, {
+                topFixed: s,
+                withBorder: c,
+                isMenuOpen: u,
+                variant: r,
+                isInverse: o,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
-                children: /* @__PURE__ */ i(f, {
+                children: /* @__PURE__ */ i(v, {
                     children: [
-                        /* @__PURE__ */ e(v, {
+                        /* @__PURE__ */ e(N, {
                             right: t,
                             children: /* @__PURE__ */ i("div", {
-                                className: he,
+                                className: fe,
                                 children: [
-                                    D && /* @__PURE__ */ e(Z, {
-                                        className: ge,
+                                    G && /* @__PURE__ */ e(ne, {
+                                        className: ve,
                                         "aria-live": "polite",
-                                        "aria-label": d ? m.closeNavigationMenu : m.openNavigationMenu,
-                                        "aria-expanded": d,
-                                        "aria-controls": R,
-                                        onPress: d ? L : Q,
-                                        children: /* @__PURE__ */ e(we, {
-                                            isOpen: d
+                                        "aria-label": u ? l.closeNavigationMenu : l.openNavigationMenu,
+                                        "aria-expanded": u,
+                                        "aria-controls": L,
+                                        onPress: u ? D : Y,
+                                        children: /* @__PURE__ */ e(De, {
+                                            isOpen: u
                                         })
                                     }),
                                     /* @__PURE__ */ e("div", {
-                                        className: fe,
-                                        children: l
+                                        className: Ne,
+                                        children: X
                                     }),
-                                    !b && E()
+                                    !B && V()
                                 ]
                             })
                         }),
-                        b && /* @__PURE__ */ e(v, {
+                        B && /* @__PURE__ */ e(N, {
                             desktopOnly: !0,
-                            children: E()
+                            children: V()
                         })
                     ]
                 })
             }),
-            o && /* @__PURE__ */ e("div", {
-                className: b ? ve : T
+            s && /* @__PURE__ */ e("div", {
+                className: B ? be : T
             })
         ]
     });
-    return K ? /* @__PURE__ */ i(F, {
+    return Q ? /* @__PURE__ */ i(P, {
         children: [
-            /* @__PURE__ */ e(G, {
-                disabled: w,
+            /* @__PURE__ */ e(_, {
+                disabled: F,
                 group: "burger-menu-lock",
-                children: V
+                children: H
             }),
-            D && /* @__PURE__ */ e(me, {
-                children: /* @__PURE__ */ e(G, {
-                    disabled: w,
+            G && /* @__PURE__ */ e(pe, {
+                children: /* @__PURE__ */ e(_, {
+                    disabled: F,
                     group: "burger-menu-lock",
-                    children: /* @__PURE__ */ e(Y, {
+                    children: /* @__PURE__ */ e(ee, {
                         onEntering: ()=>{
                             h("opening");
                         },
@@ -261,31 +265,31 @@ const we = (param)=>{
                         onExited: ()=>{
                             h("closed");
                         },
-                        in: d,
-                        timeout: Le() ? 0 : De,
+                        in: u,
+                        timeout: Ve() ? 0 : Fe,
                         unmountOnExit: !0,
-                        children: (B)=>/* @__PURE__ */ e(F, {
+                        children: (M)=>/* @__PURE__ */ e(P, {
                                 children: /* @__PURE__ */ e("nav", {
-                                    className: u(Ne, be[B]),
+                                    className: g(Be, Me[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__ */ e(f, {
-                                        children: /* @__PURE__ */ i(ye, {
+                                    children: /* @__PURE__ */ e(v, {
+                                        children: /* @__PURE__ */ i(Le, {
                                             space: 16,
                                             children: [
-                                                /* @__PURE__ */ e(se, {
-                                                    children: /* @__PURE__ */ e(ce, {
-                                                        children: n.map((M, g)=>/* @__PURE__ */ e(le, _object_spread({}, M), g))
+                                                /* @__PURE__ */ e(le, {
+                                                    children: /* @__PURE__ */ e(de, {
+                                                        children: n.map((k, f)=>/* @__PURE__ */ e(me, _object_spread({}, k), f))
                                                     })
                                                 }),
-                                                c && /* @__PURE__ */ e(Ee, {
+                                                d && /* @__PURE__ */ e(we, {
                                                     paddingBottom: 16,
-                                                    children: c
+                                                    children: d
                                                 })
                                             ]
                                         })
@@ -296,23 +300,23 @@ 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 } = C(), m = /* @__PURE__ */ e(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 } = I(), l = /* @__PURE__ */ e(N, {
         right: r,
-        children: /* @__PURE__ */ i(N, {
+        children: /* @__PURE__ */ i(b, {
             space: 24,
             alignItems: "center",
             children: [
-                n && /* @__PURE__ */ e(ie, {
+                n && /* @__PURE__ */ e(ce, {
                     "aria-label": p.backNavigationBar,
                     onPress: n,
-                    Icon: oe,
+                    Icon: se,
                     bleedLeft: !0,
                     bleedRight: !0
                 }),
-                /* @__PURE__ */ e(_, {
+                /* @__PURE__ */ e(U, {
                     regular: !0,
                     truncate: !0,
                     as: t,
@@ -322,93 +326,97 @@ const we = (param)=>{
         })
     });
     return /* @__PURE__ */ i(S, {
-        isInverse: o,
+        variant: o,
+        isInverse: s,
         children: [
-            /* @__PURE__ */ e(A, {
-                topFixed: s,
-                withBorder: l,
-                isInverse: o,
+            /* @__PURE__ */ e(O, {
+                topFixed: c,
+                withBorder: m,
+                variant: o,
+                isInverse: s,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: s ? /* @__PURE__ */ e(f, {
-                    children: m
+                children: c ? /* @__PURE__ */ e(v, {
+                    children: l
                 }) : /* @__PURE__ */ e("div", {
-                    className: W({
+                    className: J({
                         width: "100%"
                     }),
                     style: {
-                        padding: `0 ${c}px`
+                        padding: `0 ${d}px`
                     },
-                    children: m
+                    children: l
                 })
             }),
-            s && /* @__PURE__ */ e("div", {
+            c && /* @__PURE__ */ e("div", {
                 className: T
             })
         ]
     });
-}, pn = (param)=>{
-    let { logo: n, right: a, isInverse: t = !1, topFixed: r = !0, withBorder: o = !0 } = param;
-    return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ e(z, {
+}, 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__ */ e(j, {
         size: {
             mobile: 40,
             desktop: 48
         }
     }), /* @__PURE__ */ i(S, {
-        isInverse: t,
+        variant: t,
+        isInverse: r,
         children: [
-            /* @__PURE__ */ e(A, {
-                topFixed: r,
-                withBorder: o,
-                isInverse: t,
+            /* @__PURE__ */ e(O, {
+                topFixed: o,
+                withBorder: s,
+                variant: t,
+                isInverse: r,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
-                children: /* @__PURE__ */ e(f, {
-                    children: /* @__PURE__ */ e(ue, {
+                children: /* @__PURE__ */ e(v, {
+                    children: /* @__PURE__ */ e(ge, {
                         template: "10",
-                        children: /* @__PURE__ */ e(v, {
+                        children: /* @__PURE__ */ e(N, {
                             right: a,
                             children: n
                         })
                     })
                 })
             }),
-            r && /* @__PURE__ */ e("div", {
+            o && /* @__PURE__ */ e("div", {
                 className: T
             })
         ]
     });
-}, hn = (param)=>{
+}, fn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ e("div", {
-        className: U,
+        className: $,
         "data-component-name": "NavigationBarActionGroup",
-        children: /* @__PURE__ */ e(N, {
+        children: /* @__PURE__ */ e(b, {
             space: 24,
             alignItems: "center",
             children: n
         })
     });
-}, gn = (_param)=>{
+}, vn = (_param)=>{
     var { children: n } = _param, a = _object_without_properties(_param, [
         "children"
     ]);
-    const t = de();
-    return /* @__PURE__ */ e(P, _object_spread_props(_object_spread({}, a), {
-        className: u(W({
+    const t = ue();
+    return /* @__PURE__ */ e(z, _object_spread_props(_object_spread({}, a), {
+        className: g(J({
             border: "none",
             background: "transparent",
             padding: 0
-        }), U, j[t ? "inverse" : "default"]),
+        }), $, W[t ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },
-        children: /* @__PURE__ */ e(N, {
+        children: /* @__PURE__ */ e(b, {
             space: 16,
             alignItems: "center",
-            children: x.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(ee, {
+            children: C.Children.map(n, (r)=>typeof r == "string" ? /* @__PURE__ */ e(re, {
                     regular: !0,
                     color: "inherit",
                     children: r
@@ -416,4 +424,4 @@ const we = (param)=>{
         })
     }));
 };
-export { pn as FunnelNavigationBar, mn as MainNavigationBar, un as NavigationBar, gn as NavigationBarAction, hn as NavigationBarActionGroup };
+export { hn as FunnelNavigationBar, pn as MainNavigationBar, gn as NavigationBar, vn as NavigationBarAction, fn as NavigationBarActionGroup };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.17.0";
+const o = "15.19.0";
 export { o as PACKAGE_VERSION };

package/dist-es/popover.js

@@ -55,48 +55,49 @@ function _object_without_properties_loose(source, excluded) {
     return target;
 }
 import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import { BaseTooltip as f } from "./tooltip.js";
-import d from "./inline.js";
-import h from "./stack.js";
-import { Text3 as u, Text2 as x } from "./text.js";
-import v from "./box.js";
-import { content as g } from "./popover.css-mistica.js";
-import { vars as y } from "./skins/skin-contract.css-mistica.js";
-import { iconContainerSize as P } from "./icon-button.css-mistica.js";
-const S = (_param)=>{
-    var { open: a, extra: m, children: c, onClose: i = ()=>{}, dataAttributes: l, trackingEvent: p, title: o, description: e, asset: n } = _param, s = _object_without_properties(_param, [
+import { BaseTooltip as d } from "./tooltip.js";
+import h from "./inline.js";
+import u from "./stack.js";
+import { Text3 as x, Text2 as v } from "./text.js";
+import g from "./box.js";
+import { content as y } from "./popover.css-mistica.js";
+import { vars as P } from "./skins/skin-contract.css-mistica.js";
+import { iconContainerSize as S } from "./icon-button.css-mistica.js";
+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, [
         "open",
         "extra",
         "children",
         "onClose",
+        "closeButtonLabel",
         "dataAttributes",
         "trackingEvent",
         "title",
         "description",
         "asset"
     ]);
-    return /* @__PURE__ */ r(f, _object_spread({
-        content: /* @__PURE__ */ t(v, {
-            className: g,
+    return /* @__PURE__ */ r(d, _object_spread({
+        content: /* @__PURE__ */ t(g, {
+            className: y,
             children: [
                 (o || e || n) && /* @__PURE__ */ r("div", {
                     style: {
-                        paddingRight: `calc((${P.small} - 8px)`
+                        paddingRight: `calc((${S.small} - 8px)`
                     },
-                    children: /* @__PURE__ */ t(d, {
+                    children: /* @__PURE__ */ t(h, {
                         space: 16,
                         children: [
                             n,
-                            /* @__PURE__ */ t(h, {
+                            /* @__PURE__ */ t(u, {
                                 space: 4,
                                 children: [
-                                    o && /* @__PURE__ */ r(u, {
+                                    o && /* @__PURE__ */ r(x, {
                                         regular: !0,
                                         children: o
                                     }),
-                                    e && /* @__PURE__ */ r(x, {
+                                    e && /* @__PURE__ */ r(v, {
                                         regular: !0,
-                                        color: y.colors.textSecondary,
+                                        color: P.colors.textSecondary,
                                         children: e
                                     })
                                 ]
@@ -112,10 +113,11 @@ const S = (_param)=>{
         hasPointerInteractionOnly: !0,
         delay: !1,
         onClose: i,
-        trackingEvent: p,
+        closeButtonLabel: l,
+        trackingEvent: s,
         dataAttributes: _object_spread({
             "component-name": "Popover"
-        }, l)
-    }, s));
-}, A = S;
-export { A as default };
+        }, p)
+    }, f));
+}, N = T;
+export { N as default };