@telefonica/mistica 14.34.0 → 14.35.0

package/dist/image.js

@@ -11,22 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return Q;
+        return G;
     },
     ImageError: function() {
-        return J;
-    },
-    MediaBorderRadiusProvider: function() {
-        return m1;
+        return q;
     },
     RATIO: function() {
-        return I;
+        return k;
     },
     default: function() {
-        return u1;
-    },
-    useMediaBorderRadius: function() {
-        return q;
+        return m1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -43,6 +37,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _common = require("./utils/common.js");
 const _skeletonbase = /*#__PURE__*/ _interop_require_default(require("./skeleton-base.js"));
+const _css = require("@vanilla-extract/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -168,28 +163,22 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x), m1 = (param)=>/* @__PURE__ */ {
-    let { children: e, value: a } = param;
-    return (0, _jsxruntime.jsx)(x.Provider, {
-        value: a,
-        children: e
-    });
-}, G = (param)=>/* @__PURE__ */ {
-    let { style: e } = param;
+const Z = (param)=>/* @__PURE__ */ {
+    let { style: t } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: "48",
         height: "48",
         viewBox: "0 0 48 48",
         fill: "none",
-        style: e,
+        style: t,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
             d: "M24.021 35.7235C24.8145 35.7694 25.0467 36.1913 25.3157 36.5138C25.586 36.8362 29.515 41.551 29.7823 41.8569C30.0475 42.1662 30.7822 42.7329 31.5901 42.8405C32.3967 42.9473 33.282 42.7842 33.8484 42.3748C34.4135 41.965 35.1313 41.4073 35.3833 41.0356C35.6337 40.6638 36.061 40.1302 35.9823 39.2534C35.9028 38.3783 35.7112 37.9204 35.0268 37.1691C34.3433 36.4185 30.2992 31.6657 29.5382 30.7537C29.5382 30.7537 28.8467 29.9423 28.9469 28.7956C29.0476 27.6468 29.567 27.1343 30.6608 26.8487C31.7534 26.5647 36.0267 25.5306 36.0267 25.5306C36.0267 25.5306 38.4728 24.3723 37.9182 22.0776L37.5997 20.904C37.5997 20.904 37.0672 18.2264 33.5519 19.0556C30.0344 19.8869 28.0803 20.377 28.0803 20.377C28.0803 20.377 26.9602 20.4838 26.7999 19.744C26.6417 19.0038 26.8494 18.6218 27.3443 18.4156C27.8387 18.209 30.9611 16.7175 31.3617 12.6853C31.7652 8.65158 28.3882 5.06573 24.0091 5.08104C19.6288 5.0976 16.4594 8.39988 16.4725 11.8185C16.4856 15.2387 18.7033 17.5144 20.4079 18.3638C21.3752 18.8453 21.0656 19.7122 21.0656 19.7122C21.0656 19.7122 20.8334 20.5554 19.8153 20.3311C18.7972 20.1025 13.8657 18.9736 13.8657 18.9736C13.8657 18.9736 10.8914 18.4226 10.1732 21.359C9.4541 24.2978 11.1261 25.4143 12.3532 25.6908C13.5798 25.9669 17.7296 26.9716 17.7296 26.9716C17.7296 26.9716 18.9643 27.581 19.0125 28.8308C19.0425 29.5697 19.0438 30.1824 18.266 31.2832C17.4894 32.3835 12.6598 38.0148 12.6598 38.0148C12.6598 38.0148 10.9997 39.9862 13.4051 41.763C15.8106 43.5401 17.1641 43.1262 18.5921 41.4889C20.0188 39.852 22.8383 36.4243 22.8383 36.4243C22.8383 36.4243 23.2275 35.6788 24.021 35.7235Z",
             stroke: _skincontractcssmistica.vars.colors.brand,
             strokeWidth: "2"
         })
     });
-}, J = /*#__PURE__*/ _react.forwardRef((param, c)=>{
-    let { noBorderRadius: e, circular: a, withIcon: d = !0, border: l } = param;
+}, q = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { borderRadius: t, withIcon: a = !0, border: c } = param;
     const s = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -200,11 +189,11 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
             justifyContent: "center",
             backgroundColor: s ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: l ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
-            borderRadius: a ? "50%" : e ? void 0 : _skincontractcssmistica.vars.borderRadii.container
+            border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
+            borderRadius: t
         },
-        ref: c,
-        children: d ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
+        ref: d,
+        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -224,13 +213,13 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
             })
         }) : void 0
     });
-}), I = {
+}), k = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, k = "1:1", Q = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
-    var { aspectRatio: e = k, alt: a = "", dataAttributes: d, noBorderRadius: l, src: c, onError: s, onLoad: n, loadingFallback: y = !0, errorFallback: S = !0 } = _param, i = _object_without_properties(_param, [
+}, x = "1:1", G = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
+    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: d, src: s, onError: n, onLoad: l, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -241,86 +230,86 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), B = q(), z = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = l !== null && l !== void 0 ? l : !B, [f, g] = _react.useState(!c), [M, b] = _react.useState(!0), [F, R] = _react.useState(!1), u = i.circular ? 1 : typeof e == "number" ? e : I[e], w = y && !!(u !== 0 || i.width && i.height), L = S && !!(u !== 0 || i.width && i.height), h = _react.useCallback(()=>{
+    const f = _react.useRef(), S = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = i.circular ? "50%" : d ? "0px" : (0, _css.fallbackVar)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), h = i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(h !== 0 || i.width && i.height), L = y && !!(h !== 0 || i.width && i.height), u = _react.useCallback(()=>{
         g(!1), b(!1), setTimeout(()=>{
-            R(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
+            w(!0);
+        }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
     }, [
-        n
+        l
     ]), T = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
-        style: _object_spread_props(_object_spread({}, M && w ? {
+        style: _object_spread_props(_object_spread({}, z && v ? {
             opacity: 0
         } : {
             opacity: 1
         }), {
             boxSizing: "border-box",
-            border: z
+            border: S,
+            borderRadius: m
         }),
-        ref: (0, _common.combineRefs)(C, A),
-        src: c,
+        ref: (0, _common.combineRefs)(f, A),
+        src: s,
         className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
-            position: u !== 0 ? "absolute" : "static",
-            borderRadius: i.circular ? "50%" : m ? void 0 : _skincontractcssmistica.vars.borderRadii.container
+            position: h !== 0 ? "absolute" : "static"
         })),
         alt: a,
         onError: ()=>{
-            g(!0), b(!1), R(!0), s == null || s();
+            g(!0), b(!1), w(!0), n == null || n();
         },
-        onLoad: h
+        onLoad: u
     });
+    var _i_height, _i_width;
     return _react.useEffect(()=>{
-        var v;
-        (v = C.current) != null && v.complete && h();
+        var I;
+        (I = f.current) != null && I.complete && u();
     }, [
-        h
+        u
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            w && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            v && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: i.circular ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
-                    width: "100%",
-                    height: "100%",
-                    radius: "50%"
-                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonRectangle, {
-                    width: i.width,
-                    height: i.height,
-                    noBorderRadius: m
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonAnimation, {
+                    height: (_i_height = i.height) !== null && _i_height !== void 0 ? _i_height : "100%",
+                    width: (_i_width = i.width) !== null && _i_width !== void 0 ? _i_width : "100%",
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
+                        height: "100%",
+                        width: "100%",
+                        radius: m
+                    })
                 })
             }),
-            f && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            C && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
-                    circular: i.circular,
-                    noBorderRadius: m,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
+                    borderRadius: m,
                     border: i.border
                 })
             }),
-            !f && T
+            !C && T
         ]
     });
-}), X = /*#__PURE__*/ _react.forwardRef((e, a)=>{
-    var _e_aspectRatio;
-    const d = e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : I[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : k];
+}), J = /*#__PURE__*/ _react.forwardRef((t, a)=>{
+    var _t_aspectRatio;
+    const c = t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: d,
-        width: e.width,
-        height: e.height,
-        dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, _object_spread_props(_object_spread({}, e), {
+        aspectRatio: c,
+        width: t.width,
+        height: t.height,
+        dataAttributes: (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Image"),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, _object_spread_props(_object_spread({}, t), {
             ref: a
         }))
     });
-}), u1 = X;
+}), m1 = J;

package/dist/list.css-mistica.js

@@ -66,4 +66,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./list.css.ts.vanilla.css-mistica.js");
-var _ = "_1y2v1nfba _1y2v1nfbs _1y2v1nfbu", f = "_1y2v1nfbj _1y2v1nfd0 _1y2v1nfce _1y2v1nfbs", y = "_1y2v1nfba _1y2v1nfbp", a = "_1y2v1nfba _1y2v1nfbx _1y2v1nfdn", b = "_2buj9gf", r = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfba _1y2v1nfbf _1y2v1nfce", u = "_2buj9gm _1y2v1nfba", c = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbc _1y2v1nfbv", d = "_2buj9go _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbu _1y2v1nfby _1y2v1nfce", i = "_1y2v1nfe9", o = "_2buj9gc", g = "_2buj9gd", l = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbw", j = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbx _1y2v1nfds _1y2v1nf62 _1y2v1nfbc _1y2v1nfce", s = "_2buj9g1", h = "_2buj9g2";
+var _ = "_1y2v1nfba _1y2v1nfbs _1y2v1nfbu", f = "_1y2v1nfbj _1y2v1nfd0 _1y2v1nfce _1y2v1nfbs", y = "_1y2v1nfba _1y2v1nfbp", a = "_1y2v1nfba _1y2v1nfbx _1y2v1nfdn", b = "_2buj9gf", r = "_2buj9ge", t = "_2buj9g0", e = "_1y2v1nfba _1y2v1nfbf _1y2v1nfce", u = "_2buj9gm _1y2v1nfba", c = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfbc _1y2v1nfbv", d = "_2buj9go _1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfds _1y2v1nf62 _1y2v1nf90 _1y2v1nfa9 _1y2v1nfba _1y2v1nfbp _1y2v1nfbu _1y2v1nfby _1y2v1nfce", i = "_1y2v1nfea", o = "_2buj9gc", g = "_2buj9gd", l = "_1y2v1nfba _1y2v1nfbg _1y2v1nfbw", j = "_1y2v1nf63 _1y2v1nf7c _1y2v1nf8l _1y2v1nf9u _1y2v1nfbx _1y2v1nfds _1y2v1nf62 _1y2v1nfbc _1y2v1nfce", s = "_2buj9g1", h = "_2buj9g2";

package/dist/list.js

@@ -11,19 +11,19 @@ function _export(target, all) {
 }
 _export(exports, {
     BoxedRow: function() {
-        return Ge;
+        return Ue;
     },
     BoxedRowList: function() {
-        return Je;
+        return Ze;
     },
     Content: function() {
-        return ye;
+        return Ce;
     },
     Row: function() {
-        return qe;
+        return Ke;
     },
     RowList: function() {
-        return ze;
+        return Qe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -44,7 +44,9 @@ const _boxed = require("./boxed.js");
 const _divider = /*#__PURE__*/ _interop_require_default(require("./divider.js"));
 const _dom = require("./utils/dom.js");
 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -170,20 +172,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
-        centerY: n
-    }) : n ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+const $ = (e, r)=>typeof e == "function" ? e == null ? void 0 : e({
+        centerY: r
+    }) : r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             display: "flex",
             alignItems: "center",
             height: "100%"
         },
         children: e
-    }) : e, ye = (param)=>{
-    let { withChevron: e, headline: n, title: r, titleLinesMax: o, subtitle: s, subtitleLinesMax: x, description: d, descriptionLinesMax: W, detail: m, asset: V, type: g = "basic", badge: A, right: E, extra: X, labelId: l, disabled: v } = param;
+    }) : e, Ce = (param)=>{
+    let { withChevron: e, headline: r, title: n, titleLinesMax: o, subtitle: s, subtitleLinesMax: w, description: d, descriptionLinesMax: W, detail: u, asset: V, type: g = "basic", badge: A, right: E, extra: X, labelId: l, disabled: v } = param;
     const h = (0, _themevariantcontext.useIsInverseVariant)(), a = [
-        n,
         r,
+        n,
         s,
         d,
         X
@@ -210,6 +212,9 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 }),
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _listcssmistica.asset,
+                    style: (0, _css.applyCssVars)({
+                        [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
+                    }),
                     children: V
                 })
             }),
@@ -223,11 +228,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 4,
                     children: [
-                        n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
+                        r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text1, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textPrimary,
                             hyphens: "auto",
-                            children: n
+                            children: r
                         }),
                         /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                             space: 2,
@@ -238,12 +243,12 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                                     truncate: o,
                                     id: l,
                                     hyphens: "auto",
-                                    children: r
+                                    children: n
                                 }),
                                 s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                     regular: !0,
                                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                                    truncate: x,
+                                    truncate: w,
                                     hyphens: "auto",
                                     children: s
                                 }),
@@ -263,11 +268,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             f(),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)({
-                    [_listcssmistica.right]: !!m || g !== "basic",
-                    [_listcssmistica.rightRestrictedWidth]: !!m
+                    [_listcssmistica.right]: !!u || g !== "basic",
+                    [_listcssmistica.rightRestrictedWidth]: !!u
                 }),
                 children: [
-                    m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    u && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_listcssmistica.center, _listcssmistica.detail, {
                             [_listcssmistica.disabled]: v
                         }),
@@ -275,24 +280,24 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
                             hyphens: "auto",
-                            children: m
+                            children: u
                         })
                     }),
                     g === "control" && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)({
-                            [_listcssmistica.detailRight]: !!m
+                            [_listcssmistica.detailRight]: !!u
                         }),
                         children: $(E, a)
                     }),
                     g === "custom" && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)({
-                            [_listcssmistica.detailRight]: !!m,
+                            [_listcssmistica.detailRight]: !!u,
                             [_listcssmistica.disabled]: v
                         }),
                         children: $(E, a)
                     }),
                     (g === "chevron" || g === "custom" && e) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                        paddingLeft: m || g === "custom" ? 4 : 0,
+                        paddingLeft: u || g === "custom" ? 4 : 0,
                         className: (0, _classnames.default)(_listcssmistica.center, {
                             [_listcssmistica.disabled]: v
                         }),
@@ -305,10 +310,10 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             })
         ]
     });
-}, Re = (param)=>{
-    let { value: e, defaultValue: n, onChange: r } = param;
-    const o = e !== void 0, [s, x] = _react.useState(!!n), d = ()=>{
-        o || x(!s), r && r(o ? !e : !s);
+}, Ne = (param)=>{
+    let { value: e, defaultValue: r, onChange: n } = param;
+    const o = e !== void 0, [s, w] = _react.useState(!!r), d = ()=>{
+        o || w(!s), n && n(o ? !e : !s);
     };
     return o ? [
         !!e,
@@ -317,14 +322,14 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         s,
         d
     ];
-}, Ce = (e)=>e.switch !== void 0, Ne = (e)=>e.checkbox !== void 0, ke = (e)=>e.radioValue !== void 0, ee = /*#__PURE__*/ _react.forwardRef((e, n)=>{
-    const r = (0, _hooks.useAriaId)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { asset: s, headline: x, title: d, titleLinesMax: W, subtitle: m, subtitleLinesMax: V, description: g, descriptionLinesMax: A, detail: E, badge: X, role: l, extra: v, dataAttributes: h } = e, F = (0, _radiobutton.useRadioContext)(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, w = !a && o, [Y, q] = Re(e.switch || e.checkbox || {}), y = (param)=>/* @__PURE__ */ {
+}, ke = (e)=>e.switch !== void 0, Pe = (e)=>e.checkbox !== void 0, Be = (e)=>e.radioValue !== void 0, ee = /*#__PURE__*/ _react.forwardRef((e, r)=>{
+    const n = (0, _hooks.useAriaId)(), o = (0, _themevariantcontext.useIsInverseVariant)(), { asset: s, headline: w, title: d, titleLinesMax: W, subtitle: u, subtitleLinesMax: V, description: g, descriptionLinesMax: A, detail: E, badge: X, role: l, extra: v, dataAttributes: h } = e, F = (0, _radiobutton.useRadioContext)(), a = e.disabled || e.radioValue !== void 0 && F.disabled, f = !a && !o, y = !a && o, [Y, q] = Ne(e.switch || e.checkbox || {}), R = (param)=>/* @__PURE__ */ {
         let { type: c, right: b, labelId: D } = param;
-        return (0, _jsxruntime.jsx)(ye, {
+        return (0, _jsxruntime.jsx)(Ce, {
             asset: s,
-            headline: x,
+            headline: w,
             title: d,
-            subtitle: m,
+            subtitle: u,
             description: g,
             badge: X,
             titleLinesMax: W,
@@ -342,18 +347,18 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         let b = "chevron";
         return c.right === null && (b = "basic"), c.right && (b = "custom"), /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
             paddingX: 16,
-            ref: n,
-            children: y({
+            ref: r,
+            children: R({
                 type: b,
                 right: c.right
             })
         });
     };
-    if (e.onPress && !Ce(e) && !Ne(e) && !ke(e)) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
-        ref: n,
+    if (e.onPress && !ke(e) && !Pe(e) && !Be(e)) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
+        ref: r,
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: f,
-            [_listcssmistica.touchableBackgroundInverse]: w,
+            [_listcssmistica.touchableBackgroundInverse]: y,
             [_listcssmistica.pointer]: !a
         }),
         trackingEvent: e.trackingEvent,
@@ -366,7 +371,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     if (e.to) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: f,
-            [_listcssmistica.touchableBackgroundInverse]: w,
+            [_listcssmistica.touchableBackgroundInverse]: y,
             [_listcssmistica.pointer]: !a
         }),
         trackingEvent: e.trackingEvent,
@@ -380,7 +385,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     if (e.href) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: f,
-            [_listcssmistica.touchableBackgroundInverse]: w,
+            [_listcssmistica.touchableBackgroundInverse]: y,
             [_listcssmistica.pointer]: !a
         }),
         trackingEvent: e.trackingEvent,
@@ -394,7 +399,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     const z = (c)=>{
         var D, G;
         var _ref, _ref1;
-        const b = (_ref1 = (_ref = (D = e.switch) == null ? void 0 : D.name) !== null && _ref !== void 0 ? _ref : (G = e.checkbox) == null ? void 0 : G.name) !== null && _ref1 !== void 0 ? _ref1 : r;
+        const b = (_ref1 = (_ref = (D = e.switch) == null ? void 0 : D.name) !== null && _ref !== void 0 ? _ref : (G = e.checkbox) == null ? void 0 : G.name) !== null && _ref1 !== void 0 ? _ref1 : n;
         return e.onPress ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
             className: _listcssmistica.dualActionContainer,
             children: [
@@ -405,11 +410,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                     role: l,
                     className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
                         [_listcssmistica.touchableBackground]: f,
-                        [_listcssmistica.touchableBackgroundInverse]: w
+                        [_listcssmistica.touchableBackgroundInverse]: y
                     }),
-                    children: y({
+                    children: R({
                         type: "basic",
-                        labelId: r
+                        labelId: n
                     })
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -419,7 +424,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                     disabled: a,
                     name: b,
                     checked: Y,
-                    "aria-labelledby": r,
+                    "aria-labelledby": n,
                     onChange: q,
                     render: (param)=>/* @__PURE__ */ {
                         let { controlElement: H } = param;
@@ -433,7 +438,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             className: (0, _classnames.default)(_listcssmistica.rowContent, {
                 [_listcssmistica.touchableBackground]: f,
-                [_listcssmistica.touchableBackgroundInverse]: w,
+                [_listcssmistica.touchableBackgroundInverse]: y,
                 [_listcssmistica.pointer]: !a
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(c, {
@@ -447,7 +452,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                     return (0, _jsxruntime.jsx)(_box.default, {
                         paddingX: 16,
                         role: l,
-                        children: y({
+                        children: R({
                             labelId: te,
                             type: "control",
                             right: ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
@@ -469,11 +474,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 role: l,
                 className: (0, _classnames.default)(_listcssmistica.dualActionLeft, {
                     [_listcssmistica.touchableBackground]: f,
-                    [_listcssmistica.touchableBackgroundInverse]: w
+                    [_listcssmistica.touchableBackgroundInverse]: y
                 }),
-                children: y({
+                children: R({
                     type: "basic",
-                    labelId: r
+                    labelId: n
                 })
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -482,7 +487,7 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
                 dataAttributes: h,
                 value: e.radioValue,
-                "aria-labelledby": r,
+                "aria-labelledby": n,
                 render: (param)=>/* @__PURE__ */ {
                     let { controlElement: c } = param;
                     return (0, _jsxruntime.jsx)(_stack.default, {
@@ -498,21 +503,21 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_listcssmistica.rowContent, {
             [_listcssmistica.touchableBackground]: f,
-            [_listcssmistica.touchableBackgroundInverse]: w,
+            [_listcssmistica.touchableBackgroundInverse]: y,
             [_listcssmistica.pointer]: !a
         }),
         role: l,
-        ref: n,
+        ref: r,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_radiobutton.default, {
             dataAttributes: h,
             value: e.radioValue,
-            "aria-labelledby": r,
+            "aria-labelledby": n,
             render: (param)=>/* @__PURE__ */ {
                 let { controlElement: c } = param;
                 return (0, _jsxruntime.jsx)(_box.default, {
                     paddingX: 16,
-                    children: y({
-                        labelId: r,
+                    children: R({
+                        labelId: n,
                         type: "control",
                         right: ()=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
                                 space: "around",
@@ -527,33 +532,33 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         className: _listcssmistica.rowContent,
         role: l,
         dataAttributes: h,
-        children: e.right ? y({
+        children: e.right ? R({
             type: "custom",
             right: e.right
-        }) : y({
+        }) : R({
             type: "basic"
         })
     });
-}), qe = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
+}), Ke = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return (0, _jsxruntime.jsx)(ee, _object_spread_props(_object_spread({}, n), {
-        ref: r,
+    return (0, _jsxruntime.jsx)(ee, _object_spread_props(_object_spread({}, r), {
+        ref: n,
         dataAttributes: _object_spread({
             "component-name": "Row"
         }, e)
     }));
-}), ze = (param)=>{
-    let { children: e, ariaLabelledby: n, role: r, dataAttributes: o } = param;
+}), Qe = (param)=>{
+    let { children: e, ariaLabelledby: r, role: n, dataAttributes: o } = param;
     const s = _react.Children.count(e) - 1;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
-        role: r,
-        "aria-labelledby": n
+        role: n,
+        "aria-labelledby": r
     }, (0, _dom.getPrefixedDataAttributes)(o, "RowList")), {
-        children: _react.Children.toArray(e).filter(Boolean).map((x, d)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
+        children: _react.Children.toArray(e).filter(Boolean).map((w, d)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
                 children: [
-                    x,
+                    w,
                     d < s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingX: 16,
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
@@ -561,24 +566,24 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 ]
             }, d))
     }));
-}, Ge = /*#__PURE__*/ _react.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
+}, Ue = /*#__PURE__*/ _react.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return (0, _jsxruntime.jsx)(_boxed.Boxed, {
-        isInverse: n.isInverse,
-        ref: r,
+        isInverse: r.isInverse,
+        ref: n,
         dataAttributes: _object_spread({
             "component-name": "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(ee, _object_spread({}, r))
     });
-}), Je = (param)=>/* @__PURE__ */ {
-    let { children: e, ariaLabelledby: n, role: r, dataAttributes: o } = param;
+}), Ze = (param)=>/* @__PURE__ */ {
+    let { children: e, ariaLabelledby: r, role: n, dataAttributes: o } = param;
     return (0, _jsxruntime.jsx)(_stack.default, {
         space: 16,
-        role: r,
-        "aria-labelledby": n,
+        role: n,
+        "aria-labelledby": r,
         dataAttributes: _object_spread({
             "component-name": "BoxedRowList"
         }, o),