@telefonica/mistica 17.0.0 → 17.1.0

package/dist/list.js

@@ -11,28 +11,28 @@ function _export(target, all) {
 }
 _export(exports, {
     get BoxedRow () {
-        return St;
+        return Ft;
     },
     get BoxedRowList () {
-        return Pt;
+        return Ut;
     },
     get Content () {
-        return at;
+        return ut;
     },
     get ListItem () {
-        return Ot;
+        return Gt;
     },
     get OrderedList () {
-        return Et;
+        return _t;
     },
     get Row () {
-        return Lt;
+        return jt;
     },
     get RowList () {
-        return It;
+        return qt;
     },
     get UnorderedList () {
-        return Vt;
+        return Zt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -55,6 +55,7 @@ const _listcssmistica = require("./list.css-mistica.js");
 const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _css = require("./utils/css.js");
+const _common = require("./utils/common.js");
 const _iconbutton = require("./icon-button.js");
 const _screenreaderonly = /*#__PURE__*/ _interop_require_default(require("./screen-reader-only.js"));
 const _hooks = require("./hooks.js");
@@ -183,7 +184,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0 : e({
+const ne = /*#__PURE__*/ _react.createContext({
+    small: !1
+}), ht = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -194,206 +197,214 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             children: e
         })
-    }) : e, at = (param)=>{
-    let { withChevron: e, headline: a, headlineRef: i, slotRef: l, title: o, titleAs: u, titleLinesMax: x, subtitle: b, subtitleLinesMax: P, description: R, descriptionLinesMax: w, detail: f, asset: V, danger: H, badge: k, right: N, rightRef: D, slot: c, labelId: W, disabled: y, control: E } = param;
-    const B = (0, _themevariantcontext.useThemeVariant)(), C = [
+    }) : e, ut = (param)=>{
+    let { withChevron: e, headline: a, headlineRef: i, slotRef: l, title: o, titleAs: m, titleLinesMax: v, subtitle: h, subtitleLinesMax: U, description: S, descriptionLinesMax: H, detail: g, asset: A, danger: z, badge: R, right: N, rightRef: Z, slot: c, labelId: W, disabled: x, control: D, withDivider: B } = param;
+    const I = (0, _themevariantcontext.useThemeVariant)(), w = [
         a,
         o,
-        b,
-        R,
+        h,
+        S,
         c
-    ].filter(Boolean).length === 1, { textPresets: v } = (0, _hooks.useTheme)();
+    ].filter(Boolean).length === 1, { textPresets: P } = (0, _hooks.useTheme)(), { small: b } = _react.useContext(ne), C = b ? P.text2 : P.text3, _ = b ? _text.Text1 : _text.Text2, G = b ? _text.Text1 : _text.Text2, J = b ? _text.Text1 : _text.Text2;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _listcssmistica.content,
         id: W,
         children: [
-            V && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_listcssmistica.assetContainer, {
-                    [_listcssmistica.center]: C,
-                    [_listcssmistica.disabled]: y
+                    [_listcssmistica.center]: w,
+                    [_listcssmistica.disabled]: x
                 }),
                 "aria-hidden": !0,
                 "data-testid": "asset",
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.asset,
                     style: (0, _css.applyCssVars)({
-                        color: H ? ({
+                        color: z ? ({
                             default: _skincontractcssmistica.vars.colors.textError,
                             alternative: _skincontractcssmistica.vars.colors.textError,
                             brand: _skincontractcssmistica.vars.colors.textErrorBrand,
                             negative: _skincontractcssmistica.vars.colors.textErrorNegative,
                             media: _skincontractcssmistica.vars.colors.textErrorBrand
-                        })[B] : ({
+                        })[I] : ({
                             default: _skincontractcssmistica.vars.colors.textPrimary,
                             alternative: _skincontractcssmistica.vars.colors.textPrimary,
                             brand: _skincontractcssmistica.vars.colors.textPrimaryBrand,
                             negative: _skincontractcssmistica.vars.colors.textPrimaryNegative,
                             media: _skincontractcssmistica.vars.colors.textPrimaryMedia
-                        })[B],
+                        })[I],
                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                     }),
-                    children: V
+                    children: A
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_listcssmistica.rowBody, {
-                    [_listcssmistica.disabled]: y
-                }),
-                style: {
-                    justifyContent: C ? "center" : "flex-start"
-                },
+                className: _listcssmistica.innerContent,
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
-                        mobileSize: v.text3.size.mobile,
-                        desktopSize: v.text3.size.desktop,
-                        mobileLineHeight: v.text3.lineHeight.mobile,
-                        desktopLineHeight: v.text3.lineHeight.desktop,
-                        weight: v.rowTitle.weight,
-                        color: H ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
-                        truncate: x,
-                        hyphens: "auto",
-                        as: u,
-                        dataAttributes: {
-                            testid: "title"
-                        },
-                        children: o
-                    }),
-                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        ref: i,
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: (0, _classnames.default)(_listcssmistica.rowBody, {
+                            [_listcssmistica.disabled]: x
+                        }),
                         style: {
-                            order: -1,
-                            paddingBottom: 4
+                            justifyContent: w ? "center" : "flex-start"
                         },
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textPrimary,
-                            hyphens: "auto",
-                            dataAttributes: {
-                                testid: "headline"
-                            },
-                            children: a
-                        })
-                    }),
-                    b && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: 2,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textPrimary,
-                            truncate: P,
-                            hyphens: "auto",
-                            dataAttributes: {
-                                testid: "subtitle"
-                            },
-                            children: b
-                        })
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                mobileSize: C.size.mobile,
+                                desktopSize: C.size.desktop,
+                                mobileLineHeight: C.lineHeight.mobile,
+                                desktopLineHeight: C.lineHeight.desktop,
+                                weight: P.rowTitle.weight,
+                                color: z ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
+                                truncate: v,
+                                hyphens: "auto",
+                                as: m,
+                                dataAttributes: {
+                                    testid: "title"
+                                },
+                                children: o
+                            }),
+                            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                ref: i,
+                                style: {
+                                    order: -1,
+                                    paddingBottom: 4
+                                },
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textPrimary,
+                                    hyphens: "auto",
+                                    dataAttributes: {
+                                        testid: "headline"
+                                    },
+                                    children: a
+                                })
+                            }),
+                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingTop: 2,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textPrimary,
+                                    truncate: U,
+                                    hyphens: "auto",
+                                    dataAttributes: {
+                                        testid: "subtitle"
+                                    },
+                                    children: h
+                                })
+                            }),
+                            S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingTop: 2,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                                    truncate: H,
+                                    hyphens: "auto",
+                                    dataAttributes: {
+                                        testid: "description"
+                                    },
+                                    children: S
+                                })
+                            }),
+                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                ref: l,
+                                paddingTop: 2,
+                                dataAttributes: {
+                                    testid: "slot"
+                                },
+                                children: c
+                            })
+                        ]
                     }),
                     R && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingTop: 2,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textSecondary,
-                            truncate: w,
-                            hyphens: "auto",
-                            dataAttributes: {
-                                testid: "description"
-                            },
-                            children: R
+                        paddingLeft: 16,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: (0, _classnames.default)(_listcssmistica.badge, {
+                                [_listcssmistica.disabled]: x
+                            }),
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
+                                value: R === !0 ? void 0 : R
+                            })
                         })
                     }),
-                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        ref: l,
-                        paddingTop: 2,
-                        dataAttributes: {
-                            testid: "slot"
-                        },
-                        children: c
+                    (g || N || e || D) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                        className: _listcssmistica.rightContent,
+                        children: [
+                            g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)(_listcssmistica.detail, {
+                                    [_listcssmistica.disabled]: x
+                                }),
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                                    hyphens: "auto",
+                                    dataAttributes: {
+                                        testid: "detail"
+                                    },
+                                    children: g
+                                })
+                            }),
+                            N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: (0, _classnames.default)({
+                                    [_listcssmistica.detailRight]: !!g,
+                                    [_listcssmistica.disabled]: x
+                                }),
+                                ref: Z,
+                                "data-testid": "endSlot",
+                                children: ht(N, w)
+                            }),
+                            e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingLeft: g || N ? 4 : 0
+                                },
+                                className: (0, _classnames.default)(_listcssmistica.center, {
+                                    [_listcssmistica.disabled]: x
+                                }),
+                                "data-testid": "chevron",
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightfilled.default, {
+                                    size: 16,
+                                    color: {
+                                        default: _skincontractcssmistica.vars.colors.chevronIndicator,
+                                        alternative: _skincontractcssmistica.vars.colors.chevronIndicator,
+                                        brand: _skincontractcssmistica.vars.colors.textSecondaryBrand,
+                                        negative: _skincontractcssmistica.vars.colors.textSecondaryNegative,
+                                        media: _skincontractcssmistica.vars.colors.textSecondaryBrand
+                                    }[I]
+                                })
+                            }),
+                            D && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    paddingLeft: g || N ? 8 : 0
+                                },
+                                className: _listcssmistica.center,
+                                children: D
+                            })
+                        ]
                     })
                 ]
             }),
-            k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingLeft: 16,
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: (0, _classnames.default)(_listcssmistica.badge, {
-                        [_listcssmistica.disabled]: y
-                    }),
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_badge.default, {
-                        value: k === !0 ? void 0 : k
-                    })
-                })
-            }),
-            (f || N || e || E) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_listcssmistica.rightContent, {
-                    [_listcssmistica.rightRestrictedWidth]: !!f
-                }),
-                children: [
-                    f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_listcssmistica.detail, {
-                            [_listcssmistica.disabled]: y
-                        }),
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                            regular: !0,
-                            color: _skincontractcssmistica.vars.colors.textSecondary,
-                            hyphens: "auto",
-                            dataAttributes: {
-                                testid: "detail"
-                            },
-                            children: f
-                        })
-                    }),
-                    N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)({
-                            [_listcssmistica.detailRight]: !!f,
-                            [_listcssmistica.disabled]: y
-                        }),
-                        ref: D,
-                        "data-testid": "endSlot",
-                        children: tt(N, C)
-                    }),
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        style: {
-                            paddingLeft: f || N ? 4 : 0
-                        },
-                        className: (0, _classnames.default)(_listcssmistica.center, {
-                            [_listcssmistica.disabled]: y
-                        }),
-                        "data-testid": "chevron",
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevronrightfilled.default, {
-                            size: 16,
-                            color: {
-                                default: _skincontractcssmistica.vars.colors.chevronIndicator,
-                                alternative: _skincontractcssmistica.vars.colors.chevronIndicator,
-                                brand: _skincontractcssmistica.vars.colors.textSecondaryBrand,
-                                negative: _skincontractcssmistica.vars.colors.textSecondaryNegative,
-                                media: _skincontractcssmistica.vars.colors.textSecondaryBrand
-                            }[B]
-                        })
-                    }),
-                    E && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        style: {
-                            paddingLeft: f || N ? 8 : 0
-                        },
-                        className: _listcssmistica.center,
-                        children: E
-                    })
-                ]
+            B && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _listcssmistica.rowDivider,
+                "data-testid": "row-divider",
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             })
         ]
     });
-}, it = (param)=>{
+}, bt = (param)=>{
     let { value: e, defaultValue: a, onChange: i } = param;
-    const l = e !== void 0, [o, u] = _react.useState(!!a);
+    const l = e !== void 0, [o, m] = _react.useState(!!a);
     return [
         l ? !!e : o,
         ()=>{
-            l || u(!o), i === null || i === void 0 ? void 0 : i(l ? !e : !o);
+            l || m(!o), i === null || i === void 0 ? void 0 : i(l ? !e : !o);
         }
     ];
-}, rt = (e)=>[
+}, ft = (e)=>[
         "switch",
         "checkbox",
         "radioValue",
         "iconButton"
-    ].some((a)=>e[a] !== void 0), lt = (e)=>{
+    ].some((a)=>e[a] !== void 0), vt = (e)=>{
     let a = "";
     const i = (l)=>{
         if (l && /*#__PURE__*/ _react.isValidElement(l)) {
@@ -402,20 +413,28 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         }
     };
     return i(e), a.trim();
-}, Q = (e)=>{
+}, oe = (e)=>{
     const a = (e === null || e === void 0 ? void 0 : e.innerText) || (e === null || e === void 0 ? void 0 : e.textContent) || "";
     return process.env.NODE_ENV === "test" ? a.replace(/\s+/g, " ").replace(/([^ ])([A-ZÁÉÍÓÚÑ])/g, "$1 $2").trim() : a;
-}, he = /*#__PURE__*/ _react.forwardRef((e, a)=>{
-    const i = _react.useId(), l = (0, _themevariantcontext.useThemeVariant)(), o = l === "brand" || l === "media" || l === "negative", { asset: u, headline: x, title: b, titleAs: P, titleLinesMax: R, subtitle: w, subtitleLinesMax: f, description: V, descriptionLinesMax: H, detail: k, danger: N, badge: D, role: c, touchableRole: W, slot: y, withChevron: E, dataAttributes: B, right: Y, "aria-label": C, tabIndex: v, atomicReading: me } = e, [ue, be] = _react.useState(""), [fe, ve] = _react.useState(""), [ge, xe] = _react.useState(""), ye = lt(u), p = [
-        b,
-        ye,
-        ue,
-        w,
-        V,
-        fe,
-        k,
-        ge
-    ].filter(Boolean).join(" "), A = !!e.onPress || !!e.href || !!e.to, O = C !== null && C !== void 0 ? C : A ? p : void 0, Be = (0, _radiobutton.useRadioContext)(), g = e.disabled || e.radioValue !== void 0 && Be.disabled, X = !g && !o, M = !g && o, $ = rt(e), Re = $ ? !1 : E !== null && E !== void 0 ? E : A, ee = {
+}, Ce = /*#__PURE__*/ _react.forwardRef((e, a)=>{
+    const i = _react.useId(), l = (0, _themevariantcontext.useThemeVariant)(), o = l === "brand" || l === "media" || l === "negative", { asset: m, headline: v, title: h, titleAs: U, titleLinesMax: S, subtitle: H, subtitleLinesMax: g, description: A, descriptionLinesMax: z, detail: R, danger: N, badge: Z, role: c, touchableRole: W, slot: x, withChevron: D, dataAttributes: B, right: I, "aria-label": M, tabIndex: w, atomicReading: P, hasDivider: b } = e, [C, _] = _react.useState(""), [G, J] = _react.useState(""), [Te, Le] = _react.useState(""), ke = vt(m), [Se, Ae] = _react.useState(0), De = _react.useCallback((n)=>{
+        if (!n || !b) return;
+        const d = n.querySelector(`.${_listcssmistica.innerContent}`);
+        if (!d) return;
+        const p = n.getBoundingClientRect().left, ee = d.getBoundingClientRect().left;
+        Ae(ee - p);
+    }, [
+        b
+    ]), de = [
+        h,
+        ke,
+        C,
+        H,
+        A,
+        G,
+        R,
+        Te
+    ].filter(Boolean).join(" "), T = !!e.onPress || !!e.href || !!e.to, V = M !== null && M !== void 0 ? M : T ? de : void 0, Ie = (0, _radiobutton.useRadioContext)(), f = e.disabled || e.radioValue !== void 0 && Ie.disabled, K = !f && !o, Q = !f && o, se = ft(e), Pe = se ? !1 : D !== null && D !== void 0 ? D : T, ce = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -425,184 +444,188 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         onNavigate: e.onNavigate,
         onPress: e.onPress,
         trackingEvent: e.trackingEvent,
-        "aria-label": O,
+        "aria-label": V,
         "aria-labelledby": e["aria-labelledby"],
         "aria-description": e["aria-description"],
         "aria-describedby": e["aria-describedby"],
         "aria-current": e["aria-current"]
-    }, [te, ae] = it(e.switch || e.checkbox || {}), L = (d)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(at, {
-            asset: u,
-            headline: x,
-            headlineRef: (n)=>{
-                n && be(Q(n));
+    }, [me, he] = bt(e.switch || e.checkbox || {}), L = (n)=>{
+        var _n_withDivider;
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(ut, {
+            asset: m,
+            headline: v,
+            headlineRef: (d)=>{
+                d && _(oe(d));
             },
-            title: b,
-            titleAs: P,
-            subtitle: w,
-            description: V,
-            badge: D,
-            titleLinesMax: R,
-            subtitleLinesMax: f,
-            descriptionLinesMax: H,
-            detail: k,
+            title: h,
+            titleAs: U,
+            subtitle: H,
+            description: A,
+            badge: Z,
+            titleLinesMax: S,
+            subtitleLinesMax: g,
+            descriptionLinesMax: z,
+            detail: R,
             danger: N,
-            right: Y,
-            rightRef: (n)=>{
-                n && xe(Q(n));
+            right: I,
+            rightRef: (d)=>{
+                d && Le(oe(d));
             },
-            control: d === null || d === void 0 ? void 0 : d.control,
-            role: d === null || d === void 0 ? void 0 : d.role,
-            slot: y,
-            slotRef: (n)=>{
-                n && ve(Q(n));
+            control: n === null || n === void 0 ? void 0 : n.control,
+            role: n === null || n === void 0 ? void 0 : n.role,
+            slot: x,
+            slotRef: (d)=>{
+                d && J(oe(d));
             },
-            labelId: d === null || d === void 0 ? void 0 : d.labelId,
-            disabled: g,
-            withChevron: Re
+            labelId: n === null || n === void 0 ? void 0 : n.labelId,
+            disabled: f,
+            withChevron: Pe,
+            withDivider: (_n_withDivider = n === null || n === void 0 ? void 0 : n.withDivider) !== null && _n_withDivider !== void 0 ? _n_withDivider : b
         });
-    if (A && !$) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    };
+    if (T && !se) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: a,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
-            [_listcssmistica.touchableBackground]: X,
-            [_listcssmistica.touchableBackgroundBrand]: M,
-            [_listcssmistica.pointer]: !g
+            [_listcssmistica.touchableBackground]: K,
+            [_listcssmistica.touchableBackgroundBrand]: Q,
+            [_listcssmistica.pointer]: !f
         })
-    }, ee), {
+    }, ce), {
         role: W,
         dataAttributes: B,
-        disabled: g,
-        tabIndex: v,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-            paddingX: 16,
+        disabled: f,
+        tabIndex: w,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _listcssmistica.rowContentPadding,
             "aria-hidden": !!e.to || !!e.href || e.touchableRole === "link" || void 0,
-            dataAttributes: {
-                testid: "content-container"
-            },
+            "data-testid": "content-container",
             children: L({
                 role: c
             })
         })
     }));
-    const j = (d)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+    const X = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
-            ref: a
+            ref: (0, _common.combineRefs)(a, De)
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
             children: [
-                /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
-                    disabled: g
-                }, ee), {
-                    role: W,
-                    className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
-                        [_listcssmistica.touchableBackground]: X,
-                        [_listcssmistica.touchableBackgroundBrand]: M
-                    }),
-                    tabIndex: v,
-                    children: L({
-                        labelId: i,
-                        role: c
-                    })
-                })),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _listcssmistica.dualActionDivider
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                    className: _listcssmistica.dualActionBody,
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+                            disabled: f
+                        }, ce), {
+                            role: W,
+                            className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
+                                [_listcssmistica.touchableBackground]: K,
+                                [_listcssmistica.touchableBackgroundBrand]: Q
+                            }),
+                            tabIndex: w,
+                            children: L({
+                                labelId: i,
+                                role: c,
+                                withDivider: !1
+                            })
+                        })),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _listcssmistica.dualActionDivider
+                        }),
+                        n
+                    ]
                 }),
-                d
+                b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _listcssmistica.rowDividerDualAction,
+                    "data-testid": "row-divider-dual-action",
+                    style: {
+                        paddingLeft: Se
+                    },
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                })
             ]
-        })), F = (d, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        })), Y = (n, d)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
-                [_listcssmistica.touchableBackground]: X && n,
-                [_listcssmistica.touchableBackgroundBrand]: M && n,
-                [_listcssmistica.pointer]: !g && n
+                [_listcssmistica.touchableBackground]: K && d,
+                [_listcssmistica.touchableBackgroundBrand]: Q && d,
+                [_listcssmistica.pointer]: !f && d
             }),
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
-            children: d
-        }));
+            children: n
+        })), ue = (param)=>{
+        let { controlElement: n } = param;
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            className: _listcssmistica.dualActionRight,
+            children: n
+        });
+    };
     if (e.switch || e.checkbox) {
         var _e_switch, _e_checkbox;
         var _e_switch_name, _ref;
-        const d = e.switch ? _switchcomponent.default : _checkbox.default, n = (_ref = (_e_switch_name = (_e_switch = e.switch) === null || _e_switch === void 0 ? void 0 : _e_switch.name) !== null && _e_switch_name !== void 0 ? _e_switch_name : (_e_checkbox = e.checkbox) === null || _e_checkbox === void 0 ? void 0 : _e_checkbox.name) !== null && _ref !== void 0 ? _ref : i;
-        return A ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
-            disabled: g,
-            name: n,
-            checked: te,
-            "aria-label": O,
+        const n = e.switch ? _switchcomponent.default : _checkbox.default, d = (_ref = (_e_switch_name = (_e_switch = e.switch) === null || _e_switch === void 0 ? void 0 : _e_switch.name) !== null && _e_switch_name !== void 0 ? _e_switch_name : (_e_checkbox = e.checkbox) === null || _e_checkbox === void 0 ? void 0 : _e_checkbox.name) !== null && _ref !== void 0 ? _ref : i;
+        return T ? X(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
+            disabled: f,
+            name: d,
+            checked: me,
+            "aria-label": V,
             "aria-labelledby": i,
-            onChange: ae,
-            render: (param)=>{
-                let { controlElement: Z } = param;
-                return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    className: _listcssmistica.dualActionRight,
-                    children: Z
-                });
-            }
-        })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(d, {
-            disabled: g,
-            name: n,
-            checked: te,
-            "aria-label": O,
+            onChange: he,
+            render: ue
+        })) : Y(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
+            disabled: f,
+            name: d,
+            checked: me,
+            "aria-label": V,
             "aria-labelledby": i,
-            onChange: ae,
+            onChange: he,
             render: (param)=>{
-                let { controlElement: Z, labelId: we } = param;
-                return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingX: 16,
+                let { controlElement: p, labelId: ee } = param;
+                return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    className: _listcssmistica.rowContentPadding,
                     role: c,
                     children: L({
-                        labelId: we,
+                        labelId: ee,
                         control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                             space: "around",
-                            children: Z
+                            children: p
                         })
                     })
                 });
             }
         }), !0);
     }
-    if (e.radioValue) return A ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    if (e.radioValue) return T ? X(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
-        "aria-label": O,
+        "aria-label": V,
         "aria-labelledby": i,
-        render: (param)=>{
-            let { controlElement: d } = param;
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
-                space: "around",
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingX: 16,
-                    children: d
-                })
-            });
-        }
-    })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+        render: ue
+    })) : Y(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
-        "aria-label": O,
+        "aria-label": V,
         "aria-labelledby": i,
         render: (param)=>{
-            let { controlElement: d } = param;
-            return /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                paddingX: 16,
+            let { controlElement: n } = param;
+            return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _listcssmistica.rowContentPadding,
                 role: c,
                 children: L({
                     labelId: i,
                     control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                         space: "around",
-                        children: d
+                        children: n
                     })
                 })
             });
         }
     }), !0);
-    if (e.iconButton) return A ? j(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-        padding: 16,
-        children: /* @__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
-            })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, e.iconButton), {
-                disabled: e.disabled
-            }))
-        })
-    })) : F(/* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-        paddingX: 16,
+    if (e.iconButton) return T ? X(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _listcssmistica.dualActionRightIconButton,
+        children: e.iconButton.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e.iconButton), {
+            disabled: e.disabled
+        })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, e.iconButton), {
+            disabled: e.disabled
+        }))
+    })) : Y(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        className: _listcssmistica.rowContentPadding,
         children: L({
             labelId: i,
             control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
@@ -617,31 +640,31 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
             })
         })
     }));
-    const U = !!C || me;
+    const $ = !!M || P;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: c,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, _listcssmistica.rowContentPadding),
-            role: U ? "text" : void 0
+            role: $ ? "text" : void 0
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
             ref: a,
-            tabIndex: v,
+            tabIndex: w,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    "aria-hidden": U,
+                    "aria-hidden": $,
                     children: L({
                         role: c
                     })
                 }),
-                U && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        children: C !== null && C !== void 0 ? C : p
+                        children: M !== null && M !== void 0 ? M : de
                     })
                 })
             ]
         }))
     });
-}), Lt = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+}), jt = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "role"
@@ -649,36 +672,33 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: a,
         className: _listcssmistica.row,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(he, _object_spread_props(_object_spread({}, i), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, i), {
+            hasDivider: !0,
             ref: l,
             dataAttributes: _object_spread({
                 testid: "Row"
             }, e)
         }))
     });
-}), It = (param)=>{
-    let { children: e, role: a = "list", "aria-label": i, "aria-labelledby": l, "aria-live": o = "off", "aria-atomic": u = !1, dataAttributes: x } = param;
-    const b = _react.Children.toArray(e).filter(Boolean), P = b.length - 1;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        role: a,
-        "aria-labelledby": l,
-        "aria-label": i,
-        "aria-live": o,
-        "aria-atomic": u
-    }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-        testid: "RowList"
-    }, x))), {
-        children: b.map((R, w)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
-                children: [
-                    R,
-                    w < P && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingX: 16,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
-                    })
-                ]
-            }, w))
-    }));
-}, St = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}), qt = (param)=>{
+    let { children: e, role: a = "list", "aria-label": i, "aria-labelledby": l, "aria-live": o = "off", "aria-atomic": m = !1, dataAttributes: v, small: h = !1 } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ne.Provider, {
+        value: {
+            small: h
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+            role: a,
+            "aria-labelledby": l,
+            "aria-label": i,
+            "aria-live": o,
+            "aria-atomic": m
+        }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
+            testid: "RowList"
+        }, v))), {
+            children: e
+        }))
+    });
+}, Ft = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
@@ -691,23 +711,30 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         dataAttributes: _object_spread({
             testid: "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(he, _object_spread({}, a))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, a), {
+            hasDivider: !1
+        }))
     });
-}), Pt = (param)=>{
-    let { children: e, role: a = "list", dataAttributes: i, "aria-label": l, "aria-labelledby": o, "aria-live": u = "off", "aria-atomic": x = !1 } = param;
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
-        space: 16,
-        role: a,
-        "aria-label": l,
-        "aria-labelledby": o,
-        "aria-live": u,
-        "aria-atomic": x,
-        dataAttributes: _object_spread({
-            testid: "BoxedRowList"
-        }, i),
-        children: e
+}), Ut = (param)=>{
+    let { children: e, role: a = "list", dataAttributes: i, "aria-label": l, "aria-labelledby": o, "aria-live": m = "off", "aria-atomic": v = !1, small: h = !1 } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ne.Provider, {
+        value: {
+            small: h
+        },
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+            space: 16,
+            role: a,
+            "aria-label": l,
+            "aria-labelledby": o,
+            "aria-live": m,
+            "aria-atomic": v,
+            dataAttributes: _object_spread({
+                testid: "BoxedRowList"
+            }, i),
+            children: e
+        })
     });
-}, Vt = (param)=>{
+}, Zt = (param)=>{
     let { children: e, "aria-label": a, "aria-labelledby": i } = param;
     return(// eslint-disable-next-line jsx-a11y/no-redundant-roles
     /* @__PURE__ */ (0, _jsxruntime.jsx)("ul", {
@@ -717,7 +744,7 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         "aria-labelledby": i,
         children: e
     }));
-}, Et = (param)=>{
+}, _t = (param)=>{
     let { children: e, "aria-label": a, "aria-labelledby": i } = param;
     return(// eslint-disable-next-line jsx-a11y/no-redundant-roles
     /* @__PURE__ */ (0, _jsxruntime.jsx)("ol", {
@@ -727,7 +754,7 @@ const tt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0
         "aria-labelledby": i,
         children: e
     }));
-}, Ot = (param)=>{
+}, Gt = (param)=>{
     let { children: e, Icon: a, icon: i, withMarker: l = !0 } = param;
     return l ? a || i ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("li", {
         className: _listcssmistica.liWithCustomIcon,