@telefonica/mistica 15.20.1 → 16.0.0

package/dist/navigation-bar.d.ts

@@ -24,8 +24,6 @@ type MainNavigationBarPropsBase = {
     right?: React.ReactElement;
     logo?: React.ReactElement;
     variant?: Variant;
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     children?: undefined;
     topFixed?: boolean;
     withBorder?: boolean;
@@ -33,10 +31,8 @@ type MainNavigationBarPropsBase = {
     large?: boolean;
 };
 type MainNavigationBarProps = MainNavigationBarPropsBase;
-export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, isInverse, topFixed, withBorder, burgerMenuExtra, logo, large, }: MainNavigationBarProps) => JSX.Element;
+export declare const MainNavigationBar: ({ sections, selectedIndex, right, variant, topFixed, withBorder, burgerMenuExtra, logo, large, }: MainNavigationBarProps) => JSX.Element;
 interface NavigationBarCommonProps {
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     variant?: Variant;
     onBack?: () => void;
     title?: string;
@@ -54,18 +50,16 @@ interface NavigationBarNotFixedProps extends NavigationBarCommonProps {
     paddingX?: number;
 }
 type NavigationBarProps = NavigationBarTopFixedProps | NavigationBarNotFixedProps;
-export declare const NavigationBar: ({ onBack, title, titleAs, right, variant, isInverse, topFixed, paddingX, withBorder, }: NavigationBarProps) => JSX.Element;
+export declare const NavigationBar: ({ onBack, title, titleAs, right, variant, topFixed, paddingX, withBorder, }: NavigationBarProps) => JSX.Element;
 type FunnelNavigationBarProps = {
     variant?: Variant;
-    /** @deprecated Use variant instead */
-    isInverse?: boolean;
     logo?: React.ReactElement;
     right?: React.ReactElement;
     topFixed?: boolean;
     children?: undefined;
     withBorder?: boolean;
 };
-export declare const FunnelNavigationBar: ({ logo, right, variant, isInverse, topFixed, withBorder, }: FunnelNavigationBarProps) => JSX.Element;
+export declare const FunnelNavigationBar: ({ logo, right, variant, topFixed, withBorder, }: FunnelNavigationBarProps) => JSX.Element;
 type NavigationBarActionGroupProps = {
     children: React.ReactNode;
 };

package/dist/navigation-bar.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     FunnelNavigationBar: function() {
-        return hn;
+        return Nn;
     },
     MainNavigationBar: function() {
-        return pn;
+        return fn;
     },
     NavigationBar: function() {
-        return gn;
+        return vn;
     },
     NavigationBarAction: function() {
-        return vn;
+        return Bn;
     },
     NavigationBarActionGroup: function() {
-        return fn;
+        return bn;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -54,6 +54,7 @@ const _dom = require("./utils/dom.js");
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
 const _platform = require("./utils/platform.js");
+const _texttokens = require("./text-tokens.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -179,7 +180,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const De = (param)=>{
+const Ge = (param)=>{
     let { isOpen: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _navigationbarcssmistica.burgerIconContainer,
@@ -196,88 +197,87 @@ const De = (param)=>{
             })
         ]
     });
-}, Fe = 300, O = (param)=>{
-    let { children: n, topFixed: a, withBorder: t, isMenuOpen: r, variant: o, isInverse: s, dataAttributes: c } = param;
-    const { isDarkMode: d } = (0, _hooks.useTheme)(), m = o !== null && o !== void 0 ? o : s ? "inverse" : "default", p = ()=>m === "inverse" && !d || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, l = {
+}, He = 300, O = (param)=>{
+    let { children: n, topFixed: o, withBorder: t, isMenuOpen: r, variant: a = "default", dataAttributes: s } = param;
+    const { isDarkMode: c } = (0, _hooks.useTheme)(), d = ()=>a === "inverse" && !c || !t ? _navigationbarcssmistica.navbarBorderColorVariants.noBorder : r ? _navigationbarcssmistica.navbarBorderColorVariants.menuOpen : _navigationbarcssmistica.navbarBorderColorVariants.default, m = {
         default: _skincontractcssmistica.vars.colors.background,
         inverse: _skincontractcssmistica.vars.colors.navigationBarBackground,
-        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative
+        alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
+        media: _skincontractcssmistica.vars.colors.navigationBarBackground
     };
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("header", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(p(), {
-            [_navigationbarcssmistica.topFixed]: a
+        className: (0, _classnames.default)(d(), {
+            [_navigationbarcssmistica.topFixed]: o
         }),
         style: {
-            background: l[m]
+            background: m[a]
         }
-    }, (0, _dom.getPrefixedDataAttributes)(c)), {
+    }, (0, _dom.getPrefixedDataAttributes)(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__ */ (0, _jsxruntime.jsxs)("div", {
         className: (0, _classnames.default)(_navigationbarcssmistica.navigationBarContent, {
             [_navigationbarcssmistica.desktopOnly]: t
         }),
         children: [
-            a,
+            o,
             n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.navigationBarContentRight,
                 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 } = (0, _hooks.useTheme)(), [u, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = (0, _hooks.useAriaId)(), K = R ? 1 : 0.2, { isTabletOrSmaller: Q } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), X = m || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+}, 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 } = (0, _hooks.useTheme)(), [l, y] = _react.useState(!1), [E, h] = _react.useState("closed"), L = _react.useId(), K = g ? 1 : 0.2, { isTabletOrSmaller: Q } = (0, _hooks.useScreenSize)(), w = (0, _modalcontextprovider.useSetModalState)(), X = d || /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
             desktop: 48
         }
-    }), V = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
+    }), D = ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
             className: _navigationbarcssmistica.desktopOnly,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
                 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__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, k), {
+                    return /* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, x), {
                         key: f,
                         className: (0, _classnames.default)(_navigationbarcssmistica.section, {
-                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" || o ? "inverse" : "default"]]: f === a
-                        }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" || o ? "inverse" : "default"])
+                            [_navigationbarcssmistica.selectedSectionVariantes[r === "inverse" ? "inverse" : "default"]]: f === o
+                        }, _navigationbarcssmistica.textWrapperVariants[r === "inverse" ? "inverse" : "default"])
                     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         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__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: r,
-        isInverse: o,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                topFixed: s,
-                withBorder: c,
-                isMenuOpen: u,
+                topFixed: a,
+                withBorder: s,
+                isMenuOpen: l,
                 variant: r,
-                isInverse: o,
                 dataAttributes: {
                     "component-name": "MainNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_responsivelayout.default, {
                     children: [
-                        /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
                             right: t,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                 className: _navigationbarcssmistica.mainNavbarContent,
@@ -285,31 +285,31 @@ const De = (param)=>{
                                     G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
                                         className: _navigationbarcssmistica.burgerMenuButton,
                                         "aria-live": "polite",
-                                        "aria-label": u ? l.closeNavigationMenu : l.openNavigationMenu,
-                                        "aria-expanded": u,
+                                        "aria-label": l ? u.closeNavigationMenu || R(_texttokens.closeNavigationMenu) : u.openNavigationMenu || R(_texttokens.openNavigationMenu),
+                                        "aria-expanded": l,
                                         "aria-controls": L,
-                                        onPress: u ? D : Y,
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(De, {
-                                            isOpen: u
+                                        onPress: l ? V : Y,
+                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ge, {
+                                            isOpen: l
                                         })
                                     }),
                                     /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                         className: _navigationbarcssmistica.logoContainer,
                                         children: X
                                     }),
-                                    !B && V()
+                                    !k && D()
                                 ]
                             })
                         }),
-                        B && /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
+                        k && /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
                             desktopOnly: !0,
-                            children: V()
+                            children: D()
                         })
                     ]
                 })
             }),
-            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                className: B ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: k ? _navigationbarcssmistica.spacerLarge : _navigationbarcssmistica.spacer
             })
         ]
     });
@@ -337,18 +337,18 @@ const De = (param)=>{
                         onExited: ()=>{
                             h("closed");
                         },
-                        in: u,
-                        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : Fe,
+                        in: l,
+                        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : He,
                         unmountOnExit: !0,
-                        children: (M)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+                        children: (I)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", {
-                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[M]),
+                                    className: (0, _classnames.default)(_navigationbarcssmistica.burgerMenu, _navigationbarcssmistica.burgerMenuTransition[I]),
                                     style: {
                                         boxShadow: E !== "closed" ? `6px 0 4px -4px rgba(0, 0, 0, ${K})` : "none"
                                     },
                                     id: L,
                                     onClick: ()=>{
-                                        D();
+                                        V();
                                     },
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -356,12 +356,12 @@ const De = (param)=>{
                                             children: [
                                                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_negativebox.default, {
                                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.RowList, {
-                                                        children: n.map((k, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, k), f))
+                                                        children: n.map((x, f)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Row, _object_spread({}, x), f))
                                                     })
                                                 }),
-                                                d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                                     paddingBottom: 16,
-                                                    children: d
+                                                    children: c
                                                 })
                                             ]
                                         })
@@ -373,16 +373,16 @@ 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 } = (0, _hooks.useTheme)(), l = /* @__PURE__ */ (0, _jsxruntime.jsx)(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 } = (0, _hooks.useTheme)(), g = /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
         right: r,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 24,
             alignItems: "center",
             children: [
                 n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                    "aria-label": p.backNavigationBar,
+                    "aria-label": m.backNavigationBar || u(_texttokens.backNavigationBar),
                     onPress: n,
                     Icon: _iconchevronleftregular.default,
                     bleedLeft: !0,
@@ -392,42 +392,40 @@ const De = (param)=>{
                     regular: !0,
                     truncate: !0,
                     as: t,
-                    children: a
+                    children: o
                 })
             ]
         })
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
-        variant: o,
-        isInverse: s,
+        variant: a,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                topFixed: c,
-                withBorder: m,
-                variant: o,
-                isInverse: s,
+                topFixed: s,
+                withBorder: d,
+                variant: a,
                 dataAttributes: {
                     "component-name": "NavigationBar"
                 },
-                children: c ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                    children: l
+                children: s ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                    children: g
                 }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _sprinklescssmistica.sprinkles)({
                         width: "100%"
                     }),
                     style: {
-                        padding: `0 ${d}px`
+                        padding: `0 ${c}px`
                     },
-                    children: l
+                    children: g
                 })
             }),
-            c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, 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__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
         size: {
             mobile: 40,
@@ -435,32 +433,30 @@ const De = (param)=>{
         }
     }), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
         variant: t,
-        isInverse: r,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {
-                topFixed: o,
-                withBorder: s,
+                topFixed: r,
+                withBorder: a,
                 variant: t,
-                isInverse: r,
                 dataAttributes: {
                     "component-name": "FunnelNavigationBar"
                 },
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "10",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(N, {
-                            right: a,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {
+                            right: o,
                             children: n
                         })
                     })
                 })
             }),
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _navigationbarcssmistica.spacer
             })
         ]
     });
-}, fn = (param)=>{
+}, bn = (param)=>{
     let { children: n } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _navigationbarcssmistica.lineHeightFix,
@@ -471,12 +467,12 @@ const De = (param)=>{
             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 = (0, _themevariantcontext.useIsInverseVariant)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, a), {
+    const t = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, o), {
         className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
             border: "none",
             background: "transparent",

package/dist/navigation-breadcrumbs.js

@@ -75,7 +75,7 @@ function _object_spread_props(target, source) {
 }
 const b = " / ", B = (param)=>{
     let { title: s, breadcrumbs: n, dataAttributes: c, "aria-label": m = "Breadcrumb" } = param;
-    const i = (0, _themevariantcontext.useIsInverseVariant)();
+    const i = (0, _themevariantcontext.useIsInverseOrMediaVariant)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("nav", _object_spread_props(_object_spread({
         "aria-label": m
     }, (0, _dom.getPrefixedDataAttributes)(c, "NavigationBreadcrumbs")), {

package/dist/overscroll-color-context.d.ts

@@ -8,9 +8,5 @@ type ProviderProps = {
     children: React.ReactNode;
 };
 export declare const OverscrollColorProvider: ({ children }: ProviderProps) => JSX.Element;
-/**
- * @deprecated use useSetOverscrollColor hook instead
- */
-declare const OverscrollColor: () => JSX.Element;
 export declare const useSetOverscrollColor: (config: OverscrollColorConfig) => void;
-export default OverscrollColor;
+export {};

package/dist/overscroll-color-context.js

@@ -11,25 +11,20 @@ function _export(target, all) {
 }
 _export(exports, {
     OverscrollColorProvider: function() {
-        return P;
-    },
-    default: function() {
-        return L;
+        return A;
     },
     useOverScrollColor: function() {
-        return M;
+        return V;
     },
     useSetOverscrollColor: function() {
-        return j;
+        return T;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _themevariantcontext = require("./theme-variant-context.js");
 const _hooks = require("./hooks.js");
 const _nestablecontext = require("./nestable-context.js");
 const _platform = require("./utils/platform.js");
-const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _dom = require("./utils/dom.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -72,48 +67,48 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const { Provider: b, useSetValue: d, useValue: u } = (0, _nestablecontext.createNestableContext)({}), M = u, i = (o)=>(0, _platform.getPlatform)(o) === "ios", O = ()=>{
-    const { topColor: o } = u(), { isDarkMode: e } = (0, _hooks.useTheme)();
+const { Provider: h, useSetValue: g, useValue: c } = (0, _nestablecontext.createNestableContext)({}), V = c, v = (o)=>(0, _platform.getPlatform)(o) === "ios", b = ()=>{
+    const { topColor: o } = c(), { isDarkMode: r } = (0, _hooks.useTheme)();
     return _react.useEffect(()=>{
         if (!o) return;
         const t = document.head.querySelectorAll("meta[name=theme-color]");
         t.forEach((n)=>{
             n.remove();
         });
-        const r = document.createElement("meta");
-        return r.name = "theme-color", r.media = e ? "(prefers-color-scheme: dark)" : "(prefers-color-scheme: light)", r.content = (0, _dom.isCssVar)(o) ? (0, _dom.getCssVarValue)(o) : o, document.head.appendChild(r), ()=>{
-            r.remove(), t.forEach((n)=>{
+        const e = document.createElement("meta");
+        return e.name = "theme-color", e.media = r ? "(prefers-color-scheme: dark)" : "(prefers-color-scheme: light)", e.content = (0, _dom.isCssVar)(o) ? (0, _dom.getCssVarValue)(o) : o, document.head.appendChild(e), ()=>{
+            e.remove(), t.forEach((n)=>{
                 document.head.appendChild(n);
             });
         };
     }, [
-        e,
+        r,
         o
     ]), null;
-}, y = ()=>{
-    const [o, e] = _react.useState("transparent");
+}, k = ()=>{
+    const [o, r] = _react.useState("transparent");
     return _react.useEffect(()=>{
         const t = window.matchMedia("(prefers-color-scheme: dark)");
-        let r;
+        let e;
         const n = ()=>{
-            r = requestAnimationFrame(()=>{
-                const f = getComputedStyle(document.body).backgroundColor;
-                e(f);
+            e = requestAnimationFrame(()=>{
+                const m = getComputedStyle(document.body).backgroundColor;
+                r(m);
             });
         };
         return t.addListener(n), n(), ()=>{
-            t.removeListener(n), cancelAnimationFrame(r);
+            t.removeListener(n), cancelAnimationFrame(e);
         };
     }, []), o;
-}, B = ()=>{
-    const { topColor: o, bottomColor: e } = u(), t = y();
-    if (!e && !o) return null;
-    const r = e !== null && e !== void 0 ? e : t;
-    return r === o || r === "transparent" ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+}, y = ()=>{
+    const { topColor: o, bottomColor: r } = c(), t = k();
+    if (!r && !o) return null;
+    const e = r !== null && r !== void 0 ? r : t;
+    return e === o || e === "transparent" ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             position: "fixed",
             zIndex: -1,
-            background: r,
+            background: e,
             width: "100%",
             height: 300,
             left: 0,
@@ -121,35 +116,18 @@ const { Provider: b, useSetValue: d, useValue: u } = (0, _nestablecontext.create
             bottom: 0
         }
     });
-}, P = (param)=>{
+}, A = (param)=>{
     let { children: o } = param;
-    const { platformOverrides: e } = (0, _hooks.useTheme)();
-    return i(e) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(b, {
+    const { platformOverrides: r } = (0, _hooks.useTheme)();
+    return v(r) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(h, {
         children: [
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(O, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(b, {}),
             o,
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(B, {})
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(y, {})
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
         children: o
     });
-}, x = (o)=>{
-    switch(o){
-        case "default":
-            return _skincontractcssmistica.vars.colors.background;
-        case "alternative":
-            return _skincontractcssmistica.vars.colors.backgroundAlternative;
-        case "inverse":
-            return _skincontractcssmistica.vars.colors.backgroundBrand;
-        default:
-            const e = o;
-            throw new Error(`Invalid variant: ${e}`);
-    }
-}, w = ()=>{
-    const o = (0, _themevariantcontext.useThemeVariant)();
-    return d({
-        topColor: x(o)
-    }), null;
-}, E = ()=>i((0, _hooks.useTheme)().platformOverrides) ? /* @__PURE__ */ (0, _jsxruntime.jsx)(w, {}) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {}), j = (o)=>{
-    d(o);
-}, L = E;
+}, T = (o)=>{
+    g(o);
+};

package/dist/package-version.js

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