@telefonica/mistica 14.37.0 → 14.39.0

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return J;
+        return X;
     },
     ImageError: function() {
-        return G;
+        return Q;
     },
     RATIO: function() {
-        return k;
+        return x;
     },
     default: function() {
-        return h1;
+        return f1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -37,6 +37,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _common = require("./utils/common.js");
 const _skeletonbase = /*#__PURE__*/ _interop_require_default(require("./skeleton-base.js"));
+const _environment = require("./utils/environment.js");
 const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -163,7 +164,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const q = (param)=>/* @__PURE__ */ {
+const J = (param)=>/* @__PURE__ */ {
     let { style: t } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -177,9 +178,9 @@ const q = (param)=>/* @__PURE__ */ {
             strokeWidth: "2"
         })
     });
-}, G = /*#__PURE__*/ _react.forwardRef((param, l)=>{
-    let { borderRadius: t, withIcon: a = !0, border: c } = param;
-    const s = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
+}, Q = /*#__PURE__*/ _react.forwardRef((param, m)=>{
+    let { borderRadius: t, withIcon: a = !0, border: d } = param;
+    const n = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             height: "100%",
@@ -187,13 +188,13 @@ const q = (param)=>/* @__PURE__ */ {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: s ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
+            backgroundColor: n ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
+            border: d ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: t
         },
-        ref: l,
-        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
+        ref: m,
+        children: a ? s === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -208,18 +209,18 @@ const q = (param)=>/* @__PURE__ */ {
                 maxWidth: 48
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: s ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
+                fill: n ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
                 d: "M20.25 4.622c.832 0 1.591.664 1.591 1.393v11.98c0 .728-.76 1.392-1.591 1.392H3.746c-.863 0-1.591-.639-1.591-1.392V6.015c0-.754.728-1.393 1.59-1.393H20.25zm0 13.558c.193 0 .367-.146.39-.207l-.003-11.956a.555.555 0 00-.384-.182H3.746c-.21 0-.364.132-.387.19v11.973c.014.044.171.182.387.182H20.25zM6.152 9.068c0 .554.451 1.005 1.003 1.005a1.006 1.006 0 000-2.01c-.552 0-1.003.45-1.003 1.005zm1.003 2.215a2.216 2.216 0 010-4.43c1.218 0 2.207.993 2.207 2.215a2.213 2.213 0 01-2.207 2.215zm12.42 1.337l-3.18-2.44a.605.605 0 00-.742.005l-3.636 2.9-.879-.83a.6.6 0 00-.798-.025l-5.168 4.317a.607.607 0 00.386 1.07.59.59 0 00.384-.14l4.759-3.975 3.308 3.123c.241.23.625.221.852-.025a.605.605 0 00-.026-.854l-1.932-1.824 3.131-2.496 2.807 2.154a.603.603 0 00.846-.112.609.609 0 00-.112-.848z"
             })
         }) : void 0
     });
-}), k = {
+}), x = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, x = "1:1", J = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
-    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: l, src: s, onError: n, onLoad: d, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
+}, S = "1:1", X = /*#__PURE__*/ _react.forwardRef((_param, H)=>{
+    var { aspectRatio: t = S, alt: a = "", dataAttributes: d, noBorderRadius: m, src: n, onError: s, onLoad: c, loadingFallback: A = !0, errorFallback: E = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -230,43 +231,53 @@ const q = (param)=>/* @__PURE__ */ {
         "loadingFallback",
         "errorFallback"
     ]);
-    const f = _react.useRef(), A = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", h = i.circular ? "50%" : l ? "0px" : (0, _css.fallbackStyles)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), m = i.width && i.height ? void 0 : i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(m !== 0 || i.width && i.height), L = y && !!(m !== 0 || i.width && i.height), u = _react.useCallback(()=>{
-        g(!1), b(!1), setTimeout(()=>{
+    var I;
+    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? "50%" : m ? "0px" : (0, _css.fallbackStyles)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [b, v] = _react.useState(!n), [T, w] = _react.useState(!1), g = i.width && i.height ? void 0 : i.circular ? 1 : typeof t == "number" ? t : x[t], f = A && !!(g !== 0 || i.width && i.height), _ = E && !!(g !== 0 || i.width && i.height), C = _react.useCallback(()=>{
+        v(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
             w(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), d == null || d();
+        }, _imagecssmistica.FADE_IN_DURATION_MS), c == null || c();
     }, [
-        d
-    ]), T = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
-        style: _object_spread_props(_object_spread({}, z && v ? {
-            opacity: 0
-        } : {
-            opacity: 1
-        }), {
-            boxSizing: "border-box",
-            border: A,
-            borderRadius: h
-        }),
-        ref: (0, _common.combineRefs)(f, S),
-        src: s,
-        className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
-            position: m !== 0 ? "absolute" : "static"
-        })),
-        alt: a,
-        onError: ()=>{
-            g(!0), b(!1), w(!0), n == null || n();
-        },
-        onLoad: u
+        c
+    ]);
+    _react.useEffect(()=>{
+        var y;
+        (y = l.current) != null && y.complete && C();
+    }, [
+        C
+    ]);
+    const z = (0, _environment.isServerSide)() || !((I = document.getElementById(h)) != null && I.complete), B = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
+                suppressHydrationWarning: !0,
+                id: h,
+                style: {
+                    opacity: z && f ? 0 : 1,
+                    borderRadius: u
+                },
+                ref: (0, _common.combineRefs)(l, H),
+                src: n,
+                className: (0, _classnames.default)(_imagecssmistica.image, {
+                    [_imagecssmistica.imageWithBorder]: i.border
+                }, (0, _sprinklescssmistica.sprinkles)({
+                    position: g !== 0 ? "absolute" : "static"
+                })),
+                alt: a,
+                onError: ()=>{
+                    v(!0), w(!0), s == null || s();
+                },
+                onLoad: C
+            }),
+            f && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
+                dangerouslySetInnerHTML: {
+                    __html: `document.getElementById("${h}").addEventListener('load', (e) => e.target.style.opacity = "1")`
+                }
+            })
+        ]
     });
     var _i_height, _i_width;
-    return _react.useEffect(()=>{
-        var I;
-        (I = f.current) != null && I.complete && u();
-    }, [
-        u
-    ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            v && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            f && !T && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -278,38 +289,38 @@ const q = (param)=>/* @__PURE__ */ {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
                         height: "100%",
                         width: "100%",
-                        radius: h
+                        radius: u
                     })
                 })
             }),
-            C && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            b && _ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
-                    borderRadius: h,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+                    borderRadius: u,
                     border: i.border
                 })
             }),
-            !C && T
+            !b && B
         ]
     });
-}), Q = /*#__PURE__*/ _react.forwardRef((t, a)=>{
+}), Y = /*#__PURE__*/ _react.forwardRef((t, a)=>{
     var _t_aspectRatio;
-    const c = t.width && t.height ? void 0 : t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
+    const d = t.width && t.height ? void 0 : t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : x[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : S];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: c,
+        aspectRatio: d,
         width: t.width,
         height: t.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, _object_spread_props(_object_spread({}, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, _object_spread_props(_object_spread({}, t), {
             ref: a
         }))
     });
-}), h1 = Q;
+}), f1 = Y;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { createNestableContext } from './nestable-context';
 export type { NestableContext } from './nestable-context';
 export { default as OverscrollColor, OverscrollColorProvider } from './overscroll-color-context';
 export { FeedbackScreen, ErrorFeedbackScreen, InfoFeedbackScreen, SuccessFeedbackScreen, SuccessFeedback, } from './feedback';
+export { LoadingScreen, BrandLoadingScreen } from './loading-screen';
 export { default as IconButton } from './icon-button';
 export { default as Popover } from './popover';
 export { default as FocusTrap } from './focus-trap';

package/dist/index.js

@@ -51,6 +51,9 @@ _export(exports, {
     BoxedRowList: function() {
         return _list.BoxedRowList;
     },
+    BrandLoadingScreen: function() {
+        return _loadingscreen.BrandLoadingScreen;
+    },
     ButtonDanger: function() {
         return _button.ButtonDanger;
     },
@@ -5298,6 +5301,9 @@ _export(exports, {
     LoadingBar: function() {
         return _loadingbar.default;
     },
+    LoadingScreen: function() {
+        return _loadingscreen.LoadingScreen;
+    },
     Logo: function() {
         return _logo.Logo;
     },
@@ -5735,6 +5741,7 @@ const _fixedtotop = /*#__PURE__*/ _interop_require_wildcard(require("./fixed-to-
 const _nestablecontext = require("./nestable-context.js");
 const _overscrollcolorcontext = /*#__PURE__*/ _interop_require_wildcard(require("./overscroll-color-context.js"));
 const _feedback = require("./feedback.js");
+const _loadingscreen = require("./loading-screen.js");
 const _iconbutton = /*#__PURE__*/ _interop_require_default(require("./icon-button.js"));
 const _popover = /*#__PURE__*/ _interop_require_default(require("./popover.js"));
 const _focustrap = /*#__PURE__*/ _interop_require_default(require("./focus-trap.js"));

package/dist/inline.css-mistica.js

@@ -9,27 +9,29 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    fullWidth: function() {
+    flexInline: function() {
         return v;
     },
-    justifyVariants: function() {
+    fullWidth: function() {
+        return a;
+    },
+    marginInline: function() {
         return n;
     },
     noFullWidth: function() {
-        return a;
+        return r;
     },
     vars: function() {
-        return f;
+        return b;
     },
     wrap: function() {
-        return r;
+        return f;
     }
 });
 require("./inline.css.ts.vanilla.css-mistica.js");
-var v = "kkfbnv2 kkfbnv1", n = {
-    between: "kkfbnv5",
-    around: "kkfbnv6",
-    evenly: "kkfbnv7"
-}, a = "kkfbnv4 kkfbnv1", f = {
-    space: "var(--kkfbnv0)"
-}, r = "kkfbnv3 kkfbnv1";
+var v = "kkfbnv5", a = "kkfbnv7 kkfbnv6", n = "kkfbnv4", r = "kkfbnv9 kkfbnv6", b = {
+    space: "var(--kkfbnv0)",
+    spaceMobile: "var(--kkfbnv1)",
+    spaceTablet: "var(--kkfbnv2)",
+    spaceDesktop: "var(--kkfbnv3)"
+}, f = "kkfbnv8 kkfbnv6";

package/dist/inline.css.d.ts

@@ -1,8 +1,12 @@
 export declare const vars: {
     space: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    spaceMobile: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    spaceTablet: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    spaceDesktop: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
+export declare const marginInline: string;
+export declare const flexInline: string;
 export declare const inline: string;
 export declare const fullWidth: string;
 export declare const wrap: string;
 export declare const noFullWidth: string;
-export declare const justifyVariants: Record<"between" | "around" | "evenly", string>;

package/dist/inline.d.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import type { DataAttributes } from './utils/types';
+import type { ByBreakpoint, DataAttributes } from './utils/types';
+type NumericSpace = -16 | -12 | -8 | -4 | -2 | 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64;
+type FlexSpace = 'between' | 'around' | 'evenly';
 type Props = {
-    space: -16 | -12 | -8 | -4 | -2 | 0 | 2 | 4 | 8 | 12 | 16 | 24 | 32 | 40 | 48 | 56 | 64 | 'between' | 'around' | 'evenly';
+    space: FlexSpace | ByBreakpoint<NumericSpace>;
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     children: React.ReactNode;
     className?: string;

package/dist/inline.js

@@ -1,3 +1,4 @@
+"use client";
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
@@ -5,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return k;
+        return S;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -15,6 +16,8 @@ const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _inlinecssmistica = require("./inline.css-mistica.js");
 const _css = require("./utils/css.js");
+const _platform = require("./utils/platform.js");
+const _hooks = require("./hooks.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -113,21 +116,33 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const j = (param)=>{
-    let { space: r, className: l, children: e, role: o, alignItems: a = "stretch", "aria-labelledby": s, fullWidth: m, wrap: n, dataAttributes: f } = param;
-    const p = m || typeof r == "string";
+const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, A = (t)=>{
+    if (typeof t == "number" || typeof t == "string") return {
+        [_inlinecssmistica.vars.space]: i(t)
+    };
+    const e = {
+        [_inlinecssmistica.vars.spaceMobile]: i(t.mobile),
+        [_inlinecssmistica.vars.spaceDesktop]: i(t.desktop)
+    };
+    return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
+}, C = (param)=>{
+    let { space: t, className: e, children: s, role: a, alignItems: m = "stretch", "aria-labelledby": f, fullWidth: p, wrap: u, dataAttributes: c } = param;
+    const d = p || typeof t == "string", { platformOverrides: l } = (0, _hooks.useTheme)(), b = typeof t == "string";
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(l, (0, _sprinklescssmistica.sprinkles)({
-            alignItems: a
-        }), n ? _inlinecssmistica.wrap : p ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, typeof r != "number" && _inlinecssmistica.justifyVariants[r]),
-        style: typeof r == "number" ? (0, _css.applyCssVars)({
-            [_inlinecssmistica.vars.space]: `${r}px`
-        }) : void 0,
-        role: o,
-        "aria-labelledby": s
-    }, (0, _dom.getPrefixedDataAttributes)(f)), {
-        children: _react.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                children: t
+        className: (0, _classnames.default)(e, (0, _sprinklescssmistica.sprinkles)({
+            alignItems: m
+        }), u ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, b ? _inlinecssmistica.flexInline : _inlinecssmistica.marginInline),
+        style: (0, _css.applyCssVars)(A(t)),
+        role: a,
+        "aria-labelledby": f
+    }, (0, _dom.getPrefixedDataAttributes)(c, "Inline")), {
+        children: _react.Children.map(s, (n)=>n || n === 0 ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    // Hack to fix https://jira.tid.es/browse/WEB-1683
+                    // In iOS the inline component sometimes cuts the last line of the content
+                    paddingBottom: (0, _platform.isIos)(l) && !(0, _platform.isRunningAcceptanceTest)(l) ? 1 : void 0
+                },
+                children: n
             }) : null)
     }));
-}, k = j;
+}, S = C;

package/dist/loading-bar.css-mistica.js

@@ -9,34 +9,22 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TRANSITION_DURATION_MS: function() {
+    hidden: function() {
         return r;
     },
-    enter: function() {
-        return _;
-    },
-    enterActive: function() {
-        return e;
-    },
-    exit: function() {
-        return a;
-    },
-    exitActive: function() {
-        return f;
-    },
     innerProgress: function() {
-        return g;
+        return _;
     },
     portal: function() {
-        return y;
+        return f;
     },
     progress: function() {
-        return t;
+        return y;
     },
     progressContainer: function() {
-        return i;
+        return g;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./loading-bar.css.ts.vanilla.css-mistica.js");
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", g = "_1num3qg8 _1y2v1nfhk", y = "_1num3qg3 _1y2v1nfgc _1y2v1nfjn _1y2v1nfk2 _1y2v1nfkh", t = "_1num3qg6 _1y2v1nfgb _1y2v1nfhk _1y2v1nfh3", i = "_1y2v1nfh3 _1y2v1nfjh _1y2v1nfga _1y2v1nf4i _1y2v1nfhn";
+var r = "_1num3qg3", _ = "_1num3qga _1y2v1nfhk", f = "_1num3qg2 _1y2v1nfgc _1y2v1nfjn _1y2v1nfk2 _1y2v1nfkh", y = "_1num3qg7 _1y2v1nfgb _1y2v1nfhk _1y2v1nfh3", g = "_1y2v1nfh3 _1y2v1nfjh _1y2v1nfga _1y2v1nf4i _1y2v1nfhn";

package/dist/loading-bar.css.d.ts

@@ -1,9 +1,6 @@
 export declare const TRANSITION_DURATION_MS = 400;
 export declare const portal: string;
+export declare const hidden: string;
 export declare const progressContainer: string;
 export declare const progress: string;
 export declare const innerProgress: string;
-export declare const enter: string;
-export declare const enterActive: string;
-export declare const exit: string;
-export declare const exitActive: string;

package/dist/loading-bar.js

@@ -6,15 +6,19 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return B;
+        return u;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _reacttransitiongroup = require("react-transition-group");
 const _portal = require("./portal.js");
 const _loadingbarcssmistica = require("./loading-bar.css-mistica.js");
 const _dom = require("./utils/dom.js");
-const _platform = require("./utils/platform.js");
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -67,30 +71,21 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const x = (param)=>/* @__PURE__ */ {
-    let { visible: r, dataAttributes: t } = param;
-    return (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
-        in: r,
-        timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : _loadingbarcssmistica.TRANSITION_DURATION_MS,
-        classNames: {
-            enter: _loadingbarcssmistica.enter,
-            enterActive: _loadingbarcssmistica.enterActive,
-            exit: _loadingbarcssmistica.exit,
-            exitActive: _loadingbarcssmistica.exitActive
-        },
-        unmountOnExit: !0,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_portal.Portal, {
-            className: _loadingbarcssmistica.portal,
-            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-                className: _loadingbarcssmistica.progressContainer
-            }, (0, _dom.getPrefixedDataAttributes)(t, "LoadingBar")), {
+const c = (param)=>/* @__PURE__ */ {
+    let { visible: a, dataAttributes: o } = param;
+    return (0, _jsxruntime.jsx)(_portal.Portal, {
+        className: (0, _classnames.default)(_loadingbarcssmistica.portal, {
+            [_loadingbarcssmistica.hidden]: !a
+        }),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+            className: _loadingbarcssmistica.progressContainer
+        }, (0, _dom.getPrefixedDataAttributes)(o, "LoadingBar")), {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _loadingbarcssmistica.progress,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _loadingbarcssmistica.progress,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: _loadingbarcssmistica.innerProgress
-                    })
+                    className: _loadingbarcssmistica.innerProgress
                 })
-            }))
-        })
+            })
+        }))
     });
-}, B = x;
+}, u = c;

package/dist/loading-screen.css-mistica.js

@@ -0,0 +1,51 @@
+"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, {
+    inOutAnimationMs: function() {
+        return r;
+    },
+    loadingScreen: function() {
+        return a;
+    },
+    loadingScreenChildren: function() {
+        return v;
+    },
+    loadingScreenText: function() {
+        return f;
+    },
+    loadingScreenTextAnimated: function() {
+        return g;
+    },
+    loadingScreenTextAnimatedOut: function() {
+        return l;
+    },
+    logo: function() {
+        return o;
+    },
+    pulseLogo: function() {
+        return i;
+    },
+    screenBackground: function() {
+        return d;
+    },
+    screenBackgroundAnimated: function() {
+        return t;
+    },
+    screenBackgroundFadeOut: function() {
+        return k;
+    }
+});
+require("./sprinkles.css.ts.vanilla.css-mistica.js");
+require("./loading-screen.css.ts.vanilla.css-mistica.js");
+var r = 500, a = "flke8b1 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgv", v = "_1y2v1nfh2 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgv _1y2v1nfgp", f = "flke8b9 _1y2v1nf6u", g = "flke8bb", l = "flke8bc", o = "flke8bf", i = "flke8be", d = {
+    default: "flke8b4",
+    inverse: "flke8b5"
+}, t = "flke8b3", k = "flke8b6";

package/dist/loading-screen.css.d.ts

@@ -0,0 +1,11 @@
+export declare const loadingScreen: string;
+export declare const inOutAnimationMs = 500;
+export declare const screenBackgroundAnimated: string;
+export declare const screenBackground: Record<"inverse" | "default", string>;
+export declare const screenBackgroundFadeOut: string;
+export declare const loadingScreenChildren: string;
+export declare const loadingScreenText: string;
+export declare const loadingScreenTextAnimated: string;
+export declare const loadingScreenTextAnimatedOut: string;
+export declare const pulseLogo: string;
+export declare const logo: string;

package/dist/loading-screen.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return a;
+    }
+});
+const a = "";

package/dist/loading-screen.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { ExclusifyUnion } from './utils/utility-types';
+import type { DataAttributes } from './utils/types';
+type TextProps = ExclusifyUnion<{
+    title?: string;
+    description?: string;
+} | {
+    texts: Array<{
+        title?: string;
+        description?: string;
+        duration?: number;
+    }>;
+}>;
+type LoadingScreenProps = {
+    isInverse?: boolean;
+    isLoading?: boolean;
+    onClose?: () => void;
+    children?: React.ReactNode;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+export declare const LoadingScreen: React.ForwardRefExoticComponent<LoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+type BrandLoadingScreenProps = {
+    isLoading?: boolean;
+    onClose?: () => void;
+    dataAttributes?: DataAttributes;
+} & TextProps;
+export declare const BrandLoadingScreen: React.ForwardRefExoticComponent<BrandLoadingScreenProps & React.RefAttributes<HTMLDivElement>>;
+export {};