@telefonica/mistica 16.1.1 → 16.3.0

package/dist/list.css-mistica.js

@@ -12,58 +12,67 @@ _export(exports, {
     asset: function() {
         return _;
     },
-    badge: function() {
+    assetContainer: function() {
         return f;
     },
-    center: function() {
+    badge: function() {
         return y;
     },
-    content: function() {
+    center: function() {
         return a;
     },
-    detail: function() {
+    content: function() {
         return r;
     },
-    detailRight: function() {
+    detail: function() {
         return i;
     },
-    disabled: function() {
+    detailRight: function() {
         return t;
     },
+    disabled: function() {
+        return o;
+    },
     dualActionContainer: function() {
         return h;
     },
     dualActionDivider: function() {
-        return o;
+        return e;
     },
     dualActionLeft: function() {
-        return e;
+        return b;
     },
     dualActionRight: function() {
-        return b;
+        return d;
     },
     pointer: function() {
-        return d;
+        return g;
     },
     rightContent: function() {
-        return k;
+        return u;
     },
     rightRestrictedWidth: function() {
-        return u;
+        return k;
+    },
+    row: function() {
+        return j;
     },
     rowBody: function() {
-        return g;
+        return c;
     },
     rowContent: function() {
-        return c;
+        return l;
+    },
+    rowContentPadding: function() {
+        return s;
     },
     touchableBackground: function() {
-        return j;
+        return m;
     },
     touchableBackgroundInverse: function() {
-        return l;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nfhk _1y2v1nfi2 _1y2v1nfi4", f = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfja _1y2v1nfio _1y2v1nfi2", y = "_1y2v1nfhk _1y2v1nfhz", a = "_1y2v1nfhk _1y2v1nfi7 _1y2v1nfjx", r = "_2buj9ge _1y2v1nfhk _1y2v1nfhz", i = "_2buj9gd", t = "_2buj9g0", h = "_1y2v1nfhk _1y2v1nfhp _1y2v1nfio", o = "_2buj9gk _1y2v1nfhk", e = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhm _1y2v1nfi5", b = "_2buj9gm _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhz _1y2v1nfi4 _1y2v1nfi8 _1y2v1nfio", d = "_1y2v1nfkk", k = "_2buj9gb", u = "_2buj9gc", g = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfi6", c = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", j = "_2buj9g1", l = "_2buj9g2";
+var _ = "_1y2v1nfhk _1y2v1nfi2 _1y2v1nfi4", f = "_1y2v1nfbj", y = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfja _1y2v1nfio _1y2v1nfi2", a = "_1y2v1nfhk _1y2v1nfhz", r = "_1y2v1nf7s _1y2v1nf91 _1y2v1nfhk _1y2v1nfi7 _1y2v1nfjx", i = "_2buj9gh _1y2v1nfhk _1y2v1nfhz", t = "_2buj9gg", o = "_2buj9g0", h = "_1y2v1nfhk _1y2v1nfhp _1y2v1nfio", e = "_2buj9gn _1y2v1nfhk", b = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhm _1y2v1nfi5", d = "_2buj9gp _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhz _1y2v1nfi4 _1y2v1nfi8 _1y2v1nfio", g = "_1y2v1nfkk", u = "_2buj9ge", k = "_2buj9gf", j = "_1y2v1nfi7", c = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfi6", l = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", s = "_1y2v1nfaa _1y2v1nfbj", m = "_2buj9g2", p = "_2buj9g3";

package/dist/list.css.d.ts

@@ -1,9 +1,12 @@
 export declare const disabled: string;
+export declare const row: string;
 export declare const touchableBackground: string;
 export declare const touchableBackgroundInverse: string;
 export declare const pointer: string;
 export declare const rowContent: string;
+export declare const rowContentPadding: string;
 export declare const content: string;
+export declare const assetContainer: string;
 export declare const asset: string;
 export declare const rowBody: string;
 export declare const center: string;

package/dist/list.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return ut;
+        return ft;
     },
     BoxedRowList: function() {
-        return ft;
+        return bt;
     },
     Content: function() {
-        return Fe;
+        return ze;
     },
     Row: function() {
-        return ht;
+        return ut;
     },
     RowList: function() {
         return mt;
@@ -47,7 +47,6 @@ 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 _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -173,7 +172,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
+const qe = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -184,25 +183,23 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             children: e
         })
-    }) : e, Fe = (param)=>{
-    let { withChevron: e, headline: a, headlineRef: r, extraRef: l, title: c, titleAs: v, titleLinesMax: g, subtitle: x, subtitleLinesMax: P, description: w, descriptionLinesMax: D, detail: h, asset: E, danger: T, badge: N, right: y, rightRef: f, extra: k, labelId: M, disabled: s, control: L } = param;
+    }) : 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 = [
         a,
-        c,
-        x,
+        d,
+        v,
         w,
-        k
+        L
     ].filter(Boolean).length === 1;
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
-        paddingY: 16,
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _listcssmistica.content,
-        id: M,
+        id: O,
         children: [
-            E && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingRight: 16,
-                className: (0, _classnames.default)({
+            E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: (0, _classnames.default)(_listcssmistica.assetContainer, {
                     [_listcssmistica.center]: S,
-                    [_listcssmistica.disabled]: s
+                    [_listcssmistica.disabled]: c
                 }),
                 "aria-hidden": !0,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -216,7 +213,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_listcssmistica.rowBody, {
-                    [_listcssmistica.disabled]: s
+                    [_listcssmistica.disabled]: c
                 }),
                 style: {
                     justifyContent: S ? "center" : "flex-start"
@@ -227,8 +224,8 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                         color: T ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
                         truncate: g,
                         hyphens: "auto",
-                        as: v,
-                        children: c
+                        as: x,
+                        children: d
                     }),
                     a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         ref: r,
@@ -243,14 +240,14 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             children: a
                         })
                     }),
-                    x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 2,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textPrimary,
-                            truncate: P,
+                            truncate: D,
                             hyphens: "auto",
-                            children: x
+                            children: v
                         })
                     }),
                     w && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -258,15 +255,15 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            truncate: D,
+                            truncate: M,
                             hyphens: "auto",
                             children: w
                         })
                     }),
-                    k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        ref: l,
+                    L && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                        ref: o,
                         paddingTop: 2,
-                        children: k
+                        children: L
                     })
                 ]
             }),
@@ -274,81 +271,85 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 paddingLeft: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: (0, _classnames.default)(_listcssmistica.badge, {
-                        [_listcssmistica.disabled]: s
+                        [_listcssmistica.disabled]: c
                     }),
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
                         value: N === !0 ? void 0 : N
                     })
                 })
             }),
-            (h || y || e || L) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            (u || y || e || k) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_listcssmistica.rightContent, {
-                    [_listcssmistica.rightRestrictedWidth]: !!h
+                    [_listcssmistica.rightRestrictedWidth]: !!u
                 }),
                 children: [
-                    h && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_listcssmistica.detail, {
-                            [_listcssmistica.disabled]: s
+                            [_listcssmistica.disabled]: c
                         }),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             hyphens: "auto",
-                            children: h
+                            children: u
                         })
                     }),
                     y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)({
-                            [_listcssmistica.detailRight]: !!h,
-                            [_listcssmistica.disabled]: s
+                            [_listcssmistica.detailRight]: !!u,
+                            [_listcssmistica.disabled]: c
                         }),
                         ref: f,
-                        children: He(y, S)
+                        children: qe(y, S)
                     }),
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingLeft: h || y ? 4 : 0,
+                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingLeft: u || y ? 4 : 0
+                        },
                         className: (0, _classnames.default)(_listcssmistica.center, {
-                            [_listcssmistica.disabled]: s
+                            [_listcssmistica.disabled]: c
                         }),
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
                             color: A ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
                             direction: "right"
                         })
                     }),
-                    L && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingLeft: h || y ? 8 : 0,
+                    k && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingLeft: u || y ? 8 : 0
+                        },
                         className: _listcssmistica.center,
-                        children: L
+                        children: k
                     })
                 ]
             })
         ]
     });
-}, Ye = (param)=>{
+}, Ge = (param)=>{
     let { value: e, defaultValue: a, onChange: r } = param;
-    const l = e !== void 0, [c, v] = _react.useState(!!a);
+    const o = e !== void 0, [d, x] = _react.useState(!!a);
     return [
-        l ? !!e : c,
+        o ? !!e : d,
         ()=>{
-            l || v(!c), r == null || r(l ? !e : !c);
+            o || x(!d), r == null || r(o ? !e : !d);
         }
     ];
-}, qe = (e)=>[
+}, Je = (e)=>[
         "switch",
         "checkbox",
         "radioValue",
         "iconButton"
     ].some((a)=>e[a] !== void 0), le = /*#__PURE__*/ _react.forwardRef((e, a)=>{
     var p, ee;
-    const r = _react.useId(), l = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), { asset: c, headline: v, title: g, titleAs: x, titleLinesMax: P, subtitle: w, subtitleLinesMax: D, description: h, descriptionLinesMax: E, detail: T, danger: N, badge: y, role: f, extra: k, withChevron: M, dataAttributes: s, right: L, "aria-label": A } = e, [Q, S] = _react.useState(""), [de, ce] = _react.useState(""), [se, he] = _react.useState(""), me = [
+    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 = [
         g,
-        Q,
+        U,
         w,
-        h,
+        u,
         de,
         T,
         se
-    ].filter(Boolean).join(" "), B = A !== null && A !== void 0 ? A : e.href || e.to ? me : void 0, ue = (0, _radiobutton.useRadioContext)(), b = e.disabled || e.radioValue !== void 0 && ue.disabled, O = !b && !l, W = !b && l, U = qe(e), V = !!e.onPress || !!e.href || !!e.to, fe = U ? !1 : M !== null && M !== void 0 ? M : V, Z = {
+    ].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 = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -358,45 +359,45 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         onNavigate: e.onNavigate,
         onPress: e.onPress,
         trackingEvent: e.trackingEvent
-    }, [_, $] = Ye(e.switch || e.checkbox || {}), R = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, {
-            asset: c,
-            headline: v,
-            headlineRef: (n)=>{
-                n && S(n.textContent || "");
+    }, [_, $] = Ge(e.switch || e.checkbox || {}), R = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(ze, {
+            asset: d,
+            headline: x,
+            headlineRef: (i)=>{
+                i && S(i.textContent || "");
             },
             title: g,
-            titleAs: x,
+            titleAs: v,
             subtitle: w,
-            description: h,
+            description: u,
             badge: y,
-            titleLinesMax: P,
-            subtitleLinesMax: D,
+            titleLinesMax: D,
+            subtitleLinesMax: M,
             descriptionLinesMax: E,
             detail: T,
             danger: N,
-            right: L,
-            rightRef: (n)=>{
-                n && he(n.innerText || n.textContent || "");
+            right: k,
+            rightRef: (i)=>{
+                i && he(i.innerText || i.textContent || "");
             },
-            control: i == null ? void 0 : i.control,
-            extra: k,
-            extraRef: (n)=>{
-                n && ce(n.innerText || n.textContent || "");
+            control: n == null ? void 0 : n.control,
+            extra: L,
+            extraRef: (i)=>{
+                i && ce(i.innerText || i.textContent || "");
             },
-            labelId: i == null ? void 0 : i.labelId,
+            labelId: n == null ? void 0 : n.labelId,
             disabled: b,
             withChevron: fe
         });
-    if (V && !U) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (V && !Y) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: a,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
-            [_listcssmistica.touchableBackground]: O,
-            [_listcssmistica.touchableBackgroundInverse]: W,
+            [_listcssmistica.touchableBackground]: W,
+            [_listcssmistica.touchableBackgroundInverse]: j,
             [_listcssmistica.pointer]: !b
         })
     }, Z), {
         role: f,
-        dataAttributes: s,
+        dataAttributes: c,
         disabled: b,
         "aria-label": B,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
@@ -405,18 +406,18 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             children: R()
         })
     }));
-    const j = (i)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+    const H = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
             ref: a
-        }, (0, _dom.getPrefixedDataAttributes)(s)), {
+        }, (0, _dom.getPrefixedDataAttributes)(c)), {
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
                     disabled: b
                 }, Z), {
                     role: f,
                     className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
-                        [_listcssmistica.touchableBackground]: O,
-                        [_listcssmistica.touchableBackgroundInverse]: W
+                        [_listcssmistica.touchableBackground]: W,
+                        [_listcssmistica.touchableBackgroundInverse]: j
                     }),
                     "aria-label": B,
                     children: R({
@@ -426,44 +427,44 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.dualActionDivider
                 }),
-                i
+                n
             ]
-        })), H = (i, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        })), F = (n, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
-                [_listcssmistica.touchableBackground]: O && n,
-                [_listcssmistica.touchableBackgroundInverse]: W && n,
-                [_listcssmistica.pointer]: !b && n
+                [_listcssmistica.touchableBackground]: W && i,
+                [_listcssmistica.touchableBackgroundInverse]: j && i,
+                [_listcssmistica.pointer]: !b && i
             }),
             ref: a
-        }, (0, _dom.getPrefixedDataAttributes)(s)), {
-            children: i
+        }, (0, _dom.getPrefixedDataAttributes)(c)), {
+            children: n
         }));
     if (e.switch || e.checkbox) {
         var _ref, _ref1;
-        const i = e.switch ? _switchcomponent.default : _checkbox.default, n = (_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 ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+        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: n,
+            name: i,
             checked: _,
             "aria-label": B,
             "aria-labelledby": r,
             onChange: $,
             render: (param)=>{
-                let { controlElement: F } = param;
+                let { controlElement: q } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.dualActionRight,
-                    children: F
+                    children: q
                 });
             }
-        })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+        })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
             disabled: b,
-            name: n,
+            name: i,
             checked: _,
             "aria-label": B,
             "aria-labelledby": r,
             onChange: $,
             render: (param)=>{
-                let { controlElement: F, labelId: be } = param;
+                let { controlElement: q, labelId: be } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
                     role: f,
@@ -471,33 +472,33 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                         labelId: be,
                         control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                             space: "around",
-                            children: F
+                            children: q
                         })
                     })
                 });
             }
         }), !0);
     }
-    return e.radioValue ? V ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    return e.radioValue ? V ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
         "aria-label": B,
         "aria-labelledby": r,
         render: (param)=>{
-            let { controlElement: i } = param;
+            let { controlElement: n } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: "around",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
-                    children: i
+                    children: n
                 })
             });
         }
-    })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
         "aria-label": B,
         "aria-labelledby": r,
         render: (param)=>{
-            let { controlElement: i } = param;
+            let { controlElement: n } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingX: 16,
                 role: f,
@@ -505,12 +506,12 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     labelId: r,
                     control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                         space: "around",
-                        children: i
+                        children: n
                     })
                 })
             });
         }
-    }), !0) : e.iconButton ? V ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    }), !0) : e.iconButton ? V ? H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         padding: 16,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: "around",
@@ -520,7 +521,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 disabled: e.disabled
             }))
         })
-    })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingX: 16,
         children: R({
             labelId: r,
@@ -535,49 +536,46 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                 }))
             })
         })
-    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-        paddingX: 16,
-        className: _listcssmistica.rowContent,
-        role: f,
-        dataAttributes: s,
+    })) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        className: (0, _classnames.default)(_listcssmistica.rowContent, _listcssmistica.rowContentPadding),
+        role: f
+    }, (0, _dom.getPrefixedDataAttributes)(c)), {
         ref: a,
         children: R()
-    });
-}), ht = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+    }));
+}), ut = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, r = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: a,
-        className: (0, _sprinklescssmistica.sprinkles)({
-            width: "100%"
-        }),
+        className: _listcssmistica.row,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread_props(_object_spread({}, r), {
-            ref: l,
+            ref: o,
             dataAttributes: _object_spread({
                 "component-name": "Row"
             }, e)
         }))
     });
 }), mt = (param)=>{
-    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
-    const c = _react.Children.toArray(e).filter(Boolean), v = c.length - 1;
+    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: o } = param;
+    const d = _react.Children.toArray(e).filter(Boolean), x = d.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
         role: r,
         "aria-labelledby": a
-    }, (0, _dom.getPrefixedDataAttributes)(l, "RowList")), {
-        children: c.map((g, x)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+    }, (0, _dom.getPrefixedDataAttributes)(o, "RowList")), {
+        children: d.map((g, v)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                 children: [
                     g,
-                    x < v && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    v < x && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingX: 16,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                     })
                 ]
-            }, x))
+            }, v))
     }));
-}, ut = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
+}, ft = /*#__PURE__*/ _react.forwardRef((_param, r)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -589,15 +587,15 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread({}, a))
     });
-}), ft = (param)=>{
-    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
+}), bt = (param)=>{
+    let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: o } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,
         role: r,
         "aria-labelledby": a,
         dataAttributes: _object_spread({
             "component-name": "BoxedRowList"
-        }, l),
+        }, o),
         children: e
     });
 };