@telefonica/mistica 14.37.0 → 14.39.0

package/dist-es/navigation-bar.js

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

package/dist-es/package-version.js

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