@telefonica/mistica 14.17.1 → 14.18.0

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

@@ -0,0 +1,317 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AdvancedDataCard: function() {
+        return le;
+    },
+    default: function() {
+        return Ae;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _boxed = require("../boxed.js");
+const _sprinklescssmistica = require("../sprinkles.css-mistica.js");
+const _stack = /*#__PURE__*/ _interop_require_default(require("../stack.js"));
+const _advanceddatacardcssmistica = require("./advanced-data-card.css-mistica.js");
+const _divider = /*#__PURE__*/ _interop_require_default(require("../divider.js"));
+const _text = require("../text.js");
+const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
+const _box = /*#__PURE__*/ _interop_require_default(require("../box.js"));
+const _touchable = /*#__PURE__*/ _interop_require_default(require("../touchable.js"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+const _card = require("../card.js");
+const _hooks = require("../hooks.js");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+const ce = (param)=>{
+    let { headline: a , pretitle: i , pretitleAs: c = "p" , pretitleLinesMax: u , title: d , titleAs: l = "h3" , titleLinesMax: h , subtitle: m , subtitleLinesMax: o , description: t , descriptionLinesMax: g  } = param;
+    const { textPresets: x  } = (0, _hooks.useTheme)();
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
+            space: 4,
+            children: /* @__PURE__ */ (0, _jsxruntime.jsx)("header", {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    space: 4,
+                    children: [
+                        a,
+                        /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                            space: 4,
+                            children: [
+                                i && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                    color: _skincontractcssmistica.vars.colors.textPrimary,
+                                    truncate: u,
+                                    as: c,
+                                    regular: !0,
+                                    hyphens: "auto",
+                                    children: i
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, {
+                                    mobileSize: 18,
+                                    mobileLineHeight: "24px",
+                                    desktopSize: 20,
+                                    desktopLineHeight: "28px",
+                                    truncate: h,
+                                    weight: x.cardTitle.weight,
+                                    as: l,
+                                    hyphens: "auto",
+                                    children: d
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                    color: _skincontractcssmistica.vars.colors.textPrimary,
+                                    truncate: o,
+                                    as: "p",
+                                    regular: !0,
+                                    hyphens: "auto",
+                                    children: m
+                                })
+                            ]
+                        }),
+                        t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            truncate: g,
+                            as: "p",
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            hyphens: "auto",
+                            children: t
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}, de = (param)=>{
+    let { button: a , footerImage: i , footerText: c , footerTextLinesMax: u , buttonLink: d  } = param;
+    const l = !!a, h = !!i, m = !!c, o = !!d, t = l && (h || m) && o, g = o && !t ? "178px" : "";
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                className: _advanceddatacardcssmistica.divider,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[t ? "mobile" : "default"]),
+                children: [
+                    l && /* @__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, t ? _advanceddatacardcssmistica.marginRightAuto : (0, _sprinklescssmistica.sprinkles)({
+                            paddingTop: 16
+                        })),
+                        children: [
+                            h && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                paddingRight: 16,
+                                className: (0, _sprinklescssmistica.sprinkles)({
+                                    alignItems: "center",
+                                    display: "flex"
+                                }),
+                                children: i
+                            }),
+                            m && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                style: {
+                                    maxWidth: g
+                                },
+                                className: _advanceddatacardcssmistica.footerText,
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                    truncate: u,
+                                    regular: !0,
+                                    children: c
+                                })
+                            })
+                        ]
+                    }),
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, t ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
+                        children: d
+                    })
+                ]
+            })
+        ]
+    });
+}, le = /*#__PURE__*/ _react.forwardRef((param, L)=>{
+    let { onPress: a , stackingGroup: i , headline: c , pretitle: u , pretitleAs: d , pretitleLinesMax: l , title: h , titleAs: m , titleLinesMax: o , subtitle: t , subtitleLinesMax: g , description: x , descriptionLinesMax: S , extra: n , extraDividerPadding: k = 24 , button: b , footerImage: T , footerText: C , footerTextLinesMax: j , buttonLink: A , dataAttributes: H , actions: P , "aria-label": z , onClose: I  } = param;
+    const G = {
+        button: b,
+        footerImage: T,
+        footerText: C,
+        footerTextLinesMax: j,
+        buttonLink: A
+    }, B = !!b || !!T || !!C || !!A;
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", {
+        className: (0, _sprinklescssmistica.sprinkles)({
+            position: "relative",
+            height: "100%"
+        }),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
+            className: _advanceddatacardcssmistica.boxed,
+            dataAttributes: _object_spread({
+                "component-name": "AdvancedDataCard"
+            }, H),
+            ref: L,
+            width: "100%",
+            height: "100%",
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: _advanceddatacardcssmistica.dataCard,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.default, {
+                        onPress: a,
+                        tabIndex: 0,
+                        maybe: !0,
+                        className: (0, _sprinklescssmistica.sprinkles)({
+                            position: "relative",
+                            height: "100%"
+                        }),
+                        "aria-label": z,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                            className: a ? _advanceddatacardcssmistica.interaction : "",
+                            children: [
+                                /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                    className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !B && !n ? _advanceddatacardcssmistica.minHeight : ""),
+                                    children: [
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                            paddingTop: 8,
+                                            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                                                space: 8,
+                                                className: (0, _sprinklescssmistica.sprinkles)({
+                                                    flex: 1
+                                                }),
+                                                children: [
+                                                    i,
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(ce, {
+                                                        headline: c,
+                                                        pretitle: u,
+                                                        pretitleAs: d,
+                                                        pretitleLinesMax: l,
+                                                        title: h,
+                                                        titleAs: m,
+                                                        titleLinesMax: o,
+                                                        subtitle: t,
+                                                        subtitleLinesMax: g,
+                                                        description: x,
+                                                        descriptionLinesMax: S
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
+                                            actions: P,
+                                            onClose: I
+                                        })
+                                    ]
+                                }),
+                                /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                    className: _advanceddatacardcssmistica.extraTop,
+                                    children: n && n != null && n.length ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                        paddingTop: 16,
+                                        paddingBottom: 24,
+                                        children: n.map((M, w)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                                children: [
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                        className: (0, _sprinklescssmistica.sprinkles)({
+                                                            display: "flex",
+                                                            width: "100%"
+                                                        }),
+                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                                            className: (0, _classnames.default)((0, _sprinklescssmistica.sprinkles)({
+                                                                width: "100%"
+                                                            }), _advanceddatacardcssmistica.paddingX),
+                                                            children: M
+                                                        })
+                                                    }),
+                                                    w + 1 !== n.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                        paddingY: k,
+                                                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                                                    })
+                                                ]
+                                            }, w))
+                                    }) : null
+                                })
+                            ]
+                        })
+                    }),
+                    B && /* @__PURE__ */ (0, _jsxruntime.jsx)(de, _object_spread({}, G))
+                ]
+            })
+        })
+    });
+}), Ae = le;

package/dist/community/blocks.css-mistica.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    column: function() {
+        return t;
+    },
+    rightContent: function() {
+        return o;
+    }
+});
+require("../sprinkles.css.ts.vanilla.css-mistica.js");
+require("./blocks.css.ts.vanilla.css-mistica.js");
+var t = "_1y2v1nfb4 _1y2v1nfba", o = "llrsen1";

package/dist/community/blocks.css.d.ts

@@ -0,0 +1,2 @@
+export declare const column: string;
+export declare const rightContent: string;

package/dist/community/blocks.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return s;
+    }
+});
+const s = "";

package/dist/community/blocks.d.ts

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import type StackingGroup from '../stacking-group';
+import type Image from '../image';
+import type Tag from '../tag';
+import type { RendersNullableElement } from '../utils/renders-element';
+import type { ExclusifyUnion } from '../utils/utility-types';
+interface RowBlockBaseProps {
+    title?: string;
+    'aria-label'?: string;
+}
+interface RowBlockWithDescription extends RowBlockBaseProps {
+    description?: string;
+}
+interface RowBlockWithStackingGroup extends RowBlockBaseProps {
+    stackingGroup?: RendersNullableElement<typeof StackingGroup>;
+}
+type RowBlockProps = ExclusifyUnion<RowBlockWithDescription | RowBlockWithStackingGroup>;
+export declare const RowBlock: React.FC<RowBlockProps>;
+interface SimpleBlockProps {
+    image?: RendersNullableElement<typeof Image>;
+    description?: string;
+    'aria-label'?: string;
+}
+export declare const SimpleBlock: React.FC<SimpleBlockProps>;
+interface InformationBlockProps {
+    title?: string;
+    description?: Array<string> | string;
+    value?: string;
+    secondaryValue?: string;
+    valueColor?: string;
+    'aria-label'?: string;
+}
+export declare const InformationBlock: React.FC<InformationBlockProps>;
+interface HighlightedValueBlockProps {
+    headline?: RendersNullableElement<typeof Tag>;
+    mainHeading: {
+        value: string;
+        text: string;
+    };
+    secondHeading?: {
+        value: string;
+        text: string;
+    };
+    secondaryValue?: string;
+    title?: string;
+    description?: Array<string> | string;
+    valueColor?: string;
+    'aria-label'?: string;
+}
+export declare const HighlightedValueBlock: React.FC<HighlightedValueBlockProps>;
+interface ValueBlockProps {
+    title?: string;
+    value?: string;
+    description?: Array<string> | string;
+    valueColor?: string;
+    'aria-label'?: string;
+}
+export declare const ValueBlock: React.FC<ValueBlockProps>;
+interface ProgressBlockProps {
+    title?: string;
+    stackingGroup?: RendersNullableElement<typeof StackingGroup>;
+    progressPercent?: number;
+    reverse?: boolean;
+    heading: {
+        value: string;
+        valueColor?: string;
+        text: string;
+    };
+    description?: string;
+    'aria-label'?: string;
+}
+export declare const ProgressBlock: React.FC<ProgressBlockProps>;
+export {};

package/dist/community/blocks.js

@@ -0,0 +1,258 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    HighlightedValueBlock: function() {
+        return z;
+    },
+    InformationBlock: function() {
+        return q;
+    },
+    ProgressBlock: function() {
+        return D;
+    },
+    RowBlock: function() {
+        return L;
+    },
+    SimpleBlock: function() {
+        return V;
+    },
+    ValueBlock: function() {
+        return A;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _stack = /*#__PURE__*/ _interop_require_default(require("../stack.js"));
+const _blockscssmistica = require("./blocks.css-mistica.js");
+const _text = require("../text.js");
+const _skincontractcssmistica = require("../skins/skin-contract.css-mistica.js");
+const _inline = /*#__PURE__*/ _interop_require_default(require("../inline.js"));
+const _box = /*#__PURE__*/ _interop_require_default(require("../box.js"));
+const _progressbar = /*#__PURE__*/ _interop_require_default(require("../progress-bar.js"));
+const _classnames = /*#__PURE__*/ _interop_require_default(require("classnames"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const g = (param)=>{
+    let { title: o , description: e  } = param;
+    const l = typeof e == "string" ? [
+        e
+    ] : e;
+    return /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _blockscssmistica.column,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                regular: !0,
+                color: _skincontractcssmistica.vars.colors.textPrimary,
+                children: o
+            }),
+            l && l.map((t, n)=>/* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    regular: !0,
+                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                    as: "p",
+                    children: t
+                }, n))
+        ]
+    });
+}, L = (param)=>/* @__PURE__ */ {
+    let { title: o , stackingGroup: e , description: l , "aria-label": t  } = param;
+    return (0, _jsxruntime.jsx)("div", {
+        "aria-label": t,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+            space: "between",
+            alignItems: "center",
+            children: [
+                o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                    paddingRight: 32,
+                    children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        children: o
+                    })
+                }),
+                e || /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    regular: !0,
+                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                    children: l
+                })
+            ]
+        })
+    });
+}, V = (param)=>/* @__PURE__ */ {
+    let { image: o , description: e , "aria-label": l  } = param;
+    return (0, _jsxruntime.jsx)("div", {
+        "aria-label": l,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+            space: 16,
+            alignItems: "center",
+            children: [
+                o,
+                /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    regular: !0,
+                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                    children: e
+                })
+            ]
+        })
+    });
+}, q = (param)=>/* @__PURE__ */ {
+    let { title: o , description: e , secondaryValue: l , value: t , valueColor: n = _skincontractcssmistica.vars.colors.textPrimary , "aria-label": d  } = param;
+    return (0, _jsxruntime.jsxs)(_inline.default, {
+        space: "between",
+        alignItems: "flex-end",
+        "aria-label": d,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                title: o,
+                description: e
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                className: (0, _classnames.default)(_blockscssmistica.column, _blockscssmistica.rightContent),
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        regular: !0,
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        children: l
+                    }),
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text5, {
+                        color: n,
+                        children: t
+                    })
+                ]
+            })
+        ]
+    });
+}, z = (param)=>/* @__PURE__ */ {
+    let { headline: o , mainHeading: e , secondHeading: l , secondaryValue: t , title: n , description: d , valueColor: m = _skincontractcssmistica.vars.colors.textPrimary , "aria-label": b  } = param;
+    return (0, _jsxruntime.jsxs)("div", {
+        "aria-label": b,
+        children: [
+            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingBottom: 24,
+                children: o
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                space: 2,
+                children: [
+                    /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: 8,
+                        alignItems: "baseline",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                color: m,
+                                children: e.value
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                regular: !0,
+                                color: _skincontractcssmistica.vars.colors.textSecondary,
+                                children: e.text
+                            })
+                        ]
+                    }),
+                    l && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                        space: 8,
+                        alignItems: "baseline",
+                        children: [
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                                color: m,
+                                children: l.value
+                            }),
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                regular: !0,
+                                color: _skincontractcssmistica.vars.colors.textSecondary,
+                                children: l.text
+                            })
+                        ]
+                    }),
+                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                        color: _skincontractcssmistica.vars.colors.textSecondary,
+                        children: t
+                    })
+                ]
+            }),
+            n || d ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                paddingTop: 8,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                    title: n,
+                    description: d
+                })
+            }) : null
+        ]
+    });
+}, A = (param)=>/* @__PURE__ */ {
+    let { title: o , value: e , description: l , valueColor: t = _skincontractcssmistica.vars.colors.textPrimary , "aria-label": n  } = param;
+    return (0, _jsxruntime.jsxs)("div", {
+        "aria-label": n,
+        className: _blockscssmistica.column,
+        children: [
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                regular: !0,
+                color: _skincontractcssmistica.vars.colors.textPrimary,
+                children: o
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                color: t,
+                children: e
+            }),
+            /* @__PURE__ */ (0, _jsxruntime.jsx)(g, {
+                description: l
+            })
+        ]
+    });
+}, D = (param)=>/* @__PURE__ */ {
+    let { title: o , stackingGroup: e , progressPercent: l , reverse: t , heading: n , description: d , "aria-label": m  } = param;
+    return (0, _jsxruntime.jsx)("div", {
+        "aria-label": m,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            space: 8,
+            children: [
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    space: "between",
+                    alignItems: "flex-end",
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                            paddingRight: 32,
+                            children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                                regular: !0,
+                                children: o
+                            })
+                        }),
+                        e
+                    ]
+                }),
+                l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_progressbar.default, {
+                    progressPercent: l,
+                    reverse: t
+                }),
+                /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
+                    space: 8,
+                    alignItems: "baseline",
+                    children: [
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+                            color: n.valueColor || _skincontractcssmistica.vars.colors.textPrimary,
+                            children: n.value
+                        }),
+                        /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            regular: !0,
+                            color: _skincontractcssmistica.vars.colors.textSecondary,
+                            children: n.text
+                        })
+                    ]
+                }),
+                d && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    regular: !0,
+                    color: _skincontractcssmistica.vars.colors.textSecondary,
+                    children: d
+                })
+            ]
+        })
+    });
+};