@telefonica/mistica 16.4.0 → 16.6.0

package/dist/meter.js

@@ -0,0 +1,400 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return Zt;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
+const _cubicbezier = /*#__PURE__*/ _interop_require_default(require("cubic-bezier"));
+const _dom = require("./utils/dom.js");
+const _themevariantcontext = require("./theme-variant-context.js");
+const _hooks = require("./hooks.js");
+const _texttokens = require("./text-tokens.js");
+const _platform = require("./utils/platform.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;
+}
+const A = 100, J = A / 2, ft = A / 2, Q = 6, wt = 2, gt = 200, tt = 1e3, Nt = 1e3 / 60 / tt / 4, Ct = 100, D = 1e-4, R = "linear", Ot = "angular", r = "circular", pt = [
+    _skincontractcssmistica.vars.colors.controlActivated,
+    _skincontractcssmistica.vars.colors.warning,
+    _skincontractcssmistica.vars.colors.success,
+    _skincontractcssmistica.vars.colors.highlight,
+    _skincontractcssmistica.vars.colors.promo
+], Ft = [
+    _skincontractcssmistica.vars.colors.controlActivatedInverse,
+    _skincontractcssmistica.vars.colors.warning,
+    _skincontractcssmistica.vars.colors.success,
+    _skincontractcssmistica.vars.colors.highlight,
+    _skincontractcssmistica.vars.colors.promo
+], Ut = (0, _cubicbezier.default)(0.75, 0, 0.27, 1, Nt), W = (t, n, $)=>Math.min(Math.max(t, n), $), kt = (t, n, $, M)=>{
+    var O;
+    const s = [];
+    let b = 0, S = 0;
+    for(let h = 0; h < t.length; h++){
+        b += t[h], S += n[h];
+        const G = gt * (M ? h : t.length - 1 - h), V = W(($ - G) / tt, 0, 1), Z = W(Ut(V), 0, 1), X = ((O = s.at(-1)) == null ? void 0 : O.end) || 0, u = W(b + (S - b) * Z, 0, 1 - D);
+        s.push({
+            start: X,
+            end: u
+        });
+    }
+    return s;
+}, C = (param)=>{
+    let { x1: t, y1: n, x2: $, y2: M, radius: s, clockwise: b = 1, largeArchFlag: S = 0 } = param;
+    return s ? `M ${t} ${n} A ${s} ${s} 0 ${+S} ${+b} ${$} ${M}` : `M ${t} ${n} L ${$} ${M}`;
+}, Dt = (param)=>{
+    let { type: t = Ot, width: n = "100%", colors: $, values: M, reverse: s = !1, dataAttributes: b, "aria-hidden": S = !1, "aria-label": O, "aria-labelledby": h } = param;
+    const { borderRadii: G, t: V } = (0, _hooks.useTheme)(), { ref: Z, width: X } = (0, _hooks.useElementDimensions)(), u = parseInt(G.bar) !== 0, et = (0, _themevariantcontext.useThemeVariant)(), q = et === "media", rt = et === "inverse", nt = $ || (rt || q ? Ft : pt), [p, ot] = _react.useState(typeof n == "number" ? n : 0), z = p === 0 ? 1 : A / p, at = u ? Q / 2 : 0, Y = at * z, i = Q * z, c = t === R ? 0 : J - i / 2, T = wt * z, H = _react.useId(), st = `marker-current-${H}`, it = `marker-start-${H}`, ct = `mask-last-segment-${H}`, lt = `mask-bar-track-${H}`, dt = _react.useMemo(()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches !== !0 && !(0, _platform.isRunningAcceptanceTest)(), []), L = t === R ? A - Y * 2 : t === r ? Math.PI * 2 : Math.PI, l = t === R ? T / A : T / c / L, xt = t === R ? Q : t === r ? p : p / 2 + at, K = t === R ? i : t === r ? A : J + Y, At = q ? _skincontractcssmistica.vars.colors.inverse : rt ? _skincontractcssmistica.vars.colors.barTrackInverse : _skincontractcssmistica.vars.colors.barTrack, f = _react.useMemo(()=>M.map((e)=>e / Ct), [
+        M
+    ]), P = _react.useRef(Array.from({
+        length: f.length
+    }, ()=>s ? 1 : 0)), [_, $t] = _react.useState(()=>f.map(()=>({
+                start: 0,
+                end: 0
+            })));
+    let v = -1, B = -1;
+    for(let e = 0; e < _.length; e++)_[e].end - _[e].start > D && (v < 0 && (v = e), B = e);
+    const d = _.at(-1);
+    _react.useEffect(()=>{
+        ot(typeof n == "number" ? n : X);
+    }, [
+        n,
+        X
+    ]), _react.useEffect(()=>{
+        let e;
+        const I = performance.now(), w = I + tt + gt * (f.length - 1);
+        let N = [];
+        const U = ()=>{
+            const x = performance.now();
+            N = kt(P.current, f, x - I, s), dt && x < w ? e = requestAnimationFrame(U) : (N = kt(P.current, f, w - I, s), P.current = f), $t(N);
+        };
+        return U(), ()=>{
+            cancelAnimationFrame(e), P.current = N.map((x)=>x.end - x.start);
+        };
+    }, [
+        c,
+        f,
+        t,
+        s,
+        dt
+    ]);
+    const k = _react.useCallback((e)=>t === R ? Y + L * e : J - c * Math.cos(e * L), [
+        Y,
+        L,
+        c,
+        t
+    ]), g = _react.useCallback((e)=>t === R ? i / 2 : ft - c * Math.sin(e * L), [
+        L,
+        c,
+        i,
+        t
+    ]), F = (e)=>nt[e % nt.length], mt = Math.round(((d == null ? void 0 : d.end) || 0) * 100), ht = V(_texttokens.meterTotalLabel, f.length, mt) + " " + f.map((e, I)=>`${V(_texttokens.meterSectionLabel, I + 1, Math.round(e * 100))}`).join(". ");
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        ref: Z,
+        style: {
+            width: n
+        },
+        role: "meter",
+        "aria-label": O || (h ? void 0 : ht),
+        "aria-labelledby": h,
+        "aria-valuenow": mt,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-live": "polite",
+        "aria-valuetext": ht,
+        "aria-hidden": S
+    }, (0, _dom.getPrefixedDataAttributes)(b, "Meter")), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+            viewBox: `0 0 ${A} ${K}`,
+            style: {
+                width: p,
+                height: xt,
+                display: "block",
+                transform: `rotate(${t === r ? "90deg" : 0})`
+            },
+            "aria-hidden": "true",
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)("defs", {
+                    children: [
+                        u && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                    id: st,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(B)
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5
+                                            }),
+                                            fill: F(B)
+                                        })
+                                    ]
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)("marker", {
+                                    id: it,
+                                    viewBox: "0 0 10 10",
+                                    markerWidth: 1,
+                                    markerHeight: 1,
+                                    orient: "auto",
+                                    refX: 5,
+                                    refY: 5,
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 4,
+                                            y: 0,
+                                            width: 2,
+                                            height: 10,
+                                            fill: F(v)
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            d: C({
+                                                x1: 5,
+                                                y1: 0,
+                                                x2: 5,
+                                                y2: 10,
+                                                radius: 5,
+                                                clockwise: 0
+                                            }),
+                                            fill: F(v)
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                            id: lt,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                v >= 0 && d && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                            stroke: "black",
+                                            fill: "none",
+                                            strokeWidth: i + T * 2,
+                                            strokeLinecap: t === r || !u ? "butt" : "round",
+                                            d: C({
+                                                x1: k(0),
+                                                y1: g(0),
+                                                x2: k(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                y2: g(W(d.end + (u ? 0 : l), 0, 1 - D)),
+                                                radius: c,
+                                                largeArchFlag: t === r ? d.end >= 0.5 : 0
+                                            })
+                                        }),
+                                        t === r && u && // the circular type has butt line caps, so we need to add a circle to the end
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("circle", {
+                                            cx: k(d.end),
+                                            cy: g(d.end),
+                                            r: i / 2 + T,
+                                            fill: "black"
+                                        }),
+                                        t === r && d.end <= 0.5 && // small patch to remove the circular mask when the last segment is too near to the start
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                            x: 0,
+                                            y: ft + T,
+                                            width: i + T * 2,
+                                            height: i / 2 + T,
+                                            fill: "white"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        t === r && /* @__PURE__ */ (0, _jsxruntime.jsxs)("mask", {
+                            id: ct,
+                            maskUnits: "userSpaceOnUse",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("rect", {
+                                    x: 0,
+                                    y: 0,
+                                    width: A,
+                                    height: K,
+                                    fill: "white"
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                                    stroke: "black",
+                                    strokeWidth: i,
+                                    fill: "none",
+                                    d: C({
+                                        x1: k(1 - l),
+                                        y1: g(1 - l),
+                                        x2: k(1),
+                                        y2: g(1),
+                                        radius: c
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                    stroke: At,
+                    opacity: q ? 0.5 : 1,
+                    fill: "none",
+                    strokeWidth: i,
+                    strokeLinecap: t === r || !u ? "butt" : "round",
+                    d: C({
+                        x1: k(0),
+                        y1: g(0),
+                        x2: k(1 - (t === r ? l : 0)),
+                        y2: g(1 - (t === r ? l : 0)),
+                        largeArchFlag: 1,
+                        radius: c
+                    }),
+                    mask: `url("#${lt}")`
+                }),
+                v >= 0 && [
+                    ..._
+                ].reverse().map((e, I)=>{
+                    const w = _.length - 1 - I, N = F(w), U = w === v, x = w === B, j = U || e.end - e.start < l ? e.start : e.start + l / 2, y = x || e.end - e.start < l ? e.end : e.end - l / 2;
+                    if (y - j < D) return null;
+                    const It = U && t !== r;
+                    return /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
+                        stroke: N,
+                        fill: "none",
+                        strokeWidth: i,
+                        strokeLinecap: "butt",
+                        markerEnd: x ? `url(#${st})` : void 0,
+                        markerStart: It ? `url(#${it})` : void 0,
+                        mask: x && t === r ? `url("#${ct}")` : void 0,
+                        d: C({
+                            x1: k(j),
+                            y1: g(j),
+                            x2: k(y),
+                            y2: g(y),
+                            largeArchFlag: t === r ? y - j >= 0.5 : 0,
+                            radius: c
+                        })
+                    }, I);
+                })
+            ]
+        })
+    }));
+}, Wt = (t)=>/* @__PURE__ */ /*#__PURE__*/ (0, _react.createElement)(Dt, _object_spread_props(_object_spread({}, t), {
+        key: `${t.type},${t.values.length},${t.reverse}`
+    })), Zt = Wt;

package/dist/mosaic.d.ts

@@ -1,14 +1,18 @@
 import * as React from 'react';
 import type { DataAttributes } from './utils/types';
+type MosaicItemGridMode = 'horizontal' | 'square' | 'vertical';
+type MosaicItem = React.ReactElement | ((config: {
+    gridMode: MosaicItemGridMode;
+}) => React.ReactElement);
 type HorizontalMosaicProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
     withBullets?: boolean;
     free?: boolean;
     dataAttributes?: DataAttributes;
 };
 export declare const HorizontalMosaic: ({ items, withBullets, free, dataAttributes, }: HorizontalMosaicProps) => JSX.Element;
 type VerticalMosaicProps = {
-    items: ReadonlyArray<React.ReactElement>;
+    items: ReadonlyArray<MosaicItem>;
     dataAttributes?: DataAttributes;
 };
 export declare const VerticalMosaic: ({ items, dataAttributes }: VerticalMosaicProps) => JSX.Element;

package/dist/mosaic.js

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     HorizontalMosaic: function() {
-        return N;
+        return G;
     },
     VerticalMosaic: function() {
-        return b;
+        return N;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -72,58 +72,60 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const d = {
+const u = {
     mobile: 8,
     desktop: 16
-}, C = (param)=>{
-    let { items: n, isEven: r } = param;
+}, t = (n, o)=>typeof n == "function" ? n({
+        gridMode: o
+    }) : n, C = (param)=>{
+    let { items: n, isEven: o } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: n.length === 1 ? _mosaiccssmistica.singleItemRowContainer : _mosaiccssmistica.squareContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
-            gap: d,
+            gap: u,
             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]
+                        columnSpan: o ? 2 : void 0,
+                        children: t(n[0], o ? "horizontal" : "square")
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
-                        children: n[1]
+                        children: t(n[1], "square")
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
-                        columnSpan: r ? void 0 : 2,
-                        children: n[2]
+                        columnSpan: o ? void 0 : 2,
+                        children: t(n[2], o ? "square" : "horizontal")
                     })
                 ]
-            }) : n.map((a, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+            }) : n.map((a, s)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                     columnSpan: n.length === 4 ? void 0 : 2,
                     rowSpan: n.length === 1 ? 2 : void 0,
-                    children: a
-                }, h))
+                    children: t(a, n.length === 4 ? "square" : "horizontal")
+                }, s))
         })
     });
-}, 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
+}, G = (param)=>{
+    let { items: n, withBullets: o, free: a, dataAttributes: s } = param;
+    const c = n.length, l = c < 5 ? Math.min(c, 1) : Math.floor((c + 1) / 3), h = Array.from({
+        length: l
     }, ()=>[]);
-    return n.forEach((s, p)=>{
-        const f = Math.min(t - 1, Math.floor(p / 3));
-        l[f].push(s);
+    return n.forEach((d, p)=>{
+        const M = Math.min(l - 1, Math.floor(p / 3));
+        h[M].push(d);
     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_carousel.Carousel, {
-        dataAttributes: _object_spread_props(_object_spread({}, h), {
+        dataAttributes: _object_spread_props(_object_spread({}, s), {
             "component-name": "HorizontalMosaic"
         }),
-        items: l.map((s, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
+        items: h.map((d, p)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
-                    items: s,
+                    items: d,
                     isEven: p % 2 === 0
                 }, p)
             })),
-        withBullets: r,
+        withBullets: o,
         free: a
     });
 }, S = (param)=>{
@@ -134,12 +136,12 @@ const d = {
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _mosaiccssmistica.singleItemRowContainer,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
-                    gap: d,
+                    gap: u,
                     columns: 2,
                     height: "100%",
-                    children: n.map((r, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                    children: n.map((o, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                             columnSpan: n.length === 2 ? void 0 : 2,
-                            children: r
+                            children: t(o, n.length === 2 ? "square" : "horizontal")
                         }, a))
                 })
             });
@@ -147,13 +149,13 @@ const d = {
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _mosaiccssmistica.squareContainer,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
-                    gap: d,
+                    gap: u,
                     columns: 2,
                     flow: "column",
                     height: "100%",
-                    children: n.map((r, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
+                    children: n.map((o, a)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                             rowSpan: a === 0 ? 2 : void 0,
-                            children: r
+                            children: t(o, a === 0 ? "vertical" : "square")
                         }, a))
                 })
             });
@@ -162,45 +164,45 @@ const d = {
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _mosaiccssmistica.fourItemsContainer,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_grid.Grid, {
-                    gap: d,
+                    gap: u,
                     rows: 3,
                     columns: 2,
                     height: "100%",
                     children: [
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                             rowSpan: 2,
-                            children: n[0]
+                            children: t(n[0], "vertical")
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
-                            children: n[1]
+                            children: t(n[1], "square")
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
                             rowSpan: 2,
-                            children: n[3]
+                            children: t(n[3], "vertical")
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.GridItem, {
-                            children: n[2]
+                            children: t(n[2], "square")
                         })
                     ]
                 })
             });
     }
-}, b = (param)=>{
-    let { items: n, dataAttributes: r } = param;
-    const a = n.length, h = Math.ceil(a / 4), c = Array.from({
-        length: h
+}, N = (param)=>{
+    let { items: n, dataAttributes: o } = param;
+    const a = n.length, s = Math.ceil(a / 4), c = Array.from({
+        length: s
     }, ()=>[]);
-    return n.forEach((t, l)=>{
-        const s = Math.floor(l / 4);
-        c[s].push(t);
+    return n.forEach((l, h)=>{
+        const d = Math.floor(h / 4);
+        c[d].push(l);
     }), /* @__PURE__ */ (0, _jsxruntime.jsx)(_grid.Grid, {
         rows: 1,
-        gap: d,
-        dataAttributes: _object_spread_props(_object_spread({}, r), {
+        gap: u,
+        dataAttributes: _object_spread_props(_object_spread({}, o), {
             "component-name": "VerticalMosaic"
         }),
-        children: c.map((t, l)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(S, {
-                items: t
-            }, l))
+        children: c.map((l, h)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(S, {
+                items: l
+            }, h))
     });
 };