@telefonica/mistica 16.3.0 → 16.4.0

package/dist/list.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return ft;
+        return xt;
     },
     BoxedRowList: function() {
-        return bt;
+        return gt;
     },
     Content: function() {
-        return ze;
+        return Je;
     },
     Row: function() {
-        return ut;
+        return ft;
     },
     RowList: function() {
-        return mt;
+        return vt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -47,6 +47,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _css = require("./utils/css.js");
 const _iconbutton = require("./icon-button.js");
+const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -172,7 +173,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
+const Ge = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -183,29 +184,30 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             children: e
         })
-    }) : e, ze = (param)=>{
-    let { withChevron: e, headline: a, headlineRef: r, extraRef: o, title: d, titleAs: x, titleLinesMax: g, subtitle: v, subtitleLinesMax: D, description: w, descriptionLinesMax: M, detail: u, asset: E, danger: T, badge: N, right: y, rightRef: f, extra: L, labelId: O, disabled: c, control: k } = param;
-    const A = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), S = [
+    }) : e, Je = (param)=>{
+    let { withChevron: e, headline: a, headlineRef: i, extraRef: o, title: l, titleAs: x, titleLinesMax: g, subtitle: v, subtitleLinesMax: X, description: y, descriptionLinesMax: D, detail: u, asset: E, danger: N, badge: A, right: w, rightRef: b, extra: L, labelId: M, disabled: c, control: k } = param;
+    const S = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), V = [
         a,
-        d,
+        l,
         v,
-        w,
+        y,
         L
     ].filter(Boolean).length === 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _listcssmistica.content,
-        id: O,
+        id: M,
         children: [
             E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_listcssmistica.assetContainer, {
-                    [_listcssmistica.center]: S,
+                    [_listcssmistica.center]: V,
                     [_listcssmistica.disabled]: c
                 }),
                 "aria-hidden": !0,
+                "data-testid": "asset",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.asset,
                     style: (0, _css.applyCssVars)({
-                        color: T ? A ? _skincontractcssmistica.vars.colors.textErrorInverse : _skincontractcssmistica.vars.colors.textError : A ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textPrimary,
+                        color: N ? S ? _skincontractcssmistica.vars.colors.textErrorInverse : _skincontractcssmistica.vars.colors.textError : S ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textPrimary,
                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                     }),
                     children: E
@@ -216,19 +218,22 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     [_listcssmistica.disabled]: c
                 }),
                 style: {
-                    justifyContent: S ? "center" : "flex-start"
+                    justifyContent: V ? "center" : "flex-start"
                 },
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                         regular: !0,
-                        color: T ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
+                        color: N ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
                         truncate: g,
                         hyphens: "auto",
                         as: x,
-                        children: d
+                        dataAttributes: {
+                            testid: "title"
+                        },
+                        children: l
                     }),
                     a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: r,
+                        ref: i,
                         style: {
                             order: -1,
                             paddingBottom: 4
@@ -237,6 +242,9 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textPrimary,
                             hyphens: "auto",
+                            dataAttributes: {
+                                testid: "headline"
+                            },
                             children: a
                         })
                     }),
@@ -245,40 +253,49 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textPrimary,
-                            truncate: D,
+                            truncate: X,
                             hyphens: "auto",
+                            dataAttributes: {
+                                testid: "subtitle"
+                            },
                             children: v
                         })
                     }),
-                    w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    y && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 2,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            truncate: M,
+                            truncate: D,
                             hyphens: "auto",
-                            children: w
+                            dataAttributes: {
+                                testid: "description"
+                            },
+                            children: y
                         })
                     }),
                     L && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         ref: o,
                         paddingTop: 2,
+                        dataAttributes: {
+                            testid: "slot"
+                        },
                         children: L
                     })
                 ]
             }),
-            N && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            A && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingLeft: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_listcssmistica.badge, {
                         [_listcssmistica.disabled]: c
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                        value: N === !0 ? void 0 : N
+                        value: A === !0 ? void 0 : A
                     })
                 })
             }),
-            (u || y || e || k) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            (u || w || e || k) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_listcssmistica.rightContent, {
                     [_listcssmistica.rightRestrictedWidth]: !!u
                 }),
@@ -291,32 +308,37 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             hyphens: "auto",
+                            dataAttributes: {
+                                testid: "detail"
+                            },
                             children: u
                         })
                     }),
-                    y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    w && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)({
                             [_listcssmistica.detailRight]: !!u,
                             [_listcssmistica.disabled]: c
                         }),
-                        ref: f,
-                        children: qe(y, S)
+                        ref: b,
+                        "data-testid": "endSlot",
+                        children: Ge(w, V)
                     }),
                     e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingLeft: u || y ? 4 : 0
+                            paddingLeft: u || w ? 4 : 0
                         },
                         className: (0, _classnames.default)(_listcssmistica.center, {
                             [_listcssmistica.disabled]: c
                         }),
+                        "data-testid": "chevron",
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
-                            color: A ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
+                            color: S ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
                             direction: "right"
                         })
                     }),
                     k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         style: {
-                            paddingLeft: u || y ? 8 : 0
+                            paddingLeft: u || w ? 8 : 0
                         },
                         className: _listcssmistica.center,
                         children: k
@@ -325,31 +347,31 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         ]
     });
-}, Ge = (param)=>{
-    let { value: e, defaultValue: a, onChange: r } = param;
-    const o = e !== void 0, [d, x] = _react.useState(!!a);
+}, Ke = (param)=>{
+    let { value: e, defaultValue: a, onChange: i } = param;
+    const o = e !== void 0, [l, x] = _react.useState(!!a);
     return [
-        o ? !!e : d,
+        o ? !!e : l,
         ()=>{
-            o || x(!d), r == null || r(o ? !e : !d);
+            o || x(!l), i == null || i(o ? !e : !l);
         }
     ];
-}, Je = (e)=>[
+}, Qe = (e)=>[
         "switch",
         "checkbox",
         "radioValue",
         "iconButton"
     ].some((a)=>e[a] !== void 0), le = /*#__PURE__*/ _react.forwardRef((e, a)=>{
-    var p, ee;
-    const r = _react.useId(), o = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { asset: d, headline: x, title: g, titleAs: v, titleLinesMax: D, subtitle: w, subtitleLinesMax: M, description: u, descriptionLinesMax: E, detail: T, danger: N, badge: y, role: f, extra: L, withChevron: O, dataAttributes: c, right: k, "aria-label": A } = e, [U, S] = _react.useState(""), [de, ce] = _react.useState(""), [se, he] = _react.useState(""), ue = [
+    var ee, te;
+    const i = _react.useId(), o = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { asset: l, headline: x, title: g, titleAs: v, titleLinesMax: X, subtitle: y, subtitleLinesMax: D, description: u, descriptionLinesMax: E, detail: N, danger: A, badge: w, role: b, extra: L, withChevron: M, dataAttributes: c, right: k, "aria-label": S } = e, [U, V] = _react.useState(""), [ce, se] = _react.useState(""), [he, ue] = _react.useState(""), me = [
         g,
         U,
-        w,
+        y,
         u,
-        de,
-        T,
-        se
-    ].filter(Boolean).join(" "), B = A !== null && A !== void 0 ? A : e.href || e.to ? ue : void 0, me = (0, _radiobutton.useRadioContext)(), b = e.disabled || e.radioValue !== void 0 && me.disabled, W = !b && !o, j = !b && o, Y = Je(e), V = !!e.onPress || !!e.href || !!e.to, fe = Y ? !1 : O !== null && O !== void 0 ? O : V, Z = {
+        ce,
+        N,
+        he
+    ].filter(Boolean).join(" "), R = S !== null && S !== void 0 ? S : e.href || e.to ? me : void 0, be = (0, _radiobutton.useRadioContext)(), f = e.disabled || e.radioValue !== void 0 && be.disabled, W = !f && !o, j = !f && o, Y = Qe(e), P = !!e.onPress || !!e.href || !!e.to, fe = Y ? !1 : M !== null && M !== void 0 ? M : P, Z = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -359,95 +381,95 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         onNavigate: e.onNavigate,
         onPress: e.onPress,
         trackingEvent: e.trackingEvent
-    }, [_, $] = Ge(e.switch || e.checkbox || {}), R = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ze, {
-            asset: d,
+    }, [_, $] = Ke(e.switch || e.checkbox || {}), B = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Je, {
+            asset: l,
             headline: x,
-            headlineRef: (i)=>{
-                i && S(i.textContent || "");
+            headlineRef: (n)=>{
+                n && V(n.textContent || "");
             },
             title: g,
             titleAs: v,
-            subtitle: w,
+            subtitle: y,
             description: u,
-            badge: y,
-            titleLinesMax: D,
-            subtitleLinesMax: M,
+            badge: w,
+            titleLinesMax: X,
+            subtitleLinesMax: D,
             descriptionLinesMax: E,
-            detail: T,
-            danger: N,
+            detail: N,
+            danger: A,
             right: k,
-            rightRef: (i)=>{
-                i && he(i.innerText || i.textContent || "");
+            rightRef: (n)=>{
+                n && ue(n.innerText || n.textContent || "");
             },
-            control: n == null ? void 0 : n.control,
+            control: r == null ? void 0 : r.control,
             extra: L,
-            extraRef: (i)=>{
-                i && ce(i.innerText || i.textContent || "");
+            extraRef: (n)=>{
+                n && se(n.innerText || n.textContent || "");
             },
-            labelId: n == null ? void 0 : n.labelId,
-            disabled: b,
+            labelId: r == null ? void 0 : r.labelId,
+            disabled: f,
             withChevron: fe
         });
-    if (V && !Y) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (P && !Y) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: a,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: W,
             [_listcssmistica.touchableBackgroundInverse]: j,
-            [_listcssmistica.pointer]: !b
+            [_listcssmistica.pointer]: !f
         })
     }, Z), {
-        role: f,
+        role: b,
         dataAttributes: c,
-        disabled: b,
-        "aria-label": B,
+        disabled: f,
+        "aria-label": R,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingX: 16,
             "aria-hidden": !!e.to || !!e.href || void 0,
-            children: R()
+            children: B()
         })
     }));
-    const H = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+    const H = (r)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(c)), {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-                    disabled: b
+                    disabled: f
                 }, Z), {
-                    role: f,
+                    role: b,
                     className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
                         [_listcssmistica.touchableBackground]: W,
                         [_listcssmistica.touchableBackgroundInverse]: j
                     }),
-                    "aria-label": B,
-                    children: R({
-                        labelId: r
+                    "aria-label": R,
+                    children: B({
+                        labelId: i
                     })
                 })),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.dualActionDivider
                 }),
-                n
+                r
             ]
-        })), F = (n, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        })), F = (r, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
-                [_listcssmistica.touchableBackground]: W && i,
-                [_listcssmistica.touchableBackgroundInverse]: j && i,
-                [_listcssmistica.pointer]: !b && i
+                [_listcssmistica.touchableBackground]: W && n,
+                [_listcssmistica.touchableBackgroundInverse]: j && n,
+                [_listcssmistica.pointer]: !f && n
             }),
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(c)), {
-            children: n
+            children: r
         }));
     if (e.switch || e.checkbox) {
         var _ref, _ref1;
-        const n = e.switch ? _switchcomponent.default : _checkbox.default, i = (_ref1 = (_ref = (p = e.switch) == null ? void 0 : p.name) !== null && _ref !== void 0 ? _ref : (ee = e.checkbox) == null ? void 0 : ee.name) !== null && _ref1 !== void 0 ? _ref1 : r;
-        return V ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
-            disabled: b,
-            name: i,
+        const r = e.switch ? _switchcomponent.default : _checkbox.default, n = (_ref1 = (_ref = (ee = e.switch) == null ? void 0 : ee.name) !== null && _ref !== void 0 ? _ref : (te = e.checkbox) == null ? void 0 : te.name) !== null && _ref1 !== void 0 ? _ref1 : i;
+        return P ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(r, {
+            disabled: f,
+            name: n,
             checked: _,
-            "aria-label": B,
-            "aria-labelledby": r,
+            "aria-label": R,
+            "aria-labelledby": i,
             onChange: $,
             render: (param)=>{
                 let { controlElement: q } = param;
@@ -456,20 +478,20 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     children: q
                 });
             }
-        })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
-            disabled: b,
-            name: i,
+        })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(r, {
+            disabled: f,
+            name: n,
             checked: _,
-            "aria-label": B,
-            "aria-labelledby": r,
+            "aria-label": R,
+            "aria-labelledby": i,
             onChange: $,
             render: (param)=>{
-                let { controlElement: q, labelId: be } = param;
+                let { controlElement: q, labelId: ve } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
-                    role: f,
-                    children: R({
-                        labelId: be,
+                    role: b,
+                    children: B({
+                        labelId: ve,
                         control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                             space: "around",
                             children: q
@@ -479,39 +501,40 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }
         }), !0);
     }
-    return e.radioValue ? V ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    if (e.radioValue) return P ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
-        "aria-label": B,
-        "aria-labelledby": r,
+        "aria-label": R,
+        "aria-labelledby": i,
         render: (param)=>{
-            let { controlElement: n } = param;
+            let { controlElement: r } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: "around",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
-                    children: n
+                    children: r
                 })
             });
         }
     })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
-        "aria-label": B,
-        "aria-labelledby": r,
+        "aria-label": R,
+        "aria-labelledby": i,
         render: (param)=>{
-            let { controlElement: n } = param;
+            let { controlElement: r } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 16,
-                role: f,
-                children: R({
-                    labelId: r,
+                role: b,
+                children: B({
+                    labelId: i,
                     control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                         space: "around",
-                        children: n
+                        children: r
                     })
                 })
             });
         }
-    }), !0) : e.iconButton ? V ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    }), !0);
+    if (e.iconButton) return P ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         padding: 16,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: "around",
@@ -523,49 +546,62 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         })
     })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingX: 16,
-        children: R({
-            labelId: r,
+        children: B({
+            labelId: i,
             control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: "around",
                 children: e.iconButton.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: f
+                    role: b
                 })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: f
+                    role: b
                 }))
             })
         })
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+    }));
+    const p = !!e["aria-label"];
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_listcssmistica.rowContent, _listcssmistica.rowContentPadding),
-        role: f
+        role: b
     }, (0, _dom.getPrefixedDataAttributes)(c)), {
         ref: a,
-        children: R()
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                "aria-hidden": p,
+                children: B()
+            }),
+            p && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
+                    children: e["aria-label"]
+                })
+            })
+        ]
     }));
-}), ut = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
-    var { dataAttributes: e, role: a = "listitem" } = _param, r = _object_without_properties(_param, [
+}), ft = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    var { dataAttributes: e, role: a = "listitem" } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: a,
         className: _listcssmistica.row,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread_props(_object_spread({}, r), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread_props(_object_spread({}, i), {
             ref: o,
             dataAttributes: _object_spread({
-                "component-name": "Row"
+                "component-name": "Row",
+                testid: "Row"
             }, e)
         }))
     });
-}), mt = (param)=>{
-    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: o } = param;
-    const d = _react.Children.toArray(e).filter(Boolean), x = d.length - 1;
+}), vt = (param)=>{
+    let { children: e, ariaLabelledby: a, role: i = "list", dataAttributes: o } = param;
+    const l = _react.Children.toArray(e).filter(Boolean), x = l.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        role: r,
+        role: i,
         "aria-labelledby": a
     }, (0, _dom.getPrefixedDataAttributes)(o, "RowList")), {
-        children: d.map((g, v)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+        children: l.map((g, v)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                 children: [
                     g,
                     v < x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -575,26 +611,28 @@ const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 ]
             }, v))
     }));
-}, ft = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}, xt = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
-        isInverse: a.isInverse,
-        ref: r,
+        variant: a.isInverse ? "inverse" : "default",
+        ref: i,
         dataAttributes: _object_spread({
-            "component-name": "BoxedRow"
+            "component-name": "BoxedRow",
+            testid: "BoxedRow"
         }, e),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread({}, a))
     });
-}), bt = (param)=>{
-    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: o } = param;
+}), gt = (param)=>{
+    let { children: e, ariaLabelledby: a, role: i = "list", dataAttributes: o } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,
-        role: r,
+        role: i,
         "aria-labelledby": a,
         dataAttributes: _object_spread({
-            "component-name": "BoxedRowList"
+            "component-name": "BoxedRowList",
+            testid: "BoxedRowList"
         }, o),
         children: e
     });

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

@@ -10,10 +10,10 @@ function _export(target, all) {
 }
 _export(exports, {
     hidden: function() {
-        return r;
+        return _;
     },
     portal: function() {
-        return _;
+        return r;
     },
     progress: function() {
         return f;
@@ -24,4 +24,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./loading-bar.css.ts.vanilla.css-mistica.js");
-var r = "_1num3qg3", _ = "_1num3qg2 _1y2v1nfhg _1y2v1nfkr _1y2v1nfl6 _1y2v1nfll", f = "_1num3qg7 _1y2v1nfhf _1y2v1nfi7 _1y2v1nfio", y = "_1y2v1nfi7 _1y2v1nfkl _1y2v1nfhe _1y2v1nf54 _1y2v1nfir";
+var _ = "_1num3qg3", r = "_1num3qg2 _1y2v1nfhk _1y2v1nfkv _1y2v1nfla _1y2v1nflp", f = "_1num3qg7 _1y2v1nfhj _1y2v1nfib _1y2v1nfis", y = "_1y2v1nfib _1y2v1nfkp _1y2v1nfhi _1y2v1nf57 _1y2v1nfiv";

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

@@ -31,13 +31,13 @@ _export(exports, {
         return o;
     },
     pulseLogo: function() {
-        return k;
+        return d;
     },
     screenBackground: function() {
         return t;
     },
     screenBackgroundAnimated: function() {
-        return d;
+        return k;
     },
     screenBackgroundFadeOut: function() {
         return c;
@@ -45,7 +45,7 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./loading-screen.css.ts.vanilla.css-mistica.js");
-var r = 500, a = "flke8b1 _1y2v1nfhk _1y2v1nfhq _1y2v1nfhz", f = "_1y2v1nfi6 _1y2v1nfhk _1y2v1nfhq _1y2v1nfhz _1y2v1nfht", v = "flke8b9 _1y2v1nf7y", l = "flke8bb", i = "flke8bc", o = "flke8bf", k = "flke8be", t = {
+var r = 500, a = "flke8b1 _1y2v1nfho _1y2v1nfhu _1y2v1nfi3", f = "_1y2v1nfia _1y2v1nfho _1y2v1nfhu _1y2v1nfi3 _1y2v1nfhx", v = "flke8b9 _1y2v1nf82", l = "flke8bb", i = "flke8bc", o = "flke8bf", d = "flke8be", t = {
     default: "flke8b4",
     inverse: "flke8b5"
-}, d = "flke8b3", c = "flke8b6";
+}, k = "flke8b3", c = "flke8b6";