@telefonica/mistica 14.35.0 → 14.36.1

package/dist/snackbar-context.js

@@ -0,0 +1,177 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SnackbarRoot: function() {
+        return R;
+    },
+    useSnackbar: function() {
+        return g;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _webviewbridge = require("@tef-novum/webview-bridge");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const k = /*#__PURE__*/ _react.createContext({
+    snackbars: [],
+    setSnackbars: ()=>{}
+}), p = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require(/* webpackChunkName: "snackbar" */ "./snackbar.js")))), R = (param)=>{
+    let { children: l } = param;
+    const [s, t] = _react.useState([]), o = _react.useRef(null), r = _react.useRef(!1), a = (0, _webviewbridge.isWebViewBridgeAvailable)();
+    _react.useEffect(()=>{
+        var c;
+        s.length > 1 && !r.current && (r.current = !0, a ? t((i)=>i.slice(1)) : (c = o.current) == null || c.close({
+            action: "CONSECUTIVE"
+        }));
+    }, [
+        s,
+        a
+    ]);
+    const S = (param)=>{
+        let { action: c } = param;
+        var i, b;
+        r.current = !1, t(a && c === "CONSECUTIVE" ? (u)=>u.slice(0) : (u)=>u.slice(1)), (b = (i = s[0]).onClose) == null || b.call(i, {
+            action: c
+        });
+    }, m = _react.useMemo(()=>({
+            snackbars: s,
+            setSnackbars: t
+        }), [
+        s
+    ]), n = s[0];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(k.Provider, {
+        value: m,
+        children: [
+            l,
+            !!n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+                fallback: null,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(p, {
+                    ref: o,
+                    message: n.message,
+                    buttonText: n.buttonText,
+                    duration: n.duration,
+                    type: n.type,
+                    withDismiss: n.withDismiss,
+                    onClose: S
+                }, n.id)
+            })
+        ]
+    });
+}, g = ()=>{
+    const { snackbars: l, setSnackbars: s } = _react.useContext(k);
+    return {
+        openSnackbar: _react.useCallback((o)=>{
+            const r = Date.now() + "-" + Math.random();
+            s((a)=>[
+                    ...a,
+                    _object_spread_props(_object_spread({}, o), {
+                        id: r
+                    })
+                ]);
+        }, [
+            s
+        ]),
+        snackbars: l
+    };
+};

package/dist/snackbar.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
+declare const CLOSE_ACTIONS: readonly ["DISMISS", "TIMEOUT", "CONSECUTIVE", "BUTTON"];
 type SnackbarType = 'INFORMATIVE' | 'CRITICAL';
-type SnackbarCloseHandler = (result: {
-    action: 'DISMISS' | 'TIMEOUT' | 'BUTTON' | 'CONSECUTIVE';
+type CloseAction = (typeof CLOSE_ACTIONS)[number];
+export type SnackbarCloseHandler = (result: {
+    action: CloseAction;
 }) => unknown;
-type Props = {
+export type Props = {
     buttonText?: string;
     duration?: number;
     message: string;
@@ -14,5 +16,8 @@ type Props = {
     dataAttributes?: DataAttributes;
     withDismiss?: boolean;
 };
-declare const Snackbar: React.FC<Props>;
+export type ImperativeHandle = {
+    close: SnackbarCloseHandler;
+};
+declare const Snackbar: React.ForwardRefExoticComponent<Props & React.RefAttributes<ImperativeHandle & HTMLDivElement>>;
 export default Snackbar;

package/dist/snackbar.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return fe;
+        return Te;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -121,63 +121,76 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const q = 5e3, G = 1e4, J = (param)=>{
-    let { message: l, buttonText: o, duration: r, onClose: n, type: c, withDismiss: m = !1, dataAttributes: f } = param;
-    const { texts: d } = (0, _hooks.useTheme)(), [i, e] = _react.useState(!1), { width: N, ref: v } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: B } = (0, _hooks.useScreenSize)(), s = N > (B ? 160 : 128), T = r === 1 / 0 && !o || m, u = _react.useCallback((h)=>{
-        e(!1), setTimeout(()=>{
-            n == null || n(h);
-        }, _snackbarcssmistica.TRANSITION_TIME_IN_MS);
+const K = [
+    "DISMISS",
+    "TIMEOUT",
+    "CONSECUTIVE",
+    "BUTTON"
+], Q = 5e3, Z = 1e4, ee = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { message: m, buttonText: n, duration: t, onClose: o, type: c, withDismiss: u = !1, dataAttributes: N } = param;
+    const { texts: f } = (0, _hooks.useTheme)(), [s, I] = _react.useState(!1), { width: i, ref: B } = (0, _hooks.useElementDimensions)(), { isDesktopOrBigger: b } = (0, _hooks.useScreenSize)(), a = i > (b ? 160 : 128), g = _react.useRef(null), v = t === 1 / 0 && !n || u, p = _react.useRef(o);
+    _react.useEffect(()=>{
+        p.current = o;
     }, [
-        n
+        o
     ]);
-    return _react.useEffect(()=>{
-        const h = setTimeout(()=>{
-            e(!0);
-        }, 50), O = setTimeout(()=>{
-            u({
+    const l = _react.useCallback((O)=>{
+        I(!1), setTimeout(()=>{
+            var T;
+            (T = p.current) == null || T.call(p, O);
+        }, process.env.NODE_ENV === "test" ? 0 : _snackbarcssmistica.TRANSITION_TIME_IN_MS);
+    }, []);
+    return _react.useImperativeHandle(d, ()=>_object_spread_props(_object_spread({}, g), {
+            close: l
+        }), [
+        l
+    ]), _react.useEffect(()=>{
+        const O = setTimeout(()=>{
+            I(!0);
+        }, 50), T = t !== 1 / 0 ? setTimeout(()=>l({
                 action: "TIMEOUT"
-            });
-        }, r);
+            }), t) : void 0;
         return ()=>{
-            clearTimeout(h), clearTimeout(O);
+            clearTimeout(O), clearTimeout(T);
         };
     }, [
-        u,
-        r
+        l,
+        t
     ]), /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            ref: g,
             className: (0, _classnames.default)(_snackbarcssmistica.snackbar, {
-                [_snackbarcssmistica.snackbarOpen]: i
+                [_snackbarcssmistica.snackbarOpen]: s
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
                 role: "alert",
                 className: (0, _classnames.default)(_snackbarcssmistica.wrapper, c === "CRITICAL" ? _snackbarcssmistica.wrapperCritical : _snackbarcssmistica.wrapperInfo, {
-                    [_snackbarcssmistica.wrapperOpen]: i
+                    [_snackbarcssmistica.wrapperOpen]: s
                 })
-            }, (0, _dom.getPrefixedDataAttributes)(f, "SnackBar")), {
+            }, (0, _dom.getPrefixedDataAttributes)(N, "SnackBar")), {
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: (0, _classnames.default)(_snackbarcssmistica.content, (0, _sprinklescssmistica.sprinkles)({
-                            flexDirection: s ? "column" : "row",
-                            alignItems: s ? void 0 : "center"
+                            flexDirection: a ? "column" : "row",
+                            alignItems: a ? void 0 : "center"
                         })),
-                        style: T && !s ? {
+                        style: v && !a ? {
                             paddingRight: 32
                         } : void 0,
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                style: T && s ? {
+                                style: v && a ? {
                                     paddingRight: 32
                                 } : void 0,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimaryInverse,
-                                    children: l
+                                    children: m
                                 })
                             }),
-                            o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)(_snackbarcssmistica.button, {
-                                    [_snackbarcssmistica.longButton]: s
+                                    [_snackbarcssmistica.longButton]: a
                                 }),
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
                                     className: (0, _sprinklescssmistica.sprinkles)({
@@ -187,9 +200,9 @@ const q = 5e3, G = 1e4, J = (param)=>{
                                         padding: 0,
                                         background: "transparent"
                                     }),
-                                    ref: v,
+                                    ref: B,
                                     onPress: ()=>{
-                                        u({
+                                        l({
                                             action: "BUTTON"
                                         });
                                     },
@@ -198,21 +211,21 @@ const q = 5e3, G = 1e4, J = (param)=>{
                                         forceMobileSizes: !0,
                                         truncate: !0,
                                         color: c === "CRITICAL" ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textLinkSnackbar,
-                                        children: o
+                                        children: n
                                     })
                                 })
                             })
                         ]
                     }),
-                    T ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
+                    v ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.default, {
                         size: 32,
                         onPress: ()=>{
-                            u({
+                            l({
                                 action: "DISMISS"
                             });
                         },
-                        "aria-label": d.closeButtonLabel,
-                        className: _snackbarcssmistica.dismissButton[s ? "topRight" : "centered"],
+                        "aria-label": f.closeButtonLabel,
+                        className: _snackbarcssmistica.dismissButton[a ? "topRight" : "centered"],
                         style: {
                             display: "flex"
                         },
@@ -228,43 +241,45 @@ const q = 5e3, G = 1e4, J = (param)=>{
             }))
         })
     });
-}, K = (param)=>{
-    let { message: l, buttonText: o, duration: r, onClose: n = ()=>{}, type: c = "INFORMATIVE", withDismiss: m } = param;
-    const f = o ? G : q;
-    r = Math.max(r !== null && r !== void 0 ? r : f, f);
-    const d = (0, _webviewbridge.isWebViewBridgeAvailable)(), i = _react.useRef(n);
+}), re = /*#__PURE__*/ _react.forwardRef((param, N)=>{
+    let { message: m, buttonText: n, duration: t, onClose: o = ()=>{}, type: c = "INFORMATIVE", withDismiss: u } = param;
+    const d = n ? Z : Q;
+    t = Math.max(t !== null && t !== void 0 ? t : d, d);
+    const f = (0, _webviewbridge.isWebViewBridgeAvailable)(), s = _react.useRef(o);
     return _react.useEffect(()=>{
-        i.current = n;
+        s.current = o;
     }, [
-        n
+        o
     ]), _react.useEffect(()=>{
-        d && (0, _webviewbridge.nativeMessage)({
-            message: l,
+        f && (0, _webviewbridge.nativeMessage)({
+            message: m,
             // @ts-expect-error duration can be 'PERSISTENT' in new webview-bridge lib versions, and old apps will ignore it
-            duration: r === 1 / 0 ? "PERSISTENT" : void 0,
-            buttonText: o,
+            duration: t === 1 / 0 ? "PERSISTENT" : void 0,
+            buttonText: n,
             type: c,
-            withDismiss: m
-        }).then((e)=>{
-            !e || typeof e != "object" || !("action" in e) || typeof e.action != "string" || e.action !== "DISMISS" && e.action !== "TIMEOUT" && e.action !== "BUTTON" ? i.current({
+            withDismiss: u
+        }).then((I)=>{
+            const i = I;
+            i != null && i.action && K.includes(i.action) ? s.current({
+                action: i.action
+            }) : s.current({
                 action: "DISMISS"
-            }) : i.current({
-                action: e.action
             });
         });
     }, [
-        o,
-        r,
-        l,
-        d,
+        n,
+        t,
+        m,
+        f,
         c,
-        m
-    ]), d ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
-        message: l,
-        duration: r,
-        buttonText: o,
+        u
+    ]), f ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, {
+        ref: N,
+        message: m,
+        duration: t,
+        buttonText: n,
         type: c,
-        onClose: i.current,
-        withDismiss: m
+        onClose: s.current,
+        withDismiss: u
     });
-}, fe = K;
+}), Te = re;

package/dist/theme-context-provider.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     default: function() {
-        return It;
+        return St;
     },
     useIsOsDarkModeEnabled: function() {
-        return it;
+        return st;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -38,6 +38,7 @@ const _color = require("./utils/color.js");
 const _defaults = require("./skins/defaults.js");
 const _environment = require("./utils/environment.js");
 const _packageversion = require("./package-version.js");
+const _snackbarcontext = require("./snackbar-context.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -116,22 +117,22 @@ if (process.env.NODE_ENV !== "production" && (0, _environment.isClientSide)()) {
     if (window.__mistica_version__ && window.__mistica_version__ !== _packageversion.PACKAGE_VERSION) throw new Error("There is more than one version of @telefonica/mistica running on the same page");
     window.__mistica_version__ = _packageversion.PACKAGE_VERSION;
 }
-const ot = "(prefers-color-scheme: dark)", it = ()=>{
+const it = "(prefers-color-scheme: dark)", st = ()=>{
     const [t, c] = _react.useState(!1);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
         if (!window.matchMedia) return;
-        const o = window.matchMedia(ot), i = ()=>{
+        const o = window.matchMedia(it), i = ()=>{
             c(o.matches);
         };
         return o.addListener(i), i(), ()=>o.removeListener(i);
     }, []), t;
-}, st = ()=>(t)=>t, nt = (t)=>({
+}, nt = ()=>(t)=>t, at = (t)=>({
         headerMobileHeight: (t == null ? void 0 : t.headerMobileHeight) === "mistica" ? _theme.NAVBAR_HEIGHT_MOBILE : t == null ? void 0 : t.headerMobileHeight
-    }), at = (param)=>{
+    }), ct = (param)=>{
     let { theme: t, children: c, as: o } = param;
     var _t_colorScheme, _t_skin_borderRadii;
-    const i = _react.useRef(1), N = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), R = it(), p = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", S = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), m = p === "auto" && R || p === "dark", u = m ? A : S, k = _react.useMemo(()=>{
-        var s, n, d, x, f, P, b, g, _, C, M, T, E, D;
+    const i = _react.useRef(1), R = _react.useCallback(()=>`aria-id-hook-${i.current++}`, []), S = st(), p = (_t_colorScheme = t.colorScheme) !== null && _t_colorScheme !== void 0 ? _t_colorScheme : "auto", N = t.skin.colors, A = _object_spread({}, t.skin.colors, t.skin.darkModeColors), f = p === "auto" && S || p === "dark", k = f ? A : N, u = _react.useMemo(()=>{
+        var s, n, d, m, x, b, P, g, _, C, M, T, E, D;
         const l = _object_spread({
             platform: (0, _platform.getPlatform)(),
             insideNovumNativeApp: (0, _platform.isInsideNovumNativeApp)()
@@ -146,15 +147,15 @@ const ot = "(prefers-color-scheme: dark)", it = ()=>{
                 logEvent: ()=>Promise.resolve(),
                 eventFormat: "universal-analytics"
             }, t.analytics),
-            dimensions: _object_spread({}, _theme.dimensions, nt(t.dimensions)),
+            dimensions: _object_spread({}, _theme.dimensions, at(t.dimensions)),
             textPresets: {
                 text5: _object_spread({}, _defaults.defaultTextPresetsConfig.text5, (s = t.skin.textPresets) == null ? void 0 : s.text5),
                 text6: _object_spread({}, _defaults.defaultTextPresetsConfig.text6, (n = t.skin.textPresets) == null ? void 0 : n.text6),
                 text7: _object_spread({}, _defaults.defaultTextPresetsConfig.text7, (d = t.skin.textPresets) == null ? void 0 : d.text7),
-                text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (x = t.skin.textPresets) == null ? void 0 : x.text8),
-                text9: _object_spread({}, _defaults.defaultTextPresetsConfig.text9, (f = t.skin.textPresets) == null ? void 0 : f.text9),
-                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (P = t.skin.textPresets) == null ? void 0 : P.text10),
-                cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (b = t.skin.textPresets) == null ? void 0 : b.cardTitle),
+                text8: _object_spread({}, _defaults.defaultTextPresetsConfig.text8, (m = t.skin.textPresets) == null ? void 0 : m.text8),
+                text9: _object_spread({}, _defaults.defaultTextPresetsConfig.text9, (x = t.skin.textPresets) == null ? void 0 : x.text9),
+                text10: _object_spread({}, _defaults.defaultTextPresetsConfig.text10, (b = t.skin.textPresets) == null ? void 0 : b.text10),
+                cardTitle: _object_spread({}, _defaults.defaultTextPresetsConfig.cardTitle, (P = t.skin.textPresets) == null ? void 0 : P.cardTitle),
                 button: _object_spread({}, _defaults.defaultTextPresetsConfig.button, (g = t.skin.textPresets) == null ? void 0 : g.button),
                 link: _object_spread({}, _defaults.defaultTextPresetsConfig.link, (_ = t.skin.textPresets) == null ? void 0 : _.link),
                 title1: _object_spread({}, _defaults.defaultTextPresetsConfig.title1, (C = t.skin.textPresets) == null ? void 0 : C.title1),
@@ -164,27 +165,27 @@ const ot = "(prefers-color-scheme: dark)", it = ()=>{
                 tabsLabel: _object_spread({}, _defaults.defaultTextPresetsConfig.tabsLabel, (D = t.skin.textPresets) == null ? void 0 : D.tabsLabel)
             },
             Link: (0, _theme.getMisticaLinkComponent)(t.Link),
-            isDarkMode: m,
+            isDarkMode: f,
             isIos: (0, _platform.getPlatform)(l) === "ios",
-            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : st,
+            useHrefDecorator: (_t_useHrefDecorator = t.useHrefDecorator) !== null && _t_useHrefDecorator !== void 0 ? _t_useHrefDecorator : nt,
             useId: t.useId
         };
     }, [
         t,
-        m
-    ]), L = Object.fromEntries(Object.entries(u).map((param)=>{
+        f
+    ]), L = Object.fromEntries(Object.entries(k).map((param)=>{
         let [l, s] = param;
         let n = "";
         if (s.startsWith("#")) {
-            const [d, x, f] = (0, _color.fromHexToRgb)(s);
-            n = `${d}, ${x}, ${f}`;
+            const [d, m, x] = (0, _color.fromHexToRgb)(s);
+            n = `${d}, ${m}, ${x}`;
         }
         return [
             l,
             n
         ];
     })), v = (0, _dynamic.assignInlineVars)(_skincontractcssmistica.vars, {
-        colors: u,
+        colors: k,
         rawColors: L,
         borderRadii: (_t_skin_borderRadii = t.skin.borderRadii) !== null && _t_skin_borderRadii !== void 0 ? _t_skin_borderRadii : _defaults.defaultBorderRadiiConfig
     });
@@ -193,24 +194,26 @@ const ot = "(prefers-color-scheme: dark)", it = ()=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_modalcontextprovider.default, {
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_tooltipcontextprovider.default, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_themecontext.default.Provider, {
-                    value: k,
+                    value: u,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_analytics.TrackingConfig, {
-                        eventFormat: k.analytics.eventFormat,
+                        eventFormat: u.analytics.eventFormat,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioSupportProvider, {
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_documentvisibility.DocumentVisibilityProvider, {
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_ariaidgettercontext.default.Provider, {
-                                    value: N,
+                                    value: R,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_screensizecontextprovider.default, {
                                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_dialog.default, {
-                                            children: o ? /*#__PURE__*/ _react.createElement(o, {
-                                                style: v
-                                            }, c) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
-                                                children: [
-                                                    (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
-                                                        children: `:root {${v}}`
-                                                    }),
-                                                    c
-                                                ]
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_snackbarcontext.SnackbarRoot, {
+                                                children: o ? /*#__PURE__*/ _react.createElement(o, {
+                                                    style: v
+                                                }, c) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                                    children: [
+                                                        (process.env.NODE_ENV !== "test" || process.env.SSR_TEST) && /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+                                                            children: `:root {${v}}`
+                                                        }),
+                                                        c
+                                                    ]
+                                                })
                                             })
                                         })
                                     })
@@ -222,4 +225,4 @@ const ot = "(prefers-color-scheme: dark)", it = ()=>{
             })
         })
     });
-}, It = at;
+}, St = ct;

package/dist/utils/css.d.ts

@@ -4,3 +4,4 @@ export declare const safeAreaInsetLeft: string;
 export declare const safeAreaInsetTop: string;
 export declare const safeAreaInsetBottom: string;
 export declare const safeAreaInsetRight: string;
+export declare const fallbackStyles: (...values: Array<string>) => string;

package/dist/utils/css.js

@@ -10,13 +10,16 @@ function _export(target, all) {
 }
 _export(exports, {
     applyCssVars: function() {
-        return i;
+        return p;
     },
-    pxToRem: function() {
+    fallbackStyles: function() {
         return o;
     },
+    pxToRem: function() {
+        return f;
+    },
     safeAreaInsetBottom: function() {
-        return c;
+        return v;
     }
 });
 const _dynamic = require("@vanilla-extract/dynamic");
@@ -49,8 +52,15 @@ function _object_spread(target) {
     }
     return target;
 }
-const s = 16, o = (a)=>`${(parseFloat(a) / s).toFixed(3)}rem`, i = (a)=>_object_spread({}, (0, _dynamic.assignInlineVars)(a));
+const n = 16, f = (e)=>`${(parseFloat(e) / n).toFixed(3)}rem`, p = (e)=>_object_spread({}, (0, _dynamic.assignInlineVars)(e));
 (0, _platform.isRunningAcceptanceTest)();
 (0, _platform.isRunningAcceptanceTest)();
-const c = (0, _platform.isRunningAcceptanceTest)() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
+const v = (0, _platform.isRunningAcceptanceTest)() ? "max(env(safe-area-inset-bottom), var(--acceptance-test-override-safe-area-inset--bottom, 0px))" : "env(safe-area-inset-bottom)";
 (0, _platform.isRunningAcceptanceTest)();
+const o = function() {
+    for(var _len = arguments.length, e = new Array(_len), _key = 0; _key < _len; _key++){
+        e[_key] = arguments[_key];
+    }
+    const [a, ...t] = e.filter(Boolean);
+    return !(a != null && a.startsWith("var(")) || !t.length ? a !== null && a !== void 0 ? a : "" : a.replace(/\)$/, "") + ", " + (t.length > 1 ? o(...t) : t[0]) + ")";
+};