@telefonica/mistica 15.7.0 → 15.9.0

package/dist/package-version.js

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "PACKAGE_VERSION", {
         return o;
     }
 });
-const o = "15.7.0";
+const o = "15.9.0";

package/dist/progress-bar.d.ts

@@ -6,6 +6,7 @@ type ProgressBarProps = {
     children?: void;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
     dataAttributes?: DataAttributes;
     reverse?: boolean;
 };
@@ -17,6 +18,7 @@ type ProgressBarSteppedProps = {
     dataAttributes?: DataAttributes;
     'aria-label'?: string;
     'aria-labelledby'?: string;
+    'aria-hidden'?: React.HTMLAttributes<HTMLDivElement>['aria-hidden'];
 };
 export declare const ProgressBarStepped: React.FC<ProgressBarSteppedProps>;
 export {};

package/dist/progress-bar.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     ProgressBar: function() {
-        return E;
+        return R;
     },
     ProgressBarStepped: function() {
-        return R;
+        return T;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -123,69 +123,78 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const E = (param)=>{
-    let { progressPercent: r, color: o, "aria-label": d, "aria-labelledby": l, dataAttributes: i, reverse: n = !1 } = param;
-    const { texts: c } = (0, _hooks.useTheme)(), a = Math.max(0, Math.min(100, r)), s = l ? void 0 : (()=>`${d || c.loading}, ${a}% ${c.progressBarCompletedLabel}`)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(i, "ProgressBar")), {
-        className: _progressbarcssmistica.barBackground,
+const R = (param)=>{
+    let { progressPercent: e, color: s, "aria-label": p, "aria-labelledby": n, "aria-hidden": t, dataAttributes: c, reverse: l = !1 } = param;
+    const { texts: m } = (0, _hooks.useTheme)(), a = Math.max(0, Math.min(100, e)), i = t && t !== "false" ? {
+        "aria-hidden": t
+    } : {
         role: "progressbar",
         "aria-valuenow": a,
         "aria-valuemin": 0,
         "aria-valuemax": 100,
-        "aria-label": s,
-        "aria-labelledby": l,
+        "aria-label": n ? void 0 : (()=>`${p || m.loading}, ${a}% ${m.progressBarCompletedLabel}`)(),
+        "aria-labelledby": n
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(c, "ProgressBar")), {
+        className: _progressbarcssmistica.barBackground
+    }), i), {
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-            className: (0, _classnames.default)(_progressbarcssmistica.bar, n ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
+            className: (0, _classnames.default)(_progressbarcssmistica.bar, l ? _progressbarcssmistica.inverse : _progressbarcssmistica.normal),
             style: {
                 maxWidth: `${a}%`,
-                backgroundColor: o !== null && o !== void 0 ? o : _skincontractcssmistica.vars.colors.controlActivated
+                backgroundColor: s !== null && s !== void 0 ? s : _skincontractcssmistica.vars.colors.controlActivated
             }
         })
     }));
-}, R = (param)=>{
-    let { steps: r, currentStep: o = 0, color: d, dataAttributes: l, "aria-label": i, "aria-labelledby": n } = param;
-    const { texts: c } = (0, _hooks.useTheme)(), [a, p] = _react.useState(Math.ceil(o)), [s, y] = _react.useState(!1);
+}, T = (param)=>{
+    let { steps: e, currentStep: s = 0, color: p, dataAttributes: n, "aria-label": t, "aria-labelledby": c, "aria-hidden": l } = param;
+    const { texts: m } = (0, _hooks.useTheme)(), [a, g] = _react.useState(Math.ceil(s)), [i, k] = _react.useState(!1);
     _react.useEffect(()=>{
-        const e = Math.ceil(o);
-        a !== e && (y(e < a), p(e));
+        const r = Math.ceil(s);
+        a !== r && (k(r < a), g(r));
     }, [
-        o,
-        r,
+        s,
+        e,
         a
     ]);
-    const A = n ? void 0 : (()=>{
-        const e = c.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(r));
-        return i ? `${i}, ${e.toLowerCase()}` : e;
-    })();
-    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(l, "ProgressBarStepped")), {
+    const A = l && l !== "false" ? {
+        "aria-hidden": l
+    } : {
         role: "progressbar",
         "aria-valuenow": a,
         "aria-valuemin": 0,
-        "aria-valuemax": r,
-        "aria-label": A,
-        "aria-labelledby": n,
+        "aria-valuemax": e,
+        "aria-label": c ? void 0 : (()=>{
+            const r = m.progressBarStepLabel.replace("1$s", String(a)).replace("2$s", String(e));
+            return t ? `${t}, ${r.toLowerCase()}` : r;
+        })(),
+        "aria-labelledby": c
+    };
+    return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(n, "ProgressBarStepped")), {
+        role: "progressbar"
+    }), A), {
         className: _progressbarcssmistica.progressBarSteppedContainer,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_inline.default, {
             space: 8,
             fullWidth: !0,
             children: Array.from({
-                length: r
-            }, (e, m)=>{
-                const g = m === a, u = m < a, v = m === a - 1;
+                length: e
+            }, (r, d)=>{
+                const u = d === a, h = d < a, f = d === a - 1;
                 return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _progressbarcssmistica.barBackground,
                     "aria-hidden": "true",
-                    children: (u || g) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    children: (h || u) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_progressbarcssmistica.bar, {
-                            [_progressbarcssmistica.normal]: v && !s,
-                            [_progressbarcssmistica.inverse]: g && s
+                            [_progressbarcssmistica.normal]: f && !i,
+                            [_progressbarcssmistica.inverse]: u && i
                         }),
                         style: {
-                            backgroundColor: d !== null && d !== void 0 ? d : _skincontractcssmistica.vars.colors.controlActivated,
-                            maxWidth: u || v && !s ? "100%" : "0"
+                            backgroundColor: p !== null && p !== void 0 ? p : _skincontractcssmistica.vars.colors.controlActivated,
+                            maxWidth: h || f && !i ? "100%" : "0"
                         }
                     })
-                }, m);
+                }, d);
             })
         })
     }));

package/dist/stacking-group.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return G;
+        return B;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -65,8 +65,8 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const C = (param)=>{
-    let { moreItemsStyle: e, stacked: n = !0, maxItems: o = 1 / 0, children: t } = param;
-    const c = (0, _themevariantcontext.useIsInverseVariant)(), i = _react.Children.count(t), m = i - o + 1, p = n ? -8 : 8, a = e.size, d = e.type === "circle" ? "50%" : _skincontractcssmistica.vars.borderRadii.mediaSmall;
+    let { moreItemsStyle: s, stacked: t = !0, maxItems: o = 1 / 0, children: n } = param;
+    const c = (0, _themevariantcontext.useIsInverseVariant)(), i = _react.Children.count(n), m = i - o + 1, p = t ? -8 : 8, a = s.size, d = s.type === "circle" ? "50%" : _skincontractcssmistica.vars.borderRadii.mediaSmall;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: d
@@ -74,7 +74,7 @@ const C = (param)=>{
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
             space: p,
             children: [
-                _react.Children.toArray(t).slice(0, i > o ? o - 1 : o),
+                _react.Children.toArray(n).slice(0, i > o ? o - 1 : o),
                 i > o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                     className: _stackinggroupcssmistica.moreItems,
                     style: {
@@ -82,15 +82,15 @@ const C = (param)=>{
                         height: a,
                         borderRadius: d,
                         backgroundColor: c ? _skincontractcssmistica.vars.colors.brandHigh : _skincontractcssmistica.vars.colors.brandLow,
-                        border: n ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none"
+                        border: t ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none"
                     },
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text4, {
                         regular: !0,
-                        color: c ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.brand,
+                        color: c ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textBrand,
                         children: "+" + m
                     })
                 })
             ]
         })
     });
-}, G = C;
+}, B = C;

package/dist/text-field-components.js

@@ -139,12 +139,12 @@ const J = (param)=>{
             clearTimeout(g);
         };
     }, []);
-    let p = _skincontractcssmistica.vars.colors.textSecondary;
-    return l && r !== "default" ? p = _skincontractcssmistica.vars.colors.error : r === "focused" && (p = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
+    let x = _skincontractcssmistica.vars.colors.textSecondary;
+    return l && r !== "default" ? x = _skincontractcssmistica.vars.colors.textError : r === "focused" && (x = _skincontractcssmistica.vars.colors.textActivated), /* @__PURE__ */ (0, _jsxruntime.jsxs)("label", {
         className: (0, _classnames.default)(_textfieldcomponentscssmistica.labelContainer, {
             [_textfieldcomponentscssmistica.shrinked]: f
         }, (0, _sprinklescssmistica.sprinkles)({
-            color: p
+            color: x
         })),
         htmlFor: s,
         style: _object_spread_props(_object_spread({}, n), {
@@ -166,7 +166,7 @@ const J = (param)=>{
     });
 }, K = (param)=>{
     let { leftText: o, rightText: s, error: r, id: l } = param;
-    const i = (0, _themevariantcontext.useIsInverseVariant)(), n = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : r ? _skincontractcssmistica.vars.colors.error : _skincontractcssmistica.vars.colors.textSecondary, a = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
+    const i = (0, _themevariantcontext.useIsInverseVariant)(), n = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : r ? _skincontractcssmistica.vars.colors.textError : _skincontractcssmistica.vars.colors.textSecondary, a = i ? _skincontractcssmistica.vars.colors.textPrimaryInverse : _skincontractcssmistica.vars.colors.textSecondary;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {

package/dist/utils/aspect-ratio-support.js

@@ -11,13 +11,13 @@ function _export(target, all) {
 }
 _export(exports, {
     AspectRatioContainer: function() {
-        return W;
+        return $;
     },
     AspectRatioSupportProvider: function() {
-        return x;
+        return W;
     },
     useSupportsAspectRatio: function() {
-        return N;
+        return b;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -124,7 +124,7 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
+const u = /*#__PURE__*/ _react.createContext(!0), W = (param)=>{
     let { children: t } = param;
     const [o, s] = _react.useState(!0);
     return (0, _hooks.useIsomorphicLayoutEffect)(()=>{
@@ -137,33 +137,33 @@ const u = /*#__PURE__*/ _react.createContext(!0), x = (param)=>{
         value: o,
         children: t
     });
-}, N = ()=>_react.useContext(u), W = (t)=>{
-    const o = N(), s = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, e = s ? t.aspectRatio : void 0;
-    let i = t.width, a = t.height;
+}, b = ()=>_react.useContext(u), $ = (t)=>{
+    const o = !!t.forceNonCssAspectRatio, s = b() && !o, h = typeof t.width != "number" && typeof t.height != "number" && t.aspectRatio !== 0, a = h ? t.aspectRatio : void 0;
+    let e = t.width, i = t.height;
     var _t_aspectRatio, _t_aspectRatio1;
-    t.width !== void 0 && t.height !== void 0 ? (i = t.width, a = t.height) : typeof t.width == "number" ? a = t.aspectRatio !== 0 ? t.width / ((_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : 1) : void 0 : typeof t.height == "number" ? i = t.aspectRatio !== 0 ? t.height * ((_t_aspectRatio1 = t.aspectRatio) !== null && _t_aspectRatio1 !== void 0 ? _t_aspectRatio1 : 1) : void 0 : i = t.width || "100%";
-    var _t_as;
-    const c = s && !o, r = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
+    t.width !== void 0 && t.height !== void 0 ? (e = t.width, i = t.height) : typeof t.width == "number" ? i = t.aspectRatio !== 0 ? t.width / ((_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : 1) : void 0 : typeof t.height == "number" ? e = t.aspectRatio !== 0 ? t.height * ((_t_aspectRatio1 = t.aspectRatio) !== null && _t_aspectRatio1 !== void 0 ? _t_aspectRatio1 : 1) : void 0 : t.height ? i = t.height : e = t.width || "100%";
+    var _t_as, _ref, _ref1;
+    const c = h && !s, r = /*#__PURE__*/ _react.createElement((_t_as = t.as) !== null && _t_as !== void 0 ? _t_as : "div", _object_spread({
         className: (0, _classnames.default)(t.className, _aspectratiosupportcssmistica.container, {
             [_aspectratiosupportcssmistica.containerWithWrapper]: c
         }),
         style: _object_spread({}, c ? _object_spread_props(_object_spread({}, t.style), {
-            position: e ? "absolute" : "static",
+            position: a ? "absolute" : "static",
             width: "100%"
         }) : _object_spread_props(_object_spread({}, t.style), {
-            width: isNaN(Number(i)) ? i : Number(i),
-            height: isNaN(Number(a)) ? a : Number(a)
+            width: (_ref = isNaN(Number(e)) ? e : Number(e)) !== null && _ref !== void 0 ? _ref : "fit-content",
+            height: (_ref1 = isNaN(Number(i)) ? i : Number(i)) !== null && _ref1 !== void 0 ? _ref1 : "fit-content"
         }), (0, _css.applyCssVars)({
-            [_aspectratiosupportcssmistica.vars.aspectRatio]: e ? String(e) : "unset"
+            [_aspectratiosupportcssmistica.vars.aspectRatio]: a ? String(a) : "unset"
         }))
     }, !c && t.dataAttributes), t.children);
     if (c) {
-        const d = (()=>e ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${Number(t.width.replace("%", "")) / e}%` : `${100 / e}%` : 0)();
+        const f = (()=>a ? t.width && typeof t.width == "string" && t.width.endsWith("%") ? `${parseFloat(t.width) / a}%` : `${100 / a}%` : 0)();
         return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
             style: {
-                width: i,
-                height: a,
-                paddingTop: d
+                width: e,
+                height: i,
+                paddingTop: f
             },
             className: _aspectratiosupportcssmistica.wrapper
         }, t.dataAttributes), {