@telefonica/mistica 14.36.1 → 14.38.0

package/dist/loading-screen.js

@@ -0,0 +1,398 @@
+"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, {
+    BrandLoadingScreen: function() {
+        return pe;
+    },
+    LoadingScreen: function() {
+        return he;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _overscrollcolorcontext = /*#__PURE__*/ _interop_require_default(require("./overscroll-color-context.js"));
+const _themevariantcontext = require("./theme-variant-context.js");
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _responsivelayout = /*#__PURE__*/ _interop_require_default(require("./responsive-layout.js"));
+const _text = require("./text.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
+const _loadingscreencssmistica = require("./loading-screen.css-mistica.js");
+const _spinner = /*#__PURE__*/ _interop_require_default(require("./spinner.js"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
+const _logo = require("./logo.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
+const _hooks = require("./hooks.js");
+const _constants = require("./skins/constants.js");
+const _dom = require("./utils/dom.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+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;
+}
+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;
+}
+const L = (param)=>{
+    let { isInverse: e } = param;
+    const r = `body {background:${e ? _skincontractcssmistica.vars.colors.backgroundBrand : _skincontractcssmistica.vars.colors.background}}`;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("style", {
+        children: r
+    });
+}, Q = (param)=>{
+    let { animateText: e, isLoading: r, onClose: t, texts: c } = param;
+    const [o, s] = _react.useState(0), [a, l] = _react.useState(!1), u = _react.useCallback(()=>{
+        s((o + 1) % c.length), l(!1);
+    }, [
+        o,
+        c.length
+    ]);
+    _react.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__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreenText, {
+                [_loadingscreencssmistica.loadingScreenTextAnimatedOut]: e && (!r || a)
+            }),
+            onTransitionEnd: m,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 8,
+                children: [
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "h1",
+                            children: d
+                        })
+                    }),
+                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: e ? _loadingscreencssmistica.loadingScreenTextAnimated : void 0,
+                        style: {
+                            animationDelay: "200ms"
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            textAlign: "center",
+                            regular: !0,
+                            as: "p",
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: f
+                        })
+                    })
+                ]
+            })
+        }, o)
+    });
+}, x = /*#__PURE__*/ _react.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] = _react.useState(!1);
+    _react.useEffect(()=>{
+        if (!t) return;
+        const A = setTimeout(()=>{
+            h(!0);
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        t
+    ]);
+    const v = _react.useRef(!1), p = _react.useCallback(()=>{
+        !t && !v.current && (v.current = !0, s == null || s());
+    }, [
+        t,
+        s
+    ]);
+    _react.useEffect(()=>{
+        if (t) return;
+        if (!c && !o) {
+            s == null || s();
+            return;
+        }
+        const A = setTimeout(()=>{
+            p();
+        }, _loadingscreencssmistica.inOutAnimationMs);
+        return ()=>{
+            clearTimeout(A);
+        };
+    }, [
+        o,
+        c,
+        p,
+        t,
+        s
+    ]);
+    const b = !r;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
+        isInverse: e,
+        children: [
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_overscrollcolorcontext.default, {}),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+                ref: d
+            }, (0, _dom.getPrefixedDataAttributes)(a)), {
+                className: (0, _classnames.default)(_loadingscreencssmistica.loadingScreen, _loadingscreencssmistica.screenBackground[e ? "inverse" : "default"], {
+                    [_loadingscreencssmistica.screenBackgroundFadeOut]: !t && o,
+                    [_loadingscreencssmistica.screenBackgroundAnimated]: o
+                }, (0, _sprinklescssmistica.sprinkles)({
+                    justifyContent: b ? "center" : "space-between"
+                })),
+                onAnimationEnd: ()=>{
+                    h(!0);
+                },
+                onTransitionEnd: p,
+                children: [
+                    r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: _loadingscreencssmistica.loadingScreenChildren,
+                        children: r
+                    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_spinner.default, {
+                        delay: "0s",
+                        size: 32,
+                        color: e ? _skincontractcssmistica.vars.colors.inverse : void 0
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+                        animateText: c,
+                        isLoading: t,
+                        texts: m,
+                        onClose: p
+                    }),
+                    !b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            height: 104
+                        }
+                    })
+                ]
+            })),
+            t && f && /* @__PURE__ */ (0, _jsxruntime.jsx)(L, {
+                isInverse: !!e
+            })
+        ]
+    });
+}), he = /*#__PURE__*/ _react.forwardRef((e, r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(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 } = (0, _hooks.useTheme)(), [o, s] = _react.useState(!0), a = ()=>{
+        e || (r == null || r(), s(!1), t == null || t());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: (0, _classnames.default)(_loadingscreencssmistica.logo, {
+            [_loadingscreencssmistica.pulseLogo]: o
+        }),
+        onAnimationIteration: a,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: c.loading
+                })
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_logo.Logo, {
+                size: 128
+            })
+        ]
+    });
+}, X = /*#__PURE__*/ _react.lazy(()=>Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./vivinho-loading-animation/index.js")))), Y = (param)=>{
+    let { isLoading: e, onCloseStart: r, onCloseEnd: t } = param;
+    const { skinName: c } = (0, _hooks.useTheme)();
+    return c === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_react.Suspense, {
+        fallback: null,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+            isLoading: e,
+            onCloseStart: r,
+            onCloseEnd: t
+        })
+    }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(U, {
+        isLoading: e,
+        onCloseStart: r,
+        onCloseEnd: t
+    });
+}, pe = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    var { isLoading: e = !0, onClose: r, dataAttributes: t } = _param, c = _object_without_properties(_param, [
+        "isLoading",
+        "onClose",
+        "dataAttributes"
+    ]);
+    const [s, a] = _react.useState(!1), l = _react.useRef(!1), u = _react.useRef(!1), m = ()=>{
+        a(!0);
+    }, d = ()=>{
+        l.current && u.current && (r == null || r());
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)(Y, {
+            isLoading: e,
+            onCloseStart: m,
+            onCloseEnd: ()=>{
+                l.current = !0, d();
+            }
+        })
+    }));
+});

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

@@ -21,4 +21,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";

package/dist/menu.css-mistica.js

@@ -42,7 +42,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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/mosaic.css-mistica.js

@@ -0,0 +1,23 @@
+"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, {
+    fourItemsContainer: function() {
+        return r;
+    },
+    singleItemRowContainer: function() {
+        return t;
+    },
+    squareContainer: function() {
+        return a;
+    }
+});
+require("./mosaic.css.ts.vanilla.css-mistica.js");
+var r = "_1j2q6te2", t = "_1j2q6te1", a = "_1j2q6te0";

package/dist/mosaic.css.d.ts

@@ -0,0 +1,6 @@
+/** Aspect ratio = 1/1 */
+export declare const squareContainer: string;
+/** Aspect ratio = 2/1, but considering the grip gap */
+export declare const singleItemRowContainer: string;
+/** Aspect ratio = 2/3, but considering the grip gap */
+export declare const fourItemsContainer: string;

package/dist/mosaic.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 s;
+    }
+});
+const s = "";

package/dist/mosaic.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { DataAttributes } from './utils/types';
+type HorizontalMosaicProps = {
+    items: ReadonlyArray<React.ReactElement>;
+    withBullets?: boolean;
+    free?: boolean;
+    dataAttributes?: DataAttributes;
+};
+export declare const HorizontalMosaic: React.FC<HorizontalMosaicProps>;
+type Props = {
+    items: ReadonlyArray<React.ReactElement>;
+    dataAttributes?: DataAttributes;
+};
+export declare const VerticalMosaic: React.FC<Props>;
+export {};

package/dist/mosaic.js

@@ -0,0 +1,206 @@
+"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, {
+    HorizontalMosaic: function() {
+        return N;
+    },
+    VerticalMosaic: function() {
+        return b;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _grid = require("./grid.js");
+const _carousel = require("./carousel.js");
+const _mosaiccssmistica = require("./mosaic.css-mistica.js");
+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 d = {
+    mobile: 8,
+    desktop: 16
+}, C = (param)=>/* @__PURE__ */ {
+    let { items: n, isEven: r } = param;
+    return (0, _jsxruntime.jsx)("div", {
+        className: n.length === 1 ? _mosaiccssmistica.singleItemRowContainer : _mosaiccssmistica.squareContainer,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+            gap: d,
+            rows: 2,
+            columns: 2,
+            height: "100%",
+            children: n.length === 3 ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                        columnSpan: r ? 2 : void 0,
+                        children: n[0]
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                        children: n[1]
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                        columnSpan: r ? void 0 : 2,
+                        children: n[2]
+                    })
+                ]
+            }) : n.map((a, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                    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__ */ (0, _jsxruntime.jsx)(_carousel.Carousel, {
+        dataAttributes: _object_spread_props(_object_spread({}, h), {
+            "component-name": "HorizontalMosaic"
+        }),
+        items: l.map((s, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(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__ */ (0, _jsxruntime.jsx)("div", {
+                className: _mosaiccssmistica.singleItemRowContainer,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                    gap: d,
+                    columns: 2,
+                    height: "100%",
+                    children: n.map((r, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            columnSpan: n.length === 2 ? void 0 : 2,
+                            children: r
+                        }, a))
+                })
+            });
+        case 3:
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _mosaiccssmistica.squareContainer,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+                    gap: d,
+                    columns: 2,
+                    flow: "column",
+                    height: "100%",
+                    children: n.map((r, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            rowSpan: a === 0 ? 2 : void 0,
+                            children: r
+                        }, a))
+                })
+            });
+        case 4:
+        default:
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _mosaiccssmistica.fourItemsContainer,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_grid.Grid, {
+                    gap: d,
+                    rows: 3,
+                    columns: 2,
+                    height: "100%",
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            rowSpan: 2,
+                            children: n[0]
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            children: n[1]
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            rowSpan: 2,
+                            children: n[3]
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                            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__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+        rows: 1,
+        gap: d,
+        dataAttributes: _object_spread_props(_object_spread({}, r), {
+            "component-name": "VerticalMosaic"
+        }),
+        children: c.map((t, l)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(S, {
+                items: t
+            }, l))
+    });
+};