@telefonica/mistica 16.36.1 → 16.37.0

package/dist/hooks.js

@@ -10,37 +10,40 @@ function _export(target, all) {
 }
 _export(exports, {
     useBoundingRect: function() {
-        return O;
+        return j;
     },
     useDisableBodyScroll: function() {
-        return A;
+        return k;
     },
     useElementDimensions: function() {
-        return F;
+        return A;
+    },
+    useInnerText: function() {
+        return N;
     },
     useIsInViewport: function() {
-        return R;
+        return C;
     },
     useIsWithinIFrame: function() {
-        return $;
+        return O;
     },
     useIsomorphicLayoutEffect: function() {
-        return j;
+        return $;
     },
     useScreenSize: function() {
-        return D;
+        return q;
     },
     useTheme: function() {
-        return q;
+        return D;
     },
     useWindowHeight: function() {
-        return M;
+        return F;
     },
     useWindowSize: function() {
-        return y;
+        return v;
     },
     useWindowWidth: function() {
-        return k;
+        return M;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
@@ -95,24 +98,24 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const q = ()=>{
+const D = ()=>{
     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 f = "", S = 0, g = 0;
-const A = (t)=>{
+const k = (t)=>{
     _react.useEffect(()=>{
         if (t) {
-            const i = document.scrollingElement || document.documentElement, e = ()=>{
-                var r;
+            const r = document.scrollingElement || document.documentElement, e = ()=>{
+                var s;
                 var _ref, _ref1;
-                if (g++, !(g > 1) && (S = (_ref = i == null ? void 0 : i.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (r = document.body) == null ? void 0 : r.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
+                if (g++, !(g > 1) && (S = (_ref = r == null ? void 0 : r.scrollTop) !== null && _ref !== void 0 ? _ref : 0, f = (_ref1 = (s = document.body) == null ? void 0 : s.style.cssText) !== null && _ref1 !== void 0 ? _ref1 : "", document.body)) {
                     var _ref2;
-                    const o = window.innerWidth > ((_ref2 = i == null ? void 0 : i.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    const c = window.innerWidth > ((_ref2 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
                     document.body.style.cssText = f + (f.endsWith(";") ? "" : ";") + [
                         "overflow: hidden;",
-                        `overflow-y: ${o};`,
+                        `overflow-y: ${c};`,
                         "position: fixed;",
                         `top: ${-S}px;`,
                         "left: 0px;",
@@ -120,53 +123,53 @@ const A = (t)=>{
                         "overscroll-behavior-y: contain;"
                     ].join("");
                 }
-            }, c = ()=>{
-                g--, !(g > 0) && (document.body && (document.body.style.cssText = f), i && (i.scrollTop = S));
+            }, i = ()=>{
+                g--, !(g > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = S));
             };
-            return e(), c;
+            return e(), i;
         }
         return ()=>{};
     }, [
         t
     ]);
-}, D = ()=>_react.useContext(_screensizecontext.default), F = function() {
+}, q = ()=>_react.useContext(_screensizecontext.default), A = function() {
     let { includeMargins: t = !1 } = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
-    const [i, e] = _react.useState(0), [c, r] = _react.useState(0), [s, o] = _react.useState(null), d = _react.useCallback((h)=>{
-        if (!h) {
-            e(0), r(0);
+    const [r, e] = _react.useState(0), [i, s] = _react.useState(0), [o, c] = _react.useState(null), u = _react.useCallback((a)=>{
+        if (!a) {
+            e(0), s(0);
             return;
         }
-        const { width: w, height: m } = h[0].contentRect;
+        const { width: w, height: m } = a[0].contentRect;
         if (t) {
-            const a = window.getComputedStyle(h[0].target), v = parseInt(a.marginTop, 10), b = parseInt(a.marginBottom, 10), W = parseInt(a.marginLeft, 10), E = parseInt(a.marginRight, 10);
-            e(w + W + E), r(m + v + b);
-        } else e(w), r(m);
+            const h = window.getComputedStyle(a[0].target), y = parseInt(h.marginTop, 10), b = parseInt(h.marginBottom, 10), W = parseInt(h.marginLeft, 10), x = parseInt(h.marginRight, 10);
+            e(w + W + x), s(m + y + b);
+        } else e(w), s(m);
     }, [
         t
-    ]), u = _react.useCallback((h)=>{
-        o(h);
+    ]), d = _react.useCallback((a)=>{
+        c(a);
     }, []);
     return _react.useEffect(()=>{
-        if (!s) {
-            e(0), r(0);
+        if (!o) {
+            e(0), s(0);
             return;
         }
-        return (0, _dom.listenResize)(s, d);
+        return (0, _dom.listenResize)(o, u);
     }, [
-        s,
-        d
+        o,
+        u
     ]), {
-        width: i,
-        height: c,
-        ref: u
+        width: r,
+        height: i,
+        ref: d
     };
-}, y = ()=>{
+}, v = ()=>{
     var w;
-    const [t, i] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, c] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [r, s] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, d] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800), [u, h] = _react.useState((0, _environment.isClientSide)() ? ((w = window.visualViewport) == null ? void 0 : w.height) || window.screen.availHeight : 1200);
+    const [t, r] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, o] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [c, u] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800), [d, a] = _react.useState((0, _environment.isClientSide)() ? ((w = window.visualViewport) == null ? void 0 : w.height) || window.screen.availHeight : 1200);
     return _react.useEffect(()=>{
         const m = ()=>{
-            var a;
-            i(window.innerHeight), c(window.innerWidth), s(window.screen.availHeight), d(window.screen.availWidth), h(((a = window.visualViewport) == null ? void 0 : a.height) || window.screen.availHeight);
+            var h;
+            r(window.innerHeight), i(window.innerWidth), o(window.screen.availHeight), u(window.screen.availWidth), a(((h = window.visualViewport) == null ? void 0 : h.height) || window.screen.availHeight);
         };
         return window.addEventListener("resize", m), ()=>{
             window.removeEventListener("resize", m);
@@ -174,74 +177,82 @@ const A = (t)=>{
     }, []), _react.useMemo(()=>({
             height: t,
             width: e,
-            screenHeight: r,
-            screenWidth: o,
-            visualHeight: u
+            screenHeight: s,
+            screenWidth: c,
+            visualHeight: d
         }), [
         t,
         e,
-        r,
-        o,
-        u
+        s,
+        c,
+        d
     ]);
-}, M = ()=>{
-    const { height: t } = y();
+}, F = ()=>{
+    const { height: t } = v();
     return t;
-}, k = ()=>{
-    const { width: t } = y();
+}, M = ()=>{
+    const { width: t } = v();
     return t;
-}, $ = ()=>(0, _environment.isClientSide)() && window.top !== window.self, j = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, R = (t, i, e)=>{
-    const [c, r] = _react.useState(i);
+}, O = ()=>(0, _environment.isClientSide)() && window.top !== window.self, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, C = (t, r, e)=>{
+    const [i, s] = _react.useState(r);
     return _react.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
-        const s = new IntersectionObserver((o)=>{
-            r(o[0].isIntersecting);
+        const o = new IntersectionObserver((c)=>{
+            s(c[0].isIntersecting);
         }, {
             root: e == null ? void 0 : e.root,
             rootMargin: e == null ? void 0 : e.rootMargin,
             threshold: e == null ? void 0 : e.threshold
         });
-        return s.observe(t.current), ()=>{
-            s.disconnect();
+        return o.observe(t.current), ()=>{
+            o.disconnect();
         };
     }, [
         t,
         e == null ? void 0 : e.root,
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
-    ]), c;
-}, B = (t)=>{
-    const { top: i, right: e, bottom: c, left: r, width: s, height: o, x: d, y: u } = t.getBoundingClientRect();
+    ]), i;
+}, R = (t)=>{
+    const { top: r, right: e, bottom: i, left: s, width: o, height: c, x: u, y: d } = t.getBoundingClientRect();
     return {
-        top: i,
+        top: r,
         right: e,
-        bottom: c,
-        left: r,
-        width: s,
-        height: o,
-        x: d,
-        y: u
+        bottom: i,
+        left: s,
+        width: o,
+        height: c,
+        x: u,
+        y: d
     };
-}, O = function(t) {
-    let i = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
-    const [c, r] = _react.useState(), s = R(t, !1);
+}, j = function(t) {
+    let r = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : !0, e = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+    const [i, s] = _react.useState(), o = C(t, !1);
     return _react.useEffect(()=>{
-        let o;
-        const d = ()=>{
-            if (t.current && (s || e)) {
-                const u = B(t.current);
-                (0, _helpers.isEqual)(c, u) || r(u), i && (o = requestAnimationFrame(d));
-            } else r(void 0);
+        let c;
+        const u = ()=>{
+            if (t.current && (o || e)) {
+                const d = R(t.current);
+                (0, _helpers.isEqual)(i, d) || s(d), r && (c = requestAnimationFrame(u));
+            } else s(void 0);
         };
-        return o = requestAnimationFrame(d), ()=>{
-            cancelAnimationFrame(o);
+        return c = requestAnimationFrame(u), ()=>{
+            cancelAnimationFrame(c);
         };
     }, [
         t,
-        c,
-        s,
         i,
+        o,
+        r,
         e
-    ]), c;
+    ]), i;
+}, N = ()=>{
+    const [t, r] = _react.useState(""), e = _react.useCallback((i)=>{
+        i && r((process.env.NODE_ENV === "test" ? i.textContent : i.innerText) || "");
+    }, []);
+    return {
+        text: t,
+        ref: e
+    };
 };

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

@@ -10,13 +10,13 @@ function _export(target, all) {
 }
 _export(exports, {
     noScrollbar: function() {
-        return o;
+        return l;
     },
     scroll: function() {
-        return l;
+        return _;
     }
 });
 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 o = "v16_36_1_1gl3gmv2", l = "v16_36_1_1gl3gmv1 v16_36_1_1y2v1nfis";
+var l = "v16_37_1gl3gmv2", _ = "v16_37_1gl3gmv1 v16_37_1y2v1nfjs";

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

@@ -34,13 +34,13 @@ _export(exports, {
         return l;
     },
     iconContainerSize: function() {
-        return i;
+        return f;
     },
     iconSize: function() {
-        return f;
+        return d;
     },
     isLoading: function() {
-        return d;
+        return i;
     },
     minimumInteractiveArea: function() {
         return s;
@@ -58,55 +58,55 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./icon-button.css.ts.vanilla.css-mistica.js");
 var v = {
-    default: "v16_36_1_yqt1oe16",
-    small: "v16_36_1_yqt1oe17"
+    default: "v16_37_yqt1oe16",
+    small: "v16_37_yqt1oe17"
 }, t = {
-    default: "v16_36_1_yqt1oe18",
-    small: "v16_36_1_yqt1oe19"
+    default: "v16_37_yqt1oe18",
+    small: "v16_37_yqt1oe19"
 }, a = {
-    default: "v16_36_1_yqt1oe1a",
-    small: "v16_36_1_yqt1oe1b"
+    default: "v16_37_yqt1oe1a",
+    small: "v16_37_yqt1oe1b"
 }, n = {
-    default: "v16_36_1_yqt1oe12 v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfb3 v16_36_1_1y2v1nfcc v16_36_1_1y2v1nfla v16_36_1_1y2v1nf8k v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1",
-    small: "v16_36_1_yqt1oe13 v16_36_1_1y2v1nf8l v16_36_1_1y2v1nf9u v16_36_1_1y2v1nfb3 v16_36_1_1y2v1nfcc v16_36_1_1y2v1nfla v16_36_1_1y2v1nf8k v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1"
-}, r = "v16_36_1_yqt1oey", o = "v16_36_1_yqt1oe1i v16_36_1_1y2v1nfim v16_36_1_1y2v1nfit", y = {
-    "brand-solid-default": "v16_36_1_yqt1oe4",
-    "brand-solid-inverse": "v16_36_1_yqt1oe5",
-    "brand-solid-alternative": "v16_36_1_yqt1oe6",
-    "brand-soft-default": "v16_36_1_yqt1oe7",
-    "brand-soft-inverse": "v16_36_1_yqt1oe8",
-    "brand-soft-alternative": "v16_36_1_yqt1oe9",
-    "brand-transparent-default": "v16_36_1_yqt1oea",
-    "brand-transparent-inverse": "v16_36_1_yqt1oeb",
-    "brand-transparent-alternative": "v16_36_1_yqt1oec",
-    "neutral-solid-default": "v16_36_1_yqt1oed",
-    "neutral-solid-inverse": "v16_36_1_yqt1oee",
-    "neutral-solid-alternative": "v16_36_1_yqt1oef",
-    "neutral-soft-default": "v16_36_1_yqt1oeg",
-    "neutral-soft-inverse": "v16_36_1_yqt1oeh",
-    "neutral-soft-alternative": "v16_36_1_yqt1oei",
-    "neutral-transparent-default": "v16_36_1_yqt1oej",
-    "neutral-transparent-inverse": "v16_36_1_yqt1oek",
-    "neutral-transparent-alternative": "v16_36_1_yqt1oel",
-    "danger-solid-default": "v16_36_1_yqt1oem",
-    "danger-solid-inverse": "v16_36_1_yqt1oen",
-    "danger-solid-alternative": "v16_36_1_yqt1oeo",
-    "danger-soft-default": "v16_36_1_yqt1oep",
-    "danger-soft-inverse": "v16_36_1_yqt1oeq",
-    "danger-soft-alternative": "v16_36_1_yqt1oer",
-    "danger-transparent-default": "v16_36_1_yqt1oes",
-    "danger-transparent-inverse": "v16_36_1_yqt1oet",
-    "danger-transparent-alternative": "v16_36_1_yqt1oeu",
-    "brand-media": "v16_36_1_yqt1oev",
-    "neutral-media": "v16_36_1_yqt1oew",
-    "danger-media": "v16_36_1_yqt1oex"
+    default: "v16_37_yqt1oe12 v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfc3 v16_37_1y2v1nfdc v16_37_1y2v1nfma v16_37_1y2v1nf9k v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1",
+    small: "v16_37_yqt1oe13 v16_37_1y2v1nf9l v16_37_1y2v1nfau v16_37_1y2v1nfc3 v16_37_1y2v1nfdc v16_37_1y2v1nfma v16_37_1y2v1nf9k v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1"
+}, r = "v16_37_yqt1oey", o = "v16_37_yqt1oe1i v16_37_1y2v1nfjm v16_37_1y2v1nfjt", y = {
+    "brand-solid-default": "v16_37_yqt1oe4",
+    "brand-solid-inverse": "v16_37_yqt1oe5",
+    "brand-solid-alternative": "v16_37_yqt1oe6",
+    "brand-soft-default": "v16_37_yqt1oe7",
+    "brand-soft-inverse": "v16_37_yqt1oe8",
+    "brand-soft-alternative": "v16_37_yqt1oe9",
+    "brand-transparent-default": "v16_37_yqt1oea",
+    "brand-transparent-inverse": "v16_37_yqt1oeb",
+    "brand-transparent-alternative": "v16_37_yqt1oec",
+    "neutral-solid-default": "v16_37_yqt1oed",
+    "neutral-solid-inverse": "v16_37_yqt1oee",
+    "neutral-solid-alternative": "v16_37_yqt1oef",
+    "neutral-soft-default": "v16_37_yqt1oeg",
+    "neutral-soft-inverse": "v16_37_yqt1oeh",
+    "neutral-soft-alternative": "v16_37_yqt1oei",
+    "neutral-transparent-default": "v16_37_yqt1oej",
+    "neutral-transparent-inverse": "v16_37_yqt1oek",
+    "neutral-transparent-alternative": "v16_37_yqt1oel",
+    "danger-solid-default": "v16_37_yqt1oem",
+    "danger-solid-inverse": "v16_37_yqt1oen",
+    "danger-solid-alternative": "v16_37_yqt1oeo",
+    "danger-soft-default": "v16_37_yqt1oep",
+    "danger-soft-inverse": "v16_37_yqt1oeq",
+    "danger-soft-alternative": "v16_37_yqt1oer",
+    "danger-transparent-default": "v16_37_yqt1oes",
+    "danger-transparent-inverse": "v16_37_yqt1oet",
+    "danger-transparent-alternative": "v16_37_yqt1oeu",
+    "brand-media": "v16_37_yqt1oev",
+    "neutral-media": "v16_37_yqt1oew",
+    "danger-media": "v16_37_yqt1oex"
 }, l = {
-    default: "v16_36_1_yqt1oe1e v16_36_1_yqt1oe1d v16_36_1_1y2v1nflc v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1 v16_36_1_1y2v1nflu v16_36_1_1y2v1nfim",
-    small: "v16_36_1_yqt1oe1f v16_36_1_yqt1oe1d v16_36_1_1y2v1nflc v16_36_1_1y2v1nfis v16_36_1_1y2v1nfj7 v16_36_1_1y2v1nfj1 v16_36_1_1y2v1nflu v16_36_1_1y2v1nfim"
-}, i = {
+    default: "v16_37_yqt1oe1e v16_37_yqt1oe1d v16_37_1y2v1nfmc v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1 v16_37_1y2v1nfmu v16_37_1y2v1nfjm",
+    small: "v16_37_yqt1oe1f v16_37_yqt1oe1d v16_37_1y2v1nfmc v16_37_1y2v1nfjs v16_37_1y2v1nfk7 v16_37_1y2v1nfk1 v16_37_1y2v1nfmu v16_37_1y2v1nfjm"
+}, f = {
     default: "calc(1.5rem + 24px)",
     small: "calc(1.25rem + 12px)"
-}, f = {
+}, d = {
     default: "1.5rem",
     small: "1.25rem"
-}, d = "v16_36_1_yqt1oez", s = "v16_36_1_yqt1oe15", q = "v16_36_1_yqt1oe1g", u = "v16_36_1_yqt1oe10", m = "v16_36_1_yqt1oe1k v16_36_1_1y2v1nfin";
+}, i = "v16_37_yqt1oez", s = "v16_37_yqt1oe15", q = "v16_37_yqt1oe1g", u = "v16_37_yqt1oe10", m = "v16_37_yqt1oe1k v16_37_1y2v1nfjn";

package/dist/icon-button.js

@@ -158,7 +158,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const h = /*#__PURE__*/ _react.forwardRef((_param, N)=>{
+const h = /*#__PURE__*/ _react.forwardRef((_param, y)=>{
     var { disabled: e, trackingEvent: o, role: p, dataAttributes: I, type: r = "neutral", backgroundType: S = "transparent", hasOverlay: v = !0, small: R, Icon: d, bleedLeft: a, bleedRight: m, bleedY: c, showSpinner: l } = _param, u = _object_without_properties(_param, [
         "disabled",
         "trackingEvent",
@@ -174,7 +174,7 @@ const h = /*#__PURE__*/ _react.forwardRef((_param, N)=>{
         "bleedY",
         "showSpinner"
     ]);
-    const B = (0, _themevariantcontext.useThemeVariant)(), [y, T] = _react.useState(!1), t = l || y, [f, b] = _react.useState(!!t);
+    const B = (0, _themevariantcontext.useThemeVariant)(), [N, T] = _react.useState(!1), t = l || N, [f, b] = _react.useState(!!t);
     _react.useEffect(()=>{
         t && !f && b(!0);
     }, [
@@ -183,7 +183,7 @@ const h = /*#__PURE__*/ _react.forwardRef((_param, N)=>{
     ]);
     const i = R ? "small" : "default", z = B === "media" ? `${r}-media` : `${r}-${S}-${B}`, x = {
         disabled: e || t,
-        ref: N,
+        ref: y,
         trackingEvent: o,
         role: p,
         dataAttributes: _object_spread({

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

@@ -20,6 +20,6 @@ _export(exports, {
     }
 });
 require("./icon-chevron.css.ts.vanilla.css-mistica.js");
-var o = "v16_36_1_77bqcx2", a = "v16_36_1_77bqcx1", v = {
-    transitionDuration: "var(--v16_36_1_77bqcx0)"
+var o = "v16_37_77bqcx2", a = "v16_37_77bqcx1", v = {
+    transitionDuration: "var(--v16_37_77bqcx0)"
 };

package/dist/icons/icon-error.css-mistica.js

@@ -17,4 +17,4 @@ _export(exports, {
     }
 });
 require("./icon-error.css.ts.vanilla.css-mistica.js");
-var a = "v16_36_1_1ao3f5e2", i = "v16_36_1_1ao3f5e1";
+var a = "v16_37_1ao3f5e2", i = "v16_37_1ao3f5e1";

package/dist/image.css-mistica.js

@@ -28,14 +28,14 @@ _export(exports, {
         return f;
     },
     withBorderRadius: function() {
-        return e;
+        return o;
     },
     withoutBorderRadius: function() {
-        return o;
+        return e;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var r = 300, t = "v16_36_1_17tt25r5", a = "v16_36_1_17tt25r7", i = "v16_36_1_17tt25r3 v16_36_1_1y2v1nfm0 v16_36_1_1y2v1nfmf v16_36_1_1y2v1nfiu v16_36_1_1y2v1nfjf v16_36_1_1y2v1nfjw v16_36_1_1y2v1nfno v16_36_1_1y2v1nfl7 v16_36_1_1y2v1nfl8 v16_36_1_1y2v1nflk", d = "v16_36_1_17tt25r1", f = {
-    mediaBorderRadius: "var(--v16_36_1_17tt25r0)"
-}, e = "v16_36_1_17tt25r6", o = "v16_36_1_17tt25r4";
+var r = 300, t = "v16_37_17tt25r5", a = "v16_37_17tt25r7", i = "v16_37_17tt25r3 v16_37_1y2v1nfn0 v16_37_1y2v1nfnf v16_37_1y2v1nfju v16_37_1y2v1nfkf v16_37_1y2v1nfkw v16_37_1y2v1nfoo v16_37_1y2v1nfm7 v16_37_1y2v1nfm8 v16_37_1y2v1nfmk", d = "v16_37_17tt25r1", f = {
+    mediaBorderRadius: "var(--v16_37_17tt25r0)"
+}, o = "v16_37_17tt25r6", e = "v16_37_17tt25r4";

package/dist/image.d.ts

@@ -28,6 +28,8 @@ type CommonImageProps = {
     loadingFallback?: boolean;
     errorFallback?: boolean;
     border?: boolean;
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none';
+    objectPosition?: 'center' | 'top' | 'bottom' | 'left' | 'right' | string;
 };
 type RectangularImageProps = {
     /** defaults to 0 (original image proportions). If both width and height are given, aspectRatio is ignored.  */

package/dist/image.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return Y;
+        return t1;
     },
     ImageError: function() {
-        return X;
+        return e1;
     },
     RATIO: function() {
         return H;
     },
     default: function() {
-        return u1;
+        return g1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -162,7 +162,7 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Q = (param)=>{
+const Y = (param)=>{
     let { style: e } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("svg", {
         width: "48",
@@ -176,7 +176,7 @@ const Q = (param)=>{
             strokeWidth: "2"
         })
     });
-}, X = /*#__PURE__*/ _react.forwardRef((param, s)=>{
+}, e1 = /*#__PURE__*/ _react.forwardRef((param, s)=>{
     let { borderRadius: e, withIcon: n = !0, border: d, className: l } = param;
     const a = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: C } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -193,7 +193,7 @@ const Q = (param)=>{
         },
         ref: s,
         className: l,
-        children: n ? C === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, {
+        children: n ? C === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -240,8 +240,8 @@ const Q = (param)=>{
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, Y = /*#__PURE__*/ _react.forwardRef((_param, S)=>{
-    var { aspectRatio: e = 0, alt: n = "", dataAttributes: d, noBorderRadius: l, src: s, srcSet: a, onError: C, onLoad: c, loadingFallback: M = !0, errorFallback: x = !0 } = _param, i = _object_without_properties(_param, [
+}, t1 = /*#__PURE__*/ _react.forwardRef((_param, B)=>{
+    var { aspectRatio: e = 0, alt: n = "", dataAttributes: d, noBorderRadius: l, src: s, srcSet: a, onError: C, onLoad: c, loadingFallback: M = !0, errorFallback: x = !0, objectFit: S, objectPosition: A } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -251,10 +251,12 @@ const Q = (param)=>{
         "onError",
         "onLoad",
         "loadingFallback",
-        "errorFallback"
+        "errorFallback",
+        "objectFit",
+        "objectPosition"
     ]);
     var I;
-    const m = _react.useId(), h = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : l ? _imagecssmistica.withoutBorderRadius : l === !1 ? _imagecssmistica.withBorderRadius : _imagecssmistica.defaultBorderRadius, [y, f] = _react.useState(!s), [N, g] = _react.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), A = x && !!(L !== 0 || i.width && i.height), w = _react.useCallback(()=>{
+    const m = _react.useId(), h = _react.useRef(), u = i.circular ? _imagecssmistica.circularBorderRadius : l ? _imagecssmistica.withoutBorderRadius : l === !1 ? _imagecssmistica.withBorderRadius : _imagecssmistica.defaultBorderRadius, [y, f] = _react.useState(!s), [N, g] = _react.useState(!1), L = i.width && i.height ? void 0 : i.circular ? 1 : typeof e == "number" ? e : H[e], b = M && !!(L !== 0 || i.width && i.height), W = x && !!(L !== 0 || i.width && i.height), w = _react.useCallback(()=>{
         f(!1), h.current && (h.current.style.opacity = "1"), setTimeout(()=>{
             g(!0);
         }, _imagecssmistica.FADE_IN_DURATION_MS), c == null || c();
@@ -271,16 +273,18 @@ const Q = (param)=>{
     }, [
         w
     ]);
-    const B = (0, _environment.isServerSide)() || !((I = document.getElementById(m)) != null && I.complete), W = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+    const E = (0, _environment.isServerSide)() || !((I = document.getElementById(m)) != null && I.complete), V = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
                 suppressHydrationWarning: !0,
                 id: m,
                 style: {
-                    opacity: B && b ? 0 : 1,
-                    position: L !== 0 ? "absolute" : "static"
+                    opacity: E && b ? 0 : 1,
+                    position: L !== 0 ? "absolute" : "static",
+                    objectFit: S,
+                    objectPosition: A
                 },
-                ref: (0, _common.combineRefs)(h, S),
+                ref: (0, _common.combineRefs)(h, B),
                 src: s,
                 srcSet: a,
                 className: (0, _classnames.default)(u, _imagecssmistica.image, {
@@ -321,21 +325,21 @@ const Q = (param)=>{
                     })
                 })
             }),
-            y && A && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            y && W && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(X, {
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(e1, {
                     border: i.border,
                     className: u
                 })
             }),
-            !y && W
+            !y && V
         ]
     });
-}), e1 = /*#__PURE__*/ _react.forwardRef((e, n)=>{
+}), i1 = /*#__PURE__*/ _react.forwardRef((e, n)=>{
     var _e_aspectRatio;
     const d = e.width && e.height ? void 0 : e.circular ? 1 : typeof e.aspectRatio == "number" || !e.aspectRatio ? (_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : 0 : H[e.aspectRatio];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
@@ -347,8 +351,8 @@ const Q = (param)=>{
         height: e.height,
         dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
         forceNonCssAspectRatio: e.forceNonCssAspectRatio,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Y, _object_spread_props(_object_spread({}, e), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(t1, _object_spread_props(_object_spread({}, e), {
             ref: n
         }))
     });
-}), u1 = e1;
+}), g1 = i1;