@telefonica/mistica 17.2.0 → 17.4.0

package/dist-es/list.js

@@ -80,31 +80,31 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as t, jsxs as y } from "react/jsx-runtime";
 import * as s from "react";
-import u from "classnames";
-import { BaseTouchable as be } from "./touchable.js";
-import { Text as Ve, Text1 as j, Text2 as te } from "./text.js";
+import m from "classnames";
+import { BaseTouchable as ge } from "./touchable.js";
+import { Text as Ee, Text1 as q, Text2 as ie } from "./text.js";
 import E from "./box.js";
-import q from "./stack.js";
-import Oe from "./badge.js";
-import { useThemeVariant as Ne } from "./theme-variant-context.js";
-import Ee from "./generated/mistica-icons/icon-chevron-right-filled.js";
-import He from "./switch-component.js";
-import fe, { useRadioContext as ze } from "./radio-button.js";
-import We from "./checkbox.js";
-import { InternalBoxed as Me } from "./boxed.js";
-import we from "./divider.js";
-import { getPrefixedDataAttributes as F } from "./utils/dom.js";
-import { row as je, boxed as qe, ul as Re, liWithoutMarker as Fe, liContent as ve, liWithCustomIcon as Ue, li as Ze, innerContent as Be, rowContentPadding as O, rowContent as ae, pointer as ge, touchableBackgroundBrand as ie, touchableBackground as re, dualActionRightIconButton as _e, content as Ge, asset as Je, assetContainer as Ke, disabled as k, center as le, rowBody as Qe, badge as Xe, rightContent as Ye, detail as $e, detailRight as pe, rowDivider as et, dualActionContainer as tt, dualActionBody as at, dualActionLeft as it, dualActionDivider as rt, rowDividerDualAction as lt, dualActionRight as ot } from "./list.css-mistica.js";
-import { vars as nt } from "./image.css-mistica.js";
-import { vars as r } from "./skins/skin-contract.css-mistica.js";
-import { applyCssVars as dt } from "./utils/css.js";
-import { combineRefs as st } from "./utils/common.js";
-import { IconButton as xe, ToggleIconButton as ye } from "./icon-button.js";
-import ct from "./screen-reader-only.js";
-import { useTheme as mt } from "./hooks.js";
-const ne = /*#__PURE__*/ s.createContext({
+import F from "./stack.js";
+import He from "./badge.js";
+import { useThemeVariant as se } from "./theme-variant-context.js";
+import ze from "./generated/mistica-icons/icon-chevron-right-filled.js";
+import We from "./switch-component.js";
+import xe, { useRadioContext as Me } from "./radio-button.js";
+import je from "./checkbox.js";
+import { InternalBoxed as qe } from "./boxed.js";
+import Re from "./divider.js";
+import { getPrefixedDataAttributes as U } from "./utils/dom.js";
+import { row as Fe, boxed as Ue, selectionOutline as Ze, selectionOutlineColor as _e, ul as Be, liWithoutMarker as Ge, liContent as ye, liWithCustomIcon as Je, li as Ke, innerContent as Se, rowContentPadding as O, rowContent as re, pointer as we, touchableBackgroundBrand as le, touchableBackground as oe, dualActionRightIconButton as Qe, content as Xe, asset as Ye, assetContainer as $e, disabled as L, center as ne, rowBody as pe, badge as et, rightContent as tt, detail as at, detailRight as it, rowDivider as rt, dualActionContainer as lt, dualActionBody as ot, dualActionLeft as nt, dualActionDivider as dt, rowDividerDualAction as st, dualActionRight as ct } from "./list.css-mistica.js";
+import { vars as ut } from "./image.css-mistica.js";
+import { vars as o } from "./skins/skin-contract.css-mistica.js";
+import { applyCssVars as ht } from "./utils/css.js";
+import { combineRefs as mt } from "./utils/common.js";
+import { IconButton as Ne, ToggleIconButton as Ce } from "./icon-button.js";
+import bt from "./screen-reader-only.js";
+import { useTheme as ft } from "./hooks.js";
+const ce = /*#__PURE__*/ s.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__ */ t("div", {
         style: {
@@ -115,72 +115,72 @@ const ne = /*#__PURE__*/ s.createContext({
         children: /* @__PURE__ */ t("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 = Ne(), 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 = se(), N = [
         a,
-        o,
-        h,
-        S,
-        c
-    ].filter(Boolean).length === 1, { textPresets: P } = mt(), { small: b } = s.useContext(ne), C = b ? P.text2 : P.text3, _ = b ? j : te, G = b ? j : te, J = b ? j : te;
+        r,
+        u,
+        k,
+        h
+    ].filter(Boolean).length === 1, { textPresets: I } = ft(), { small: f } = s.useContext(ce), C = f ? I.text2 : I.text3, _ = f ? q : ie, G = f ? q : ie, J = f ? q : ie;
     return /* @__PURE__ */ y("div", {
-        className: Ge,
-        id: W,
+        className: Xe,
+        id: M,
         children: [
             A && /* @__PURE__ */ t("div", {
-                className: u(Ke, {
-                    [le]: w,
-                    [k]: x
+                className: m($e, {
+                    [ne]: N,
+                    [L]: x
                 }),
                 "aria-hidden": !0,
                 "data-testid": "asset",
                 children: /* @__PURE__ */ t("div", {
-                    className: Je,
-                    style: dt({
-                        color: z ? ({
-                            default: r.colors.textError,
-                            alternative: r.colors.textError,
-                            brand: r.colors.textErrorBrand,
-                            negative: r.colors.textErrorNegative,
-                            media: r.colors.textErrorBrand
-                        })[I] : ({
-                            default: r.colors.textPrimary,
-                            alternative: r.colors.textPrimary,
-                            brand: r.colors.textPrimaryBrand,
-                            negative: r.colors.textPrimaryNegative,
-                            media: r.colors.textPrimaryMedia
-                        })[I],
-                        [nt.mediaBorderRadius]: r.borderRadii.mediaSmall
+                    className: Ye,
+                    style: ht({
+                        color: W ? ({
+                            default: o.colors.textError,
+                            alternative: o.colors.textError,
+                            brand: o.colors.textErrorBrand,
+                            negative: o.colors.textErrorNegative,
+                            media: o.colors.textErrorBrand
+                        })[D] : ({
+                            default: o.colors.textPrimary,
+                            alternative: o.colors.textPrimary,
+                            brand: o.colors.textPrimaryBrand,
+                            negative: o.colors.textPrimaryNegative,
+                            media: o.colors.textPrimaryMedia
+                        })[D],
+                        [ut.mediaBorderRadius]: o.borderRadii.mediaSmall
                     }),
                     children: A
                 })
             }),
             /* @__PURE__ */ y("div", {
-                className: Be,
+                className: Se,
                 children: [
                     /* @__PURE__ */ y("div", {
-                        className: u(Qe, {
-                            [k]: x
+                        className: m(pe, {
+                            [L]: x
                         }),
                         style: {
-                            justifyContent: w ? "center" : "flex-start"
+                            justifyContent: N ? "center" : "flex-start"
                         },
                         children: [
-                            /* @__PURE__ */ t(Ve, {
+                            /* @__PURE__ */ t(Ee, {
                                 mobileSize: C.size.mobile,
                                 desktopSize: C.size.desktop,
                                 mobileLineHeight: C.lineHeight.mobile,
                                 desktopLineHeight: C.lineHeight.desktop,
-                                weight: P.rowTitle.weight,
-                                color: z ? r.colors.textError : r.colors.textPrimary,
-                                truncate: v,
+                                weight: I.rowTitle.weight,
+                                color: W ? o.colors.textError : o.colors.textPrimary,
+                                truncate: b,
                                 hyphens: "auto",
-                                as: m,
+                                as: c,
                                 dataAttributes: {
                                     testid: "title"
                                 },
-                                children: o
+                                children: r
                             }),
                             a && /* @__PURE__ */ t("div", {
                                 ref: i,
@@ -188,9 +188,9 @@ const ne = /*#__PURE__*/ s.createContext({
                                     order: -1,
                                     paddingBottom: 4
                                 },
-                                children: /* @__PURE__ */ t(j, {
+                                children: /* @__PURE__ */ t(q, {
                                     regular: !0,
-                                    color: r.colors.textPrimary,
+                                    color: o.colors.textPrimary,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "headline"
@@ -198,63 +198,63 @@ const ne = /*#__PURE__*/ s.createContext({
                                     children: a
                                 })
                             }),
-                            h && /* @__PURE__ */ t(E, {
+                            u && /* @__PURE__ */ t(E, {
                                 paddingTop: 2,
                                 children: /* @__PURE__ */ t(_, {
                                     regular: !0,
-                                    color: r.colors.textPrimary,
-                                    truncate: U,
+                                    color: o.colors.textPrimary,
+                                    truncate: H,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "subtitle"
                                     },
-                                    children: h
+                                    children: u
                                 })
                             }),
-                            S && /* @__PURE__ */ t(E, {
+                            k && /* @__PURE__ */ t(E, {
                                 paddingTop: 2,
                                 children: /* @__PURE__ */ t(G, {
                                     regular: !0,
-                                    color: r.colors.textSecondary,
-                                    truncate: H,
+                                    color: o.colors.textSecondary,
+                                    truncate: z,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "description"
                                     },
-                                    children: S
+                                    children: k
                                 })
                             }),
-                            c && /* @__PURE__ */ t(E, {
+                            h && /* @__PURE__ */ t(E, {
                                 ref: l,
                                 paddingTop: 2,
                                 dataAttributes: {
                                     testid: "slot"
                                 },
-                                children: c
+                                children: h
                             })
                         ]
                     }),
                     R && /* @__PURE__ */ t(E, {
                         paddingLeft: 16,
                         children: /* @__PURE__ */ t("div", {
-                            className: u(Xe, {
-                                [k]: x
+                            className: m(et, {
+                                [L]: x
                             }),
-                            children: /* @__PURE__ */ t(Oe, {
+                            children: /* @__PURE__ */ t(He, {
                                 value: R === !0 ? void 0 : R
                             })
                         })
                     }),
-                    (g || N || e || D) && /* @__PURE__ */ y("div", {
-                        className: Ye,
+                    (g || w || e || P) && /* @__PURE__ */ y("div", {
+                        className: tt,
                         children: [
                             g && /* @__PURE__ */ t("div", {
-                                className: u($e, {
-                                    [k]: x
+                                className: m(at, {
+                                    [L]: x
                                 }),
                                 children: /* @__PURE__ */ t(J, {
                                     regular: !0,
-                                    color: r.colors.textSecondary,
+                                    color: o.colors.textSecondary,
                                     hyphens: "auto",
                                     dataAttributes: {
                                         testid: "detail"
@@ -262,97 +262,97 @@ const ne = /*#__PURE__*/ s.createContext({
                                     children: g
                                 })
                             }),
-                            N && /* @__PURE__ */ t("div", {
-                                className: u({
-                                    [pe]: !!g,
-                                    [k]: x
+                            w && /* @__PURE__ */ t("div", {
+                                className: m({
+                                    [it]: !!g,
+                                    [L]: x
                                 }),
                                 ref: Z,
                                 "data-testid": "endSlot",
-                                children: ht(N, w)
+                                children: vt(w, N)
                             }),
                             e && /* @__PURE__ */ t("div", {
                                 style: {
-                                    paddingLeft: g || N ? 4 : 0
+                                    paddingLeft: g || w ? 4 : 0
                                 },
-                                className: u(le, {
-                                    [k]: x
+                                className: m(ne, {
+                                    [L]: x
                                 }),
                                 "data-testid": "chevron",
-                                children: /* @__PURE__ */ t(Ee, {
+                                children: /* @__PURE__ */ t(ze, {
                                     size: 16,
                                     color: {
-                                        default: r.colors.chevronIndicator,
-                                        alternative: r.colors.chevronIndicator,
-                                        brand: r.colors.textSecondaryBrand,
-                                        negative: r.colors.textSecondaryNegative,
-                                        media: r.colors.textSecondaryBrand
-                                    }[I]
+                                        default: o.colors.chevronIndicator,
+                                        alternative: o.colors.chevronIndicator,
+                                        brand: o.colors.textSecondaryBrand,
+                                        negative: o.colors.textSecondaryNegative,
+                                        media: o.colors.textSecondaryBrand
+                                    }[D]
                                 })
                             }),
-                            D && /* @__PURE__ */ t("div", {
+                            P && /* @__PURE__ */ t("div", {
                                 style: {
-                                    paddingLeft: g || N ? 8 : 0
+                                    paddingLeft: g || w ? 8 : 0
                                 },
-                                className: le,
-                                children: D
+                                className: ne,
+                                children: P
                             })
                         ]
                     })
                 ]
             }),
             B && /* @__PURE__ */ t("div", {
-                className: et,
+                className: rt,
                 "data-testid": "row-divider",
-                children: /* @__PURE__ */ t(we, {})
+                children: /* @__PURE__ */ t(Re, {})
             })
         ]
     });
-}, bt = (param)=>{
+}, xt = (param)=>{
     let { value: e, defaultValue: a, onChange: i } = param;
-    const l = e !== void 0, [o, m] = s.useState(!!a);
+    const l = e !== void 0, [r, c] = s.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__*/ s.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()), s.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()), s.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__*/ s.forwardRef((e, a)=>{
-    const i = s.useId(), l = Ne(), 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, _] = s.useState(""), [G, J] = s.useState(""), [Te, Le] = s.useState(""), ke = vt(m), [Se, Ae] = s.useState(0), De = s.useCallback((n)=>{
-        if (!n || !b) return;
-        const d = n.querySelector(`.${Be}`);
+}, Te = /*#__PURE__*/ s.forwardRef((e, a)=>{
+    const i = s.useId(), l = se(), 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] = s.useState(""), [J, Le] = s.useState(""), [ke, Ae] = s.useState(""), Pe = wt(c), [De, Ie] = s.useState(0), Ve = s.useCallback((n)=>{
+        if (!n || !f) return;
+        const d = n.querySelector(`.${Se}`);
         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 = ze(), 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 = Me(), 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,
@@ -367,156 +367,163 @@ const ne = /*#__PURE__*/ s.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;
+    s.useEffect(()=>{
+        Y !== void 0 && (C === null || C === void 0 ? void 0 : C(Y));
+    }, [
+        C,
+        Y
+    ]);
+    const T = (n)=>{
         var _n_withDivider;
-        return /* @__PURE__ */ t(ut, {
-            asset: m,
-            headline: v,
+        return /* @__PURE__ */ t(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__ */ t(be, _object_spread_props(_object_spread({
+    if (S && !me) return /* @__PURE__ */ t(ge, _object_spread_props(_object_spread({
         ref: a,
-        className: u(ae, {
-            [re]: K,
-            [ie]: Q,
-            [ge]: !f
+        className: m(re, {
+            [oe]: K,
+            [le]: Q,
+            [we]: !v
         })
-    }, ce), {
-        role: W,
+    }, be), {
+        role: M,
         dataAttributes: B,
-        disabled: f,
-        tabIndex: w,
+        disabled: v,
+        tabIndex: N,
         children: /* @__PURE__ */ t("div", {
             className: O,
             "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__ */ y("div", _object_spread_props(_object_spread({
-            className: tt,
-            ref: st(a, De)
-        }, F(B)), {
+    const $ = (n)=>/* @__PURE__ */ y("div", _object_spread_props(_object_spread({
+            className: lt,
+            ref: mt(a, Ve)
+        }, U(B)), {
             children: [
                 /* @__PURE__ */ y("div", {
-                    className: at,
+                    className: ot,
                     children: [
-                        /* @__PURE__ */ t(be, _object_spread_props(_object_spread({
-                            disabled: f
-                        }, ce), {
-                            role: W,
-                            className: u(it, {
-                                [re]: K,
-                                [ie]: Q
+                        /* @__PURE__ */ t(ge, _object_spread_props(_object_spread({
+                            disabled: v
+                        }, be), {
+                            role: M,
+                            className: m(nt, {
+                                [oe]: K,
+                                [le]: Q
                             }),
-                            tabIndex: w,
-                            children: L({
+                            tabIndex: N,
+                            children: T({
                                 labelId: i,
-                                role: c,
+                                role: h,
                                 withDivider: !1
                             })
                         })),
                         /* @__PURE__ */ t("div", {
-                            className: rt
+                            className: dt
                         }),
                         n
                     ]
                 }),
-                b && /* @__PURE__ */ t("div", {
-                    className: lt,
+                f && /* @__PURE__ */ t("div", {
+                    className: st,
                     "data-testid": "row-divider-dual-action",
                     style: {
-                        paddingLeft: Se
+                        paddingLeft: De
                     },
-                    children: /* @__PURE__ */ t(we, {})
+                    children: /* @__PURE__ */ t(Re, {})
                 })
             ]
-        })), Y = (n, d)=>/* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-            className: u(ae, {
-                [re]: K && d,
-                [ie]: Q && d,
-                [ge]: !f && d
+        })), p = (n, d)=>/* @__PURE__ */ t("div", _object_spread_props(_object_spread({
+            className: m(re, {
+                [oe]: K && d,
+                [le]: Q && d,
+                [we]: !v && d
             }),
             ref: a
-        }, F(B)), {
+        }, U(B)), {
             children: n
-        })), ue = (param)=>{
+        })), ve = (param)=>{
         let { controlElement: n } = param;
         return /* @__PURE__ */ t("div", {
-            className: ot,
+            className: ct,
             children: n
         });
     };
     if (e.switch || e.checkbox) {
         var _e_switch, _e_checkbox;
         var _e_switch_name, _ref;
-        const n = e.switch ? He : We, 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__ */ t(n, {
-            disabled: f,
+        const n = e.switch ? We : je, 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 S ? $(/* @__PURE__ */ t(n, {
+            disabled: v,
             name: d,
-            checked: me,
+            checked: X,
             "aria-label": V,
             "aria-labelledby": i,
-            onChange: he,
-            render: ue
-        })) : Y(/* @__PURE__ */ t(n, {
-            disabled: f,
+            onChange: fe,
+            render: ve
+        })) : p(/* @__PURE__ */ t(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__ */ t("div", {
                     className: O,
-                    role: c,
-                    children: L({
-                        labelId: ee,
-                        control: /* @__PURE__ */ t(q, {
+                    role: h,
+                    children: T({
+                        labelId: ae,
+                        control: /* @__PURE__ */ t(F, {
                             space: "around",
-                            children: p
+                            children: te
                         })
                     })
                 });
             }
         }), !0);
     }
-    if (e.radioValue) return T ? X(/* @__PURE__ */ t(fe, {
+    if (e.radioValue) return S ? $(/* @__PURE__ */ t(xe, {
         value: e.radioValue,
         "aria-label": V,
         "aria-labelledby": i,
-        render: ue
-    })) : Y(/* @__PURE__ */ t(fe, {
+        render: ve
+    })) : p(/* @__PURE__ */ t(xe, {
         value: e.radioValue,
         "aria-label": V,
         "aria-labelledby": i,
@@ -524,10 +531,10 @@ const ne = /*#__PURE__*/ s.createContext({
             let { controlElement: n } = param;
             return /* @__PURE__ */ t("div", {
                 className: O,
-                role: c,
-                children: L({
+                role: h,
+                children: T({
                     labelId: i,
-                    control: /* @__PURE__ */ t(q, {
+                    control: /* @__PURE__ */ t(F, {
                         space: "around",
                         children: n
                     })
@@ -535,62 +542,62 @@ const ne = /*#__PURE__*/ s.createContext({
             });
         }
     }), !0);
-    if (e.iconButton) return T ? X(/* @__PURE__ */ t("div", {
-        className: _e,
-        children: e.iconButton.Icon ? /* @__PURE__ */ t(xe, _object_spread_props(_object_spread({}, e.iconButton), {
+    if (e.iconButton) return S ? $(/* @__PURE__ */ t("div", {
+        className: Qe,
+        children: e.iconButton.Icon ? /* @__PURE__ */ t(Ne, _object_spread_props(_object_spread({}, e.iconButton), {
             disabled: e.disabled
-        })) : /* @__PURE__ */ t(ye, _object_spread_props(_object_spread({}, e.iconButton), {
+        })) : /* @__PURE__ */ t(Ce, _object_spread_props(_object_spread({}, e.iconButton), {
             disabled: e.disabled
         }))
-    })) : Y(/* @__PURE__ */ t("div", {
+    })) : p(/* @__PURE__ */ t("div", {
         className: O,
-        children: L({
+        children: T({
             labelId: i,
-            control: /* @__PURE__ */ t(q, {
+            control: /* @__PURE__ */ t(F, {
                 space: "around",
-                children: e.iconButton.Icon ? /* @__PURE__ */ t(xe, _object_spread_props(_object_spread({}, e.iconButton), {
+                children: e.iconButton.Icon ? /* @__PURE__ */ t(Ne, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: c
-                })) : /* @__PURE__ */ t(ye, _object_spread_props(_object_spread({}, e.iconButton), {
+                    role: h
+                })) : /* @__PURE__ */ t(Ce, _object_spread_props(_object_spread({}, e.iconButton), {
                     disabled: e.disabled,
-                    role: c
+                    role: h
                 }))
             })
         })
     }));
-    const $ = !!M || P;
+    const ee = !!j || I;
     return /* @__PURE__ */ t("div", {
-        role: c,
+        role: h,
         children: /* @__PURE__ */ y("div", _object_spread_props(_object_spread({
-            className: u(ae, O),
-            role: $ ? "text" : void 0
-        }, F(B)), {
+            className: m(re, O),
+            role: ee ? "text" : void 0
+        }, U(B)), {
             ref: a,
-            tabIndex: w,
+            tabIndex: N,
             children: [
                 /* @__PURE__ */ t("div", {
-                    "aria-hidden": $,
-                    children: L({
-                        role: c
+                    "aria-hidden": ee,
+                    children: T({
+                        role: h
                     })
                 }),
-                $ && /* @__PURE__ */ t(ct, {
+                ee && /* @__PURE__ */ t(bt, {
                     children: /* @__PURE__ */ t("span", {
-                        children: M !== null && M !== void 0 ? M : de
+                        children: j !== null && j !== void 0 ? j : ue
                     })
                 })
             ]
         }))
     });
-}), jt = /*#__PURE__*/ s.forwardRef((_param, l)=>{
+}), Zt = /*#__PURE__*/ s.forwardRef((_param, l)=>{
     var { dataAttributes: e, role: a = "listitem" } = _param, i = _object_without_properties(_param, [
         "dataAttributes",
         "role"
     ]);
     return /* @__PURE__ */ t("div", {
         role: a,
-        className: je,
-        children: /* @__PURE__ */ t(Ce, _object_spread_props(_object_spread({}, i), {
+        className: Fe,
+        children: /* @__PURE__ */ t(Te, _object_spread_props(_object_spread({}, i), {
             hasDivider: !0,
             ref: l,
             dataAttributes: _object_spread({
@@ -598,86 +605,90 @@ const ne = /*#__PURE__*/ s.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__ */ t(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__ */ t(ce.Provider, {
         value: {
-            small: h
+            small: u
         },
         children: /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
             role: a,
             "aria-labelledby": l,
             "aria-label": i,
-            "aria-live": o,
-            "aria-atomic": m
-        }, F(_object_spread({
+            "aria-live": r,
+            "aria-atomic": c
+        }, U(_object_spread({
             testid: "RowList"
-        }, v))), {
+        }, b))), {
             children: e
         }))
     });
-}, Ft = /*#__PURE__*/ s.forwardRef((_param, i)=>{
+}, Gt = /*#__PURE__*/ s.forwardRef((_param, i)=>{
     var { dataAttributes: e } = _param, a = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    var _a_variant;
-    return /* @__PURE__ */ t(Me, {
+    const { selected: l } = a, r = _object_without_properties(a, [
+        "selected"
+    ]), c = se(), [b, u] = s.useState(!1);
+    var _r_variant;
+    return /* @__PURE__ */ t(qe, {
         overflow: "visible",
-        className: qe,
-        variant: (_a_variant = a.variant) !== null && _a_variant !== void 0 ? _a_variant : "default",
+        className: m(Ue, Ze, (l !== null && l !== void 0 ? l : b) && _e[c]),
+        variant: (_r_variant = r.variant) !== null && _r_variant !== void 0 ? _r_variant : "default",
         ref: i,
         dataAttributes: _object_spread({
             testid: "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ t(Ce, _object_spread_props(_object_spread({}, a), {
-            hasDivider: !1
+        children: /* @__PURE__ */ t(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__ */ t(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__ */ t(ce.Provider, {
         value: {
-            small: h
+            small: u
         },
-        children: /* @__PURE__ */ t(q, {
+        children: /* @__PURE__ */ t(F, {
             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(// role="list" is needed for accesibility in Safari+VoiceOver. See: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     /* @__PURE__ */ t("ul", {
         role: "list",
-        className: Re,
+        className: Be,
         "aria-label": a,
         "aria-labelledby": i,
         children: e
     }));
-}, _t = (param)=>{
+}, Qt = (param)=>{
     let { children: e, "aria-label": a, "aria-labelledby": i } = param;
     return(// role="list" is needed for accesibility in Safari+VoiceOver. See: https://developer.mozilla.org/en-US/docs/Web/CSS/list-style#accessibility
     // eslint-disable-next-line jsx-a11y/no-redundant-roles
     /* @__PURE__ */ t("ol", {
         role: "list",
-        className: Re,
+        className: Be,
         "aria-label": a,
         "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__ */ y("li", {
-        className: Ue,
+        className: Je,
         children: [
             /* @__PURE__ */ t(E, {
                 paddingRight: {
@@ -690,19 +701,19 @@ const ne = /*#__PURE__*/ s.createContext({
                 }) : i
             }),
             /* @__PURE__ */ t("div", {
-                className: ve,
+                className: ye,
                 children: e
             })
         ]
     }) : /* @__PURE__ */ t("li", {
-        className: Ze,
+        className: Ke,
         children: e
     }) : /* @__PURE__ */ t("li", {
-        className: Fe,
+        className: Ge,
         children: /* @__PURE__ */ t("div", {
-            className: ve,
+            className: ye,
             children: e
         })
     });
 };
-export { Ft as BoxedRow, Ut as BoxedRowList, ut as Content, ne as ListContext, Gt as ListItem, _t as OrderedList, jt as Row, qt as RowList, Zt as UnorderedList };
+export { Gt as BoxedRow, Jt as BoxedRowList, gt as Content, ce as ListContext, Xt as ListItem, Qt as OrderedList, Zt as Row, _t as RowList, Kt as UnorderedList };