@telefonica/mistica 14.36.1 → 14.38.0

package/dist-es/inline.js

@@ -1,3 +1,4 @@
+"use client";
 function _define_property(obj, key, value) {
     if (key in obj) {
         Object.defineProperty(obj, key, {
@@ -50,29 +51,36 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as i } from "react/jsx-runtime";
-import * as d from "react";
-import u from "classnames";
-import { sprinkles as y } from "./sprinkles.css-mistica.js";
+import { jsx as e } from "react/jsx-runtime";
+import * as u from "react";
+import y from "classnames";
+import { sprinkles as c } from "./sprinkles.css-mistica.js";
 import { getPrefixedDataAttributes as b } from "./utils/dom.js";
-import { wrap as h, fullWidth as c, noFullWidth as v, justifyVariants as x, vars as W } from "./inline.css-mistica.js";
-import { applyCssVars as g } from "./utils/css.js";
-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";
-    return /* @__PURE__ */ i("div", _object_spread_props(_object_spread({
-        className: u(l, y({
-            alignItems: a
-        }), n ? h : p ? c : v, typeof r != "number" && x[r]),
-        style: typeof r == "number" ? g({
-            [W.space]: `${r}px`
+import { wrap as h, fullWidth as v, noFullWidth as g, justifyVariants as x, vars as I } from "./inline.css-mistica.js";
+import { applyCssVars as W } from "./utils/css.js";
+import { isIos as j, isRunningAcceptanceTest as w } from "./utils/platform.js";
+import { useTheme as A } from "./hooks.js";
+const C = (param)=>{
+    let { space: r, className: o, children: s, role: l, alignItems: n = "stretch", "aria-labelledby": m, fullWidth: a, wrap: p, dataAttributes: f } = param;
+    const d = a || typeof r == "string", { platformOverrides: i } = A();
+    return /* @__PURE__ */ e("div", _object_spread_props(_object_spread({
+        className: y(o, c({
+            alignItems: n
+        }), p ? h : d ? v : g, typeof r != "number" && x[r]),
+        style: typeof r == "number" ? W({
+            [I.space]: `${r}px`
         }) : void 0,
-        role: o,
-        "aria-labelledby": s
-    }, b(f)), {
-        children: d.Children.map(e, (t)=>t || t === 0 ? /* @__PURE__ */ i("div", {
+        role: l,
+        "aria-labelledby": m
+    }, b(f, "Inline")), {
+        children: u.Children.map(s, (t)=>t || t === 0 ? /* @__PURE__ */ e("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: j(i) && !w(i) ? 1 : void 0
+                },
                 children: t
             }) : null)
     }));
-}, k = j;
-export { k as default };
+}, N = C;
+export { N as default };

package/dist-es/list.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./list.css.ts.vanilla.css-mistica.js";
-var _ = "_1y2v1nfba _1y2v1nfbs _1y2v1nfbu", f = "_1y2v1nfbj _1y2v1nfd0 _1y2v1nfce _1y2v1nfbs", y = "_1y2v1nfba _1y2v1nfbp", a = "_1y2v1nfba _1y2v1nfbx _1y2v1nfdn", b = "_2buj9gf", r = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfba _1y2v1nfbf _1y2v1nfce", u = "_2buj9gm _1y2v1nfba", c = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbc _1y2v1nfbv", d = "_2buj9go _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbu _1y2v1nfby _1y2v1nfce", i = "_1y2v1nfea", o = "_2buj9gc", g = "_2buj9gd", l = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbw", j = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbx _1y2v1nfds _1y2v1nf62 _1y2v1nfbc _1y2v1nfce", s = "_2buj9g1", h = "_2buj9g2";
-export { _ as asset, f as badge, y as center, a as content, b as detail, r as detailRight, t as disabled, e as dualActionContainer, u as dualActionDivider, c as dualActionLeft, d as dualActionRight, i as pointer, o as right, g as rightRestrictedWidth, l as rowBody, j as rowContent, s as touchableBackground, h as touchableBackgroundInverse };
+var _ = "_1y2v1nfgg _1y2v1nfgy _1y2v1nfh0", y = "_1y2v1nfgp _1y2v1nfi6 _1y2v1nfhk _1y2v1nfgy", f = "_1y2v1nfgg _1y2v1nfgv", g = "_1y2v1nfgg _1y2v1nfh3 _1y2v1nfit", a = "_2buj9gf", r = "_2buj9ge", i = "_2buj9g0", t = "_1y2v1nfgg _1y2v1nfgl _1y2v1nfhk", e = "_2buj9gm _1y2v1nfgg", o = "_1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfiy _1y2v1nf68 _1y2v1nf96 _1y2v1nfaf _1y2v1nfgi _1y2v1nfh1", h = "_2buj9go _1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfiy _1y2v1nf68 _1y2v1nf96 _1y2v1nfaf _1y2v1nfgg _1y2v1nfgv _1y2v1nfh0 _1y2v1nfh4 _1y2v1nfhk", u = "_1y2v1nfjg", d = "_2buj9gc", b = "_2buj9gd", c = "_1y2v1nfgg _1y2v1nfgm _1y2v1nfh2", j = "_1y2v1nf69 _1y2v1nf7i _1y2v1nf8r _1y2v1nfa0 _1y2v1nfh3 _1y2v1nfiy _1y2v1nf68 _1y2v1nfgi _1y2v1nfhk", l = "_2buj9g1", k = "_2buj9g2";
+export { _ as asset, y as badge, f as center, g as content, a as detail, r as detailRight, i as disabled, t as dualActionContainer, e as dualActionDivider, o as dualActionLeft, h as dualActionRight, u as pointer, d as right, b as rightRestrictedWidth, c as rowBody, j as rowContent, l as touchableBackground, k as touchableBackgroundInverse };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./loading-bar.css.ts.vanilla.css-mistica.js";
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", f = "_1num3qgb", y = "_1num3qgc", a = "_1num3qg8 _1y2v1nfce", t = "_1num3qg3 _1y2v1nfb6 _1y2v1nfeh _1y2v1nfew _1y2v1nffb", g = "_1num3qg6 _1y2v1nfb5 _1y2v1nfce _1y2v1nfbx", m = "_1y2v1nfbx _1y2v1nfeb _1y2v1nfb4 _1y2v1nf4c _1y2v1nfch";
-export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, f as exit, y as exitActive, a as innerProgress, t as portal, g as progress, m as progressContainer };
+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";
+export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, a as exit, f as exitActive, g as innerProgress, y as portal, t as progress, i as progressContainer };

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

@@ -0,0 +1,7 @@
+import "./sprinkles.css.ts.vanilla.css-mistica.js";
+import "./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";
+export { r as inOutAnimationMs, a as loadingScreen, v as loadingScreenChildren, f as loadingScreenText, g as loadingScreenTextAnimated, l as loadingScreenTextAnimatedOut, o as logo, i as pulseLogo, d as screenBackground, t as screenBackgroundAnimated, k as screenBackgroundFadeOut };

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

@@ -0,0 +1,2 @@
+const a = "";
+export { a as default };

package/dist-es/loading-screen.js

@@ -0,0 +1,335 @@
+"use client";
+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;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+import { jsxs as g, jsx as n } from "react/jsx-runtime";
+import * as i from "react";
+import N from "./overscroll-color-context.js";
+import { ThemeVariant as B } from "./theme-variant-context.js";
+import { vars as S } from "./skins/skin-contract.css-mistica.js";
+import E from "./responsive-layout.js";
+import { Text4 as I, Text2 as O } from "./text.js";
+import w from "./stack.js";
+import { inOutAnimationMs as k, loadingScreen as V, screenBackground as j, screenBackgroundFadeOut as z, screenBackgroundAnimated as D, loadingScreenChildren as P, loadingScreenText as _, loadingScreenTextAnimatedOut as F, loadingScreenTextAnimated as y, logo as K, pulseLogo as M } from "./loading-screen.css-mistica.js";
+import W from "./spinner.js";
+import T from "classnames";
+import { sprinkles as $ } from "./sprinkles.css-mistica.js";
+import { Logo as q } from "./logo.js";
+import G from "./screen-reader-only.js";
+import { useTheme as R } from "./hooks.js";
+import { VIVO_NEW_SKIN as H } from "./skins/constants.js";
+import { getPrefixedDataAttributes as J } from "./utils/dom.js";
+const L = (param)=>{
+    let { isInverse: e } = param;
+    const r = `body {background:${e ? S.colors.backgroundBrand : S.colors.background}}`;
+    return /* @__PURE__ */ n("style", {
+        children: r
+    });
+}, Q = (param)=>{
+    let { animateText: e, isLoading: r, onClose: t, texts: c } = param;
+    const [o, s] = i.useState(0), [a, l] = i.useState(!1), u = i.useCallback(()=>{
+        s((o + 1) % c.length), l(!1);
+    }, [
+        o,
+        c.length
+    ]);
+    i.useEffect(()=>{
+        if (!r || c.length === 1) return;
+        var _c_o_duration;
+        const h = setTimeout(()=>{
+            e ? l(!0) : u();
+        }, (_c_o_duration = c[o].duration) !== null && _c_o_duration !== void 0 ? _c_o_duration : 5e3);
+        return ()=>{
+            clearTimeout(h);
+        };
+    }, [
+        e,
+        o,
+        a,
+        r,
+        u,
+        c
+    ]);
+    const m = ()=>{
+        if (!r) {
+            t == null || t();
+            return;
+        }
+        a && u();
+    }, { title: d, description: f } = c[o % c.length];
+    return /* @__PURE__ */ n(E, {
+        children: /* @__PURE__ */ n("div", {
+            className: T(_, {
+                [F]: e && (!r || a)
+            }),
+            onTransitionEnd: m,
+            children: /* @__PURE__ */ g(w, {
+                space: 8,
+                children: [
+                    d && /* @__PURE__ */ n("div", {
+                        className: e ? y : void 0,
+                        children: /* @__PURE__ */ n(I, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "h1",
+                            children: d
+                        })
+                    }),
+                    f && /* @__PURE__ */ n("div", {
+                        className: e ? y : void 0,
+                        style: {
+                            animationDelay: "200ms"
+                        },
+                        children: /* @__PURE__ */ n(O, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "p",
+                            color: S.colors.textSecondary,
+                            children: f
+                        })
+                    })
+                ]
+            })
+        }, o)
+    });
+}, x = /*#__PURE__*/ i.forwardRef((param, d)=>{
+    let { isInverse: e, children: r, isLoading: t = !0, animateText: c, animateBackground: o, onClose: s, dataAttributes: a, title: l, description: u, texts: m = [
+        {
+            title: l,
+            description: u
+        }
+    ] } = param;
+    const [f, h] = i.useState(!1);
+    i.useEffect(()=>{
+        if (!t) return;
+        const A = setTimeout(()=>{
+            h(!0);
+        }, k);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        t
+    ]);
+    const v = i.useRef(!1), p = i.useCallback(()=>{
+        !t && !v.current && (v.current = !0, s == null || s());
+    }, [
+        t,
+        s
+    ]);
+    i.useEffect(()=>{
+        if (t) return;
+        if (!c && !o) {
+            s == null || s();
+            return;
+        }
+        const A = setTimeout(()=>{
+            p();
+        }, k);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        o,
+        c,
+        p,
+        t,
+        s
+    ]);
+    const b = !r;
+    return /* @__PURE__ */ g(B, {
+        isInverse: e,
+        children: [
+            e && /* @__PURE__ */ n(N, {}),
+            /* @__PURE__ */ g("div", _object_spread_props(_object_spread({
+                ref: d
+            }, J(a)), {
+                className: T(V, j[e ? "inverse" : "default"], {
+                    [z]: !t && o,
+                    [D]: o
+                }, $({
+                    justifyContent: b ? "center" : "space-between"
+                })),
+                onAnimationEnd: ()=>{
+                    h(!0);
+                },
+                onTransitionEnd: p,
+                children: [
+                    r ? /* @__PURE__ */ n("div", {
+                        className: P,
+                        children: r
+                    }) : /* @__PURE__ */ n(W, {
+                        delay: "0s",
+                        size: 32,
+                        color: e ? S.colors.inverse : void 0
+                    }),
+                    /* @__PURE__ */ n(Q, {
+                        animateText: c,
+                        isLoading: t,
+                        texts: m,
+                        onClose: p
+                    }),
+                    !b && /* @__PURE__ */ n("div", {
+                        style: {
+                            height: 104
+                        }
+                    })
+                ]
+            })),
+            t && f && /* @__PURE__ */ n(L, {
+                isInverse: !!e
+            })
+        ]
+    });
+}), he = /*#__PURE__*/ i.forwardRef((e, r)=>/* @__PURE__ */ n(x, _object_spread_props(_object_spread({
+        ref: r
+    }, e), {
+        dataAttributes: _object_spread({
+            "component-name": "LoadingScreen"
+        }, e.dataAttributes),
+        animateBackground: !0
+    }))), U = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { texts: c } = R(), [o, s] = i.useState(!0), a = ()=>{
+        e || (r == null || r(), s(!1), t == null || t());
+    };
+    return /* @__PURE__ */ g("div", {
+        className: T(K, {
+            [M]: o
+        }),
+        onAnimationIteration: a,
+        children: [
+            /* @__PURE__ */ n(G, {
+                children: /* @__PURE__ */ n("div", {
+                    children: c.loading
+                })
+            }),
+            /* @__PURE__ */ n(q, {
+                size: 128
+            })
+        ]
+    });
+}, X = /*#__PURE__*/ i.lazy(()=>import("./vivinho-loading-animation/index.js")), Y = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { skinName: c } = R();
+    return c === H ? /* @__PURE__ */ n(i.Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ n(X, {
+            isLoading: e,
+            onCloseStart: r,
+            onCloseEnd: t
+        })
+    }) : /* @__PURE__ */ n(U, {
+        isLoading: e,
+        onCloseStart: r,
+        onCloseEnd: t
+    });
+}, pe = /*#__PURE__*/ i.forwardRef((_param, o)=>{
+    var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, c = _object_without_properties(_param, [
+        "isLoading",
+        "onClose",
+        "dataAttributes"
+    ]);
+    const [s, a] = i.useState(!1), l = i.useRef(!1), u = i.useRef(!1), m = ()=>{
+        a(!0);
+    }, d = ()=>{
+        l.current && u.current && (r == null || r());
+    };
+    return /* @__PURE__ */ n(x, _object_spread_props(_object_spread({
+        ref: o,
+        isInverse: !0
+    }, c), {
+        isLoading: e || !s,
+        onClose: ()=>{
+            u.current = !0, d();
+        },
+        animateText: !0,
+        dataAttributes: _object_spread({
+            "component-name": "BrandLoadingScreen"
+        }, t),
+        children: /* @__PURE__ */ n(Y, {
+            isLoading: e,
+            onCloseStart: m,
+            onCloseEnd: ()=>{
+                l.current = !0, d();
+            }
+        })
+    }));
+});
+export { pe as BrandLoadingScreen, he as LoadingScreen };

package/dist-es/maybe-dismissable.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./maybe-dismissable.css.ts.vanilla.css-mistica.js";
-var f = "cim30m2 _1y2v1nfb5 _1y2v1nfeh _1y2v1nffb _1y2v1nfc9 _1y2v1nfcp _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", y = "cim30m4 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfc6 _1y2v1nfcm _1y2v1nfdt", _ = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbs";
+var f = "cim30m2 _1y2v1nfgb _1y2v1nfjn _1y2v1nfkh _1y2v1nfhf _1y2v1nfhv _1y2v1nfgg _1y2v1nfgv _1y2v1nfgp", y = "cim30m4 _1y2v1nfgg _1y2v1nfgv _1y2v1nfgp _1y2v1nfhc _1y2v1nfhs _1y2v1nfiz", _ = "_1y2v1nfga _1y2v1nfgg _1y2v1nfgy";
 export { f as dismissableButton, y as dismissableCircleContainer, _ as dismissableContainer };

package/dist-es/menu.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./menu.css.ts.vanilla.css-mistica.js";
-var r = "_2k0k3uj", n = "_2k0k3ui", v = "_2k0k3u8 _1y2v1nf6c _1y2v1nf7l _1y2v1nf8u _1y2v1nfa3 _1y2v1nf33 _1y2v1nfe3 _1y2v1nfba _1y2v1nfbg _1y2v1nfb5", a = "_2k0k3ud", t = "_2k0k3ug", _ = "_2k0k3uf", u = "_2k0k3ue", i = "_2k0k3uh", m = {
+var r = "_2k0k3uj", n = "_2k0k3ui", v = "_2k0k3u8 _1y2v1nf6i _1y2v1nf7r _1y2v1nf90 _1y2v1nfa9 _1y2v1nf36 _1y2v1nfj9 _1y2v1nfgg _1y2v1nfgm _1y2v1nfgb", a = "_2k0k3ud", t = "_2k0k3ug", _ = "_2k0k3uf", u = "_2k0k3ue", i = "_2k0k3uh", m = {
     enter: "_2k0k3u9",
     enterActive: "_2k0k3ua",
     exit: "_2k0k3ub",

package/dist-es/mosaic.css-mistica.js

@@ -0,0 +1,3 @@
+import "./mosaic.css.ts.vanilla.css-mistica.js";
+var r = "_1j2q6te2", t = "_1j2q6te1", a = "_1j2q6te0";
+export { r as fourItemsContainer, t as singleItemRowContainer, a as squareContainer };

package/dist-es/mosaic.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,2 @@
+const s = "";
+export { s as default };

package/dist-es/mosaic.js

@@ -0,0 +1,189 @@
+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;
+}
+import { jsx as o, jsxs as g, Fragment as M } from "react/jsx-runtime";
+import { Grid as i, GridItem as e } from "./grid.js";
+import { Carousel as v } from "./carousel.js";
+import { singleItemRowContainer as m, squareContainer as u, fourItemsContainer as w } from "./mosaic.css-mistica.js";
+const d = {
+    mobile: 8,
+    desktop: 16
+}, C = (param)=>/* @__PURE__ */ {
+    let { items: n, isEven: r } = param;
+    return o("div", {
+        className: n.length === 1 ? m : u,
+        children: /* @__PURE__ */ o(i, {
+            gap: d,
+            rows: 2,
+            columns: 2,
+            height: "100%",
+            children: n.length === 3 ? /* @__PURE__ */ g(M, {
+                children: [
+                    /* @__PURE__ */ o(e, {
+                        columnSpan: r ? 2 : void 0,
+                        children: n[0]
+                    }),
+                    /* @__PURE__ */ o(e, {
+                        children: n[1]
+                    }),
+                    /* @__PURE__ */ o(e, {
+                        columnSpan: r ? void 0 : 2,
+                        children: n[2]
+                    })
+                ]
+            }) : n.map((a, h)=>/* @__PURE__ */ o(e, {
+                    columnSpan: n.length === 4 ? void 0 : 2,
+                    rowSpan: n.length === 1 ? 2 : void 0,
+                    children: a
+                }, h))
+        })
+    });
+}, N = (param)=>{
+    let { items: n, withBullets: r, free: a, dataAttributes: h } = param;
+    const c = n.length, t = c < 5 ? Math.min(c, 1) : Math.floor((c + 1) / 3), l = Array.from({
+        length: t
+    }, ()=>[]);
+    return n.forEach((s, p)=>{
+        const f = Math.min(t - 1, Math.floor(p / 3));
+        l[f].push(s);
+    }), /* @__PURE__ */ o(v, {
+        dataAttributes: _object_spread_props(_object_spread({}, h), {
+            "component-name": "HorizontalMosaic"
+        }),
+        items: l.map((s, p)=>/* @__PURE__ */ o(i, {
+                children: /* @__PURE__ */ o(C, {
+                    items: s,
+                    isEven: p % 2 === 0
+                }, p)
+            })),
+        withBullets: r,
+        free: a
+    });
+}, S = (param)=>{
+    let { items: n } = param;
+    switch(n.length){
+        case 1:
+        case 2:
+            return /* @__PURE__ */ o("div", {
+                className: m,
+                children: /* @__PURE__ */ o(i, {
+                    gap: d,
+                    columns: 2,
+                    height: "100%",
+                    children: n.map((r, a)=>/* @__PURE__ */ o(e, {
+                            columnSpan: n.length === 2 ? void 0 : 2,
+                            children: r
+                        }, a))
+                })
+            });
+        case 3:
+            return /* @__PURE__ */ o("div", {
+                className: u,
+                children: /* @__PURE__ */ o(i, {
+                    gap: d,
+                    columns: 2,
+                    flow: "column",
+                    height: "100%",
+                    children: n.map((r, a)=>/* @__PURE__ */ o(e, {
+                            rowSpan: a === 0 ? 2 : void 0,
+                            children: r
+                        }, a))
+                })
+            });
+        case 4:
+        default:
+            return /* @__PURE__ */ o("div", {
+                className: w,
+                children: /* @__PURE__ */ g(i, {
+                    gap: d,
+                    rows: 3,
+                    columns: 2,
+                    height: "100%",
+                    children: [
+                        /* @__PURE__ */ o(e, {
+                            rowSpan: 2,
+                            children: n[0]
+                        }),
+                        /* @__PURE__ */ o(e, {
+                            children: n[1]
+                        }),
+                        /* @__PURE__ */ o(e, {
+                            rowSpan: 2,
+                            children: n[3]
+                        }),
+                        /* @__PURE__ */ o(e, {
+                            children: n[2]
+                        })
+                    ]
+                })
+            });
+    }
+}, b = (param)=>{
+    let { items: n, dataAttributes: r } = param;
+    const a = n.length, h = Math.ceil(a / 4), c = Array.from({
+        length: h
+    }, ()=>[]);
+    return n.forEach((t, l)=>{
+        const s = Math.floor(l / 4);
+        c[s].push(t);
+    }), /* @__PURE__ */ o(i, {
+        rows: 1,
+        gap: d,
+        dataAttributes: _object_spread_props(_object_spread({}, r), {
+            "component-name": "VerticalMosaic"
+        }),
+        children: c.map((t, l)=>/* @__PURE__ */ o(S, {
+                items: t
+            }, l))
+    });
+};
+export { N as HorizontalMosaic, b as VerticalMosaic };