@telefonica/mistica 12.9.1 → 12.11.0

package/dist/list.js

@@ -10,21 +10,20 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return Re;
+        return Fe;
     },
     BoxedRowList: function() {
-        return Pe;
+        return Oe;
     },
     Row: function() {
-        return Ie;
+        return De;
     },
     RowList: function() {
-        return Le;
+        return We;
     }
 });
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _classnames = /*#__PURE__*/ _interopRequireDefault(require("classnames"));
-var _jssJs = require("./jss.js");
 var _touchableJs = /*#__PURE__*/ _interopRequireDefault(require("./touchable.js"));
 var _textJs = require("./text.js");
 var _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
@@ -39,6 +38,7 @@ var _checkboxJs = /*#__PURE__*/ _interopRequireDefault(require("./checkbox.js"))
 var _boxedJs = require("./boxed.js");
 var _dividerJs = /*#__PURE__*/ _interopRequireDefault(require("./divider.js"));
 var _domJs = require("./utils/dom.js");
+var _listCssMisticaJs = require("./list.css-mistica.js");
 var _jsxRuntimeJs = require("./_virtual/jsx-runtime.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -182,98 +182,7 @@ function _unsupportedIterableToArray(o, minLen) {
     if (n === "Map" || n === "Set") return Array.from(n);
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 }
-var U = (0, _jssJs.createUseStyles)(function(param) {
-    var e = param.colors, n = param.mq;
-    return {
-        disabled: {
-            opacity: 0.5
-        },
-        hover: _defineProperty({}, n.supportsHover, {
-            "&:hover": {
-                background: function background(param) {
-                    var r = param.isInverse, c = param.disabled;
-                    return r || c ? "initial" : e.backgroundAlternative;
-                }
-            }
-        }),
-        rowContent: {
-            width: "100%",
-            cursor: function cursor(param) {
-                var r = param.disabled;
-                return r ? "default" : "pointer";
-            }
-        },
-        hoverDisabled: {
-            cursor: function cursor() {
-                return "initial";
-            },
-            "&:hover": {
-                background: function background() {
-                    return "none";
-                }
-            }
-        },
-        content: {
-            display: "flex",
-            width: "100%",
-            minHeight: 72
-        },
-        asset: {
-            display: "flex",
-            flexShrink: 0,
-            flexGrow: 0
-        },
-        rowBody: {
-            display: "flex",
-            flexDirection: "column",
-            flex: 1
-        },
-        center: {
-            display: "flex",
-            alignItems: "center"
-        },
-        badge: {
-            justifyContent: "center",
-            minWidth: 16,
-            height: "100%",
-            flexShrink: 0
-        },
-        control: {
-            marginLeft: 16,
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            flexGrow: 0,
-            flexShrink: 0
-        },
-        right: {
-            marginLeft: 16
-        },
-        centeredControl: {
-            display: "flex",
-            alignItems: "center",
-            height: "100%"
-        },
-        dualActionContainer: {
-            display: "flex",
-            flexDirection: "row"
-        },
-        dualActionLeft: {
-            flexGrow: 1,
-            padding: "0 16px"
-        },
-        dualActionRight: {
-            padding: "0 16px",
-            margin: "16px 0",
-            borderLeft: "1px solid ".concat(e.divider),
-            display: "flex",
-            alignItems: "center",
-            flexGrow: 0,
-            width: "auto",
-            lineHeight: 0
-        }
-    };
-}), F = function F(e, n) {
+var J = function J(e, n) {
     return typeof e == "function" ? e == null ? void 0 : e({
         centerY: n
     }) : n ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
@@ -284,23 +193,21 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
         },
         children: e
     }) : e;
-}, oe = function oe(param) {
-    var e = param.withChevron, n = param.headline, r = param.title, c = param.titleLinesMax, d = param.subtitle, v = param.subtitleLinesMax, s = param.description, N = param.descriptionLinesMax, b = param.asset, tmp = param.type, I = tmp === void 0 ? "basic" : tmp, L = param.badge, B = param.right, A = param.extra, f = param.labelId, g = param.disabled;
-    var h = (0, _themeVariantContextJs.useIsInverseVariant)(), i = U({
-        isInverse: h
-    }), ref = (0, _hooksJs.useTheme)(), o = ref.colors, w = [
+}, ge = function ge(param) {
+    var e = param.withChevron, n = param.headline, c = param.title, i = param.titleLinesMax, o = param.subtitle, v = param.subtitleLinesMax, d = param.description, P = param.descriptionLinesMax, x = param.asset, tmp = param.type, I = tmp === void 0 ? "basic" : tmp, B = param.badge, S = param.right, V = param.extra, m = param.labelId, f = param.disabled;
+    var u = (0, _themeVariantContextJs.useIsInverseVariant)(), ref = (0, _hooksJs.useTheme)(), l = ref.colors, b = [
         n,
-        r,
+        c,
+        o,
         d,
-        s,
-        A
-    ].filter(Boolean).length === 1, S = function S() {
-        return L ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+        V
+    ].filter(Boolean).length === 1, E = function E() {
+        return B ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingLeft: 16,
             children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: (0, _classnames.default)(i.center, i.badge, _defineProperty({}, i.disabled, g)),
-                children: L === !0 ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_badgeJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_badgeJs.default, {
-                    value: L
+                className: (0, _classnames.default)(_listCssMisticaJs.center, _listCssMisticaJs.badge, _defineProperty({}, _listCssMisticaJs.disabled, f)),
+                children: B === !0 ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_badgeJs.default, {}) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_badgeJs.default, {
+                    value: B
                 })
             })
         }) : null;
@@ -308,27 +215,27 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
     var _obj;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_boxJs.default, {
         paddingY: 16,
-        className: i.content,
+        className: _listCssMisticaJs.content,
         children: [
-            b && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            x && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
-                className: (0, _classnames.default)((_obj = {}, _defineProperty(_obj, i.center, w), _defineProperty(_obj, i.disabled, g), _obj)),
+                className: (0, _classnames.default)((_obj = {}, _defineProperty(_obj, _listCssMisticaJs.center, b), _defineProperty(_obj, _listCssMisticaJs.disabled, f), _obj)),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                    className: i.asset,
-                    children: b
+                    className: _listCssMisticaJs.asset,
+                    children: x
                 })
             }),
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: (0, _classnames.default)(i.rowBody, _defineProperty({}, i.disabled, g)),
+                className: (0, _classnames.default)(_listCssMisticaJs.rowBody, _defineProperty({}, _listCssMisticaJs.disabled, f)),
                 style: {
-                    justifyContent: w ? "center" : "flex-start"
+                    justifyContent: b ? "center" : "flex-start"
                 },
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 4,
                     children: [
                         n && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text1, {
                             regular: !0,
-                            color: o.textPrimary,
+                            color: l.textPrimary,
                             children: n
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
@@ -336,53 +243,53 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
                             children: [
                                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
                                     regular: !0,
-                                    color: o.textPrimary,
-                                    truncate: c,
-                                    id: f,
-                                    children: r
+                                    color: l.textPrimary,
+                                    truncate: i,
+                                    id: m,
+                                    children: c
                                 }),
-                                d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                o && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                     regular: !0,
-                                    color: o.textSecondary,
+                                    color: l.textSecondary,
                                     truncate: v,
-                                    children: d
+                                    children: o
                                 }),
-                                s && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
+                                d && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text2, {
                                     regular: !0,
-                                    color: o.textSecondary,
-                                    truncate: N,
-                                    children: s
+                                    color: l.textSecondary,
+                                    truncate: P,
+                                    children: d
                                 }),
-                                A
+                                V
                             ]
                         })
                     ]
                 })
             }),
-            S(),
+            E(),
             I === "chevron" && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingLeft: 16,
-                className: (0, _classnames.default)(i.center, _defineProperty({}, i.disabled, g)),
+                className: (0, _classnames.default)(_listCssMisticaJs.center, _defineProperty({}, _listCssMisticaJs.disabled, f)),
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronJs.default, {
-                    color: h ? o.inverse : o.neutralMedium,
+                    color: u ? l.inverse : l.neutralMedium,
                     direction: "right"
                 })
             }),
             I === "control" && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                className: i.right,
-                children: F(B, w)
+                className: _listCssMisticaJs.right,
+                children: J(S, b)
             }),
             I === "custom" && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_jsxRuntimeJs.Fragment, {
                 children: [
                     /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-                        className: (0, _classnames.default)(i.right, _defineProperty({}, i.disabled, g)),
-                        children: F(B, w)
+                        className: (0, _classnames.default)(_listCssMisticaJs.right, _defineProperty({}, _listCssMisticaJs.disabled, f)),
+                        children: J(S, b)
                     }),
                     e && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingLeft: 4,
-                        className: (0, _classnames.default)(i.center, _defineProperty({}, i.disabled, g)),
+                        className: (0, _classnames.default)(_listCssMisticaJs.center, _defineProperty({}, _listCssMisticaJs.disabled, f)),
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_iconChevronJs.default, {
-                            color: h ? o.inverse : o.neutralMedium,
+                            color: u ? l.inverse : l.neutralMedium,
                             direction: "right"
                         })
                     })
@@ -390,135 +297,142 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
             })
         ]
     });
-}, ae = function ae(param) {
-    var e = param.value, n = param.defaultValue, r = param.onChange;
-    var c = e !== void 0, ref = _slicedToArray(_react.useState(!!n), 2), d = ref[0], v = ref[1], s = function s() {
-        c || v(!d), r && r(c ? !e : !d);
+}, ve = function ve(param) {
+    var e = param.value, n = param.defaultValue, c = param.onChange;
+    var i = e !== void 0, ref = _slicedToArray(_react.useState(!!n), 2), o = ref[0], v = ref[1], d = function d() {
+        i || v(!o), c && c(i ? !e : !o);
     };
-    return c ? [
+    return i ? [
         !!e,
-        s
+        d
     ] : [
-        d,
-        s
+        o,
+        d
     ];
-}, Y = /*#__PURE__*/ _react.forwardRef(function(e, n) {
-    var r = (0, _hooksJs.useAriaId)(), c = (0, _themeVariantContextJs.useIsInverseVariant)(), d = e.asset, v = e.headline, s = e.title, N = e.titleLinesMax, b = e.subtitle, I = e.subtitleLinesMax, L = e.description, B = e.descriptionLinesMax, A = e.badge, f = e.role, g = e.extra, h = e.dataAttributes, i = (0, _radioButtonJs.useRadioContext)(), o = e.disabled || e.radioValue !== void 0 && i.disabled, a = U({
-        isInverse: c,
-        disabled: o
-    }), ref = _slicedToArray(ae(e.switch || e.checkbox || {}), 2), w = ref[0], S = ref[1], C = function C(param) {
-        var m = param.type, x = param.right, T = param.labelId;
-        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(oe, {
-            asset: d,
+}, xe = function xe(e) {
+    return "switch" in e;
+}, be = function be(e) {
+    return "checkbox" in e;
+}, we = function we(e) {
+    return "radioValue" in e;
+}, Q = /*#__PURE__*/ _react.forwardRef(function(e, n) {
+    var c = (0, _hooksJs.useAriaId)(), i = (0, _themeVariantContextJs.useIsInverseVariant)(), o = e.asset, v = e.headline, d = e.title, P = e.titleLinesMax, x = e.subtitle, I = e.subtitleLinesMax, B = e.description, S = e.descriptionLinesMax, V = e.badge, m = e.role, f = e.extra, u = e.dataAttributes, l = (0, _radioButtonJs.useRadioContext)(), r = e.disabled || e.radioValue !== void 0 && l.disabled, ref = _slicedToArray(ve(e.switch || e.checkbox || {}), 2), b = ref[0], E = ref[1], C = function C(param) {
+        var s = param.type, g = param.right, M = param.labelId;
+        return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(ge, {
+            asset: o,
             headline: v,
-            title: s,
-            subtitle: b,
-            description: L,
-            badge: A,
-            titleLinesMax: N,
+            title: d,
+            subtitle: x,
+            description: B,
+            badge: V,
+            titleLinesMax: P,
             subtitleLinesMax: I,
-            descriptionLinesMax: B,
-            type: m,
-            right: x,
-            extra: g,
-            labelId: T,
-            disabled: o,
+            descriptionLinesMax: S,
+            type: s,
+            right: g,
+            extra: f,
+            labelId: M,
+            disabled: r,
             withChevron: !!e.onPress || !!e.href || !!e.to
         });
-    }, D = function D(m) {
-        var x = "chevron";
-        return m.right === null && (x = "basic"), m.right && (x = "custom"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+    }, j = function j(s) {
+        var g = "chevron";
+        return s.right === null && (g = "basic"), s.right && (g = "custom"), /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
             paddingX: 16,
             ref: n,
             children: C({
-                type: x,
-                right: m.right
+                type: g,
+                right: s.right
             })
         });
     };
-    if (e.onPress && e.switch === void 0 && e.radioValue === void 0 && e.checkbox === void 0) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
+    var _obj;
+    if (e.onPress && !xe(e) && !be(e) && !we(e)) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
         ref: n,
-        className: (0, _classnames.default)(a.rowContent, a.hover),
+        className: (0, _classnames.default)(_listCssMisticaJs.rowContent, (_obj = {}, _defineProperty(_obj, _listCssMisticaJs.hoverBackground, !(r || i)), _defineProperty(_obj, _listCssMisticaJs.pointer, !r), _obj)),
         trackingEvent: e.trackingEvent,
         onPress: e.onPress,
-        role: f,
-        dataAttributes: h,
-        disabled: o,
-        children: D(e)
+        role: m,
+        dataAttributes: u,
+        disabled: r,
+        children: j(e)
     });
+    var _obj1;
     if (e.to) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-        className: (0, _classnames.default)(a.rowContent, a.hover),
+        className: (0, _classnames.default)(_listCssMisticaJs.rowContent, (_obj1 = {}, _defineProperty(_obj1, _listCssMisticaJs.hoverBackground, !(r || i)), _defineProperty(_obj1, _listCssMisticaJs.pointer, !r), _obj1)),
         trackingEvent: e.trackingEvent,
         to: e.to,
         fullPageOnWebView: e.fullPageOnWebView,
-        role: f,
-        dataAttributes: h,
-        disabled: o,
-        children: D(e)
+        role: m,
+        dataAttributes: u,
+        disabled: r,
+        children: j(e)
     });
+    var _obj2;
     if (e.href) return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-        className: (0, _classnames.default)(a.rowContent, a.hover),
+        className: (0, _classnames.default)(_listCssMisticaJs.rowContent, (_obj2 = {}, _defineProperty(_obj2, _listCssMisticaJs.hoverBackground, !(r || i)), _defineProperty(_obj2, _listCssMisticaJs.pointer, !r), _obj2)),
         trackingEvent: e.trackingEvent,
         href: e.href,
         newTab: e.newTab,
-        role: f,
-        dataAttributes: h,
-        disabled: o,
-        children: D(e)
+        role: m,
+        dataAttributes: u,
+        disabled: r,
+        children: j(e)
     });
-    var E = function E(m) {
-        var T, j, M, X;
-        var x = (X = (M = (T = e.switch) == null ? void 0 : T.name) != null ? M : (j = e.checkbox) == null ? void 0 : j.name) != null ? X : r;
+    var W = function W(s) {
+        var M, F, O, Y;
+        var g = (Y = (O = (M = e.switch) == null ? void 0 : M.name) != null ? O : (F = e.checkbox) == null ? void 0 : F.name) != null ? Y : c;
+        var _obj;
         return e.onPress ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)("div", {
-            className: a.dualActionContainer,
+            className: _listCssMisticaJs.dualActionContainer,
             children: [
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                    disabled: o,
+                    disabled: r,
                     onPress: e.onPress,
-                    role: f,
-                    className: (0, _classnames.default)(a.dualActionLeft, a.hover),
+                    role: m,
+                    className: (0, _classnames.default)(_listCssMisticaJs.dualActionLeft, _defineProperty({}, _listCssMisticaJs.hoverBackground, !(r || i))),
                     children: C({
                         type: "basic",
-                        labelId: r
+                        labelId: c
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_touchableJs.default, {
-                    disabled: o,
-                    className: a.dualActionRight,
-                    onPress: S,
-                    dataAttributes: h,
-                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(m, {
-                        disabled: o,
-                        name: x,
-                        checked: w,
-                        "aria-labelledby": r,
+                    disabled: r,
+                    className: _listCssMisticaJs.dualActionRight,
+                    onPress: E,
+                    dataAttributes: u,
+                    children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(s, {
+                        disabled: r,
+                        name: g,
+                        checked: b,
+                        "aria-labelledby": c,
                         render: function render(param) {
-                            var V = param.controlElement;
-                            return V;
+                            var D = param.controlElement;
+                            return D;
                         }
                     })
                 })
             ]
         }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-            className: (0, _classnames.default)(a.rowContent, a.hover),
-            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(m, {
-                disabled: o,
-                dataAttributes: h,
-                name: x,
-                checked: w,
-                onChange: S,
+            className: (0, _classnames.default)(_listCssMisticaJs.rowContent, (_obj = {}, _defineProperty(_obj, _listCssMisticaJs.hoverBackground, !(r || i)), _defineProperty(_obj, _listCssMisticaJs.pointer, !r), _obj)),
+            children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(s, {
+                disabled: r,
+                dataAttributes: u,
+                name: g,
+                checked: b,
+                onChange: E,
                 render: function render(param) {
-                    var V = param.controlElement, $ = param.labelId;
+                    var D = param.controlElement, U = param.labelId;
                     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingX: 16,
-                        role: f,
+                        role: m,
                         children: C({
-                            labelId: $,
+                            labelId: U,
                             type: "control",
                             right: function right() {
                                 return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
                                     space: "around",
-                                    children: V
+                                    children: D
                                 });
                             }
                         })
@@ -527,25 +441,26 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
             })
         });
     };
-    return e.switch ? E(_switchComponentJs.default) : e.checkbox ? E(_checkboxJs.default) : e.radioValue ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
-        className: (0, _classnames.default)(a.rowContent, a.hover),
-        role: f,
+    var _obj3;
+    return e.switch ? W(_switchComponentJs.default) : e.checkbox ? W(_checkboxJs.default) : e.radioValue ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", {
+        className: (0, _classnames.default)(_listCssMisticaJs.rowContent, (_obj3 = {}, _defineProperty(_obj3, _listCssMisticaJs.hoverBackground, !(r || i)), _defineProperty(_obj3, _listCssMisticaJs.pointer, !r), _obj3)),
+        role: m,
         ref: n,
         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_radioButtonJs.default, {
-            dataAttributes: h,
+            dataAttributes: u,
             value: e.radioValue,
-            "aria-labelledby": r,
+            "aria-labelledby": c,
             render: function render(param) {
-                var m = param.controlElement;
+                var s = param.controlElement;
                 return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                     paddingX: 16,
                     children: C({
-                        labelId: r,
+                        labelId: c,
                         type: "control",
                         right: function right() {
                             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
                                 space: "around",
-                                children: m
+                                children: s
                             });
                         }
                     })
@@ -554,8 +469,8 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
         })
     }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
         paddingX: 16,
-        className: (0, _classnames.default)(a.rowContent, a.hover, a.hoverDisabled),
-        role: f,
+        className: _listCssMisticaJs.rowContent,
+        role: m,
         children: e.right ? C({
             type: "custom",
             right: e.right
@@ -563,42 +478,42 @@ var U = (0, _jssJs.createUseStyles)(function(param) {
             type: "basic"
         })
     });
-}), Ie = /*#__PURE__*/ _react.forwardRef(function(e, n) {
-    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Y, _objectSpreadProps(_objectSpread({}, e), {
+}), De = /*#__PURE__*/ _react.forwardRef(function(e, n) {
+    return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Q, _objectSpreadProps(_objectSpread({}, e), {
         ref: n
     }));
-}), Le = function Le(param) {
-    var e = param.children, n = param.ariaLabelledby, r = param.role, c = param.dataAttributes, d = param.noLastDivider;
-    var v = _react.Children.count(e) - 1, s = !d;
+}), We = function We(param) {
+    var e = param.children, n = param.ariaLabelledby, c = param.role, i = param.dataAttributes, o = param.noLastDivider;
+    var v = _react.Children.count(e) - 1, d = !o;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)("div", _objectSpreadProps(_objectSpread({
-        role: r,
+        role: c,
         "aria-labelledby": n
-    }, (0, _domJs.getPrefixedDataAttributes)(c)), {
-        children: _react.Children.toArray(e).filter(Boolean).map(function(N, b) {
+    }, (0, _domJs.getPrefixedDataAttributes)(i)), {
+        children: _react.Children.toArray(e).filter(Boolean).map(function(P, x) {
             return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_react.Fragment, {
                 children: [
-                    N,
-                    (b < v || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+                    P,
+                    (x < v || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                         paddingX: 16,
                         children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_dividerJs.default, {})
                     })
                 ]
-            }, b);
+            }, x);
         })
     }));
-}, Re = /*#__PURE__*/ _react.forwardRef(function(e, n) {
+}, Fe = /*#__PURE__*/ _react.forwardRef(function(e, n) {
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxedJs.Boxed, {
         isInverse: e.isInverse,
         ref: n,
-        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Y, _objectSpread({}, e))
+        children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(Q, _objectSpread({}, e))
     });
-}), Pe = function Pe(param) {
-    var e = param.children, n = param.ariaLabelledby, r = param.role, c = param.dataAttributes;
+}), Oe = function Oe(param) {
+    var e = param.children, n = param.ariaLabelledby, c = param.role, i = param.dataAttributes;
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_stackJs.default, {
         space: 16,
-        role: r,
+        role: c,
         "aria-labelledby": n,
-        dataAttributes: c,
+        dataAttributes: i,
         children: e
     });
 };