@telefonica/mistica 14.34.0 → 14.35.0

package/dist-es/list.js

@@ -81,9 +81,9 @@ function _object_without_properties_loose(source, excluded) {
 import { jsx as t, jsxs as k } from "react/jsx-runtime";
 import * as P from "react";
 import i from "classnames";
-import { BaseTouchable as T } from "./touchable.js";
-import { Text1 as ne, Text3 as re, Text2 as O } from "./text.js";
-import u from "./box.js";
+import { BaseTouchable as S } from "./touchable.js";
+import { Text1 as re, Text3 as ne, Text2 as O } from "./text.js";
+import m from "./box.js";
 import L from "./stack.js";
 import J from "./badge.js";
 import { useAriaId as ae } from "./hooks.js";
@@ -95,26 +95,28 @@ import se from "./checkbox.js";
 import { Boxed as de } from "./boxed.js";
 import le from "./divider.js";
 import { getPrefixedDataAttributes as he } from "./utils/dom.js";
-import { rowContent as B, touchableBackground as R, touchableBackgroundInverse as C, pointer as S, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z, content as ue, center as M, disabled as I, asset as me, rowBody as fe, right as ge, rightRestrictedWidth as ve, detail as be, detailRight as _, dualActionRight as xe, badge as we } from "./list.css-mistica.js";
-import { vars as N } from "./skins/skin-contract.css-mistica.js";
-const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
-        centerY: n
-    }) : n ? /* @__PURE__ */ t("div", {
+import { rowContent as B, touchableBackground as C, touchableBackgroundInverse as N, pointer as T, dualActionContainer as Q, dualActionLeft as U, dualActionDivider as Z, content as me, center as M, disabled as I, asset as ue, rowBody as fe, right as ge, rightRestrictedWidth as ve, detail as be, detailRight as _, dualActionRight as xe, badge as we } from "./list.css-mistica.js";
+import { vars as ye } from "./image.css-mistica.js";
+import { vars as x } from "./skins/skin-contract.css-mistica.js";
+import { applyCssVars as Re } from "./utils/css.js";
+const $ = (e, r)=>typeof e == "function" ? e == null ? void 0 : e({
+        centerY: r
+    }) : r ? /* @__PURE__ */ t("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 = p(), a = [
-        n,
         r,
+        n,
         s,
         d,
         X
-    ].filter(Boolean).length === 1, f = ()=>A ? /* @__PURE__ */ t(u, {
+    ].filter(Boolean).length === 1, f = ()=>A ? /* @__PURE__ */ t(m, {
             paddingLeft: 16,
             children: /* @__PURE__ */ t("div", {
                 className: i(M, we, {
@@ -125,18 +127,21 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 })
             })
         }) : null;
-    return /* @__PURE__ */ k(u, {
+    return /* @__PURE__ */ k(m, {
         paddingY: 16,
-        className: ue,
+        className: me,
         children: [
-            V && /* @__PURE__ */ t(u, {
+            V && /* @__PURE__ */ t(m, {
                 paddingRight: 16,
                 className: i({
                     [M]: a,
                     [I]: v
                 }),
                 children: /* @__PURE__ */ t("div", {
-                    className: me,
+                    className: ue,
+                    style: Re({
+                        [ye.mediaBorderRadius]: x.borderRadii.mediaSmall
+                    }),
                     children: V
                 })
             }),
@@ -150,33 +155,33 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 children: /* @__PURE__ */ k(L, {
                     space: 4,
                     children: [
-                        n && /* @__PURE__ */ t(ne, {
+                        r && /* @__PURE__ */ t(re, {
                             regular: !0,
-                            color: N.colors.textPrimary,
+                            color: x.colors.textPrimary,
                             hyphens: "auto",
-                            children: n
+                            children: r
                         }),
                         /* @__PURE__ */ k(L, {
                             space: 2,
                             children: [
-                                /* @__PURE__ */ t(re, {
+                                /* @__PURE__ */ t(ne, {
                                     regular: !0,
-                                    color: N.colors.textPrimary,
+                                    color: x.colors.textPrimary,
                                     truncate: o,
                                     id: l,
                                     hyphens: "auto",
-                                    children: r
+                                    children: n
                                 }),
                                 s && /* @__PURE__ */ t(O, {
                                     regular: !0,
-                                    color: N.colors.textSecondary,
-                                    truncate: x,
+                                    color: x.colors.textSecondary,
+                                    truncate: w,
                                     hyphens: "auto",
                                     children: s
                                 }),
                                 d && /* @__PURE__ */ t(O, {
                                     regular: !0,
-                                    color: N.colors.textSecondary,
+                                    color: x.colors.textSecondary,
                                     truncate: W,
                                     hyphens: "auto",
                                     children: d
@@ -190,41 +195,41 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             f(),
             /* @__PURE__ */ k("div", {
                 className: i({
-                    [ge]: !!m || g !== "basic",
-                    [ve]: !!m
+                    [ge]: !!u || g !== "basic",
+                    [ve]: !!u
                 }),
                 children: [
-                    m && /* @__PURE__ */ t("div", {
+                    u && /* @__PURE__ */ t("div", {
                         className: i(M, be, {
                             [I]: v
                         }),
                         children: /* @__PURE__ */ t(O, {
                             regular: !0,
-                            color: N.colors.textSecondary,
+                            color: x.colors.textSecondary,
                             hyphens: "auto",
-                            children: m
+                            children: u
                         })
                     }),
                     g === "control" && /* @__PURE__ */ t("div", {
                         className: i({
-                            [_]: !!m
+                            [_]: !!u
                         }),
                         children: $(E, a)
                     }),
                     g === "custom" && /* @__PURE__ */ t("div", {
                         className: i({
-                            [_]: !!m,
+                            [_]: !!u,
                             [I]: v
                         }),
                         children: $(E, a)
                     }),
-                    (g === "chevron" || g === "custom" && e) && /* @__PURE__ */ t(u, {
-                        paddingLeft: m || g === "custom" ? 4 : 0,
+                    (g === "chevron" || g === "custom" && e) && /* @__PURE__ */ t(m, {
+                        paddingLeft: u || g === "custom" ? 4 : 0,
                         className: i(M, {
                             [I]: v
                         }),
                         children: /* @__PURE__ */ t(ie, {
-                            color: h ? N.colors.inverse : N.colors.neutralMedium,
+                            color: h ? x.colors.inverse : x.colors.neutralMedium,
                             direction: "right"
                         })
                     })
@@ -232,10 +237,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] = P.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] = P.useState(!!r), d = ()=>{
+        o || w(!s), n && n(o ? !e : !s);
     };
     return o ? [
         !!e,
@@ -244,14 +249,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__*/ P.forwardRef((e, n)=>{
-    const r = ae(), o = p(), { 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 = ce(), 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__*/ P.forwardRef((e, r)=>{
+    const n = ae(), o = p(), { 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 = ce(), 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 t(ye, {
+        return t(Ce, {
             asset: s,
-            headline: x,
+            headline: w,
             title: d,
-            subtitle: m,
+            subtitle: u,
             description: g,
             badge: X,
             titleLinesMax: W,
@@ -267,21 +272,21 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         });
     }, j = (c)=>{
         let b = "chevron";
-        return c.right === null && (b = "basic"), c.right && (b = "custom"), /* @__PURE__ */ t(u, {
+        return c.right === null && (b = "basic"), c.right && (b = "custom"), /* @__PURE__ */ t(m, {
             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__ */ t(T, {
-        ref: n,
+    if (e.onPress && !ke(e) && !Pe(e) && !Be(e)) return /* @__PURE__ */ t(S, {
+        ref: r,
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         onPress: e.onPress,
@@ -290,11 +295,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         disabled: a,
         children: j(e)
     });
-    if (e.to) return /* @__PURE__ */ t(T, {
+    if (e.to) return /* @__PURE__ */ t(S, {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         to: e.to,
@@ -304,11 +309,11 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         disabled: a,
         children: j(e)
     });
-    if (e.href) return /* @__PURE__ */ t(T, {
+    if (e.href) return /* @__PURE__ */ t(S, {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         trackingEvent: e.trackingEvent,
         href: e.href,
@@ -321,22 +326,22 @@ 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__ */ k("div", {
             className: Q,
             children: [
-                /* @__PURE__ */ t(T, {
+                /* @__PURE__ */ t(S, {
                     dataAttributes: h,
                     disabled: a,
                     onPress: e.onPress,
                     role: l,
                     className: i(U, {
-                        [R]: f,
-                        [C]: w
+                        [C]: f,
+                        [N]: y
                     }),
-                    children: y({
+                    children: R({
                         type: "basic",
-                        labelId: r
+                        labelId: n
                     })
                 }),
                 /* @__PURE__ */ t("div", {
@@ -346,7 +351,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;
@@ -359,9 +364,9 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             ]
         }) : /* @__PURE__ */ t("div", {
             className: i(B, {
-                [R]: f,
-                [C]: w,
-                [S]: !a
+                [C]: f,
+                [N]: y,
+                [T]: !a
             }),
             children: /* @__PURE__ */ t(c, {
                 disabled: a,
@@ -371,10 +376,10 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 onChange: q,
                 render: (param)=>/* @__PURE__ */ {
                     let { controlElement: H, labelId: te } = param;
-                    return t(u, {
+                    return t(m, {
                         paddingX: 16,
                         role: l,
-                        children: y({
+                        children: R({
                             labelId: te,
                             type: "control",
                             right: ()=>/* @__PURE__ */ t(L, {
@@ -390,17 +395,17 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
     return e.switch ? z(oe) : e.checkbox ? z(se) : e.radioValue ? e.onPress ? /* @__PURE__ */ k("div", {
         className: Q,
         children: [
-            /* @__PURE__ */ t(T, {
+            /* @__PURE__ */ t(S, {
                 disabled: a,
                 onPress: e.onPress,
                 role: l,
                 className: i(U, {
-                    [R]: f,
-                    [C]: w
+                    [C]: f,
+                    [N]: y
                 }),
-                children: y({
+                children: R({
                     type: "basic",
-                    labelId: r
+                    labelId: n
                 })
             }),
             /* @__PURE__ */ t("div", {
@@ -409,12 +414,12 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
             /* @__PURE__ */ t(K, {
                 dataAttributes: h,
                 value: e.radioValue,
-                "aria-labelledby": r,
+                "aria-labelledby": n,
                 render: (param)=>/* @__PURE__ */ {
                     let { controlElement: c } = param;
                     return t(L, {
                         space: "around",
-                        children: /* @__PURE__ */ t(u, {
+                        children: /* @__PURE__ */ t(m, {
                             paddingX: 16,
                             children: c
                         })
@@ -424,22 +429,22 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
         ]
     }) : /* @__PURE__ */ t("div", {
         className: i(B, {
-            [R]: f,
-            [C]: w,
-            [S]: !a
+            [C]: f,
+            [N]: y,
+            [T]: !a
         }),
         role: l,
-        ref: n,
+        ref: r,
         children: /* @__PURE__ */ t(K, {
             dataAttributes: h,
             value: e.radioValue,
-            "aria-labelledby": r,
+            "aria-labelledby": n,
             render: (param)=>/* @__PURE__ */ {
                 let { controlElement: c } = param;
-                return t(u, {
+                return t(m, {
                     paddingX: 16,
-                    children: y({
-                        labelId: r,
+                    children: R({
+                        labelId: n,
                         type: "control",
                         right: ()=>/* @__PURE__ */ t(L, {
                                 space: "around",
@@ -449,67 +454,67 @@ const $ = (e, n)=>typeof e == "function" ? e == null ? void 0 : e({
                 });
             }
         })
-    }) : /* @__PURE__ */ t(u, {
+    }) : /* @__PURE__ */ t(m, {
         paddingX: 16,
         className: B,
         role: l,
         dataAttributes: h,
-        children: e.right ? y({
+        children: e.right ? R({
             type: "custom",
             right: e.right
-        }) : y({
+        }) : R({
             type: "basic"
         })
     });
-}), qe = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
+}), Ke = /*#__PURE__*/ P.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
-    return t(ee, _object_spread_props(_object_spread({}, n), {
-        ref: r,
+    return t(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 = P.Children.count(e) - 1;
     return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({
-        role: r,
-        "aria-labelledby": n
+        role: n,
+        "aria-labelledby": r
     }, he(o, "RowList")), {
-        children: P.Children.toArray(e).filter(Boolean).map((x, d)=>/* @__PURE__ */ k(P.Fragment, {
+        children: P.Children.toArray(e).filter(Boolean).map((w, d)=>/* @__PURE__ */ k(P.Fragment, {
                 children: [
-                    x,
-                    d < s && /* @__PURE__ */ t(u, {
+                    w,
+                    d < s && /* @__PURE__ */ t(m, {
                         paddingX: 16,
                         children: /* @__PURE__ */ t(le, {})
                     })
                 ]
             }, d))
     }));
-}, Ge = /*#__PURE__*/ P.forwardRef((_param, r)=>/* @__PURE__ */ {
-    var { dataAttributes: e } = _param, n = _object_without_properties(_param, [
+}, Ue = /*#__PURE__*/ P.forwardRef((_param, n)=>/* @__PURE__ */ {
+    var { dataAttributes: e } = _param, r = _object_without_properties(_param, [
         "dataAttributes"
     ]);
     return t(de, {
-        isInverse: n.isInverse,
-        ref: r,
+        isInverse: r.isInverse,
+        ref: n,
         dataAttributes: _object_spread({
             "component-name": "BoxedRow"
         }, e),
-        children: /* @__PURE__ */ t(ee, _object_spread({}, n))
+        children: /* @__PURE__ */ t(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 t(L, {
         space: 16,
-        role: r,
-        "aria-labelledby": n,
+        role: n,
+        "aria-labelledby": r,
         dataAttributes: _object_spread({
             "component-name": "BoxedRowList"
         }, o),
         children: e
     });
 };
-export { Ge as BoxedRow, Je as BoxedRowList, ye as Content, qe as Row, ze as RowList };
+export { Ue as BoxedRow, Ze as BoxedRowList, Ce as Content, Ke as Row, Qe as RowList };

package/dist-es/loading-bar.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./loading-bar.css.ts.vanilla.css-mistica.js";
-var r = 400, _ = "_1num3qg9", e = "_1num3qga", a = "_1num3qgb", f = "_1num3qgc", y = "_1num3qg8 _1y2v1nfce", g = "_1num3qg3 _1y2v1nfb6 _1y2v1nfeg _1y2v1nfev _1y2v1nffa", t = "_1num3qg6 _1y2v1nfb5 _1y2v1nfce _1y2v1nfbx", m = "_1y2v1nfbx _1y2v1nfea _1y2v1nfb4 _1y2v1nf4c _1y2v1nfch";
-export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, a as exit, f as exitActive, y as innerProgress, g as portal, t as progress, m as progressContainer };
+var r = 400, _ = "_1num3qg9", e = "_1num3qga", f = "_1num3qgb", y = "_1num3qgc", a = "_1num3qg8 _1y2v1nfce", t = "_1num3qg3 _1y2v1nfb6 _1y2v1nfeh _1y2v1nfew _1y2v1nffb", g = "_1num3qg6 _1y2v1nfb5 _1y2v1nfce _1y2v1nfbx", m = "_1y2v1nfbx _1y2v1nfeb _1y2v1nfb4 _1y2v1nf4c _1y2v1nfch";
+export { r as TRANSITION_DURATION_MS, _ as enter, e as enterActive, f as exit, y as exitActive, a as innerProgress, t as portal, g as progress, m as progressContainer };

package/dist-es/maybe-dismissable.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./maybe-dismissable.css.ts.vanilla.css-mistica.js";
-var f = "cim30m2 _1y2v1nfb5 _1y2v1nfeg _1y2v1nffa _1y2v1nfc9 _1y2v1nfcp _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", y = "cim30m4 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfc6 _1y2v1nfcm _1y2v1nfdt", _ = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbs";
+var f = "cim30m2 _1y2v1nfb5 _1y2v1nfeh _1y2v1nffb _1y2v1nfc9 _1y2v1nfcp _1y2v1nfba _1y2v1nfbp _1y2v1nfbj", y = "cim30m4 _1y2v1nfba _1y2v1nfbp _1y2v1nfbj _1y2v1nfc6 _1y2v1nfcm _1y2v1nfdt", _ = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbs";
 export { f as dismissableButton, y as dismissableCircleContainer, _ as dismissableContainer };