@telefonica/mistica 15.20.1 → 16.0.0

package/dist-es/maybe-dismissable.js

@@ -1,35 +1,35 @@
 "use client";
 import { jsx as e, Fragment as c, jsxs as u } from "react/jsx-runtime";
-import * as a from "react";
+import * as o from "react";
 import b from "./generated/mistica-icons/icon-close-regular.js";
 import { useTheme as f } from "./hooks.js";
-import { InternalIconButton as d } from "./icon-button.js";
-import { dismissableContainer as p, dismissableButton as x } from "./maybe-dismissable.css-mistica.js";
+import { IconButton as p } from "./icon-button.js";
+import { dismissableContainer as d, dismissableButton as x } from "./maybe-dismissable.css-mistica.js";
 import { ThemeVariant as h } from "./theme-variant-context.js";
-const r = /*#__PURE__*/ a.createContext(!1), j = ()=>a.useContext(r), I = (param)=>{
-    let { children: s, width: i, onClose: t, "aria-label": o, isOverMedia: m, isInverse: l } = param;
-    const { texts: n } = f();
+import { closeButtonLabel as B } from "./text-tokens.js";
+const a = /*#__PURE__*/ o.createContext(!1), M = ()=>o.useContext(a), C = (param)=>{
+    let { children: s, width: r, onClose: t, "aria-label": i, variant: m } = param;
+    const { texts: l, t: n } = f();
     return t ? /* @__PURE__ */ u("section", {
-        className: p,
-        "aria-label": o,
+        className: d,
+        "aria-label": i,
         style: {
-            width: i || "100%",
+            width: r || "100%",
             minHeight: "100%"
         },
         children: [
-            /* @__PURE__ */ e(r.Provider, {
+            /* @__PURE__ */ e(a.Provider, {
                 value: !0,
                 children: s
             }),
             /* @__PURE__ */ e(h, {
-                isInverse: l,
+                variant: m,
                 children: /* @__PURE__ */ e("div", {
                     className: x,
-                    children: /* @__PURE__ */ e(d, {
+                    children: /* @__PURE__ */ e(p, {
                         onPress: t,
-                        "aria-label": n.closeButtonLabel,
+                        "aria-label": l.closeButtonLabel || n(B),
                         small: !0,
-                        isOverMedia: m,
                         Icon: b
                     })
                 })
@@ -38,5 +38,5 @@ const r = /*#__PURE__*/ a.createContext(!1), j = ()=>a.useContext(r), I = (param
     }) : /* @__PURE__ */ e(c, {
         children: s
     });
-}, M = I;
-export { M as default, j as useIsDismissable };
+}, N = C;
+export { N as default, M as useIsDismissable };

package/dist-es/month-field.js

@@ -78,19 +78,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t } from "react/jsx-runtime";
-import * as a from "react";
+import { jsx as e } from "react/jsx-runtime";
+import * as c from "react";
 import { useFieldProps as z } from "./form-context.js";
-import { TextFieldBaseAutosuggest as O } from "./text-field-base.js";
-import { isInputTypeSupported as b } from "./utils/dom.js";
-import { isServerSide as x } from "./utils/environment.js";
-import A from "./generated/mistica-icons/icon-calendar-regular.js";
+import { TextFieldBaseAutosuggest as b } from "./text-field-base.js";
+import { isInputTypeSupported as x } from "./utils/dom.js";
+import { isServerSide as A } from "./utils/environment.js";
+import E from "./generated/mistica-icons/icon-calendar-regular.js";
 import { getLocalYearMonthString as r } from "./utils/time.js";
 import { useTheme as N } from "./hooks.js";
 import { iconContainer as j } from "./date-field.css-mistica.js";
 import { iconSize as v } from "./icon-button.css-mistica.js";
-const B = /*#__PURE__*/ a.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), C = (_param)=>{
-    var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: S, onChangeValue: s, onBlur: y, value: R, defaultValue: k, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
+import { formDateOutOfRangeError as B } from "./text-tokens.js";
+const C = /*#__PURE__*/ c.lazy(()=>import(/* webpackChunkName: "date-time-picker" */ "./date-time-picker.js")), L = (_param)=>{
+    var { disabled: h, error: g, helperText: D, name: F, optional: f, validate: n, onChange: R, onChangeValue: s, onBlur: S, value: y, defaultValue: O, min: o, max: i, dataAttributes: d } = _param, u = _object_without_properties(_param, [
         "disabled",
         "error",
         "helperText",
@@ -106,28 +107,28 @@ const B = /*#__PURE__*/ a.lazy(()=>import(/* webpackChunkName: "date-time-picker
         "max",
         "dataAttributes"
     ]);
-    const I = (e)=>e, M = a.useMemo(()=>b("month"), []), { texts: T } = N(), m = (e)=>!(o && e && e < r(o) || i && e && e > r(i)), l = z({
+    const k = (t)=>t, I = c.useMemo(()=>x("month"), []), { texts: M, t: T } = N(), m = (t)=>!(o && t && t < r(o) || i && t && t > r(i)), p = z({
         name: F,
-        value: R,
-        defaultValue: k,
-        processValue: I,
+        value: y,
+        defaultValue: O,
+        processValue: k,
         helperText: D,
         optional: f,
         error: g,
         disabled: h,
-        onBlur: y,
-        validate: (e, c)=>m(e) ? n == null ? void 0 : n(e, c) : T.formDateOutOfRangeError,
-        onChange: S,
-        onChangeValue: (e, c)=>{
-            m(e) && (s == null || s(e, c));
+        onBlur: S,
+        validate: (t, a)=>m(t) ? n == null ? void 0 : n(t, a) : M.formDateOutOfRangeError || T(B),
+        onChange: R,
+        onChangeValue: (t, a)=>{
+            m(t) && (s == null || s(t, a));
         }
-    }), p = /* @__PURE__ */ t(O, _object_spread_props(_object_spread({}, u, l), {
+    }), l = /* @__PURE__ */ e(b, _object_spread_props(_object_spread({}, u, p), {
         min: o ? r(o) : void 0,
         max: i ? r(i) : void 0,
         type: "month",
-        endIconOverlay: /* @__PURE__ */ t("div", {
+        endIconOverlay: /* @__PURE__ */ e("div", {
             className: j,
-            children: /* @__PURE__ */ t(A, {
+            children: /* @__PURE__ */ e(E, {
                 size: v.default
             })
         }),
@@ -135,16 +136,16 @@ const B = /*#__PURE__*/ a.lazy(()=>import(/* webpackChunkName: "date-time-picker
             "component-name": "MonthField"
         }, d)
     }));
-    return M || x() ? p : /* @__PURE__ */ t(a.Suspense, {
-        fallback: p,
-        children: /* @__PURE__ */ t(B, _object_spread_props(_object_spread({}, u, l), {
+    return I || A() ? l : /* @__PURE__ */ e(c.Suspense, {
+        fallback: l,
+        children: /* @__PURE__ */ e(C, _object_spread_props(_object_spread({}, u, p), {
             optional: f,
-            isValidDate: (e)=>m(r(e.toDate())),
+            isValidDate: (t)=>m(r(t.toDate())),
             mode: "year-month",
             dataAttributes: _object_spread({
                 "component-name": "MonthField"
             }, d)
         }))
     });
-}, U = C;
-export { U as default };
+}, Z = L;
+export { Z as default };

package/dist-es/navigation-bar.js

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

package/dist-es/navigation-breadcrumbs.js

@@ -55,7 +55,7 @@ import { jsx as r, jsxs as o } from "react/jsx-runtime";
 import { Text1 as t } from "./text.js";
 import { getPrefixedDataAttributes as f } from "./utils/dom.js";
 import h from "./text-link.js";
-import { useIsInverseVariant as v } from "./theme-variant-context.js";
+import { useIsInverseOrMediaVariant as v } from "./theme-variant-context.js";
 import { list as x, listItem as l, link as g, current as N } from "./navigation-breadcrumbs.css-mistica.js";
 import { vars as e } from "./skins/skin-contract.css-mistica.js";
 const b = " / ", B = (param)=>{