@telefonica/mistica 14.36.0 → 14.37.0

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return G;
+        return J;
     },
     ImageError: function() {
-        return q;
+        return G;
     },
     RATIO: function() {
         return k;
     },
     default: function() {
-        return m1;
+        return h1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -37,7 +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 _css = require("@vanilla-extract/css");
+const _css = require("./utils/css.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -163,7 +163,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Z = (param)=>/* @__PURE__ */ {
+const q = (param)=>/* @__PURE__ */ {
     let { style: t } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -177,7 +177,7 @@ const Z = (param)=>/* @__PURE__ */ {
             strokeWidth: "2"
         })
     });
-}, q = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+}, 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)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -192,8 +192,8 @@ const Z = (param)=>/* @__PURE__ */ {
             border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: t
         },
-        ref: d,
-        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
+        ref: l,
+        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -218,8 +218,8 @@ const Z = (param)=>/* @__PURE__ */ {
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, x = "1:1", G = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
-    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: d, src: s, onError: n, onLoad: l, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
+}, 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, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -230,12 +230,12 @@ const Z = (param)=>/* @__PURE__ */ {
         "loadingFallback",
         "errorFallback"
     ]);
-    const f = _react.useRef(), S = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = i.circular ? "50%" : d ? "0px" : (0, _css.fallbackVar)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), h = i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(h !== 0 || i.width && i.height), L = y && !!(h !== 0 || i.width && i.height), u = _react.useCallback(()=>{
+    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(()=>{
             w(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
+        }, _imagecssmistica.FADE_IN_DURATION_MS), d == null || d();
     }, [
-        l
+        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 ? {
@@ -244,13 +244,13 @@ const Z = (param)=>/* @__PURE__ */ {
             opacity: 1
         }), {
             boxSizing: "border-box",
-            border: S,
-            borderRadius: m
+            border: A,
+            borderRadius: h
         }),
-        ref: (0, _common.combineRefs)(f, A),
+        ref: (0, _common.combineRefs)(f, S),
         src: s,
         className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
-            position: h !== 0 ? "absolute" : "static"
+            position: m !== 0 ? "absolute" : "static"
         })),
         alt: a,
         onError: ()=>{
@@ -278,7 +278,7 @@ const Z = (param)=>/* @__PURE__ */ {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
                         height: "100%",
                         width: "100%",
-                        radius: m
+                        radius: h
                     })
                 })
             }),
@@ -289,17 +289,17 @@ const Z = (param)=>/* @__PURE__ */ {
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
-                    borderRadius: m,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
+                    borderRadius: h,
                     border: i.border
                 })
             }),
             !C && T
         ]
     });
-}), J = /*#__PURE__*/ _react.forwardRef((t, a)=>{
+}), Q = /*#__PURE__*/ _react.forwardRef((t, a)=>{
     var _t_aspectRatio;
-    const c = t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
+    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];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
@@ -308,8 +308,8 @@ const Z = (param)=>/* @__PURE__ */ {
         width: t.width,
         height: t.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, _object_spread_props(_object_spread({}, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, _object_spread_props(_object_spread({}, t), {
             ref: a
         }))
     });
-}), m1 = J;
+}), h1 = Q;

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export type { TouchableElement } from './touchable';
 export { default as Spinner } from './spinner';
 export { default as FadeIn } from './fade-in';
 export { AccordionItem, BoxedAccordionItem, Accordion, BoxedAccordion } from './accordion';
-export { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink } from './button';
+export { ButtonPrimary, ButtonSecondary, ButtonDanger, ButtonLink, ButtonLinkDanger } from './button';
 export { default as ButtonLayout } from './button-layout';
 export { default as Counter } from './counter';
 export { default as FixedFooterLayout } from './fixed-footer-layout';
@@ -54,6 +54,7 @@ export { default as HorizontalScroll } from './horizontal-scroll';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { ProgressBar, ProgressBarStepped } from './progress-bar';
+export { VerticalMosaic, HorizontalMosaic } from './mosaic';
 export { MediaCard, DataCard, SnapCard, DisplayDataCard, DisplayMediaCard, PosterCard, NakedCard, SmallNakedCard, CardActionSpinner, CardActionIconButton, } from './card';
 export { default as Hero } from './hero';
 export { default as Divider } from './divider';

package/dist/index.js

@@ -63,6 +63,9 @@ _export(exports, {
     ButtonLink: function() {
         return _button.ButtonLink;
     },
+    ButtonLinkDanger: function() {
+        return _button.ButtonLinkDanger;
+    },
     ButtonPrimary: function() {
         return _button.ButtonPrimary;
     },
@@ -210,6 +213,9 @@ _export(exports, {
     HighlightedCard: function() {
         return _highlightedcard.default;
     },
+    HorizontalMosaic: function() {
+        return _mosaic.HorizontalMosaic;
+    },
     HorizontalScroll: function() {
         return _horizontalscroll.default;
     },
@@ -5574,6 +5580,9 @@ _export(exports, {
     VIVO_SKIN: function() {
         return _constants.VIVO_SKIN;
     },
+    VerticalMosaic: function() {
+        return _mosaic.VerticalMosaic;
+    },
     Video: function() {
         return _video.default;
     },
@@ -5757,6 +5766,7 @@ const _horizontalscroll = /*#__PURE__*/ _interop_require_default(require("./hori
 const _highlightedcard = /*#__PURE__*/ _interop_require_default(require("./highlighted-card.js"));
 const _stepper = /*#__PURE__*/ _interop_require_default(require("./stepper.js"));
 const _progressbar = require("./progress-bar.js");
+const _mosaic = require("./mosaic.js");
 const _card = require("./card.js");
 const _hero = /*#__PURE__*/ _interop_require_default(require("./hero.js"));
 const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));

package/dist/list.css-mistica.js

@@ -13,57 +13,57 @@ _export(exports, {
         return _;
     },
     badge: function() {
-        return f;
+        return y;
     },
     center: function() {
-        return y;
+        return f;
     },
     content: function() {
-        return a;
+        return g;
     },
     detail: function() {
-        return b;
+        return a;
     },
     detailRight: function() {
         return r;
     },
     disabled: function() {
-        return t;
+        return i;
     },
     dualActionContainer: function() {
-        return e;
+        return t;
     },
     dualActionDivider: function() {
-        return u;
+        return e;
     },
     dualActionLeft: function() {
-        return c;
+        return o;
     },
     dualActionRight: function() {
-        return d;
+        return h;
     },
     pointer: function() {
-        return i;
+        return u;
     },
     right: function() {
-        return o;
+        return d;
     },
     rightRestrictedWidth: function() {
-        return g;
+        return b;
     },
     rowBody: function() {
-        return l;
+        return c;
     },
     rowContent: function() {
         return j;
     },
     touchableBackground: function() {
-        return s;
+        return l;
     },
     touchableBackgroundInverse: function() {
-        return h;
+        return k;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+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";

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

@@ -19,24 +19,24 @@ _export(exports, {
         return e;
     },
     exit: function() {
-        return f;
+        return a;
     },
     exitActive: function() {
-        return y;
+        return f;
     },
     innerProgress: function() {
-        return a;
+        return g;
     },
     portal: function() {
-        return t;
+        return y;
     },
     progress: function() {
-        return g;
+        return t;
     },
     progressContainer: function() {
-        return m;
+        return i;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./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";
+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";

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))
+    });
+};