@telefonica/mistica 17.2.0 → 17.4.0

package/dist/list.js

@@ -11,31 +11,31 @@ function _export(target, all) {
 }
 _export(exports, {
     get BoxedRow () {
-        return Ft;
+        return Gt;
     },
     get BoxedRowList () {
-        return Ut;
+        return Jt;
     },
     get Content () {
-        return ut;
+        return gt;
     },
     get ListContext () {
-        return ne;
+        return ce;
     },
     get ListItem () {
-        return Gt;
+        return Xt;
     },
     get OrderedList () {
-        return _t;
+        return Qt;
     },
     get Row () {
-        return jt;
+        return Zt;
     },
     get RowList () {
-        return qt;
+        return _t;
     },
     get UnorderedList () {
-        return Zt;
+        return Kt;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -187,9 +187,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const ne = /*#__PURE__*/ _react.createContext({
+const ce = /*#__PURE__*/ _react.createContext({
     small: !1
-}), ht = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0 : e({
+}), vt = (e, a)=>typeof e == "function" ? e === null || e === void 0 ? void 0 : e({
         centerY: a
     }) : a ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -200,22 +200,22 @@ const ne = /*#__PURE__*/ _react.createContext({
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             children: e
         })
-    }) : 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 = [
+    }) : e, gt = (param)=>{
+    let { withChevron: e, headline: a, headlineRef: i, slotRef: l, title: r, titleAs: c, titleLinesMax: b, subtitle: u, subtitleLinesMax: H, description: k, descriptionLinesMax: z, detail: g, asset: A, danger: W, badge: R, right: w, rightRef: Z, slot: h, labelId: M, disabled: x, control: P, withDivider: B } = param;
+    const D = (0, _themevariantcontext.useThemeVariant)(), N = [
         a,
-        o,
-        h,
-        S,
-        c
-    ].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;
+        r,
+        u,
+        k,
+        h
+    ].filter(Boolean).length === 1, { textPresets: I } = (0, _hooks.useTheme)(), { small: f } = _react.useContext(ce), C = f ? I.text2 : I.text3, _ = f ? _text.Text1 : _text.Text2, G = f ? _text.Text1 : _text.Text2, J = f ? _text.Text1 : _text.Text2;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _listcssmistica.content,
-        id: W,
+        id: M,
         children: [
             A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: (0, _classnames.default)(_listcssmistica.assetContainer, {
-                    [_listcssmistica.center]: w,
+                    [_listcssmistica.center]: N,
                     [_listcssmistica.disabled]: x
                 }),
                 "aria-hidden": !0,
@@ -223,19 +223,19 @@ const ne = /*#__PURE__*/ _react.createContext({
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.asset,
                     style: (0, _css.applyCssVars)({
-                        color: z ? ({
+                        color: W ? ({
                             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
-                        })[I] : ({
+                        })[D] : ({
                             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
-                        })[I],
+                        })[D],
                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                     }),
                     children: A
@@ -249,7 +249,7 @@ const ne = /*#__PURE__*/ _react.createContext({
                             [_listcssmistica.disabled]: x
                         }),
                         style: {
-                            justifyContent: w ? "center" : "flex-start"
+                            justifyContent: N ? "center" : "flex-start"
                         },
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
@@ -257,15 +257,15 @@ const ne = /*#__PURE__*/ _react.createContext({
                                 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,
+                                weight: I.rowTitle.weight,
+                                color: W ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textPrimary,
+                                truncate: b,
                                 hyphens: "auto",
-                                as: m,
+                                as: c,
                                 dataAttributes: {
                                     testid: "title"
                                 },
-                                children: o
+                                children: r
                             }),
                             a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 ref: i,
@@ -283,39 +283,39 @@ const ne = /*#__PURE__*/ _react.createContext({
                                     children: a
                                 })
                             }),
-                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            u && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 2,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textPrimary,
-                                    truncate: U,
+                                    truncate: H,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "subtitle"
                                     },
-                                    children: h
+                                    children: u
                                 })
                             }),
-                            S && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: 2,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                                    truncate: H,
+                                    truncate: z,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "description"
                                     },
-                                    children: S
+                                    children: k
                                 })
                             }),
-                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 ref: l,
                                 paddingTop: 2,
                                 dataAttributes: {
                                     testid: "slot"
                                 },
-                                children: c
+                                children: h
                             })
                         ]
                     }),
@@ -330,7 +330,7 @@ const ne = /*#__PURE__*/ _react.createContext({
                             })
                         })
                     }),
-                    (g || N || e || D) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                    (g || w || e || P) && /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                         className: _listcssmistica.rightContent,
                         children: [
                             g && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -347,18 +347,18 @@ const ne = /*#__PURE__*/ _react.createContext({
                                     children: g
                                 })
                             }),
-                            N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            w && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: (0, _classnames.default)({
                                     [_listcssmistica.detailRight]: !!g,
                                     [_listcssmistica.disabled]: x
                                 }),
                                 ref: Z,
                                 "data-testid": "endSlot",
-                                children: ht(N, w)
+                                children: vt(w, N)
                             }),
                             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingLeft: g || N ? 4 : 0
+                                    paddingLeft: g || w ? 4 : 0
                                 },
                                 className: (0, _classnames.default)(_listcssmistica.center, {
                                     [_listcssmistica.disabled]: x
@@ -372,15 +372,15 @@ const ne = /*#__PURE__*/ _react.createContext({
                                         brand: _skincontractcssmistica.vars.colors.textSecondaryBrand,
                                         negative: _skincontractcssmistica.vars.colors.textSecondaryNegative,
                                         media: _skincontractcssmistica.vars.colors.textSecondaryBrand
-                                    }[I]
+                                    }[D]
                                 })
                             }),
-                            D && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            P && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    paddingLeft: g || N ? 8 : 0
+                                    paddingLeft: g || w ? 8 : 0
                                 },
                                 className: _listcssmistica.center,
-                                children: D
+                                children: P
                             })
                         ]
                     })
@@ -393,51 +393,51 @@ const ne = /*#__PURE__*/ _react.createContext({
             })
         ]
     });
-}, bt = (param)=>{
+}, xt = (param)=>{
     let { value: e, defaultValue: a, onChange: i } = param;
-    const l = e !== void 0, [o, m] = _react.useState(!!a);
+    const l = e !== void 0, [r, c] = _react.useState(!!a);
     return [
-        l ? !!e : o,
+        l ? !!e : r,
         ()=>{
-            l || m(!o), i === null || i === void 0 ? void 0 : i(l ? !e : !o);
+            l || c(!r), i === null || i === void 0 ? void 0 : i(l ? !e : !r);
         }
     ];
-}, ft = (e)=>[
+}, yt = (e)=>[
         "switch",
         "checkbox",
         "radioValue",
         "iconButton"
-    ].some((a)=>e[a] !== void 0), vt = (e)=>{
+    ].some((a)=>e[a] !== void 0), wt = (e)=>{
     let a = "";
     const i = (l)=>{
         if (l && /*#__PURE__*/ _react.isValidElement(l)) {
-            const o = l.props;
-            typeof o.alt == "string" && o.alt.trim() && (a += (a ? " " : "") + o.alt.trim()), typeof o["aria-label"] == "string" && o["aria-label"].trim() && (a += (a ? " " : "") + o["aria-label"].trim()), _react.Children.forEach(o.children, i);
+            const r = l.props;
+            typeof r.alt == "string" && r.alt.trim() && (a += (a ? " " : "") + r.alt.trim()), typeof r["aria-label"] == "string" && r["aria-label"].trim() && (a += (a ? " " : "") + r["aria-label"].trim()), _react.Children.forEach(r.children, i);
         }
     };
     return i(e), a.trim();
-}, oe = (e)=>{
+}, de = (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;
-}, 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;
+}, Te = /*#__PURE__*/ _react.forwardRef((e, a)=>{
+    const i = _react.useId(), l = (0, _themevariantcontext.useThemeVariant)(), r = l === "brand" || l === "media" || l === "negative", { asset: c, headline: b, title: u, titleAs: H, titleLinesMax: k, subtitle: z, subtitleLinesMax: g, description: A, descriptionLinesMax: W, detail: R, danger: w, badge: Z, role: h, touchableRole: M, slot: x, withChevron: P, dataAttributes: B, right: D, "aria-label": j, tabIndex: N, atomicReading: I, hasDivider: f, onSelectedChange: C } = e, [_, G] = _react.useState(""), [J, Le] = _react.useState(""), [ke, Ae] = _react.useState(""), Pe = wt(c), [De, Ie] = _react.useState(0), Ve = _react.useCallback((n)=>{
+        if (!n || !f) return;
         const d = n.querySelector(`.${_listcssmistica.innerContent}`);
         if (!d) return;
-        const p = n.getBoundingClientRect().left, ee = d.getBoundingClientRect().left;
-        Ae(ee - p);
+        const te = n.getBoundingClientRect().left, ae = d.getBoundingClientRect().left;
+        Ie(ae - te);
     }, [
-        b
-    ]), de = [
-        h,
-        ke,
-        C,
-        H,
+        f
+    ]), ue = [
+        u,
+        Pe,
+        _,
+        z,
         A,
-        G,
+        J,
         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 = {
+        ke
+    ].filter(Boolean).join(" "), S = !!e.onPress || !!e.href || !!e.to, V = j !== null && j !== void 0 ? j : S ? ue : void 0, he = (0, _radiobutton.useRadioContext)(), v = e.disabled || e.radioValue !== void 0 && he.disabled, K = !v && !r, Q = !v && r, me = yt(e), Oe = me ? !1 : P !== null && P !== void 0 ? P : S, be = {
         href: e.href,
         newTab: e.newTab,
         loadOnTop: e.loadOnTop,
@@ -452,81 +452,88 @@ const ne = /*#__PURE__*/ _react.createContext({
         "aria-description": e["aria-description"],
         "aria-describedby": e["aria-describedby"],
         "aria-current": e["aria-current"]
-    }, [me, he] = bt(e.switch || e.checkbox || {}), L = (n)=>{
+    }, [X, fe] = xt(e.switch || e.checkbox || {}), Y = e.switch || e.checkbox ? X : e.radioValue !== void 0 ? he.selectedValue === e.radioValue : void 0;
+    _react.useEffect(()=>{
+        Y !== void 0 && (C === null || C === void 0 ? void 0 : C(Y));
+    }, [
+        C,
+        Y
+    ]);
+    const T = (n)=>{
         var _n_withDivider;
-        return /* @__PURE__ */ (0, _jsxruntime.jsx)(ut, {
-            asset: m,
-            headline: v,
+        return /* @__PURE__ */ (0, _jsxruntime.jsx)(gt, {
+            asset: c,
+            headline: b,
             headlineRef: (d)=>{
-                d && _(oe(d));
+                d && G(de(d));
             },
-            title: h,
-            titleAs: U,
-            subtitle: H,
+            title: u,
+            titleAs: H,
+            subtitle: z,
             description: A,
             badge: Z,
-            titleLinesMax: S,
+            titleLinesMax: k,
             subtitleLinesMax: g,
-            descriptionLinesMax: z,
+            descriptionLinesMax: W,
             detail: R,
-            danger: N,
-            right: I,
+            danger: w,
+            right: D,
             rightRef: (d)=>{
-                d && Le(oe(d));
+                d && Ae(de(d));
             },
             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));
+                d && Le(de(d));
             },
             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
+            disabled: v,
+            withChevron: Oe,
+            withDivider: (_n_withDivider = n === null || n === void 0 ? void 0 : n.withDivider) !== null && _n_withDivider !== void 0 ? _n_withDivider : f
         });
     };
-    if (T && !se) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
+    if (S && !me) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({
         ref: a,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: K,
             [_listcssmistica.touchableBackgroundBrand]: Q,
-            [_listcssmistica.pointer]: !f
+            [_listcssmistica.pointer]: !v
         })
-    }, ce), {
-        role: W,
+    }, be), {
+        role: M,
         dataAttributes: B,
-        disabled: f,
-        tabIndex: w,
+        disabled: v,
+        tabIndex: N,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _listcssmistica.rowContentPadding,
             "aria-hidden": !!e.to || !!e.href || e.touchableRole === "link" || void 0,
             "data-testid": "content-container",
-            children: L({
-                role: c
+            children: T({
+                role: h
             })
         })
     }));
-    const X = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
+    const $ = (n)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: _listcssmistica.dualActionContainer,
-            ref: (0, _common.combineRefs)(a, De)
+            ref: (0, _common.combineRefs)(a, Ve)
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
             children: [
                 /* @__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,
+                            disabled: v
+                        }, be), {
+                            role: M,
                             className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
                                 [_listcssmistica.touchableBackground]: K,
                                 [_listcssmistica.touchableBackgroundBrand]: Q
                             }),
-                            tabIndex: w,
-                            children: L({
+                            tabIndex: N,
+                            children: T({
                                 labelId: i,
-                                role: c,
+                                role: h,
                                 withDivider: !1
                             })
                         })),
@@ -536,25 +543,25 @@ const ne = /*#__PURE__*/ _react.createContext({
                         n
                     ]
                 }),
-                b && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.rowDividerDualAction,
                     "data-testid": "row-divider-dual-action",
                     style: {
-                        paddingLeft: Se
+                        paddingLeft: De
                     },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                 })
             ]
-        })), Y = (n, d)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+        })), p = (n, d)=>/* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
                 [_listcssmistica.touchableBackground]: K && d,
                 [_listcssmistica.touchableBackgroundBrand]: Q && d,
-                [_listcssmistica.pointer]: !f && d
+                [_listcssmistica.pointer]: !v && d
             }),
             ref: a
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
             children: n
-        })), ue = (param)=>{
+        })), ve = (param)=>{
         let { controlElement: n } = param;
         return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: _listcssmistica.dualActionRight,
@@ -565,43 +572,43 @@ const ne = /*#__PURE__*/ _react.createContext({
         var _e_switch, _e_checkbox;
         var _e_switch_name, _ref;
         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,
+        return S ? $(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
+            disabled: v,
             name: d,
-            checked: me,
+            checked: X,
             "aria-label": V,
             "aria-labelledby": i,
-            onChange: he,
-            render: ue
-        })) : Y(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
-            disabled: f,
+            onChange: fe,
+            render: ve
+        })) : p(/* @__PURE__ */ (0, _jsxruntime.jsx)(n, {
+            disabled: v,
             name: d,
-            checked: me,
+            checked: X,
             "aria-label": V,
             "aria-labelledby": i,
-            onChange: he,
+            onChange: fe,
             render: (param)=>{
-                let { controlElement: p, labelId: ee } = param;
+                let { controlElement: te, labelId: ae } = param;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.rowContentPadding,
-                    role: c,
-                    children: L({
-                        labelId: ee,
+                    role: h,
+                    children: T({
+                        labelId: ae,
                         control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                             space: "around",
-                            children: p
+                            children: te
                         })
                     })
                 });
             }
         }), !0);
     }
-    if (e.radioValue) return T ? X(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+    if (e.radioValue) return S ? $(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
         "aria-label": V,
         "aria-labelledby": i,
-        render: ue
-    })) : Y(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
+        render: ve
+    })) : p(/* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
         value: e.radioValue,
         "aria-label": V,
         "aria-labelledby": i,
@@ -609,8 +616,8 @@ const ne = /*#__PURE__*/ _react.createContext({
             let { controlElement: n } = param;
             return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _listcssmistica.rowContentPadding,
-                role: c,
-                children: L({
+                role: h,
+                children: T({
                     labelId: i,
                     control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                         space: "around",
@@ -620,54 +627,54 @@ const ne = /*#__PURE__*/ _react.createContext({
             });
         }
     }), !0);
-    if (e.iconButton) return T ? X(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    if (e.iconButton) return S ? $(/* @__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", {
+    })) : p(/* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: _listcssmistica.rowContentPadding,
-        children: L({
+        children: T({
             labelId: i,
             control: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                 space: "around",
                 children: e.iconButton.Icon ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: c
+                    role: h
                 })) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.ToggleIconButton, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: c
+                    role: h
                 }))
             })
         })
     }));
-    const $ = !!M || P;
+    const ee = !!j || I;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        role: c,
+        role: h,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
             className: (0, _classnames.default)(_listcssmistica.rowContent, _listcssmistica.rowContentPadding),
-            role: $ ? "text" : void 0
+            role: ee ? "text" : void 0
         }, (0, _dom.getPrefixedDataAttributes)(B)), {
             ref: a,
-            tabIndex: w,
+            tabIndex: N,
             children: [
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                    "aria-hidden": $,
-                    children: L({
-                        role: c
+                    "aria-hidden": ee,
+                    children: T({
+                        role: h
                     })
                 }),
-                $ && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
+                ee && /* @__PURE__ */ (0, _jsxruntime.jsx)(_screenreaderonly.default, {
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)("span", {
-                        children: M !== null && M !== void 0 ? M : de
+                        children: j !== null && j !== void 0 ? j : ue
                     })
                 })
             ]
         }))
     });
-}), jt = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
+}), Zt = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "role"
@@ -675,7 +682,7 @@ const ne = /*#__PURE__*/ _react.createContext({
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         role: a,
         className: _listcssmistica.row,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, i), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Te, _object_spread_props(_object_spread({}, i), {
             hasDivider: !0,
             ref: l,
             dataAttributes: _object_spread({
@@ -683,61 +690,65 @@ const ne = /*#__PURE__*/ _react.createContext({
             }, e)
         }))
     });
-}), 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, {
+}), _t = (param)=>{
+    let { children: e, role: a = "list", "aria-label": i, "aria-labelledby": l, "aria-live": r = "off", "aria-atomic": c = !1, dataAttributes: b, small: u = !1 } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ce.Provider, {
         value: {
-            small: h
+            small: u
         },
         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
+            "aria-live": r,
+            "aria-atomic": c
         }, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             testid: "RowList"
-        }, v))), {
+        }, b))), {
             children: e
         }))
     });
-}, Ft = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
+}, Gt = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    var _a_variant;
+    const { selected: l } = a, r = _object_without_properties(a, [
+        "selected"
+    ]), c = (0, _themevariantcontext.useThemeVariant)(), [b, u] = _react.useState(!1);
+    var _r_variant;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.InternalBoxed, {
         overflow: "visible",
-        className: _listcssmistica.boxed,
-        variant: (_a_variant = a.variant) !== null && _a_variant !== void 0 ? _a_variant : "default",
+        className: (0, _classnames.default)(_listcssmistica.boxed, _listcssmistica.selectionOutline, (l !== null && l !== void 0 ? l : b) && _listcssmistica.selectionOutlineColor[c]),
+        variant: (_r_variant = r.variant) !== null && _r_variant !== void 0 ? _r_variant : "default",
         ref: i,
         dataAttributes: _object_spread({
             testid: "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Ce, _object_spread_props(_object_spread({}, a), {
-            hasDivider: !1
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Te, _object_spread_props(_object_spread({}, r), {
+            hasDivider: !1,
+            onSelectedChange: u
         }))
     });
-}), 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, {
+}), Jt = (param)=>{
+    let { children: e, role: a = "list", dataAttributes: i, "aria-label": l, "aria-labelledby": r, "aria-live": c = "off", "aria-atomic": b = !1, small: u = !1 } = param;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(ce.Provider, {
         value: {
-            small: h
+            small: u
         },
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
             space: 16,
             role: a,
             "aria-label": l,
-            "aria-labelledby": o,
-            "aria-live": m,
-            "aria-atomic": v,
+            "aria-labelledby": r,
+            "aria-live": c,
+            "aria-atomic": b,
             dataAttributes: _object_spread({
                 testid: "BoxedRowList"
             }, i),
             children: e
         })
     });
-}, Zt = (param)=>{
+}, Kt = (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", {
@@ -747,7 +758,7 @@ const ne = /*#__PURE__*/ _react.createContext({
         "aria-labelledby": i,
         children: e
     }));
-}, _t = (param)=>{
+}, Qt = (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", {
@@ -757,7 +768,7 @@ const ne = /*#__PURE__*/ _react.createContext({
         "aria-labelledby": i,
         children: e
     }));
-}, Gt = (param)=>{
+}, Xt = (param)=>{
     let { children: e, Icon: a, icon: i, withMarker: l = !0 } = param;
     return l ? a || i ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("li", {
         className: _listcssmistica.liWithCustomIcon,