@telefonica/mistica 15.7.0 → 15.8.0

package/dist-es/empty-state.js

@@ -64,10 +64,10 @@ import { vars as a } from "./skins/skin-contract.css-mistica.js";
 import { AspectRatioContainer as D } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as P } from "./utils/dom.js";
 import { sprinkles as R } from "./sprinkles.css-mistica.js";
-import { applyCssVars as G } from "./utils/css.js";
-const M = (param)=>{
-    let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: v } = param;
-    const { isDarkMode: h } = C(), s = k(), u = i ? /* @__PURE__ */ r("img", {
+import { applyCssVars as w } from "./utils/css.js";
+const G = (param)=>{
+    let { title: c, titleAs: p = "h1", description: d, button: e, buttonLink: f, largeImageUrl: o, imageUrl: i, icon: m, "aria-label": g, dataAttributes: h } = param;
+    const { isDarkMode: v } = C(), s = k(), u = i ? /* @__PURE__ */ r("img", {
         className: A,
         alt: "",
         src: i
@@ -82,12 +82,12 @@ const M = (param)=>{
         className: x(E, s ? T : R({
             border: "regular"
         })),
-        style: G({
-            [V.backgroundColor]: s && !h ? a.colors.backgroundBrand : a.colors.backgroundContainer
+        style: w({
+            [V.backgroundColor]: s && !v ? a.colors.backgroundBrand : a.colors.backgroundContainer
         }),
         "aria-label": g,
         role: "region"
-    }, P(v, "EmptyState")), {
+    }, P(h, "EmptyState")), {
         children: [
             /* @__PURE__ */ r("div", {
                 style: {
@@ -129,6 +129,7 @@ const M = (param)=>{
                     aspectRatio: 16 / 9,
                     className: b,
                     height: "100%",
+                    width: "100%",
                     children: /* @__PURE__ */ r("div", {
                         className: j,
                         style: {
@@ -139,5 +140,5 @@ const M = (param)=>{
             })
         ]
     }));
-}, _ = M;
+}, _ = G;
 export { _ as default };

package/dist-es/icons/icon-chevron.css-mistica.js

@@ -0,0 +1,5 @@
+import "./icon-chevron.css.ts.vanilla.css-mistica.js";
+var o = "_77bqcx2", a = "_77bqcx1", n = {
+    transitionDuration: "var(--_77bqcx0)"
+};
+export { o as chevronColorTransition, a as chevronRotateTransition, n as vars };

package/dist-es/icons/icon-chevron.css.ts.vanilla.css-mistica.js

@@ -0,0 +1,2 @@
+const s = "";
+export { s as default };

package/dist-es/icons/icon-chevron.js

@@ -26,44 +26,46 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as s } from "react/jsx-runtime";
-import { vars as c } from "../skins/skin-contract.css-mistica.js";
-const h = (param)=>{
-    let { size: o, color: r, transform: n, transitionDuration: t, className: e, style: l } = param;
-    return /* @__PURE__ */ s("svg", {
+import { jsx as e } from "react/jsx-runtime";
+import c from "classnames";
+import { vars as m } from "../skins/skin-contract.css-mistica.js";
+import { applyCssVars as h } from "../utils/css.js";
+import { chevronRotateTransition as p, vars as v, chevronColorTransition as f } from "./icon-chevron.css-mistica.js";
+const g = (param)=>{
+    let { size: o, color: r, transform: t, transitionDuration: n, className: s, style: a } = param;
+    return /* @__PURE__ */ e("svg", {
         role: "presentation",
         width: o,
         height: o,
         viewBox: "0 0 24 24",
-        className: e,
+        className: c(s, p),
         style: _object_spread({
-            transform: n,
-            transition: `transform ${t}ms`
-        }, l),
-        children: /* @__PURE__ */ s("path", {
-            style: {
-                transition: `fill ${t}ms`
-            },
+            transform: t
+        }, a, h({
+            [v.transitionDuration]: `${n}ms`
+        })),
+        children: /* @__PURE__ */ e("path", {
+            className: f,
             fill: r,
             fillRule: "evenodd",
             d: "M14.338 11.478a.75.75 0 0 1 0 1.044l-3.837 3.997a.75.75 0 1 1-1.082-1.038L12.76 12 9.42 8.52a.75.75 0 0 1 1.082-1.04l3.837 3.998z"
         })
     });
-}, f = {
+}, d = {
     up: -90,
     down: 90,
     left: 180,
     right: 0
-}, g = (param)=>{
-    let { size: o = 24, color: r, className: n, style: t, transitionDuration: e = 300, direction: l = "right" } = param;
-    const i = r || c.colors.neutralHigh, a = {
+}, u = (param)=>{
+    let { size: o = 24, color: r, className: t, style: n, transitionDuration: s = 300, direction: a = "right" } = param;
+    const i = r || m.colors.neutralHigh, l = {
         size: o,
         color: i,
-        transform: `rotate(${f[l]}deg)`,
-        className: n,
-        transitionDuration: e,
-        style: t
+        transform: `rotate(${d[a]}deg)`,
+        className: t,
+        transitionDuration: s,
+        style: n
     };
-    return /* @__PURE__ */ s(h, _object_spread({}, a));
-}, p = g;
-export { p as default };
+    return /* @__PURE__ */ e(g, _object_spread({}, l));
+}, I = u;
+export { I as default };

package/dist-es/image.js

@@ -78,10 +78,10 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t, jsxs as k, Fragment as S } from "react/jsx-runtime";
+import { jsx as t, jsxs as k, Fragment as A } from "react/jsx-runtime";
 import * as r from "react";
-import L from "classnames";
-import { SkeletonAnimation as N } from "./skeletons.js";
+import F from "classnames";
+import { SkeletonAnimation as L } from "./skeletons.js";
 import { AspectRatioContainer as W } from "./utils/aspect-ratio-support.js";
 import { getPrefixedDataAttributes as M } from "./utils/dom.js";
 import { useIsInverseVariant as V } from "./theme-variant-context.js";
@@ -145,13 +145,13 @@ const Y = (param)=>{
             })
         }) : void 0
     });
-}), x = {
+}), S = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, A = "1:1", e1 = /*#__PURE__*/ r.forwardRef((_param, H)=>{
-    var { aspectRatio: e = A, alt: n = "", dataAttributes: d, noBorderRadius: h, src: o, srcSet: c, onError: s, onLoad: l, loadingFallback: B = !0, errorFallback: E = !0 } = _param, i = _object_without_properties(_param, [
+}, x = "1:1", e1 = /*#__PURE__*/ r.forwardRef((_param, N)=>{
+    var { aspectRatio: e = x, alt: n = "", dataAttributes: d, noBorderRadius: h, src: o, srcSet: c, onError: s, onLoad: l, loadingFallback: B = !0, errorFallback: E = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -164,7 +164,7 @@ const Y = (param)=>{
         "errorFallback"
     ]);
     var y;
-    const u = O(), m = r.useRef(), f = i.circular ? P : h ? U : K, [v, g] = r.useState(!o), [T, C] = r.useState(!1), b = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : x[e], w = B && !!(b !== 0 || i.width && i.height), _ = E && !!(b !== 0 || i.width && i.height), I = r.useCallback(()=>{
+    const u = O(), m = r.useRef(), f = i.circular ? P : h ? U : K, [v, g] = r.useState(!o), [H, C] = r.useState(!1), b = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], w = B && !!(b !== 0 || i.width && i.height), T = E && !!(b !== 0 || i.width && i.height), I = r.useCallback(()=>{
         g(!1), m.current && (m.current.style.opacity = "1"), setTimeout(()=>{
             C(!0);
         }, Z), l == null || l();
@@ -181,18 +181,18 @@ const Y = (param)=>{
     }, [
         I
     ]);
-    const z = X() || !((y = document.getElementById(u)) != null && y.complete), F = /* @__PURE__ */ k(S, {
+    const _ = X() || !((y = document.getElementById(u)) != null && y.complete), z = /* @__PURE__ */ k(A, {
         children: [
             /* @__PURE__ */ t("img", {
                 suppressHydrationWarning: !0,
                 id: u,
                 style: {
-                    opacity: z && w ? 0 : 1
+                    opacity: _ && w ? 0 : 1
                 },
-                ref: J(m, H),
+                ref: J(m, N),
                 src: o,
                 srcSet: c,
-                className: L(f, q, {
+                className: F(f, q, {
                     [G]: i.border
                 }, $({
                     position: b !== 0 ? "absolute" : "static"
@@ -212,9 +212,9 @@ const Y = (param)=>{
         ]
     });
     var _i_height, _i_width;
-    return /* @__PURE__ */ k(S, {
+    return /* @__PURE__ */ k(A, {
         children: [
-            w && !T && /* @__PURE__ */ t("div", {
+            w && !H && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -222,7 +222,7 @@ const Y = (param)=>{
                     overflow: "hidden"
                 },
                 className: f,
-                children: /* @__PURE__ */ t(N, {
+                children: /* @__PURE__ */ t(L, {
                     height: (_i_height = i.height) !== null && _i_height !== void 0 ? _i_height : "100%",
                     width: (_i_width = i.width) !== null && _i_width !== void 0 ? _i_width : "100%",
                     children: /* @__PURE__ */ t(Q, {
@@ -232,7 +232,7 @@ const Y = (param)=>{
                     })
                 })
             }),
-            v && _ && /* @__PURE__ */ t("div", {
+            v && T && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
@@ -244,12 +244,12 @@ const Y = (param)=>{
                     className: f
                 })
             }),
-            !v && F
+            !v && z
         ]
     });
 }), t1 = /*#__PURE__*/ r.forwardRef((e, n)=>{
     var _e_aspectRatio;
-    const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : x[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : A];
+    const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : S[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : x];
     return /* @__PURE__ */ t(W, {
         style: {
             position: "relative"
@@ -258,9 +258,10 @@ const Y = (param)=>{
         width: e.width,
         height: e.height,
         dataAttributes: M(e.dataAttributes, "Image"),
+        forceNonCssAspectRatio: e.forceNonCssAspectRatio,
         children: /* @__PURE__ */ t(e1, _object_spread_props(_object_spread({}, e), {
             ref: n
         }))
     });
 }), C1 = t1;
-export { e1 as ImageContent, p as ImageError, x as RATIO, C1 as default };
+export { e1 as ImageContent, p as ImageError, S as RATIO, C1 as default };

package/dist-es/package-version.js

@@ -1,2 +1,2 @@
-const o = "15.7.0";
+const o = "15.8.0";
 export { o as PACKAGE_VERSION };

package/dist-es/progress-bar.js

@@ -51,79 +51,88 @@ function _object_spread_props(target, source) {
     }
     return target;
 }
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as b from "react";
-import { useTheme as f } from "./hooks.js";
-import { vars as h } from "./skins/skin-contract.css-mistica.js";
-import { barBackground as B, bar as S, inverse as $, normal as x, progressBarSteppedContainer as N } from "./progress-bar.css-mistica.js";
+import { useTheme as v } from "./hooks.js";
+import { vars as B } from "./skins/skin-contract.css-mistica.js";
+import { barBackground as S, bar as $, inverse as x, normal as y, progressBarSteppedContainer as N } from "./progress-bar.css-mistica.js";
 import { getPrefixedDataAttributes as C } from "./utils/dom.js";
-import k from "classnames";
-import P from "./inline.js";
-const E = (param)=>{
-    let { progressPercent: r, color: o, "aria-label": d, "aria-labelledby": l, dataAttributes: i, reverse: n = !1 } = param;
-    const { texts: c } = f(), a = Math.max(0, Math.min(100, r)), s = l ? void 0 : (()=>`${d || c.loading}, ${a}% ${c.progressBarCompletedLabel}`)();
-    return /* @__PURE__ */ t("div", _object_spread_props(_object_spread({}, C(i, "ProgressBar")), {
-        className: B,
+import P from "classnames";
+import w from "./inline.js";
+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 } = v(), 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,
-        children: /* @__PURE__ */ t("div", {
-            className: k(S, n ? $ : x),
+        "aria-label": n ? void 0 : (()=>`${p || m.loading}, ${a}% ${m.progressBarCompletedLabel}`)(),
+        "aria-labelledby": n
+    };
+    return /* @__PURE__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, C(c, "ProgressBar")), {
+        className: S
+    }), i), {
+        children: /* @__PURE__ */ o("div", {
+            className: P($, l ? x : y),
             style: {
                 maxWidth: `${a}%`,
-                backgroundColor: o !== null && o !== void 0 ? o : h.colors.controlActivated
+                backgroundColor: s !== null && s !== void 0 ? s : B.colors.controlActivated
             }
         })
     }));
-}, R = (param)=>{
-    let { steps: r, currentStep: o = 0, color: d, dataAttributes: l, "aria-label": i, "aria-labelledby": n } = param;
-    const { texts: c } = f(), [a, p] = b.useState(Math.ceil(o)), [s, y] = b.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 } = v(), [a, g] = b.useState(Math.ceil(s)), [i, k] = b.useState(!1);
     b.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__ */ t("div", _object_spread_props(_object_spread({}, C(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__ */ o("div", _object_spread_props(_object_spread(_object_spread_props(_object_spread({}, C(n, "ProgressBarStepped")), {
+        role: "progressbar"
+    }), A), {
         className: N,
-        children: /* @__PURE__ */ t(P, {
+        children: /* @__PURE__ */ o(w, {
             space: 8,
             fullWidth: !0,
             children: Array.from({
-                length: r
-            }, (e, m)=>{
-                const g = m === a, u = m < a, v = m === a - 1;
-                return /* @__PURE__ */ t("div", {
-                    className: B,
+                length: e
+            }, (r, d)=>{
+                const u = d === a, h = d < a, f = d === a - 1;
+                return /* @__PURE__ */ o("div", {
+                    className: S,
                     "aria-hidden": "true",
-                    children: (u || g) && /* @__PURE__ */ t("div", {
-                        className: k(S, {
-                            [x]: v && !s,
-                            [$]: g && s
+                    children: (h || u) && /* @__PURE__ */ o("div", {
+                        className: P($, {
+                            [y]: f && !i,
+                            [x]: u && i
                         }),
                         style: {
-                            backgroundColor: d !== null && d !== void 0 ? d : h.colors.controlActivated,
-                            maxWidth: u || v && !s ? "100%" : "0"
+                            backgroundColor: p !== null && p !== void 0 ? p : B.colors.controlActivated,
+                            maxWidth: h || f && !i ? "100%" : "0"
                         }
                     })
-                }, m);
+                }, d);
             })
         })
     }));
 };
-export { E as ProgressBar, R as ProgressBarStepped };
+export { R as ProgressBar, T as ProgressBarStepped };

package/dist-es/stacking-group.js

@@ -1,41 +1,41 @@
 "use client";
-import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
 import * as l from "react";
 import { useIsInverseVariant as f } from "./theme-variant-context.js";
 import { vars as r } from "./skins/skin-contract.css-mistica.js";
 import h from "./inline.js";
-import { Text4 as b } from "./text.js";
-import { moreItems as v } from "./stacking-group.css-mistica.js";
+import { Text4 as v } from "./text.js";
+import { moreItems as b } from "./stacking-group.css-mistica.js";
 import { vars as g } from "./image.css-mistica.js";
 import { applyCssVars as y } from "./utils/css.js";
 const C = (param)=>{
-    let { moreItemsStyle: e, stacked: n = !0, maxItems: o = 1 / 0, children: t } = param;
-    const c = f(), i = l.Children.count(t), m = i - o + 1, p = n ? -8 : 8, a = e.size, d = e.type === "circle" ? "50%" : r.borderRadii.mediaSmall;
-    return /* @__PURE__ */ s("div", {
+    let { moreItemsStyle: s, stacked: t = !0, maxItems: o = 1 / 0, children: n } = param;
+    const c = f(), i = l.Children.count(n), m = i - o + 1, p = t ? -8 : 8, a = s.size, d = s.type === "circle" ? "50%" : r.borderRadii.mediaSmall;
+    return /* @__PURE__ */ e("div", {
         style: y({
             [g.mediaBorderRadius]: d
         }),
         children: /* @__PURE__ */ u(h, {
             space: p,
             children: [
-                l.Children.toArray(t).slice(0, i > o ? o - 1 : o),
-                i > o && /* @__PURE__ */ s("div", {
-                    className: v,
+                l.Children.toArray(n).slice(0, i > o ? o - 1 : o),
+                i > o && /* @__PURE__ */ e("div", {
+                    className: b,
                     style: {
                         width: a,
                         height: a,
                         borderRadius: d,
                         backgroundColor: c ? r.colors.brandHigh : r.colors.brandLow,
-                        border: n ? `1px solid ${r.colors.borderLow}` : "none"
+                        border: t ? `1px solid ${r.colors.borderLow}` : "none"
                     },
-                    children: /* @__PURE__ */ s(b, {
+                    children: /* @__PURE__ */ e(v, {
                         regular: !0,
-                        color: c ? r.colors.textPrimaryInverse : r.colors.brand,
+                        color: c ? r.colors.textPrimaryInverse : r.colors.textBrand,
                         children: "+" + m
                     })
                 })
             ]
         })
     });
-}, G = C;
-export { G as default };
+}, B = C;
+export { B as default };