@telefonica/mistica 16.1.0 → 16.2.0

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return Y;
+        return X;
     },
     ImageError: function() {
-        return X;
+        return Q;
     },
     RATIO: function() {
         return H;
     },
     default: function() {
-        return f1;
+        return h1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -32,7 +32,6 @@ const _dom = require("./utils/dom.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _hooks = require("./hooks.js");
 const _constants = require("./skins/constants.js");
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _common = require("./utils/common.js");
@@ -163,7 +162,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Q = (param)=>{
+const J = (param)=>{
     let { style: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -177,9 +176,9 @@ const Q = (param)=>{
             strokeWidth: "2"
         })
     });
-}, X = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+}, Q = /*#__PURE__*/ _react.forwardRef((param, n)=>{
     let { borderRadius: e, withIcon: C = !0, border: d, className: m } = param;
-    const a = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
+    const a = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             height: "100%",
@@ -192,15 +191,15 @@ const Q = (param)=>{
             border: d ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: e
         },
-        ref: s,
+        ref: n,
         className: m,
-        children: C ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+        children: C ? s === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
             style: {
                 width: "10%",
                 minWidth: 24,
                 maxWidth: 48
             }
-        }) : n === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+        }) : s === _constants.VIVO_NEW_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
             viewBox: "0 0 24 24",
             role: "presentation",
             style: {
@@ -241,8 +240,8 @@ const Q = (param)=>{
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, Y = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
-    var { aspectRatio: e = 0, alt: C = "", dataAttributes: d, noBorderRadius: m, src: s, srcSet: a, onError: n, onLoad: l, loadingFallback: M = !0, errorFallback: x = !0 } = _param, i = _object_without_properties(_param, [
+}, X = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
+    var { aspectRatio: e = 0, alt: C = "", dataAttributes: d, noBorderRadius: m, src: n, srcSet: a, onError: s, onLoad: l, loadingFallback: M = !0, errorFallback: x = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -255,7 +254,7 @@ const Q = (param)=>{
         "errorFallback"
     ]);
     var I;
-    const h = _react.useId(), c = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [y, f] = _react.useState(!s), [B, g] = _react.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), A = x && !!(L !== 0 || i.width && i.height), v = _react.useCallback(()=>{
+    const h = _react.useId(), c = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [y, f] = _react.useState(!n), [B, g] = _react.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), A = x && !!(L !== 0 || i.width && i.height), v = _react.useCallback(()=>{
         f(!1), c.current && (c.current.style.opacity = "1"), setTimeout(()=>{
             g(!0);
         }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
@@ -263,9 +262,9 @@ const Q = (param)=>{
         l
     ]);
     _react.useEffect(()=>{
-        f(!s), g(!1);
+        f(!n), g(!1);
     }, [
-        s
+        n
     ]), _react.useEffect(()=>{
         var R;
         (R = c.current) != null && R.complete && v();
@@ -278,19 +277,18 @@ const Q = (param)=>{
                 suppressHydrationWarning: !0,
                 id: h,
                 style: {
-                    opacity: N && b ? 0 : 1
+                    opacity: N && b ? 0 : 1,
+                    position: L !== 0 ? "absolute" : "static"
                 },
                 ref: (0, _common.combineRefs)(c, S),
-                src: s,
+                src: n,
                 srcSet: a,
                 className: (0, _classnames.default)(u, _imagecssmistica.image, {
                     [_imagecssmistica.imageWithBorder]: i.border
-                }, (0, _sprinklescssmistica.sprinkles)({
-                    position: L !== 0 ? "absolute" : "static"
-                })),
+                }),
                 alt: C,
                 onError: ()=>{
-                    f(!0), g(!0), n == null || n();
+                    f(!0), g(!0), s == null || s();
                 },
                 onLoad: v,
                 decoding: "async"
@@ -329,7 +327,7 @@ const Q = (param)=>{
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
                     border: i.border,
                     className: u
                 })
@@ -337,7 +335,7 @@ const Q = (param)=>{
             !y && W
         ]
     });
-}), e1 = /*#__PURE__*/ _react.forwardRef((e, C)=>{
+}), Y = /*#__PURE__*/ _react.forwardRef((e, C)=>{
     var _e_aspectRatio;
     const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" || !e.aspectRatio ? (_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : 0 : H[e.aspectRatio];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
@@ -349,8 +347,8 @@ const Q = (param)=>{
         height: e.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
         forceNonCssAspectRatio: e.forceNonCssAspectRatio,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, _object_spread_props(_object_spread({}, e), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, _object_spread_props(_object_spread({}, e), {
             ref: C
         }))
     });
-}), f1 = e1;
+}), h1 = Y;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export { default as Overlay } from './overlay';
 export { default as Tooltip } from './tooltip';
 export { default as Stack } from './stack';
 export { default as Box } from './box';
+export { default as Align } from './align';
 export { Boxed } from './boxed';
 export { Header, HeaderLayout, MainSectionHeader, MainSectionHeaderLayout } from './header';
 export { default as GridLayout } from './grid-layout';

package/dist/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     ActionsSheet: function() {
         return _sheetactions.default;
     },
+    Align: function() {
+        return _align.default;
+    },
     Avatar: function() {
         return _avatar.default;
     },
@@ -5987,6 +5990,7 @@ const _overlay = /*#__PURE__*/ _interop_require_default(require("./overlay.js"))
 const _tooltip = /*#__PURE__*/ _interop_require_default(require("./tooltip.js"));
 const _stack = /*#__PURE__*/ _interop_require_default(require("./stack.js"));
 const _box = /*#__PURE__*/ _interop_require_default(require("./box.js"));
+const _align = /*#__PURE__*/ _interop_require_default(require("./align.js"));
 const _boxed = require("./boxed.js");
 const _header = require("./header.js");
 const _gridlayout = /*#__PURE__*/ _interop_require_default(require("./grid-layout.js"));

package/dist/inline.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return z;
+        return P;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
-const _sprinklescssmistica = require("./sprinkles.css-mistica.js");
 const _dom = require("./utils/dom.js");
 const _inlinecssmistica = require("./inline.css-mistica.js");
 const _css = require("./utils/css.js");
@@ -116,7 +115,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, R = (t)=>{
+const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, C = (t)=>{
     if (typeof t == "number" || typeof t == "string") return {
         [_inlinecssmistica.vars.space]: i(t)
     };
@@ -125,14 +124,14 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, R = (t)=>{
         [_inlinecssmistica.vars.spaceDesktop]: i(t.desktop)
     };
     return t.tablet && (e[_inlinecssmistica.vars.spaceTablet] = i(t.tablet)), e;
-}, j = (param)=>{
-    let { space: t, className: e, children: p, role: l, alignItems: f = "stretch", "aria-label": o, "aria-labelledby": c, fullWidth: d, wrap: s, dataAttributes: u } = param;
-    const { platformOverrides: a } = (0, _hooks.useTheme)(), b = typeof t == "string";
+}, D = (param)=>{
+    let { space: t, className: e, children: p, role: l, alignItems: f = "stretch", "aria-label": o, "aria-labelledby": c, fullWidth: d, wrap: a, dataAttributes: u } = param;
+    const { platformOverrides: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        className: (0, _classnames.default)(e, _inlinecssmistica.inline, (0, _sprinklescssmistica.sprinkles)({
+        className: (0, _classnames.default)(e, _inlinecssmistica.inline, a ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, typeof t == "string" ? a ? _inlinecssmistica.stringSpaceWithWrap : _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
+        style: _object_spread_props(_object_spread({}, (0, _css.applyCssVars)(C(t))), {
             alignItems: f
-        }), s ? _inlinecssmistica.wrap : d ? _inlinecssmistica.fullWidth : _inlinecssmistica.noFullWidth, b ? s ? _inlinecssmistica.stringSpaceWithWrap : _inlinecssmistica.stringSpace : _inlinecssmistica.marginInline),
-        style: (0, _css.applyCssVars)(R(t)),
+        }),
         role: l,
         "aria-label": o,
         "aria-labelledby": o ? void 0 : c
@@ -142,9 +141,9 @@ const i = (t)=>typeof t == "number" ? `${t}px` : `space-${t}`, R = (t)=>{
                 style: {
                     // Hack to fix https://jira.tid.es/browse/WEB-1683
                     // In iOS the inline component sometimes cuts the last line of the content
-                    paddingBottom: (0, _platform.isIos)(a) && !(0, _platform.isRunningAcceptanceTest)(a) ? 1 : void 0
+                    paddingBottom: (0, _platform.isIos)(s) && !(0, _platform.isRunningAcceptanceTest)(s) ? 1 : void 0
                 },
                 children: n
             }) : null)
     }));
-}, z = j;
+}, P = D;

package/dist/list.css-mistica.js

@@ -40,30 +40,33 @@ _export(exports, {
         return e;
     },
     dualActionRight: function() {
-        return b;
+        return d;
     },
     pointer: function() {
-        return d;
+        return b;
     },
     rightContent: function() {
-        return k;
+        return u;
     },
     rightRestrictedWidth: function() {
-        return u;
+        return g;
+    },
+    row: function() {
+        return k;
     },
     rowBody: function() {
-        return g;
+        return c;
     },
     rowContent: function() {
-        return c;
+        return j;
     },
     touchableBackground: function() {
-        return j;
+        return l;
     },
     touchableBackgroundInverse: function() {
-        return l;
+        return m;
     }
 });
 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 = "_1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfja _1y2v1nfio _1y2v1nfi2", y = "_1y2v1nfhk _1y2v1nfhz", a = "_1y2v1nfhk _1y2v1nfi7 _1y2v1nfjx", r = "_2buj9gf _1y2v1nfhk _1y2v1nfhz", i = "_2buj9ge", t = "_2buj9g0", h = "_1y2v1nfhk _1y2v1nfhp _1y2v1nfio", o = "_2buj9gl _1y2v1nfhk", e = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhm _1y2v1nfi5", d = "_2buj9gn _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfaa _1y2v1nfbj _1y2v1nfhk _1y2v1nfhz _1y2v1nfi4 _1y2v1nfi8 _1y2v1nfio", b = "_1y2v1nfkk", u = "_2buj9gc", g = "_2buj9gd", k = "_1y2v1nfi7", c = "_1y2v1nfhk _1y2v1nfhq _1y2v1nfi6", j = "_1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfi7 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhm _1y2v1nfio", l = "_2buj9g2", m = "_2buj9g3";

package/dist/list.css.d.ts

@@ -1,4 +1,5 @@
 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;

package/dist/list.js

@@ -14,16 +14,16 @@ _export(exports, {
         return ut;
     },
     BoxedRowList: function() {
-        return ft;
+        return mt;
     },
     Content: function() {
         return Fe;
     },
     Row: function() {
-        return ht;
+        return st;
     },
     RowList: function() {
-        return mt;
+        return ht;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -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
@@ -185,13 +184,13 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             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;
+    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: L, labelId: M, disabled: s, control: k } = param;
     const A = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), S = [
         a,
         c,
         x,
         w,
-        k
+        L
     ].filter(Boolean).length === 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_box.default, {
         paddingY: 16,
@@ -263,10 +262,10 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             children: w
                         })
                     }),
-                    k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    L && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         ref: l,
                         paddingTop: 2,
-                        children: k
+                        children: L
                     })
                 ]
             }),
@@ -281,7 +280,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     })
                 })
             }),
-            (h || y || e || L) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+            (h || y || e || k) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_listcssmistica.rightContent, {
                     [_listcssmistica.rightRestrictedWidth]: !!h
                 }),
@@ -315,10 +314,10 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                             direction: "right"
                         })
                     }),
-                    L && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingLeft: h || y ? 8 : 0,
                         className: _listcssmistica.center,
-                        children: L
+                        children: k
                     })
                 ]
             })
@@ -340,7 +339,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         "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(), 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: L, withChevron: M, dataAttributes: s, right: k, "aria-label": A } = e, [Q, S] = _react.useState(""), [de, ce] = _react.useState(""), [se, he] = _react.useState(""), ue = [
         g,
         Q,
         w,
@@ -348,7 +347,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         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, 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 = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -358,11 +357,11 @@ 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, {
+    }, [_, $] = Ye(e.switch || e.checkbox || {}), R = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(Fe, {
             asset: c,
             headline: v,
-            headlineRef: (n)=>{
-                n && S(n.textContent || "");
+            headlineRef: (i)=>{
+                i && S(i.textContent || "");
             },
             title: g,
             titleAs: x,
@@ -374,16 +373,16 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             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
         });
@@ -405,7 +404,7 @@ 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 j = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(s)), {
@@ -426,24 +425,24 @@ 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({
+        })), H = (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]: O && i,
+                [_listcssmistica.touchableBackgroundInverse]: W && i,
+                [_listcssmistica.pointer]: !b && i
             }),
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(s)), {
-            children: i
+            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 ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
             disabled: b,
-            name: n,
+            name: i,
             checked: _,
             "aria-label": B,
             "aria-labelledby": r,
@@ -455,9 +454,9 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
                     children: F
                 });
             }
-        })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(i, {
+        })) : H(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
             disabled: b,
-            name: n,
+            name: i,
             checked: _,
             "aria-label": B,
             "aria-labelledby": r,
@@ -483,12 +482,12 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         "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
                 })
             });
         }
@@ -497,7 +496,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         "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,7 +504,7 @@ 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
                     })
                 })
             });
@@ -543,16 +542,14 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         ref: a,
         children: R()
     });
-}), ht = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+}), st = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     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,
             dataAttributes: _object_spread({
@@ -560,7 +557,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
             }, e)
         }))
     });
-}), mt = (param)=>{
+}), ht = (param)=>{
     let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
     const c = _react.Children.toArray(e).filter(Boolean), v = c.length - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
@@ -589,7 +586,7 @@ const He = (e, a)=>typeof e == "function" ? e == null ? void 0 : e({
         }, e),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(le, _object_spread({}, a))
     });
-}), ft = (param)=>{
+}), mt = (param)=>{
     let { children: e, ariaLabelledby: a, role: r = "list", dataAttributes: l } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,