@telefonica/mistica 14.21.0 → 14.22.0

package/dist/navigation-bar.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return Ke;
+        return dn;
     },
     MainNavigationBar: function() {
-        return qe;
+        return sn;
     },
     NavigationBar: function() {
-        return Je;
+        return ln;
     },
     NavigationBarAction: function() {
-        return Xe;
+        return un;
     },
     NavigationBarActionGroup: function() {
-        return Qe;
+        return mn;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -31,7 +31,6 @@ const _reacttransitiongroup = require("react-transition-group");
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
 const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
 const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
-const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _touchable = require("./touchable.js");
 const _text = require("./text.js");
 const _hooks = require("./hooks.js");
@@ -51,6 +50,8 @@ const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _navigationbarcssmistica = require("./navigation-bar.css-mistica.js");
 const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _dom = require("./utils/dom.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -174,7 +175,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const be = (param)=>/* @__PURE__ */ {
+const _e = (param)=>/* @__PURE__ */ {
     let { isOpen: n  } = param;
     return (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
@@ -182,290 +183,306 @@ const be = (param)=>/* @__PURE__ */ {
         "data-component-name": "BurgerMenuIcon",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: n ? "" : _navigationbarcssmistica.iconCloseHidden,
+                className: n ? _navigationbarcssmistica.iconCloseOpen : _navigationbarcssmistica.iconCloseHidden,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconcloseregular.default, {})
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: n ? _navigationbarcssmistica.iconMenuHidden : "",
+                className: n ? _navigationbarcssmistica.iconMenuHidden : _navigationbarcssmistica.iconMenuOpen,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconmenuregular.default, {})
             })
         ]
     });
-}, Be = 300, N = (param)=>{
-    let { children: n , topFixed: s , withBorder: o , isMenuOpen: r , isInverse: t , dataAttributes: l  } = param;
-    const { isDarkMode: d  } = (0, _hooks.useTheme)();
+}, ke = 300, N = (param)=>{
+    let { children: n , topFixed: o , withBorder: t , isMenuOpen: r , isInverse: a , dataAttributes: c , isBottomRow: d = !1  } = param;
+    const { isDarkMode: s  } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
         className: (0, _classnames.default)((()=>{
-            const a = t && !d;
-            return r || a ? _navigationbarcssmistica.navbarBorderColorVariants.inverse : r && !a ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default;
+            const h = a && !s;
+            return r || h || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r && !h ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default;
         })(), {
-            [_navigationbarcssmistica.topFixed]: s
+            [_navigationbarcssmistica.topFixed]: o && !d,
+            [_navigationbarcssmistica.topFixedBottomRow]: o && d
         }),
         style: {
-            borderBottomWidth: o ? 1 : 0,
-            background: t ? _skincontractcssmistica.vars.colors.navigationBarBackground : _skincontractcssmistica.vars.colors.background
+            borderBottomWidth: t ? 1 : 0,
+            background: a ? _skincontractcssmistica.vars.colors.navigationBarBackground : _skincontractcssmistica.vars.colors.background
         }
-    }, (0, _dom.getPrefixedDataAttributes)(l)), {
+    }, (0, _dom.getPrefixedDataAttributes)(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  } = (0, _hooks.useTheme)(), [a, I] = _react.useState(!1), [S, h] = _react.useState("closed"), T = (0, _hooks.useAriaId)(), z = p ? 1 : 0.2, { isTabletOrSmaller: w  } = (0, _hooks.useScreenSize)(), C = (0, _modalcontextprovider.useSetModalState)();
-    if (l = l !== null && l !== void 0 ? l : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
-        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  } = (0, _hooks.useScreenSize)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _navigationbarcssmistica.navigationBarContent,
+        children: [
+            o,
+            n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _navigationbarcssmistica.navigationBarContentRight,
+                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  } = (0, _hooks.useTheme)(), [l, x] = _react.useState(!1), [_, v] = _react.useState("closed"), k = (0, _hooks.useAriaId)(), J = q ? 1 : 0.2, { isTabletOrSmaller: E  } = (0, _hooks.useScreenSize)(), G = (0, _modalcontextprovider.useSetModalState)();
+    if (s = s !== null && s !== void 0 ? s : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+        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;
+        }, g = _ !== "open", D = n.length > 1;
         return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_focustrap.default, {
-                    disabled: m,
+                    disabled: g,
                     group: "burger-menu-lock",
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                             isInverse: r,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                                topFixed: t,
-                                withBorder: !0,
-                                isMenuOpen: a,
+                                topFixed: a,
+                                withBorder: c,
+                                isMenuOpen: l,
                                 isInverse: r,
                                 dataAttributes: {
                                     "component-name": "MainNavigationBar"
                                 },
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                        space: "between",
-                                        alignItems: "center",
-                                        children: [
-                                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                                space: 24,
-                                                alignItems: "center",
-                                                children: [
-                                                    E && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                                                        "aria-live": "polite",
-                                                        "aria-label": a ? d.closeNavigationMenu : d.openNavigationMenu,
-                                                        "aria-expanded": a,
-                                                        "aria-controls": T,
-                                                        onPress: a ? g : b,
-                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(be, {
-                                                            isOpen: a
-                                                        })
-                                                    }),
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                        className: _navigationbarcssmistica.logoContainer,
-                                                        children: l
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
+                                        right: t,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                            space: 24,
+                                            alignItems: "center",
+                                            children: [
+                                                D && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                                                    "aria-live": "polite",
+                                                    "aria-label": l ? h.closeNavigationMenu : h.openNavigationMenu,
+                                                    "aria-expanded": l,
+                                                    "aria-controls": k,
+                                                    onPress: l ? b : I,
+                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_e, {
+                                                        isOpen: l
                                                     })
-                                                ]
-                                            }),
-                                            o
-                                        ]
+                                                }),
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                    className: _navigationbarcssmistica.logoContainer,
+                                                    children: s
+                                                })
+                                            ]
+                                        })
                                     })
                                 })
                             })
                         }),
-                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _navigationbarcssmistica.spacer
                         })
                     ]
                 }),
-                E && /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
+                D && /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_focustrap.default, {
-                        disabled: m,
+                        disabled: g,
                         group: "burger-menu-lock",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
                             onEntering: ()=>{
-                                h("opening");
+                                v("opening");
                             },
                             onEntered: ()=>{
-                                h("open");
+                                v("open");
                             },
                             onExiting: ()=>{
-                                h("closing");
+                                v("closing");
                             },
                             onExited: ()=>{
-                                h("closed");
-                            },
-                            in: a,
-                            timeout: Be,
-                            classNames: {
-                                enter: _navigationbarcssmistica.burgerMenuEnter,
-                                enterActive: _navigationbarcssmistica.burgerMenuEnterActive,
-                                exit: _navigationbarcssmistica.burgerMenuExit,
-                                exitActive: _navigationbarcssmistica.burgerMenuExitActive
+                                v("closed");
                             },
+                            in: l,
+                            timeout: ke,
                             unmountOnExit: !0,
-                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                className: _navigationbarcssmistica.burgerMenu,
-                                style: {
-                                    boxShadow: S !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${z})` : "none"
-                                },
-                                id: T,
-                                onClick: ()=>{
-                                    g();
-                                },
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                            children: n.map((U, j)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, U), j))
+                            children: (K)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
+                                        className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[K]),
+                                        style: {
+                                            boxShadow: _ !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${J})` : "none"
+                                        },
+                                        id: k,
+                                        onClick: ()=>{
+                                            b();
+                                        },
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                                space: 16,
+                                                children: [
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
+                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
+                                                            children: n.map((Q, X)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, Q), X))
+                                                        })
+                                                    }),
+                                                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                        paddingBottom: 16,
+                                                        children: d
+                                                    })
+                                                ]
+                                            })
                                         })
                                     })
                                 })
-                            })
                         })
                     })
                 })
             ]
         });
     }
+    const y = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
+                space: 32,
+                children: n.map((_param, g)=>/* @__PURE__ */ /*#__PURE__*/ {
+                    var { title: I  } = _param, b = _object_without_properties(_param, [
+                        "title"
+                    ]);
+                    return /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, b), {
+                        key: g,
+                        className: (0, _classnames.default)(_navigationbarcssmistica.section, {
+                            [_navigationbarcssmistica.selectedSectionVariantes[r ? "inverse" : "default"]]: g === o
+                        }, _navigationbarcssmistica.textWrapperVariants[r ? "inverse" : "default"])
+                    }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                        regular: !0,
+                        color: "inherit",
+                        children: I
+                    }));
+                })
+            })
+        }), B = p && n.length > 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         isInverse: r,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                topFixed: t,
-                withBorder: !0,
-                isMenuOpen: a,
+                topFixed: a,
+                withBorder: c && !B,
+                isMenuOpen: l,
                 isInverse: r,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                        space: "between",
-                        alignItems: "center",
-                        children: [
-                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                space: 48,
-                                alignItems: "center",
-                                children: [
-                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        className: _navigationbarcssmistica.logoContainer,
-                                        children: l
-                                    }),
-                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
-                                            space: 32,
-                                            children: n.map((_param, m)=>/* @__PURE__ */ /*#__PURE__*/ {
-                                                var { title: b  } = _param, g = _object_without_properties(_param, [
-                                                    "title"
-                                                ]);
-                                                return /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, g), {
-                                                    key: m,
-                                                    className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                                                        [_navigationbarcssmistica.selectedSectionVariantes[r ? "inverse" : "default"]]: m === s
-                                                    })
-                                                }), /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                                    className: _navigationbarcssmistica.textWrapperVariants[r ? "inverse" : "default"],
-                                                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                        regular: !0,
-                                                        color: "inherit",
-                                                        children: b
-                                                    })
-                                                }));
-                                            })
-                                        })
-                                    })
-                                ]
-                            }),
-                            o
-                        ]
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
+                        right: t,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                            space: 48,
+                            alignItems: "center",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _navigationbarcssmistica.logoContainer,
+                                    children: s
+                                }),
+                                !B && y()
+                            ]
+                        })
                     })
                 })
             }),
-            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: _navigationbarcssmistica.spacer
-            })
-        ]
-    });
-}, 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  } = (0, _hooks.useTheme)(), a = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-        space: "between",
-        alignItems: "center",
-        children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                space: 24,
-                alignItems: "center",
-                children: [
-                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
-                        "aria-label": p.backNavigationBar,
-                        onPress: n,
-                        className: _navigationbarcssmistica.iconButtonVariants[r ? "inverse" : "default"],
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {
-                            color: "currentColor"
-                        })
-                    }),
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                        regular: !0,
-                        truncate: !0,
-                        children: s
+            B && /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
+                topFixed: a,
+                withBorder: c,
+                isBottomRow: !0,
+                isMenuOpen: l,
+                isInverse: r,
+                dataAttributes: {
+                    "component-name": "MainNavigationBar"
+                },
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
+                        children: y()
                     })
-                ]
+                })
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingLeft: 24,
-                children: o
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: B ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
+}, 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  } = (0, _hooks.useTheme)(), p = /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
+        right: t,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+            space: 24,
+            alignItems: "center",
+            children: [
+                n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                    "aria-label": s.backNavigationBar,
+                    onPress: n,
+                    className: _navigationbarcssmistica.iconButtonVariants[r ? "inverse" : "default"],
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronleftregular.default, {
+                        color: "currentColor"
+                    })
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                    regular: !0,
+                    truncate: !0,
+                    children: o
+                })
+            ]
+        })
+    });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         isInverse: r,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                topFixed: t,
+                topFixed: a,
                 withBorder: d,
                 isInverse: r,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: a
+                children: a ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: p
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _sprinklescssmistica.sprinkles)({
                         width: "100%"
                     }),
                     style: {
-                        padding: `0 ${l}px`
+                        padding: `0 ${c}px`
                     },
-                    children: a
+                    children: p
                 })
             }),
-            t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, Ke = (param)=>{
-    let { logo: n , right: s , isInverse: o = !1 , topFixed: r = !0  } = param;
-    const { isTabletOrSmaller: t  } = (0, _hooks.useScreenSize)();
+}, dn = (param)=>{
+    let { logo: n , right: o , isInverse: t = !1 , topFixed: r = !0 , withBorder: a = !0  } = param;
+    const { isTabletOrSmaller: c  } = (0, _hooks.useScreenSize)();
     return n = n !== null && n !== void 0 ? n : /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
-        size: t ? 40 : 48
+        size: c ? 40 : 48
     }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        isInverse: o,
+        isInverse: t,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
                 topFixed: r,
-                withBorder: !0,
-                isInverse: o,
+                withBorder: a,
+                isInverse: t,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                            space: "between",
-                            alignItems: "center",
-                            children: [
-                                n,
-                                s
-                            ]
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(f, {
+                            right: o,
+                            children: n
                         })
                     })
                 })
@@ -475,7 +492,7 @@ const be = (param)=>/* @__PURE__ */ {
             })
         ]
     });
-}, Qe = (param)=>/* @__PURE__ */ {
+}, mn = (param)=>/* @__PURE__ */ {
     let { children: n  } = param;
     return (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -486,17 +503,17 @@ const be = (param)=>/* @__PURE__ */ {
             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 = (0, _themevariantcontext.useIsInverseVariant)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, s), {
+    const t = (0, _themevariantcontext.useIsInverseVariant)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, o), {
         className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
             border: "none",
             background: "transparent",
             padding: 0
-        }), _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[o ? "inverse" : "default"]),
+        }), _navigationbarcssmistica.lineHeightFix, _navigationbarcssmistica.textWrapperVariants[t ? "inverse" : "default"]),
         dataAttributes: {
             "component-name": "NavigationBarAction"
         },

package/dist/overscroll-color-context.js

@@ -40,7 +40,7 @@ const { Provider: g , Getter: h , useSetValue: b  } = (0, _nestablecontext.defau
                                 zIndex: 1,
                                 background: c || _skincontractcssmistica.vars.colors.background,
                                 width: "100%",
-                                height: 500 + ((0, _platform.isInsideNovumNativeApp)(n) ? 0 : a.dimensions.headerMobileHeight),
+                                height: 500 + ((0, _platform.isInsideNovumNativeApp)(n) ? 0 : a.dimensions.headerMobileHeight || 0),
                                 left: 0,
                                 marginTop: -500,
                                 transform: "translate3d(0,0,0)"

package/dist/package-version.js

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