@telefonica/mistica 14.20.1 → 14.22.0

package/dist-es/navigation-bar.js

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

package/dist-es/navigation-breadcrumbs.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./navigation-breadcrumbs.css.ts.vanilla.css-mistica.js";
-var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q", _ = "_1y2v1nfb7";
+var v = "_1fniauj3", f = "_1fniauj2", i = "_1fniauj5 _1y2v1nf5z _1y2v1nf78 _1y2v1nf8h _1y2v1nf9q", _ = "_1y2v1nfb8";
 export { v as current, f as link, i as list, _ as listItem };

package/dist-es/nestable-context.js

@@ -1,6 +1,6 @@
 import { jsx as i, Fragment as m } from "react/jsx-runtime";
 import * as s from "react";
-import x from "lodash/isEqual";
+import { isEqual as x } from "./utils/helpers.js";
 const h = (r)=>{
     const n = s.useRef();
     return x(r, n.current) || (n.current = r), n.current;