@telefonica/mistica 16.5.0 → 16.6.0

package/dist/hero.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return dr;
+        return fe;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -26,6 +26,7 @@ const _dom = require("./utils/dom.js");
 const _themevariantcontext = require("./theme-variant-context.js");
 const _css = require("./utils/css.js");
 const _responsivelayout = require("./responsive-layout.js");
+const _headings = require("./utils/headings.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -151,24 +152,45 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const O = {
+const w = {
     default: _skincontractcssmistica.vars.colors.background,
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary,
     none: "transparent"
-}, k = (param)=>{
-    let { children: e, isInverse: o, backgroundColor: t } = param;
+}, I = (param)=>{
+    let { children: r, isInverse: t, backgroundColor: a } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.InternalResponsiveLayout, {
-        isInverse: o,
+        isInverse: t,
         className: _herocssmistica.layout,
         innerDivClassName: _herocssmistica.layout,
         shouldExpandWhenNested: !0,
-        backgroundColor: t !== null && t !== void 0 ? t : "transparent",
-        children: e
+        backgroundColor: a !== null && a !== void 0 ? a : "transparent",
+        children: r
     });
 }, x = (param)=>{
-    let { headline: e, title: o, titleAs: t = "h1", pretitle: l, description: c, descriptionLinesMax: a, extra: n, button: d, secondaryButton: p, buttonLink: s } = param;
+    let { headline: r, title: t, titleAs: a = "h1", pretitle: l, pretitleAs: c, description: o, descriptionLinesMax: m, extra: p, button: f, secondaryButton: u, buttonLink: n } = param;
+    const v = t ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
+        as: a,
+        dataAttributes: {
+            testid: "title"
+        },
+        children: t
+    }) : void 0, i = l ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+        as: c,
+        regular: !0,
+        dataAttributes: {
+            testid: "pretitle"
+        },
+        children: l
+    }) : void 0, h = r ? /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+        "data-testid": "headline",
+        style: {
+            paddingBottom: 16,
+            order: -1
+        },
+        children: r
+    }) : void 0;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: _herocssmistica.contentContainer,
         children: [
@@ -177,47 +199,63 @@ const O = {
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 16,
                         children: [
-                            e && e,
-                            /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-                                space: 8,
-                                children: [
-                                    l && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
-                                        as: "p",
-                                        regular: !0,
-                                        children: l
-                                    }),
-                                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                        as: t,
-                                        children: o
-                                    })
-                                ]
+                            /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                className: _herocssmistica.flexColumn,
+                                children: (0, _headings.isBiggerHeading)(a, c) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                    children: [
+                                        v,
+                                        h,
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            style: {
+                                                paddingBottom: t ? 8 : 0,
+                                                order: -1
+                                            },
+                                            children: i
+                                        })
+                                    ]
+                                }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                                    children: [
+                                        i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            style: {
+                                                paddingBottom: t ? 8 : 0
+                                            },
+                                            children: i
+                                        }),
+                                        h,
+                                        v
+                                    ]
+                                })
                             }),
-                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                truncate: a,
-                                children: c
+                                truncate: m,
+                                dataAttributes: {
+                                    testid: "description"
+                                },
+                                children: o
                             })
                         ]
                     }),
-                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: n
+                    p && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        "data-testid": "slot",
+                        children: p
                     })
                 ]
             }),
-            (d || s) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (f || n) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: d,
-                    secondaryButton: p,
-                    link: s
+                    primaryButton: f,
+                    secondaryButton: u,
+                    link: n
                 })
             })
         ]
     });
-}, F = /*#__PURE__*/ _react.forwardRef((_param, d)=>{
-    var { height: e, background: o = "default", media: t, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: a } = _param, n = _object_without_properties(_param, [
+}, X = /*#__PURE__*/ _react.forwardRef((_param, p)=>{
+    var { height: r, background: t = "default", media: a, desktopMediaPosition: l = "left", dataAttributes: c, noPaddingY: o } = _param, m = _object_without_properties(_param, [
         "height",
         "background",
         "media",
@@ -225,39 +263,37 @@ const O = {
         "dataAttributes",
         "noPaddingY"
     ]);
-    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), s = (0, _carousel.useSlideshowContext)(), u = !!(s != null && s.withBullets), w = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), B = o === "none" ? w : o === "brand" || o === "brand-secondary";
-    if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
+    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), u = (0, _carousel.useSlideshowContext)(), n = !!(u != null && u.withBullets), v = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), i = t === "none" ? v : t === "brand" || t === "brand-secondary";
+    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.ResetResponsiveLayout, {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
             style: (0, _css.applyCssVars)({
                 [_imagecssmistica.vars.mediaBorderRadius]: "0px"
             }),
-            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-                "component-name": "Hero"
-            }, c))), {
-                ref: d,
-                style: _object_spread({}, e === "100vh" ? {
+            children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Hero")), {
+                ref: p,
+                style: _object_spread({}, r === "100vh" ? {
                     maxHeight: "-webkit-fill-available"
                 } : {}, (0, _css.applyCssVars)({
-                    [_herocssmistica.vars.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
+                    [_herocssmistica.vars.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
                     [_imagecssmistica.vars.mediaBorderRadius]: "0px"
                 })),
                 className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile, {
-                    [_herocssmistica.containerMinHeight]: !a
+                    [_herocssmistica.containerMinHeight]: !o
                 }),
                 children: [
-                    t,
-                    /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
-                        isInverse: B,
-                        backgroundColor: O[o],
+                    a,
+                    /* @__PURE__ */ (0, _jsxruntime.jsx)(I, {
+                        isInverse: i,
+                        backgroundColor: w[t],
                         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                             className: _herocssmistica.expandedContent,
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
                                     paddingTop: 24,
-                                    paddingBottom: u ? 48 : a ? 0 : 24
+                                    paddingBottom: n ? 48 : o ? 0 : 24
                                 },
                                 className: _herocssmistica.layout,
-                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
+                                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
                             })
                         })
                     })
@@ -265,44 +301,42 @@ const O = {
             }))
         })
     });
-    const I = l === "left" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const h = l === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
-    }), L = l === "right" ? t : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
+    }), L = l === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, n))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(x, _object_spread({}, m))
     });
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
-        "component-name": "Hero"
-    }, c))), {
-        ref: d,
-        style: _object_spread_props(_object_spread({}, e === "100vh" ? {
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "Hero")), {
+        ref: p,
+        style: _object_spread_props(_object_spread({}, r === "100vh" ? {
             maxHeight: "-webkit-fill-available"
         } : {}, (0, _css.applyCssVars)({
-            [_herocssmistica.vars.height]: typeof e == "number" ? `${e}px` : e !== null && e !== void 0 ? e : "100%",
+            [_herocssmistica.vars.height]: typeof r == "number" ? `${r}px` : r !== null && r !== void 0 ? r : "100%",
             [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.container
         })), {
-            background: O[o]
+            background: w[t]
         }),
         className: _herocssmistica.hero,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(k, {
-            isInverse: B,
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(I, {
+            isInverse: i,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                 template: "6+6",
                 left: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     style: {
-                        paddingTop: a ? 0 : 56,
-                        paddingBottom: a && !u ? 0 : 56
+                        paddingTop: o ? 0 : 56,
+                        paddingBottom: o && !n ? 0 : 56
                     },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop, {
-                        [_herocssmistica.containerMinHeight]: !a
+                        [_herocssmistica.containerMinHeight]: !o
                     }),
-                    children: I
+                    children: h
                 }),
                 right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     style: {
-                        paddingTop: a ? 0 : 56,
-                        paddingBottom: a && !u ? 0 : 56
+                        paddingTop: o ? 0 : 56,
+                        paddingBottom: o && !n ? 0 : 56
                     },
                     className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerDesktop),
                     children: L
@@ -310,4 +344,4 @@ const O = {
             })
         })
     }));
-}), dr = F;
+}), fe = X;

package/dist/highlighted-card.js

@@ -146,9 +146,9 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
-    var _n_isInverse;
-    const { title: s, description: r, imageUrl: a, imageFit: o, imageAlt: m, titleAs: f = "h3", width: d, dataAttributes: b, titleLinesMax: v, descriptionLinesMax: x } = n, t = _object_without_properties(n, [
+const B = /*#__PURE__*/ _react.forwardRef((s, e)=>{
+    var _s_isInverse;
+    const { title: o, description: r, imageUrl: a, imageFit: n, imageAlt: c, titleAs: b = "h3", width: m, dataAttributes: f, titleLinesMax: v, descriptionLinesMax: x } = s, t = _object_without_properties(s, [
         "title",
         "description",
         "imageUrl",
@@ -159,14 +159,15 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
         "dataAttributes",
         "titleLinesMax",
         "descriptionLinesMax"
-    ]), I = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), p = (_n_isInverse = n.isInverse) !== null && _n_isInverse !== void 0 ? _n_isInverse : I, h = (0, _maybedismissable.useIsDismissable)(), { textPresets: w } = (0, _hooks.useTheme)(), c = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
+    ]), p = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), I = (_s_isInverse = s.isInverse) !== null && _s_isInverse !== void 0 ? _s_isInverse : p, h = (0, _maybedismissable.useIsDismissable)(), { textPresets: w } = (0, _hooks.useTheme)(), d = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
         ref: e,
-        isInverse: p,
+        variant: I ? "inverse" : "default",
         className: _highlightedcardcssmistica.container,
         dataAttributes: _object_spread({
-            "component-name": "HighlightedCard"
-        }, b),
-        width: d ? `${d}px` : "100%",
+            "component-name": "HighlightedCard",
+            testid: "HighlightedCard"
+        }, f),
+        width: m ? `${m}px` : "100%",
         minHeight: "100%",
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
@@ -177,12 +178,15 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            !!s && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
+                            !!o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
                                 truncate: v,
                                 weight: w.cardTitle.weight,
-                                as: f,
+                                as: b,
                                 hyphens: "auto",
-                                children: s
+                                dataAttributes: {
+                                    testid: "title"
+                                },
+                                children: o
                             })),
                             !!r && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                                 regular: !0,
@@ -190,6 +194,9 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
                                 truncate: x,
                                 as: "p",
                                 hyphens: "auto",
+                                dataAttributes: {
+                                    testid: "description"
+                                },
                                 children: r
                             })
                         ]
@@ -207,38 +214,40 @@ const B = /*#__PURE__*/ _react.forwardRef((n, e)=>{
                     })
                 ]
             }),
-            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, m ? {
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
+                "data-testid": "image"
+            }, c ? {
                 role: "img",
-                "aria-label": m
+                "aria-label": c
             } : {}), {
                 className: _highlightedcardcssmistica.imageContent,
                 style: {
                     backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
-                    backgroundSize: o === "fit" ? "contain" : "cover",
-                    backgroundPosition: o === "fit" ? "bottom right" : `center ${o === "fill-center" ? "center" : "right"}`
+                    backgroundSize: n === "fit" ? "contain" : "cover",
+                    backgroundPosition: n === "fit" ? "bottom right" : `center ${n === "fill-center" ? "center" : "right"}`
                 }
             }))
         ]
     });
-    return t.button ? c : t.onPress || t.to || t.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
+    return t.button ? d : t.onPress || t.to || t.href ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, _object_spread_props(_object_spread({}, t), {
         className: _highlightedcardcssmistica.touchableContainer,
-        children: c
-    })) : c;
-}), F = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
-    var { "aria-label": n } = _param, e = _object_without_properties(_param, [
+        children: d
+    })) : d;
+}), F = /*#__PURE__*/ _react.forwardRef((_param, o)=>{
+    var { "aria-label": s } = _param, e = _object_without_properties(_param, [
         "aria-label"
     ]);
     var _e_isInverse;
-    const r = n || e.title || e.description, a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), o = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
+    const r = s || e.title || e.description, a = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), n = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : a;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_maybedismissable.default, {
         onClose: e.onClose,
         "aria-label": r,
         width: e.width,
-        variant: e.imageUrl ? "media" : o ? "inverse" : void 0,
+        variant: e.imageUrl ? "media" : n ? "inverse" : void 0,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(B, _object_spread_props(_object_spread({}, e), {
             "aria-label": r,
-            ref: s
+            ref: o
         }))
     });
 }), X = F;

package/dist/index.d.ts

@@ -57,6 +57,7 @@ export { default as HorizontalScroll } from './horizontal-scroll';
 export { default as HighlightedCard } from './highlighted-card';
 export { default as Stepper } from './stepper';
 export { ProgressBar, ProgressBarStepped } from './progress-bar';
+export { default as Meter } from './meter';
 export { Rating, InfoRating } from './rating';
 export { VerticalMosaic, HorizontalMosaic } from './mosaic';
 export { Timer, TextTimer } from './timer';

package/dist/index.js

@@ -5574,6 +5574,9 @@ _export(exports, {
     MenuSection: function() {
         return _menu.MenuSection;
     },
+    Meter: function() {
+        return _meter.default;
+    },
     MonthField: function() {
         return _monthfield.default;
     },
@@ -6054,6 +6057,7 @@ const _horizontalscroll = /*#__PURE__*/ _interop_require_default(require("./hori
 const _highlightedcard = /*#__PURE__*/ _interop_require_default(require("./highlighted-card.js"));
 const _stepper = /*#__PURE__*/ _interop_require_default(require("./stepper.js"));
 const _progressbar = require("./progress-bar.js");
+const _meter = /*#__PURE__*/ _interop_require_default(require("./meter.js"));
 const _rating = require("./rating.js");
 const _mosaic = require("./mosaic.js");
 const _timer = require("./timer.js");

package/dist/maybe-dismissable.js

@@ -72,9 +72,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const a = /*#__PURE__*/ _react.createContext(!1), M = ()=>_react.useContext(a), C = (param)=>{
-    let { children: s, width: r, onClose: t, "aria-label": i, variant: m } = param;
+    let { children: e, width: r, onClose: s, "aria-label": i, variant: m } = param;
     const { texts: l, t: n } = (0, _hooks.useTheme)();
-    return t ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
+    return s ? /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: _maybedismissablecssmistica.dismissableContainer,
         "aria-label": i,
         style: {
@@ -84,14 +84,17 @@ const a = /*#__PURE__*/ _react.createContext(!1), M = ()=>_react.useContext(a),
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(a.Provider, {
                 value: !0,
-                children: s
+                children: e
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_themevariantcontext.ThemeVariant, {
                 variant: m,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _maybedismissablecssmistica.dismissableButton,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
-                        onPress: t,
+                        dataAttributes: {
+                            testid: "closeButton"
+                        },
+                        onPress: s,
                         "aria-label": l.closeButtonLabel || n(_texttokens.closeButtonLabel),
                         small: !0,
                         Icon: _iconcloseregular.default
@@ -100,6 +103,6 @@ const a = /*#__PURE__*/ _react.createContext(!1), M = ()=>_react.useContext(a),
             })
         ]
     }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {
-        children: s
+        children: e
     });
 }, N = C;

package/dist/meter.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { DataAttributes } from './utils/types';
+declare const TYPE_LINEAR = "linear";
+declare const TYPE_ANGULAR = "angular";
+declare const TYPE_CIRCULAR = "circular";
+export type MeterType = typeof TYPE_LINEAR | typeof TYPE_ANGULAR | typeof TYPE_CIRCULAR;
+type MeterProps = {
+    type?: MeterType;
+    /** Position of the meter. 0 is at the start, 100 is at the end. The sum of the values must not exceed 100. */
+    values: Array<number>;
+    width?: number | string;
+    colors?: Array<string>;
+    reverse?: boolean;
+    dataAttributes?: DataAttributes;
+    'aria-hidden'?: boolean | 'true' | 'false';
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+};
+/**
+ * This wrapper is to force a remount when some specific props change
+ */
+declare const Meter: (props: MeterProps) => JSX.Element;
+export default Meter;