@telefonica/mistica 15.15.0 → 15.16.1

package/dist/callout.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return X;
+        return rr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -83,80 +83,85 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const $ = (param)=>{
-    let { title: t, titleAs: c = "h2", description: d, icon: a, onClose: i, button: l, secondaryButton: s, buttonLink: m, "aria-label": p, dataAttributes: u } = param;
-    const f = (0, _themevariantcontext.useThemeVariant)(), { texts: h } = (0, _hooks.useTheme)();
+const D = (param)=>{
+    let { title: a, titleAs: c = "h2", description: d, icon: i, onClose: t, button: l, secondaryButton: s, buttonLink: n, "aria-label": p, dataAttributes: u, role: f } = param;
+    const h = (0, _themevariantcontext.useThemeVariant)(), { texts: g } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
         className: (0, _classnames.default)(_calloutcssmistica.container, (0, _sprinklescssmistica.sprinkles)({
             background: {
                 inverse: _skincontractcssmistica.vars.colors.backgroundContainer,
                 alternative: _skincontractcssmistica.vars.colors.backgroundContainer,
                 default: _skincontractcssmistica.vars.colors.backgroundContainerAlternative
-            }[f]
+            }[h]
         })),
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
         }),
-        "aria-label": p !== null && p !== void 0 ? p : t
+        "aria-label": p !== null && p !== void 0 ? p : a,
+        role: f
     }, (0, _dom.getPrefixedDataAttributes)(u, "Callout")), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
             isInverse: !1,
             children: [
-                a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                     paddingRight: 16,
-                    children: a
+                    children: i
                 }),
-                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                     className: _calloutcssmistica.content,
-                    children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                        space: 16,
-                        children: [
-                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
-                                fullWidth: !0,
-                                alignItems: "flex-start",
-                                space: "between",
-                                children: [
-                                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                        space: 4,
-                                        children: [
-                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                                as: c,
-                                                regular: !0,
-                                                children: t
-                                            }),
-                                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                                as: "p",
-                                                regular: !0,
-                                                color: _skincontractcssmistica.vars.colors.textSecondary,
-                                                children: d
-                                            })
-                                        ]
-                                    }),
-                                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                        style: {
-                                            // Align the X with the text content
-                                            marginTop: "0.125rem"
-                                        },
-                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                                            small: !0,
-                                            bleedY: !0,
-                                            bleedRight: !0,
-                                            Icon: _iconcloseregular.default,
-                                            onPress: i,
-                                            "aria-label": h.closeButtonLabel
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            space: 16,
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                                    fullWidth: !0,
+                                    alignItems: "flex-start",
+                                    space: "between",
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                            space: 4,
+                                            children: [
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                                    as: c,
+                                                    regular: !0,
+                                                    children: a
+                                                }),
+                                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                                    as: "p",
+                                                    regular: !0,
+                                                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                                                    children: d
+                                                })
+                                            ]
+                                        }),
+                                        t && // Create empty div in order to fill space that iconButton occupies.
+                                        // Without this, the content's vertical alignment can be affected
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            className: _calloutcssmistica.closeButtonContainerSize
                                         })
-                                    })
-                                ]
-                            }),
-                            (l || s || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                                primaryButton: l,
-                                secondaryButton: s,
-                                link: m
+                                    ]
+                                }),
+                                (l || s || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
+                                    primaryButton: l,
+                                    secondaryButton: s,
+                                    link: n
+                                })
+                            ]
+                        }),
+                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            className: _calloutcssmistica.closeButtonContainer,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
+                                small: !0,
+                                bleedY: !0,
+                                bleedRight: !0,
+                                Icon: _iconcloseregular.default,
+                                onPress: t,
+                                "aria-label": g.closeButtonLabel
                             })
-                        ]
-                    })
+                        })
+                    ]
                 })
             ]
         })
     }));
-}, X = $;
+}, rr = D;

package/dist/community/advanced-data-card.d.ts

@@ -39,7 +39,8 @@ type AdvancedDataCardProps = MaybeTouchableCard<{
     description?: string;
     descriptionLinesMax?: number;
     extra?: ReadonlyArray<RendersNullableElement<AllowedExtra>>;
-    extraDividerPadding?: 8 | 24;
+    extraDividerPadding?: 8 | 16 | 24;
+    noExtraDivider?: boolean;
     button?: RendersNullableElement<typeof ButtonPrimary>;
     footerImage?: RendersNullableElement<typeof Image>;
     footerText?: string;

package/dist/community/advanced-data-card.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     AdvancedDataCard: function() {
-        return Cr;
+        return Tr;
     },
     default: function() {
-        return Wr;
+        return kr;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -160,8 +160,8 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Nr = (param)=>{
-    let { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: o, description: e, descriptionLinesMax: h } = param;
+const xr = (param)=>{
+    let { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: d = "h3", titleLinesMax: c, subtitle: l, subtitleLinesMax: o, description: t, descriptionLinesMax: h } = param;
     const { textPresets: x } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 4,
@@ -190,19 +190,19 @@ const Nr = (param)=>{
                 hyphens: "auto",
                 children: l
             }),
-            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                 truncate: h,
                 as: "p",
                 regular: !0,
                 color: _skincontractcssmistica.vars.colors.textSecondary,
                 hyphens: "auto",
-                children: e
+                children: t
             })
         ]
     });
-}, xr = (param)=>{
+}, Cr = (param)=>{
     let { button: a, footerImage: i, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
-    const d = !!a, c = !!i, l = !!s, o = !!n, e = d && (c || l) && o, h = o && !e ? "178px" : "";
+    const d = !!a, c = !!i, l = !!s, o = !!n, t = d && (c || l) && o, h = o && !t ? "178px" : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -210,14 +210,14 @@ const Nr = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[e ? "mobile" : "default"]),
+                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[t ? "mobile" : "default"]),
                 children: [
                     d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_advanceddatacardcssmistica.marginRightButton, _advanceddatacardcssmistica.buttonMobile),
                         children: a
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, e ? _advanceddatacardcssmistica.marginRightAuto : (0, _sprinklescssmistica.sprinkles)({
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, t ? _advanceddatacardcssmistica.marginRightAuto : (0, _sprinklescssmistica.sprinkles)({
                             paddingTop: 16
                         })),
                         children: [
@@ -248,15 +248,15 @@ const Nr = (param)=>{
                         ]
                     }),
                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, e ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, t ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
                         children: n
                     })
                 ]
             })
         ]
     });
-}, Cr = /*#__PURE__*/ _react.forwardRef((_param, W)=>{
-    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: o, subtitleLinesMax: e, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: G = 24, button: A, footerImage: B, footerText: b, footerTextLinesMax: M, buttonLink: R, dataAttributes: V, actions: v, "aria-label": w, onClose: D } = _param, g = _object_without_properties(_param, [
+}, Tr = /*#__PURE__*/ _react.forwardRef((_param, k)=>{
+    var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: d, titleAs: c, titleLinesMax: l, subtitle: o, subtitleLinesMax: t, description: h, descriptionLinesMax: x, extra: p, extraDividerPadding: G = 24, noExtraDivider: M = !1, button: A, footerImage: B, footerText: b, footerTextLinesMax: V, buttonLink: R, dataAttributes: W, actions: v, "aria-label": w, onClose: D } = _param, f = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -271,6 +271,7 @@ const Nr = (param)=>{
         "descriptionLinesMax",
         "extra",
         "extraDividerPadding",
+        "noExtraDivider",
         "button",
         "footerImage",
         "footerText",
@@ -281,20 +282,20 @@ const Nr = (param)=>{
         "aria-label",
         "onClose"
     ]);
-    const C = !!g.href || !!g.onPress || !!g.to, k = {
+    const C = !!f.href || !!f.onPress || !!f.to, z = {
         button: A,
         footerImage: B,
         footerText: b,
-        footerTextLinesMax: M,
+        footerTextLinesMax: V,
         buttonLink: R
-    }, F = !!A || !!B || !!b || !!R, H = !!(p != null && p.length), z = ((v == null ? void 0 : v.length) || 0) + (D ? 1 : 0);
+    }, F = !!A || !!B || !!b || !!R, H = !!(p != null && p.length), O = ((v == null ? void 0 : v.length) || 0) + (D ? 1 : 0);
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", _object_spread_props(_object_spread({
         className: (0, _sprinklescssmistica.sprinkles)({
             position: "relative",
             height: "100%"
         })
-    }, (0, _dom.getPrefixedDataAttributes)(V, "AdvancedDataCard")), {
-        ref: W,
+    }, (0, _dom.getPrefixedDataAttributes)(W, "AdvancedDataCard")), {
+        ref: k,
         "aria-label": C ? void 0 : w,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
@@ -305,7 +306,7 @@ const Nr = (param)=>{
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.default, _object_spread_props(_object_spread({
                         maybe: !0
-                    }, g), {
+                    }, f), {
                         "aria-label": C ? w : void 0,
                         className: _advanceddatacardcssmistica.touchable,
                         children: [
@@ -323,7 +324,7 @@ const Nr = (param)=>{
                                                 space: 8,
                                                 children: [
                                                     a,
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Nr, {
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(xr, {
                                                         headline: i,
                                                         pretitle: s,
                                                         pretitleAs: m,
@@ -332,7 +333,7 @@ const Nr = (param)=>{
                                                         titleAs: c,
                                                         titleLinesMax: l,
                                                         subtitle: o,
-                                                        subtitleLinesMax: e,
+                                                        subtitleLinesMax: t,
                                                         description: h,
                                                         descriptionLinesMax: x
                                                     })
@@ -340,7 +341,7 @@ const Nr = (param)=>{
                                             }),
                                             !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 style: (0, _css.applyCssVars)({
-                                                    [_advanceddatacardcssmistica.vars.topActionsCount]: String(z)
+                                                    [_advanceddatacardcssmistica.vars.topActionsCount]: String(O)
                                                 }),
                                                 className: _advanceddatacardcssmistica.topActionsWithoutIcon
                                             })
@@ -358,22 +359,22 @@ const Nr = (param)=>{
                                 paddingBottom: 24,
                                 width: "100%",
                                 className: _advanceddatacardcssmistica.zindex,
-                                children: p.map((O, I)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                children: p.map((X, I)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                         children: [
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: _advanceddatacardcssmistica.paddingX,
-                                                children: O
+                                                children: X
                                             }),
                                             I + 1 !== p.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                                 paddingY: G,
-                                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                                                children: !M && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                                             })
                                         ]
                                     }, I))
                             })
                         ]
                     })),
-                    F && /* @__PURE__ */ (0, _jsxruntime.jsx)(xr, _object_spread({}, k))
+                    F && /* @__PURE__ */ (0, _jsxruntime.jsx)(Cr, _object_spread({}, z))
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
@@ -382,4 +383,4 @@ const Nr = (param)=>{
             })
         ]
     }));
-}), Wr = Cr;
+}), kr = Tr;

package/dist/community/blocks.d.ts

@@ -31,19 +31,29 @@ interface InformationBlockProps {
     'aria-label'?: string;
 }
 export declare const InformationBlock: React.FC<InformationBlockProps>;
+interface Heading {
+    value: string;
+    text?: string;
+    valueColor?: string;
+}
 interface HighlightedValueBlockProps {
     headline?: RendersNullableElement<typeof Tag>;
-    mainHeading: {
+    headings?: ReadonlyArray<Heading>;
+    /** @deprecated Use headings instead */
+    mainHeading?: {
         value: string;
         text: string;
     };
+    /** @deprecated Use headings instead */
     secondHeading?: {
         value: string;
         text: string;
     };
+    /** @deprecated Use headings instead */
     secondaryValue?: string;
     title?: string;
     description?: ReadonlyArray<string> | string;
+    /** @deprecated Use headings instead */
     valueColor?: string;
     'aria-label'?: string;
 }

package/dist/community/blocks.js

@@ -10,22 +10,22 @@ function _export(target, all) {
 }
 _export(exports, {
     HighlightedValueBlock: function() {
-        return E;
+        return K;
     },
     InformationBlock: function() {
-        return D;
+        return J;
     },
     ProgressBlock: function() {
-        return J;
+        return O;
     },
     RowBlock: function() {
-        return q;
+        return E;
     },
     SimpleBlock: function() {
-        return z;
+        return F;
     },
     ValueBlock: function() {
-        return F;
+        return M;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -45,10 +45,10 @@ function _interop_require_default(obj) {
     };
 }
 const g = (param)=>{
-    let { title: a, description: e } = param;
-    const l = typeof e == "string" ? [
-        e
-    ] : e;
+    let { title: a, description: l } = param;
+    const o = typeof l == "string" ? [
+        l
+    ] : l;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         className: _blockscssmistica.column,
         children: [
@@ -57,7 +57,7 @@ const g = (param)=>{
                 color: _skincontractcssmistica.vars.colors.textPrimary,
                 children: a
             }),
-            l && l.map((t, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+            o && o.map((t, i)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     as: "p",
@@ -65,8 +65,8 @@ const g = (param)=>{
                 }, i))
         ]
     });
-}, q = (param)=>{
-    let { title: a, stackingGroup: e, description: l, "aria-label": t } = param;
+}, E = (param)=>{
+    let { title: a, stackingGroup: l, description: o, "aria-label": t } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "aria-label": t,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -80,20 +80,20 @@ const g = (param)=>{
                         children: a
                     })
                 }),
-                e || /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                l || /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
                     textAlign: "right",
                     as: "div",
-                    children: l
+                    children: o
                 })
             ]
         })
     });
-}, z = (param)=>{
-    let { image: a, description: e, "aria-label": l } = param;
+}, F = (param)=>{
+    let { image: a, description: l, "aria-label": o } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-        "aria-label": l,
+        "aria-label": o,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: 16,
             alignItems: "center",
@@ -107,21 +107,21 @@ const g = (param)=>{
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                    children: e
+                    children: l
                 })
             ]
         })
     });
-}, D = (param)=>{
-    let { title: a, description: e, secondaryValue: l, value: t, valueColor: i = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": d } = param;
+}, J = (param)=>{
+    let { title: a, description: l, secondaryValue: o, value: t, valueColor: i = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": s } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
         space: "between",
         alignItems: "flex-end",
-        "aria-label": d,
+        "aria-label": s,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
                 title: a,
-                description: e
+                description: l
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                 className: (0, _classnames.default)(_blockscssmistica.column, _blockscssmistica.rightContent),
@@ -130,7 +130,7 @@ const g = (param)=>{
                         regular: !0,
                         color: _skincontractcssmistica.vars.colors.textSecondary,
                         decoration: "line-through",
-                        children: l
+                        children: o
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
                         color: i,
@@ -140,10 +140,10 @@ const g = (param)=>{
             })
         ]
     });
-}, E = (param)=>{
-    let { headline: a, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: h = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": b } = param;
+}, K = (param)=>{
+    let { headline: a, headings: l, mainHeading: o, secondHeading: t, secondaryValue: i, title: s, description: h, valueColor: b = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": v } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-        "aria-label": b,
+        "aria-label": v,
         children: [
             a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingBottom: 24,
@@ -152,53 +152,71 @@ const g = (param)=>{
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: 2,
                 children: [
-                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    l && l.map((x, f)=>/* @__PURE__ */ {
+                        var _x_valueColor;
+                        return (0, _jsxruntime.jsxs)(_inline.default, {
+                            space: 8,
+                            alignItems: "baseline",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                    color: (_x_valueColor = x.valueColor) !== null && _x_valueColor !== void 0 ? _x_valueColor : _skincontractcssmistica.vars.colors.textPrimary,
+                                    children: x.value
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                    regular: !0,
+                                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                                    children: x.text
+                                })
+                            ]
+                        }, f);
+                    }),
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 8,
                         alignItems: "baseline",
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: h,
-                                children: e.value
+                                color: b,
+                                children: o.value
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                children: e.text
+                                children: o.text
                             })
                         ]
                     }),
-                    l && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    t && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
                         space: 8,
                         alignItems: "baseline",
                         children: [
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: h,
-                                children: l.value
+                                color: b,
+                                children: t.value
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                children: l.text
+                                children: t.text
                             })
                         ]
                     }),
-                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
                         color: _skincontractcssmistica.vars.colors.textSecondary,
-                        children: t
+                        children: i
                     })
                 ]
             }),
-            i || d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            s || h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingTop: 8,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
-                    title: i,
-                    description: d
+                    title: s,
+                    description: h
                 })
             }) : null
         ]
     });
-}, F = (param)=>{
-    let { title: a, value: e, description: l, valueColor: t = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": i } = param;
+}, M = (param)=>{
+    let { title: a, value: l, description: o, valueColor: t = _skincontractcssmistica.vars.colors.textPrimary, "aria-label": i } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         "aria-label": i,
         className: _blockscssmistica.column,
@@ -210,15 +228,15 @@ const g = (param)=>{
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
                 color: t,
-                children: e
+                children: l
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
-                description: l
+                description: o
             })
         ]
     });
-}, J = (param)=>{
-    let { title: a, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": h } = param;
+}, O = (param)=>{
+    let { title: a, stackingGroup: l, progressPercent: o, reverse: t, heading: i, description: s, "aria-label": h } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         "aria-label": h,
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -235,12 +253,12 @@ const g = (param)=>{
                                 children: a
                             })
                         }),
-                        e
+                        l
                     ]
                 }),
-                l !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.ProgressBar, {
+                o !== void 0 && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.ProgressBar, {
                     "aria-hidden": !0,
-                    progressPercent: l,
+                    progressPercent: o,
                     reverse: t
                 }),
                 /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -258,10 +276,10 @@ const g = (param)=>{
                         })
                     ]
                 }),
-                d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                     regular: !0,
                     color: _skincontractcssmistica.vars.colors.textSecondary,
-                    children: d
+                    children: s
                 })
             ]
         })