@telefonica/mistica 15.2.1 → 15.4.0

package/dist/hooks.js

@@ -10,40 +10,34 @@ function _export(target, all) {
 }
 _export(exports, {
     useAriaId: function() {
-        return q;
+        return D;
     },
     useBoundingRect: function() {
         return j;
     },
     useDisableBodyScroll: function() {
-        return A;
+        return L;
     },
     useElementDimensions: function() {
-        return M;
+        return q;
     },
     useIsInViewport: function() {
-        return E;
-    },
-    useIsWithinIFrame: function() {
-        return k;
+        return I;
     },
     useIsomorphicLayoutEffect: function() {
         return $;
     },
-    useScreenHeight: function() {
-        return V;
-    },
     useScreenSize: function() {
-        return L;
+        return M;
     },
     useTheme: function() {
-        return x;
+        return H;
     },
     useWindowHeight: function() {
-        return D;
+        return k;
     },
     useWindowSize: function() {
-        return f;
+        return v;
     },
     useWindowWidth: function() {
         return F;
@@ -102,26 +96,26 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const x = ()=>{
+const H = ()=>{
     const t = _react.useContext(_themecontext.default);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
 };
-let l = "", w = 0, a = 0;
-const A = (t)=>{
+let a = "", m = 0, w = 0;
+const L = (t)=>{
     _react.useEffect(()=>{
         if (t) {
             const n = document.scrollingElement || document.documentElement, e = ()=>{
                 var i;
                 var _ref, _ref1;
-                if (a++, !(a > 1) && (w = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, l = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (w++, !(w > 1) && (m = (_ref = n == null ? void 0 : n.scrollTop) !== null && _ref !== void 0 ? _ref : 0, a = (_ref1 = (i = document.body) == null ? void 0 : i.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
                     const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = l + (l.endsWith(";") ? "" : ";") + [
+                    document.body.style.cssText = a + (a.endsWith(";") ? "" : ";") + [
                         "overflow: hidden;",
                         `overflow-y: ${o};`,
                         "position: fixed;",
-                        `top: ${-w}px;`,
+                        `top: ${-m}px;`,
                         "left: 0px;",
                         "right: 0px;",
                         "bottom: 0px;",
@@ -129,7 +123,7 @@ const A = (t)=>{
                     ].join("");
                 }
             }, s = ()=>{
-                a--, !(a > 0) && (document.body && (document.body.style.cssText = l), n && (n.scrollTop = w));
+                w--, !(w > 0) && (document.body && (document.body.style.cssText = a), n && (n.scrollTop = m));
             };
             return e(), s;
         }
@@ -137,14 +131,14 @@ const A = (t)=>{
     }, [
         t
     ]);
-}, L = ()=>_react.useContext(_screensizecontext.default), M = ()=>{
+}, M = ()=>_react.useContext(_screensizecontext.default), q = ()=>{
     const [t, n] = _react.useState(0), [e, s] = _react.useState(0), [i, c] = _react.useState(null), o = _react.useCallback((d)=>{
         if (!d) {
             n(0), s(0);
             return;
         }
-        const { width: m, height: g } = d[0].contentRect;
-        n(m), s(g);
+        const { width: f, height: l } = d[0].contentRect;
+        n(f), s(l);
     }, []), u = _react.useCallback((d)=>{
         c(d);
     }, []);
@@ -162,8 +156,8 @@ const A = (t)=>{
         height: e,
         ref: u
     };
-}, q = (t)=>{
-    const { useId: n } = x();
+}, D = (t)=>{
+    const { useId: n } = H();
     if (n) {
         const e = n();
         return t || e;
@@ -171,36 +165,37 @@ const A = (t)=>{
         const e = _react.useContext(_ariaidgettercontext.default);
         return _react.useRef(t || e()).current;
     }
-}, f = ()=>{
-    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, s] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [i, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, u] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
+}, v = ()=>{
+    var l;
+    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, s] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [i, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, u] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800), [d, f] = _react.useState((0, _environment.isClientSide)() ? ((l = window.visualViewport) == null ? void 0 : l.height) || window.screen.availHeight : 1200);
     return _react.useEffect(()=>{
-        const d = ()=>{
-            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
+        const g = ()=>{
+            var S;
+            n(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth), f(((S = window.visualViewport) == null ? void 0 : S.height) || window.screen.availHeight);
         };
-        return window.addEventListener("resize", d), ()=>{
-            window.removeEventListener("resize", d);
+        return window.addEventListener("resize", g), ()=>{
+            window.removeEventListener("resize", g);
         };
     }, []), _react.useMemo(()=>({
             height: t,
             width: e,
             screenHeight: i,
-            screenWidth: o
+            screenWidth: o,
+            visualHeight: d
         }), [
         t,
         e,
         i,
-        o
+        o,
+        d
     ]);
-}, D = ()=>{
-    const { height: t } = f();
+}, k = ()=>{
+    const { height: t } = v();
     return t;
 }, F = ()=>{
-    const { width: t } = f();
-    return t;
-}, V = ()=>{
-    const { screenHeight: t } = f();
+    const { width: t } = v();
     return t;
-}, k = ()=>(0, _environment.isClientSide)() && window.top !== window.self, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, E = (t, n, e)=>{
+}, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, I = (t, n, e)=>{
     const [s, i] = _react.useState(n);
     return _react.useEffect(()=>{
         if (!t.current) return;
@@ -221,7 +216,7 @@ const A = (t)=>{
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
     ]), s;
-}, I = (t)=>{
+}, T = (t)=>{
     const { top: n, right: e, bottom: s, left: i, width: c, height: o, x: u, y: d } = t.getBoundingClientRect();
     return {
         top: n,
@@ -235,12 +230,12 @@ const A = (t)=>{
     };
 }, j = function(t) {
     let n = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
-    const [s, i] = _react.useState(), c = E(t, !1);
+    const [s, i] = _react.useState(), c = I(t, !1);
     return _react.useEffect(()=>{
         let o;
         const u = ()=>{
             if (t.current && (c || e)) {
-                const d = I(t.current);
+                const d = T(t.current);
                 (0, _helpers.isEqual)(s, d) || i(d), n && (o = requestAnimationFrame(u));
             } else i(void 0);
         };

package/dist/horizontal-scroll.css-mistica.js

@@ -19,4 +19,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfha";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfhk";

package/dist/horizontal-scroll.js

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const e = /*#__PURE__*/ _react.forwardRef((param, l)=>{
+const n = /*#__PURE__*/ _react.forwardRef((param, l)=>{
     let { children: o, noScrollbar: r } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         className: (0, _classnames.default)(_horizontalscrollcssmistica.scroll, {
@@ -67,4 +67,4 @@ const e = /*#__PURE__*/ _react.forwardRef((param, l)=>{
         ref: l,
         children: o
     });
-}), p = e;
+}), p = n;

package/dist/icon-button.css-mistica.js

@@ -55,7 +55,7 @@ _export(exports, {
         return m;
     },
     spinner: function() {
-        return p;
+        return h;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
@@ -70,9 +70,9 @@ var a = {
     default: "yqt1oe1a",
     small: "yqt1oe1b"
 }, o = {
-    default: "yqt1oe12 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfha _1y2v1nfhp _1y2v1nfhj",
-    small: "yqt1oe13 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfha _1y2v1nfhp _1y2v1nfhj"
-}, y = "yqt1oe1m _1y2v1nfhe", v = "yqt1oey", l = "yqt1oe1i _1y2v1nfh4 _1y2v1nfhb", f = {
+    default: "yqt1oe12 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhk _1y2v1nfhz _1y2v1nfht",
+    small: "yqt1oe13 _1y2v1nf7d _1y2v1nf8m _1y2v1nf9v _1y2v1nfb4 _1y2v1nfk2 _1y2v1nf7c _1y2v1nfhk _1y2v1nfhz _1y2v1nfht"
+}, y = "yqt1oe1m _1y2v1nfho", v = "yqt1oey", l = "yqt1oe1i _1y2v1nfhe _1y2v1nfhl", f = {
     "brand-solid-default": "yqt1oe4",
     "brand-solid-inverse": "yqt1oe5",
     "brand-solid-alternative": "yqt1oe6",
@@ -104,12 +104,12 @@ var a = {
     "neutral-media": "yqt1oew",
     "danger-media": "yqt1oex"
 }, d = {
-    default: "yqt1oe1e yqt1oe1d _1y2v1nfjt _1y2v1nfha _1y2v1nfhp _1y2v1nfhj _1y2v1nfkb _1y2v1nfh4",
-    small: "yqt1oe1f yqt1oe1d _1y2v1nfjt _1y2v1nfha _1y2v1nfhp _1y2v1nfhj _1y2v1nfkb _1y2v1nfh4"
+    default: "yqt1oe1e yqt1oe1d _1y2v1nfk3 _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfkl _1y2v1nfhe",
+    small: "yqt1oe1f yqt1oe1d _1y2v1nfk3 _1y2v1nfhk _1y2v1nfhz _1y2v1nfht _1y2v1nfkl _1y2v1nfhe"
 }, i = {
     default: "calc(1.5rem + 24px)",
     small: "calc(1.25rem + 12px)"
 }, q = {
     default: "1.5rem",
     small: "1.25rem"
-}, s = "yqt1oez", _ = "yqt1oe15", u = "yqt1oe1g", m = "yqt1oe10", p = "yqt1oe1k _1y2v1nfh5";
+}, s = "yqt1oez", _ = "yqt1oe15", u = "yqt1oe1g", m = "yqt1oe10", h = "yqt1oe1k _1y2v1nfhf";

package/dist/icons/icon-error.js

@@ -47,6 +47,7 @@ const d = (param)=>{
     let { size: e = 48 } = param;
     const { platformOverrides: o } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        role: "presentation",
         width: e,
         height: e,
         viewBox: "0 0 64 64",
@@ -98,6 +99,7 @@ const d = (param)=>{
     let { size: e = 48 } = param;
     const { platformOverrides: o } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        role: "presentation",
         width: e,
         height: e,
         viewBox: "0 0 64 64",

package/dist/icons/icon-info.js

@@ -44,6 +44,7 @@ function _object_spread(target) {
 const l = (param)=>{
     let { size: r = 48 } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        role: "presentation",
         width: r,
         height: r,
         viewBox: "0 0 64 64",
@@ -83,6 +84,7 @@ const l = (param)=>{
 }, s = (param)=>{
     let { size: r = 48 } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
+        role: "presentation",
         width: r,
         height: r,
         viewBox: "0 0 64 64",

package/dist/icons/icon-success-vivo-new.js

@@ -44,6 +44,7 @@ const d = (param)=>{
     let { size: o = 48 } = param;
     const { platformOverrides: r } = (0, _hooks.useTheme)(), t = (0, _hooks.useAriaId)();
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("svg", {
+        role: "presentation",
         width: o,
         height: o,
         viewBox: "0 0 64 64",

package/dist/icons/icon-success-vivo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return p;
+        return f;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -43,20 +43,21 @@ function _object_spread(target) {
     return target;
 }
 const c = (param)=>{
-    let { size: C = 48 } = param;
-    const e = (0, _themevariantcontext.useIsInverseVariant)(), { platformOverrides: s } = (0, _hooks.useTheme)();
+    let { size: e = 48 } = param;
+    const C = (0, _themevariantcontext.useIsInverseVariant)(), { platformOverrides: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
-        width: C,
-        height: C,
+        role: "presentation",
+        width: e,
+        height: e,
         viewBox: "0 0 64 64",
         overflow: "visible",
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("g", {
-            fill: e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.brand,
-            stroke: e ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.brand,
+            fill: C ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.brand,
+            stroke: C ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.brand,
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", _object_spread({
                 fillRule: "nonzero",
                 d: "M14.8832276,0 C10.2293915,0.0191737965 6.86229932,3.79747692 6.87644677,7.70928648 C6.89025737,11.6228714 9.24614399,14.2258918 11.0573539,15.1980743 C12.084728,15.7491434 11.7559683,16.7408548 11.7559683,16.7408548 C11.7559683,16.7408548 11.5093985,17.7055808 10.4274557,17.44922 C9.3458498,17.1875332 4.10725261,15.8961425 4.10725261,15.8961425 C4.10725261,15.8961425 0.947319469,15.2651826 0.18436791,18.6252129 C-0.579931024,21.9873736 1.196584,23.2652716 2.5001701,23.5816393 C3.80375621,23.8972968 8.2116962,25.0470144 8.2116962,25.0470144 C8.2116962,25.0470144 9.52370341,25.7443725 9.57490369,27.1742406 C9.60656702,28.0203732 9.60825124,28.7209269 8.78163618,29.9800062 C7.95670533,31.2394406 2.82589821,37.6825463 2.82589821,37.6825463 C2.82589821,37.6825463 1.06218326,39.9379529 3.61781834,41.9710855 C6.17345343,44.0045731 7.61110343,43.5309094 9.12824861,41.6575584 C10.6440464,39.7845626 13.6392629,35.862456 13.6392629,35.862456 C13.6392629,35.862456 14.0525704,35.0099322 14.8956908,35.0610623 C15.7388112,35.1136127 15.985381,35.5961532 16.2710247,35.9650713 C16.5580157,36.3339893 20.7318492,41.7285725 21.0164823,42.0786718 C21.297747,42.4326769 22.0782145,43.0806802 22.9364929,43.2042447 C23.7937607,43.3263889 24.7338922,43.1396219 25.3358324,42.6712841 C25.9360883,42.2022363 26.698703,41.5641749 26.9664939,41.1388007 C27.2326007,40.7134265 27.6863295,40.1034157 27.6027922,39.0996319 C27.5182443,38.0986887 27.3144537,37.574605 26.5878813,36.7149798 C25.8613089,35.8564198 21.565538,30.4178079 20.7567756,29.3742563 C20.7567756,29.3742563 20.022119,28.4461025 20.1285616,27.1341177 C20.2353412,25.8192924 20.7874284,25.2334264 21.9495401,24.9067617 C23.1099675,24.5815173 27.6499503,23.3980679 27.6499503,23.3980679 C27.6499503,23.3980679 30.2487014,22.0733006 29.6595614,19.4472006 L29.3210332,18.1046798 C29.3210332,18.1046798 28.7551353,15.0407782 25.0208833,15.989526 C21.2835996,16.9411144 19.2079671,17.5014154 19.2079671,17.5014154 C19.2079671,17.5014154 18.0185711,17.6235596 17.8477912,16.777427 C17.6797061,15.9302293 17.9003389,15.4934928 18.4258155,15.257016 C18.9516289,15.0208942 22.2685313,13.3144263 22.6939652,8.70064277 C23.121757,4.09538091 19.5505374,0 14.9128698,0 L14.8832276,0"
             }, (0, _animation.getAnimateSweepInProps)("0.2s", s)))
         })
     });
-}, p = c;
+}, f = c;

package/dist/image.css-mistica.js

@@ -25,14 +25,14 @@ _export(exports, {
         return d;
     },
     noBorderRadius: function() {
-        return e;
+        return f;
     },
     vars: function() {
-        return f;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var v = 300, _ = "_17tt25r5", t = "_17tt25r6", i = "_17tt25r3 _1y2v1nfkh _1y2v1nfkw _1y2v1nfhc _1y2v1nfhx _1y2v1nfie _1y2v1nfm5 _1y2v1nfjp _1y2v1nfjq _1y2v1nfk1", d = "_17tt25r1", e = "_17tt25r4", f = {
+var v = 300, _ = "_17tt25r5", t = "_17tt25r6", i = "_17tt25r3 _1y2v1nfkr _1y2v1nfl6 _1y2v1nfhm _1y2v1nfi7 _1y2v1nfio _1y2v1nfmf _1y2v1nfjz _1y2v1nfk0 _1y2v1nfkb", d = "_17tt25r1", f = "_17tt25r4", e = {
     mediaBorderRadius: "var(--_17tt25r0)"
 };

package/dist/image.d.ts

@@ -17,6 +17,7 @@ export declare const RATIO: {
 };
 type CommonImageProps = {
     src: string;
+    srcSet?: string;
     /** defaults to empty string */
     alt?: string;
     children?: void;

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return p;
+        return e1;
     },
     ImageError: function() {
-        return Y;
+        return p;
     },
     RATIO: function() {
-        return S;
+        return x;
     },
     default: function() {
-        return g1;
+        return C1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -163,7 +163,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const X = (param)=>{
+const Y = (param)=>{
     let { style: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -177,9 +177,9 @@ const X = (param)=>{
             strokeWidth: "2"
         })
     });
-}, Y = /*#__PURE__*/ _react.forwardRef((param, o)=>{
-    let { borderRadius: e, withIcon: d = !0, border: c, className: m } = param;
-    const a = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
+}, p = /*#__PURE__*/ _react.forwardRef((param, o)=>{
+    let { borderRadius: e, withIcon: n = !0, border: d, className: h } = param;
+    const c = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: s } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
             height: "100%",
@@ -187,14 +187,14 @@ const X = (param)=>{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: a ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
+            backgroundColor: c ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
+            border: d ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
             borderRadius: e
         },
         ref: o,
-        className: m,
-        children: d ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+        className: h,
+        children: n ? s === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -209,70 +209,72 @@ const X = (param)=>{
                 maxWidth: 48
             },
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)("path", {
-                fill: a ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
+                fill: c ? _skincontractcssmistica.vars.colors.inverse : _skincontractcssmistica.vars.colors.neutralMedium,
                 d: "M20.25 4.622c.832 0 1.591.664 1.591 1.393v11.98c0 .728-.76 1.392-1.591 1.392H3.746c-.863 0-1.591-.639-1.591-1.392V6.015c0-.754.728-1.393 1.59-1.393H20.25zm0 13.558c.193 0 .367-.146.39-.207l-.003-11.956a.555.555 0 00-.384-.182H3.746c-.21 0-.364.132-.387.19v11.973c.014.044.171.182.387.182H20.25zM6.152 9.068c0 .554.451 1.005 1.003 1.005a1.006 1.006 0 000-2.01c-.552 0-1.003.45-1.003 1.005zm1.003 2.215a2.216 2.216 0 010-4.43c1.218 0 2.207.993 2.207 2.215a2.213 2.213 0 01-2.207 2.215zm12.42 1.337l-3.18-2.44a.605.605 0 00-.742.005l-3.636 2.9-.879-.83a.6.6 0 00-.798-.025l-5.168 4.317a.607.607 0 00.386 1.07.59.59 0 00.384-.14l4.759-3.975 3.308 3.123c.241.23.625.221.852-.025a.605.605 0 00-.026-.854l-1.932-1.824 3.131-2.496 2.807 2.154a.603.603 0 00.846-.112.609.609 0 00-.112-.848z"
             })
         }) : void 0
     });
-}), S = {
+}), x = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, x = "1:1", p = /*#__PURE__*/ _react.forwardRef((_param, E)=>{
-    var { aspectRatio: e = x, alt: d = "", dataAttributes: c, noBorderRadius: m, src: o, onError: a, onLoad: n, loadingFallback: A = !0, errorFallback: B = !0 } = _param, i = _object_without_properties(_param, [
+}, A = "1:1", e1 = /*#__PURE__*/ _react.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, [
         "aspectRatio",
         "alt",
         "dataAttributes",
         "noBorderRadius",
         "src",
+        "srcSet",
         "onError",
         "onLoad",
         "loadingFallback",
         "errorFallback"
     ]);
-    var v;
-    const h = (0, _hooks.useAriaId)(), l = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : m ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [I, f] = _react.useState(!o), [H, g] = _react.useState(!1), C = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : S[e], b = A && !!(C !== 0 || i.width && i.height), N = B && !!(C !== 0 || i.width && i.height), w = _react.useCallback(()=>{
-        f(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
-            g(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
+    var y;
+    const u = (0, _hooks.useAriaId)(), m = _react.useRef(), f = i.circular ? _imagecssmistica.circularBorderRadius : h ? _imagecssmistica.noBorderRadius : _imagecssmistica.defaultBorderRadius, [v, g] = _react.useState(!o), [T, C] = _react.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 = _react.useCallback(()=>{
+        g(!1), m.current && (m.current.style.opacity = "1"), setTimeout(()=>{
+            C(!0);
+        }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
     }, [
-        n
+        l
     ]);
     _react.useEffect(()=>{
-        f(!o), g(!1);
+        g(!o), C(!1);
     }, [
         o
     ]), _react.useEffect(()=>{
-        var y;
-        (y = l.current) != null && y.complete && w();
+        var R;
+        (R = m.current) != null && R.complete && I();
     }, [
-        w
+        I
     ]);
-    const T = (0, _environment.isServerSide)() || !((v = document.getElementById(h)) != null && v.complete), _ = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    const z = (0, _environment.isServerSide)() || !((y = document.getElementById(u)) != null && y.complete), F = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
                 suppressHydrationWarning: !0,
-                id: h,
+                id: u,
                 style: {
-                    opacity: T && b ? 0 : 1
+                    opacity: z && w ? 0 : 1
                 },
-                ref: (0, _common.combineRefs)(l, E),
+                ref: (0, _common.combineRefs)(m, H),
                 src: o,
-                className: (0, _classnames.default)(u, _imagecssmistica.image, {
+                srcSet: c,
+                className: (0, _classnames.default)(f, _imagecssmistica.image, {
                     [_imagecssmistica.imageWithBorder]: i.border
                 }, (0, _sprinklescssmistica.sprinkles)({
-                    position: C !== 0 ? "absolute" : "static"
+                    position: b !== 0 ? "absolute" : "static"
                 })),
-                alt: d,
+                alt: n,
                 onError: ()=>{
-                    f(!0), g(!0), a == null || a();
+                    g(!0), C(!0), s == null || s();
                 },
-                onLoad: w
+                onLoad: I
             }),
-            b && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
+            w && /* @__PURE__ */ (0, _jsxruntime.jsx)("script", {
                 dangerouslySetInnerHTML: {
-                    __html: `document.getElementById("${h}").addEventListener('load', (e) => e.target.style.opacity = "1")`
+                    __html: `document.getElementById("${u}").addEventListener('load', (e) => e.target.style.opacity = "1")`
                 }
             })
         ]
@@ -280,50 +282,52 @@ const X = (param)=>{
     var _i_height, _i_width;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            b && !H && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            w && !T && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
-                    height: "100%"
+                    height: "100%",
+                    overflow: "hidden"
                 },
+                className: f,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonAnimation, {
                     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__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
                         height: "100%",
                         width: "100%",
-                        className: u
+                        noBorderRadius: !0
                     })
                 })
             }),
-            I && N && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            v && _ && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(p, {
                     border: i.border,
-                    className: u
+                    className: f
                 })
             }),
-            !I && _
+            !v && F
         ]
     });
-}), e1 = /*#__PURE__*/ _react.forwardRef((e, d)=>{
+}), t1 = /*#__PURE__*/ _react.forwardRef((e, n)=>{
     var _e_aspectRatio;
-    const c = 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];
+    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];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: c,
+        aspectRatio: d,
         width: e.width,
         height: e.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(p, _object_spread_props(_object_spread({}, e), {
-            ref: d
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(e1, _object_spread_props(_object_spread({}, e), {
+            ref: n
         }))
     });
-}), g1 = e1;
+}), C1 = t1;

package/dist/index.d.ts

@@ -762,6 +762,9 @@ export { default as IconEscalatorRegular } from './generated/mistica-icons/icon-
 export { default as IconEsimFilled } from './generated/mistica-icons/icon-esim-filled';
 export { default as IconEsimLight } from './generated/mistica-icons/icon-esim-light';
 export { default as IconEsimRegular } from './generated/mistica-icons/icon-esim-regular';
+export { default as IconEthernetFilled } from './generated/mistica-icons/icon-ethernet-filled';
+export { default as IconEthernetLight } from './generated/mistica-icons/icon-ethernet-light';
+export { default as IconEthernetRegular } from './generated/mistica-icons/icon-ethernet-regular';
 export { default as IconEuroSymbolCircleFilled } from './generated/mistica-icons/icon-euro-symbol-circle-filled';
 export { default as IconEuroSymbolCircleLight } from './generated/mistica-icons/icon-euro-symbol-circle-light';
 export { default as IconEuroSymbolCircleRegular } from './generated/mistica-icons/icon-euro-symbol-circle-regular';
@@ -1462,6 +1465,9 @@ export { default as IconRouteRegular } from './generated/mistica-icons/icon-rout
 export { default as IconRouterFilled } from './generated/mistica-icons/icon-router-filled';
 export { default as IconRouterLight } from './generated/mistica-icons/icon-router-light';
 export { default as IconRouterRegular } from './generated/mistica-icons/icon-router-regular';
+export { default as IconRoutineFilled } from './generated/mistica-icons/icon-routine-filled';
+export { default as IconRoutineLight } from './generated/mistica-icons/icon-routine-light';
+export { default as IconRoutineRegular } from './generated/mistica-icons/icon-routine-regular';
 export { default as IconRulerFilled } from './generated/mistica-icons/icon-ruler-filled';
 export { default as IconRulerLight } from './generated/mistica-icons/icon-ruler-light';
 export { default as IconRulerRegular } from './generated/mistica-icons/icon-ruler-regular';