@telefonica/mistica 17.1.0 → 17.2.0

package/dist-es/menu.js

@@ -51,248 +51,256 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsxs as N, jsx as t, Fragment as G } from "react/jsx-runtime";
-import * as o from "react";
-import ee from "classnames";
-import { TAB as te, ENTER as K, SPACE as j, ESC as ne, UP as oe, LEFT as re, DOWN as q, RIGHT as se } from "./utils/keys.js";
-import { getPrefixedDataAttributes as ie, cancelEvent as A } from "./utils/dom.js";
+import { jsxs as y, jsx as t, Fragment as G } from "react/jsx-runtime";
+import * as n from "react";
+import ne from "classnames";
+import { TAB as oe, ENTER as K, SPACE as j, ESC as re, UP as se, LEFT as ie, DOWN as q, RIGHT as ae } from "./utils/keys.js";
+import { getPrefixedDataAttributes as Q, cancelEvent as k } from "./utils/dom.js";
 import ce from "./overlay.js";
-import { menuTransitionClasses as ae, menuContainer as le, vars as b, menuItem as me, menuItemHovered as ue, menuItemDisabled as de, menuItemEnabled as fe, menuSectionDivider as pe, itemContent as ge, iconContainer as he, itemTextContent as xe } from "./menu.css-mistica.js";
-import { useWindowSize as Ie } from "./hooks.js";
-import { Portal as be } from "./portal.js";
-import k from "./box.js";
-import ve from "./inline.js";
-import $ from "./touchable.js";
-import { Text3 as Me, Text2 as Oe } from "./text.js";
-import { vars as B } from "./skins/skin-contract.css-mistica.js";
-import Te from "./divider.js";
-import Ce from "./checkbox.js";
-import { CSSTransition as Se } from "react-transition-group";
-import { combineRefs as Ee } from "./utils/common.js";
-import { applyCssVars as Ae } from "./utils/css.js";
+import { menuTransitionClasses as le, menuContainer as me, vars as O, menuItem as ue, menuItemHoveredDestructive as de, menuItemHovered as fe, menuItemDisabled as pe, menuItemEnabled as ge, menuSectionDivider as he, itemContent as xe, assetContainer as Ie, itemTextContent as be } from "./menu.css-mistica.js";
+import { useWindowSize as ve } from "./hooks.js";
+import { Portal as Me } from "./portal.js";
+import N from "./box.js";
+import Oe from "./inline.js";
+import U from "./touchable.js";
+import { Text3 as Te, Text2 as Se } from "./text.js";
+import { vars as w } from "./skins/skin-contract.css-mistica.js";
+import Ce from "./divider.js";
+import Ee from "./checkbox.js";
+import { CSSTransition as Ae } from "react-transition-group";
+import { combineRefs as Re } from "./utils/common.js";
+import { applyCssVars as Z } from "./utils/css.js";
 import { isRunningAcceptanceTest as ke } from "./utils/platform.js";
-const Ne = 120, Q = /*#__PURE__*/ o.createContext({
+import { vars as Ne } from "./image.css-mistica.js";
+const ye = 120, ee = /*#__PURE__*/ n.createContext({
     focusedItem: null,
     isMenuOpen: !1,
     setFocusedItem: ()=>{},
     closeMenu: ()=>{}
-}), Re = ()=>o.useContext(Q), w = (c)=>c ? Array.from(c.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], Fe = (c, g)=>{
-    if (!g) return null;
-    const f = w(c).indexOf(g);
-    return f < 0 ? null : f;
-}, Je = (param)=>{
-    let { label: c, Icon: g, destructive: f, disabled: a, onPress: R, href: r, to: u, newTab: d, loadOnTop: F, fullPageOnWebView: l, onNavigate: y, controlType: p, checked: v, description: C, dataAttributes: S } = param;
-    const { focusedItem: D, setFocusedItem: s, closeMenu: M, isMenuOpen: h } = Re(), x = o.useRef(null), H = f ? B.colors.textLinkDanger : B.colors.neutralHigh, E = x === null || x === void 0 ? void 0 : x.current, P = (E === null || E === void 0 ? void 0 : E.closest("[role=menu]")) || null, n = Fe(P, E), e = _object_spread({
+}), Fe = ()=>n.useContext(ee), _ = (i)=>i ? Array.from(i.querySelectorAll("[role=menuitem],[role=menuitemcheckbox]")) : [], De = (i, x)=>{
+    if (!x) return null;
+    const a = _(i).indexOf(x);
+    return a < 0 ? null : a;
+}, et = (param)=>{
+    let { label: i, Icon: x, asset: a, destructive: v, disabled: l, onPress: o, href: m, to: u, newTab: C, loadOnTop: c, fullPageOnWebView: $, onNavigate: d, controlType: T, checked: F, description: S, dataAttributes: D } = param;
+    const { focusedItem: s, setFocusedItem: E, closeMenu: I, isMenuOpen: H } = Fe(), M = n.useRef(null), A = v ? w.colors.textLinkDanger : w.colors.neutralHigh, R = M === null || M === void 0 ? void 0 : M.current, r = (R === null || R === void 0 ? void 0 : R.closest("[role=menu]")) || null, e = De(r, R), f = _object_spread({
         testid: "MenuItem"
-    }, S), I = (m)=>/* @__PURE__ */ N("div", {
-            id: m,
-            className: xe,
+    }, D), p = (g)=>/* @__PURE__ */ y("div", {
+            id: g,
+            className: be,
             children: [
-                /* @__PURE__ */ t(Me, {
+                /* @__PURE__ */ t(Te, {
                     regular: !0,
-                    color: H,
-                    children: c
+                    color: A,
+                    children: i
                 }),
-                C && /* @__PURE__ */ t(Oe, {
+                S && /* @__PURE__ */ t(Se, {
                     regular: !0,
-                    color: B.colors.textSecondary,
-                    children: C
+                    color: w.colors.textSecondary,
+                    children: S
                 })
             ]
-        }), i = (m)=>/* @__PURE__ */ N("div", {
-            className: ge,
+        }), h = (g)=>/* @__PURE__ */ y("div", {
+            className: xe,
             children: [
-                g && /* @__PURE__ */ t("div", {
-                    className: he,
-                    children: /* @__PURE__ */ t(g, {
+                (a || x) && /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
+                    className: Ie
+                }, a ? Q({
+                    testid: "asset"
+                }) : {}), {
+                    style: a ? Z({
+                        [Ne.mediaBorderRadius]: w.borderRadii.mediaSmall
+                    }) : void 0,
+                    children: a || x && /* @__PURE__ */ t(x, {
                         size: 24,
-                        color: H
+                        color: A
                     })
-                }),
-                I(m)
+                })),
+                p(g)
             ]
-        }), O = ()=>p === "checkbox" ? /* @__PURE__ */ t(Ce, {
-            ref: x,
-            name: c,
-            checked: v,
+        }), b = ()=>T === "checkbox" ? /* @__PURE__ */ t(Ee, {
+            ref: M,
+            name: i,
+            checked: F,
             onChange: ()=>{
-                h && n !== null && (R === null || R === void 0 ? void 0 : R(n));
+                H && e !== null && (o === null || o === void 0 ? void 0 : o(e));
             },
-            disabled: a,
+            disabled: l,
             role: "menuitemcheckbox",
-            dataAttributes: e,
+            dataAttributes: f,
             render: (param)=>{
-                let { controlElement: m, labelId: T } = param;
-                return /* @__PURE__ */ t(k, {
+                let { controlElement: g, labelId: P } = param;
+                return /* @__PURE__ */ t(N, {
                     paddingX: 8,
                     paddingY: 12,
-                    children: /* @__PURE__ */ N(ve, {
+                    children: /* @__PURE__ */ y(Oe, {
                         space: "between",
                         alignItems: "center",
                         children: [
-                            i(T),
-                            /* @__PURE__ */ t(k, {
+                            h(P),
+                            /* @__PURE__ */ t(N, {
                                 paddingLeft: 16,
-                                children: m
+                                children: g
                             })
                         ]
                     })
                 });
             }
-        }) : r ? /* @__PURE__ */ t($, {
-            ref: x,
-            href: r,
-            newTab: d,
-            loadOnTop: F,
+        }) : m ? /* @__PURE__ */ t(U, {
+            ref: M,
+            href: m,
+            newTab: C,
+            loadOnTop: c,
             onNavigate: ()=>{
-                M(), y === null || y === void 0 ? void 0 : y();
+                I(), d === null || d === void 0 ? void 0 : d();
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
-            children: /* @__PURE__ */ t(k, {
+            dataAttributes: f,
+            children: /* @__PURE__ */ t(N, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
-        }) : u ? /* @__PURE__ */ t($, {
-            ref: x,
+        }) : u ? /* @__PURE__ */ t(U, {
+            ref: M,
             to: u,
-            newTab: d,
-            fullPageOnWebView: l,
+            newTab: C,
+            fullPageOnWebView: $,
             onNavigate: ()=>{
-                M(), y === null || y === void 0 ? void 0 : y();
+                I(), d === null || d === void 0 ? void 0 : d();
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
-            children: /* @__PURE__ */ t(k, {
+            dataAttributes: f,
+            children: /* @__PURE__ */ t(N, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
-        }) : /* @__PURE__ */ t($, {
-            ref: x,
+        }) : /* @__PURE__ */ t(U, {
+            ref: M,
             onPress: ()=>{
-                h && n !== null && (R === null || R === void 0 ? void 0 : R(n), M());
+                H && e !== null && (o === null || o === void 0 ? void 0 : o(e), I());
             },
-            disabled: a,
+            disabled: l,
             role: "menuitem",
-            dataAttributes: e,
-            children: /* @__PURE__ */ t(k, {
+            dataAttributes: f,
+            children: /* @__PURE__ */ t(N, {
                 paddingX: 8,
                 paddingY: 12,
-                children: i()
+                children: h()
             })
         });
     return /* @__PURE__ */ t("div", {
-        className: ee(me, {
-            [fe]: !a,
-            [de]: a,
-            [ue]: !a && n !== null && D === n
+        className: ne(ue, {
+            [ge]: !l,
+            [pe]: l,
+            [fe]: !l && !v && e !== null && s === e,
+            [de]: !l && v && e !== null && s === e
         }),
-        onMouseMove: ()=>s(a ? null : n),
-        onMouseLeave: ()=>s(null),
-        children: O()
+        onMouseMove: ()=>E(l ? null : e),
+        onMouseLeave: ()=>E(null),
+        children: b()
     });
-}, Qe = (param)=>{
-    let { children: c } = param;
-    return c ? /* @__PURE__ */ N(G, {
+}, tt = (param)=>{
+    let { children: i } = param;
+    return i ? /* @__PURE__ */ y(G, {
         children: [
-            c,
+            i,
             /* @__PURE__ */ t("div", {
-                className: pe,
-                children: /* @__PURE__ */ t(Te, {})
+                className: he,
+                children: /* @__PURE__ */ t(Ce, {})
             })
         ]
     }) : /* @__PURE__ */ t(G, {});
-}, V = 12, J = 8, Ze = (param)=>{
-    let { renderTarget: c, renderMenu: g, width: f, position: a = "left", dataAttributes: R } = param;
-    const [r, u] = o.useState(!1), [d, F] = o.useState(null), [l, y] = o.useState(null), [p, v] = o.useState(null), [C, S] = o.useState(!1), D = o.useRef(null), [s, M] = o.useState(null), h = Ie();
-    o.useEffect(()=>{
-        const n = d === null || d === void 0 ? void 0 : d.getBoundingClientRect();
-        if (!l || !n || !r) return;
-        const { top: e, right: I, left: i, bottom: O } = n, m = l.scrollHeight, T = a === "left" ? i : void 0, U = a === "right" ? h.width - I : void 0, W = e - J, X = O + J, _ = h.height - X - V, L = W - V, Y = _ > m, z = L > m, Z = Y || !z && _ > L;
-        M(Z ? {
-            left: T,
-            right: U,
+}, V = 12, J = 8, nt = (param)=>{
+    let { renderTarget: i, renderMenu: x, width: a, position: v = "left", dataAttributes: l } = param;
+    const [o, m] = n.useState(!1), [u, C] = n.useState(null), [c, $] = n.useState(null), [d, T] = n.useState(null), [F, S] = n.useState(!1), D = n.useRef(null), [s, E] = n.useState(null), I = ve();
+    n.useEffect(()=>{
+        const r = u === null || u === void 0 ? void 0 : u.getBoundingClientRect();
+        if (!c || !r || !o) return;
+        const { top: e, right: f, left: p, bottom: h } = r, b = c.scrollHeight, g = v === "left" ? p : void 0, P = v === "right" ? I.width - f : void 0, W = e - J, X = h + J, B = I.height - X - V, L = W - V, Y = B > b, z = L > b, te = Y || !z && B > L;
+        E(te ? {
+            left: g,
+            right: P,
             top: `${X}px`,
             bottom: "auto",
-            maxHeight: Y ? void 0 : _,
+            maxHeight: Y ? void 0 : B,
             transformOrigin: "center top"
         } : {
-            left: T,
-            right: U,
+            left: g,
+            right: P,
             top: "auto",
-            bottom: `${h.height - W}px`,
+            bottom: `${I.height - W}px`,
             maxHeight: z ? void 0 : L,
             transformOrigin: "center bottom"
         });
     }, [
+        v,
+        o,
+        c,
+        u,
         a,
-        r,
-        l,
-        d,
-        f,
-        h
+        I
     ]);
-    const x = o.useMemo(()=>({
-            ref: F,
+    const H = n.useMemo(()=>({
+            ref: C,
             onPress: ()=>{
-                u(!r);
+                m(!o);
             }
         }), [
-        F,
-        r
-    ]), H = {
-        ref: Ee(y, D),
-        className: le,
-        close: ()=>u(!1)
-    }, E = o.useCallback(()=>{
-        const e = w(l).findIndex((I)=>!I.getAttribute("aria-disabled"));
-        v(e < 0 ? null : e);
+        C,
+        o
+    ]), M = {
+        ref: Re($, D),
+        className: me,
+        close: ()=>m(!1)
+    }, A = n.useCallback(()=>{
+        const e = _(c).findIndex((f)=>!f.getAttribute("aria-disabled"));
+        T(e < 0 ? null : e);
     }, [
-        l
-    ]), P = o.useCallback((n)=>{
-        var _e_i;
-        const e = w(l);
-        n && e.reverse();
-        const I = p === null ? -1 : n ? e.length - 1 - p : p;
-        let i = e.findIndex((m, T)=>!m.getAttribute("aria-disabled") && T > I);
-        i === -1 && (i = e.findIndex((m)=>!m.getAttribute("aria-disabled")));
-        const O = n && i !== -1 ? e.length - 1 - i : i;
-        v(O < 0 ? null : O), (_e_i = e[i]) === null || _e_i === void 0 ? void 0 : _e_i.focus();
+        c
+    ]), R = n.useCallback((r)=>{
+        var _e_p;
+        const e = _(c);
+        r && e.reverse();
+        const f = d === null ? -1 : r ? e.length - 1 - d : d;
+        let p = e.findIndex((b, g)=>!b.getAttribute("aria-disabled") && g > f);
+        p === -1 && (p = e.findIndex((b)=>!b.getAttribute("aria-disabled")));
+        const h = r && p !== -1 ? e.length - 1 - p : p;
+        T(h < 0 ? null : h), (_e_p = e[p]) === null || _e_p === void 0 ? void 0 : _e_p.focus();
     }, [
-        p,
-        l
+        d,
+        c
     ]);
-    return o.useEffect(()=>{
-        r ? C && l && (E(), S(!1)) : v(null);
+    return n.useEffect(()=>{
+        o ? F && c && (A(), S(!1)) : T(null);
     }, [
-        r,
-        E,
-        C,
-        l
-    ]), o.useEffect(()=>{
-        const n = (e)=>{
-            if (r) switch(e.key){
-                case se:
+        o,
+        A,
+        F,
+        c
+    ]), n.useEffect(()=>{
+        const r = (e)=>{
+            if (o) switch(e.key){
+                case ae:
                 case q:
-                    A(e), P();
+                    k(e), R();
                     break;
-                case re:
-                case oe:
-                    A(e), P(!0);
+                case ie:
+                case se:
+                    k(e), R(!0);
                     break;
-                case ne:
-                    u(!1);
+                case re:
+                    m(!1);
                     break;
                 case j:
                 case K:
-                    A(e), p !== null && w(l)[p].click();
+                    k(e), d !== null && _(c)[d].click();
                     break;
-                case te:
-                    A(e);
+                case oe:
+                    k(e);
                     break;
             }
             else switch(e.key){
@@ -301,62 +309,62 @@ const Ne = 120, Q = /*#__PURE__*/ o.createContext({
                     S(!0);
                     break;
                 case q:
-                    d === document.activeElement && (S(!0), u(!0));
+                    u === document.activeElement && (S(!0), m(!0));
                     break;
             }
         };
-        return document.addEventListener("keydown", n, !1), ()=>{
-            document.removeEventListener("keydown", n, !1);
+        return document.addEventListener("keydown", r, !1), ()=>{
+            document.removeEventListener("keydown", r, !1);
         };
-    }), o.useEffect(()=>{
-        d === null || d === void 0 ? void 0 : d.setAttribute("aria-haspopup", "menu"), d === null || d === void 0 ? void 0 : d.setAttribute("aria-expanded", String(r));
+    }), n.useEffect(()=>{
+        u === null || u === void 0 ? void 0 : u.setAttribute("aria-haspopup", "menu"), u === null || u === void 0 ? void 0 : u.setAttribute("aria-expanded", String(o));
     }, [
-        d,
-        r
-    ]), /* @__PURE__ */ N("div", _object_spread_props(_object_spread({}, ie(_object_spread({
+        u,
+        o
+    ]), /* @__PURE__ */ y("div", _object_spread_props(_object_spread({}, Q(_object_spread({
         testid: "Menu"
-    }, R))), {
+    }, l))), {
         children: [
-            c(_object_spread_props(_object_spread({}, x), {
-                isMenuOpen: r
+            i(_object_spread_props(_object_spread({}, H), {
+                isMenuOpen: o
             })),
-            /* @__PURE__ */ t(be, {
-                children: /* @__PURE__ */ t(Se, {
-                    in: r,
+            /* @__PURE__ */ t(Me, {
+                children: /* @__PURE__ */ t(Ae, {
+                    in: o,
                     nodeRef: D,
-                    timeout: ke() ? 0 : Ne,
-                    classNames: ae,
+                    timeout: ke() ? 0 : ye,
+                    classNames: le,
                     mountOnEnter: !0,
                     unmountOnExit: !0,
-                    onExit: ()=>d === null || d === void 0 ? void 0 : d.focus(),
+                    onExit: ()=>u === null || u === void 0 ? void 0 : u.focus(),
                     children: /* @__PURE__ */ t(ce, {
-                        onPress: (n)=>{
-                            A(n), u(!1);
+                        onPress: (r)=>{
+                            k(r), m(!1);
                         },
                         disableScroll: !0,
                         children: /* @__PURE__ */ t("div", {
-                            style: _object_spread({}, Ae(_object_spread({}, s ? _object_spread({
-                                [b.top]: s.top,
-                                [b.bottom]: s.bottom,
-                                [b.transformOrigin]: s.transformOrigin
+                            style: _object_spread({}, Z(_object_spread({}, s ? _object_spread({
+                                [O.top]: s.top,
+                                [O.bottom]: s.bottom,
+                                [O.transformOrigin]: s.transformOrigin
                             }, s.left !== void 0 && {
-                                [b.left]: `${s.left}px`
+                                [O.left]: `${s.left}px`
                             }, s.right !== void 0 && {
-                                [b.right]: `${s.right}px`
+                                [O.right]: `${s.right}px`
                             }, s.maxHeight !== void 0 && {
-                                [b.maxHeight]: `${s.maxHeight}px`
-                            }, f !== void 0 && {
-                                [b.width]: f ? `${f}px` : ""
+                                [O.maxHeight]: `${s.maxHeight}px`
+                            }, a !== void 0 && {
+                                [O.width]: a ? `${a}px` : ""
                             }) : {}))),
                             role: "menu",
-                            children: /* @__PURE__ */ t(Q.Provider, {
+                            children: /* @__PURE__ */ t(ee.Provider, {
                                 value: {
-                                    isMenuOpen: r,
-                                    focusedItem: p,
-                                    setFocusedItem: v,
-                                    closeMenu: ()=>u(!1)
+                                    isMenuOpen: o,
+                                    focusedItem: d,
+                                    setFocusedItem: T,
+                                    closeMenu: ()=>m(!1)
                                 },
-                                children: g(H)
+                                children: x(M)
                             })
                         })
                     })
@@ -365,4 +373,4 @@ const Ne = 120, Q = /*#__PURE__*/ o.createContext({
         ]
     }));
 };
-export { Ze as Menu, Je as MenuItem, Qe as MenuSection };
+export { nt as Menu, et as MenuItem, tt as MenuSection };

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

@@ -1,2 +1,2 @@
-/* empty css                                  */ var r = "v17_1_1j2q6te0", t = "v17_1_1j2q6te1", a = "v17_1_1j2q6te2";
-export { a as fourItemsContainer, t as singleItemRowContainer, r as squareContainer };
+/* empty css                                  */ var r = "v17_2_1j2q6te0", t = "v17_2_1j2q6te1", a = "v17_2_1j2q6te2", o = "v17_2_1j2q6te3";
+export { a as fourItemsContainer, o as horizontalMosaicPageContainer, t as singleItemRowContainer, r as squareContainer };

package/dist-es/mosaic.js

@@ -53,7 +53,7 @@ function _object_spread_props(target, source) {
 import { jsx as a, jsxs as b, Fragment as q } from "react/jsx-runtime";
 import { Grid as s, GridItem as n } from "./grid.js";
 import { Carousel as C } from "./carousel.js";
-import { fourItemsContainer as S, squareContainer as v, singleItemRowContainer as w } from "./mosaic.css-mistica.js";
+import { fourItemsContainer as z, squareContainer as v, singleItemRowContainer as M, horizontalMosaicPageContainer as S } from "./mosaic.css-mistica.js";
 const g = {
     mobile: 8,
     desktop: 16
@@ -62,7 +62,7 @@ const g = {
     }) : r, y = (param)=>{
     let { items: r, isEven: o } = param;
     return /* @__PURE__ */ a("div", {
-        className: r.length === 1 ? w : v,
+        className: `${r.length === 1 ? M : v} ${S}`,
         children: /* @__PURE__ */ a(s, {
             gap: g,
             rows: 2,
@@ -89,14 +89,14 @@ const g = {
                 }, e))
         })
     });
-}, N = (param)=>{
+}, j = (param)=>{
     let { items: r, withBullets: o, withControls: t = !0, free: e, "aria-label": p, "aria-labelledby": m, dataAttributes: f } = param;
     const d = r.length, u = d < 5 ? Math.min(d, 1) : Math.floor((d + 1) / 3), i = Array.from({
         length: u
     }, ()=>[]);
     return r.forEach((c, h)=>{
-        const M = Math.min(u - 1, Math.floor(h / 3));
-        i[M].push(c);
+        const w = Math.min(u - 1, Math.floor(h / 3));
+        i[w].push(c);
     }), /* @__PURE__ */ a(C, {
         "aria-label": p,
         "aria-labelledby": m,
@@ -104,6 +104,7 @@ const g = {
             testid: "horizontal-mosaic"
         }),
         items: i.map((c, h)=>/* @__PURE__ */ a(s, {
+                height: "100%",
                 children: /* @__PURE__ */ a(y, {
                     items: c,
                     isEven: h % 2 === 0
@@ -113,13 +114,13 @@ const g = {
         withControls: t,
         free: e
     });
-}, z = (param)=>{
+}, P = (param)=>{
     let { items: r, itemRole: o } = param;
     switch(r.length){
         case 1:
         case 2:
             return /* @__PURE__ */ a("div", {
-                className: w,
+                className: M,
                 role: "none",
                 children: /* @__PURE__ */ a(s, {
                     role: "none",
@@ -153,7 +154,7 @@ const g = {
         case 4:
         default:
             return /* @__PURE__ */ a("div", {
-                className: S,
+                className: z,
                 role: "none",
                 children: /* @__PURE__ */ b(s, {
                     role: "none",
@@ -188,7 +189,7 @@ const g = {
                 })
             });
     }
-}, j = (param)=>{
+}, x = (param)=>{
     let { items: r, dataAttributes: o, role: t = "list", itemRole: e = "listitem", "aria-label": p, "aria-labelledby": m } = param;
     const f = r.length, d = Math.ceil(f / 4), u = Array.from({
         length: d
@@ -205,10 +206,10 @@ const g = {
         dataAttributes: _object_spread({
             testid: "vertical-mosaic"
         }, o),
-        children: u.map((i, c)=>/* @__PURE__ */ a(z, {
+        children: u.map((i, c)=>/* @__PURE__ */ a(P, {
                 items: i,
                 itemRole: e
             }, c))
     });
 };
-export { N as HorizontalMosaic, j as VerticalMosaic };
+export { j as HorizontalMosaic, x as VerticalMosaic };