@telefonica/mistica 15.3.0 → 15.5.0

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

@@ -27,42 +27,43 @@ function _object_spread(target) {
     }
     return target;
 }
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { getAnimateDrawLineProps as s, getAnimateFadeInProps as n } from "../utils/animation.js";
-import { useTheme as c } from "../hooks.js";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { getAnimateDrawLineProps as n, getAnimateFadeInProps as s } from "../utils/animation.js";
+import { useTheme as l } from "../hooks.js";
 import { O2_SKIN as m } from "../skins/constants.js";
-import { vars as t } from "../skins/skin-contract.css-mistica.js";
-import { outerAnimation as l, innerAnimation as a } from "./icon-error.css-mistica.js";
+import { vars as i } from "../skins/skin-contract.css-mistica.js";
+import { outerAnimation as c, innerAnimation as a } from "./icon-error.css-mistica.js";
 const d = (param)=>{
     let { size: e = 48 } = param;
-    const { platformOverrides: o } = c();
+    const { platformOverrides: o } = l();
     return /* @__PURE__ */ r("svg", {
+        role: "presentation",
         width: e,
         height: e,
         viewBox: "0 0 64 64",
         overflow: "visible",
-        children: /* @__PURE__ */ i("g", {
-            stroke: t.colors.error,
-            fill: t.colors.error,
+        children: /* @__PURE__ */ t("g", {
+            stroke: i.colors.error,
+            fill: i.colors.error,
             strokeLinecap: "round",
             strokeLinejoin: "round",
             children: [
-                /* @__PURE__ */ i("g", {
-                    className: l,
+                /* @__PURE__ */ t("g", {
+                    className: c,
                     children: [
                         /* @__PURE__ */ r("path", _object_spread({
                             strokeWidth: "2",
                             fill: "none",
                             d: "M48.24,57.99c-4.71,2.95-10.27,4.65-16.24,4.65C15.08,62.64,1.36,48.92,1.36,32S15.08,1.36,32,1.36 S62.64,15.08,62.64,32c0,6.11-1.79,11.8-4.87,16.58"
-                        }, s("202", "0.3s", o))),
+                        }, n("202", "0.3s", o))),
                         /* @__PURE__ */ r("circle", _object_spread({
                             cx: "53.64",
                             cy: "53.54",
                             r: "1.06"
-                        }, n("0.2s", o)))
+                        }, s("0.2s", o)))
                     ]
                 }),
-                /* @__PURE__ */ i("g", {
+                /* @__PURE__ */ t("g", {
                     className: a,
                     children: [
                         /* @__PURE__ */ r("line", _object_spread({
@@ -72,13 +73,13 @@ const d = (param)=>{
                             y1: "14.86",
                             x2: "32",
                             y2: "39.08"
-                        }, s("110", "0.6s", o))),
+                        }, n("110", "0.6s", o))),
                         /* @__PURE__ */ r("circle", _object_spread({
                             strokeWidth: "0",
                             cx: "32",
                             cy: "46.25",
                             r: "1.72"
-                        }, n("0.8s", o)))
+                        }, s("0.8s", o)))
                     ]
                 })
             ]
@@ -86,14 +87,15 @@ const d = (param)=>{
     });
 }, h = (param)=>{
     let { size: e = 48 } = param;
-    const { platformOverrides: o } = c();
+    const { platformOverrides: o } = l();
     return /* @__PURE__ */ r("svg", {
+        role: "presentation",
         width: e,
         height: e,
         viewBox: "0 0 64 64",
         overflow: "visible",
-        children: /* @__PURE__ */ i("g", {
-            stroke: t.colors.error,
+        children: /* @__PURE__ */ t("g", {
+            stroke: i.colors.error,
             fill: "none",
             strokeWidth: "2",
             strokeLinecap: "round",
@@ -101,16 +103,16 @@ const d = (param)=>{
             strokeMiterlimit: "10",
             children: [
                 /* @__PURE__ */ r("g", {
-                    className: l,
+                    className: c,
                     children: /* @__PURE__ */ r("path", _object_spread({
                         fill: "none",
                         strokeWidth: "2",
                         strokeMiterlimit: "10",
                         d: "M 31.9 0.9 C 52.5 0.9 62.9 11.4 62.9 31.9 C 62.9 52.5 52.5 62.9 31.9 62.9 C 11.3 62.9 0.9 52.5 0.9 31.9 C 0.9 11.3 11.3 0.9 31.9 0.9 Z",
                         transform: "rotate(90 32 32)"
-                    }, s("202", "0.3s", o)))
+                    }, n("202", "0.3s", o)))
                 }),
-                /* @__PURE__ */ i("g", {
+                /* @__PURE__ */ t("g", {
                     className: a,
                     children: [
                         /* @__PURE__ */ r("line", _object_spread({
@@ -118,22 +120,22 @@ const d = (param)=>{
                             y1: "20.9",
                             x2: "31.9",
                             y2: "36.9"
-                        }, s("17", "0.7s", o))),
+                        }, n("17", "0.7s", o))),
                         /* @__PURE__ */ r("circle", _object_spread({
-                            stroke: t.colors.error,
-                            fill: t.colors.error,
+                            stroke: i.colors.error,
+                            fill: i.colors.error,
                             strokeWidth: "1",
                             cx: "31.9",
                             cy: "43.9",
                             r: "1.5"
-                        }, n("1s", o)))
+                        }, s("1s", o)))
                     ]
                 })
             ]
         })
     });
 }, f = (e)=>{
-    const { skinName: o } = c();
+    const { skinName: o } = l();
     return o === m ? /* @__PURE__ */ r(d, _object_spread({}, e)) : /* @__PURE__ */ r(h, _object_spread({}, e));
 }, w = f;
 export { w as default };

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

@@ -34,6 +34,7 @@ import { vars as n } from "../skins/skin-contract.css-mistica.js";
 const l = (param)=>{
     let { size: r = 48 } = param;
     return /* @__PURE__ */ o("svg", {
+        role: "presentation",
         width: r,
         height: r,
         viewBox: "0 0 64 64",
@@ -73,6 +74,7 @@ const l = (param)=>{
 }, s = (param)=>{
     let { size: r = 48 } = param;
     return /* @__PURE__ */ o("svg", {
+        role: "presentation",
         width: r,
         height: r,
         viewBox: "0 0 64 64",

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

@@ -34,6 +34,7 @@ const d = (param)=>{
     let { size: o = 48 } = param;
     const { platformOverrides: r } = i(), t = n();
     return /* @__PURE__ */ s("svg", {
+        role: "presentation",
         width: o,
         height: o,
         viewBox: "0 0 64 64",

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

@@ -33,21 +33,22 @@ import { getAnimateSweepInProps as n } from "../utils/animation.js";
 import { useIsInverseVariant as t } from "../theme-variant-context.js";
 import { vars as o } from "../skins/skin-contract.css-mistica.js";
 const c = (param)=>{
-    let { size: C = 48 } = param;
-    const e = t(), { platformOverrides: s } = i();
+    let { size: e = 48 } = param;
+    const C = t(), { platformOverrides: s } = i();
     return /* @__PURE__ */ r("svg", {
-        width: C,
-        height: C,
+        role: "presentation",
+        width: e,
+        height: e,
         viewBox: "0 0 64 64",
         overflow: "visible",
         children: /* @__PURE__ */ r("g", {
-            fill: e ? o.colors.inverse : o.colors.brand,
-            stroke: e ? o.colors.inverse : o.colors.brand,
+            fill: C ? o.colors.inverse : o.colors.brand,
+            stroke: C ? o.colors.inverse : o.colors.brand,
             children: /* @__PURE__ */ r("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"
             }, n("0.2s", s)))
         })
     });
-}, p = c;
-export { p as default };
+}, f = c;
+export { f as default };

package/dist-es/image.css-mistica.js

@@ -1,6 +1,6 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./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)"
 };
-export { v as FADE_IN_DURATION_MS, _ as circularBorderRadius, t as defaultBorderRadius, i as image, d as imageWithBorder, e as noBorderRadius, f as vars };
+export { v as FADE_IN_DURATION_MS, _ as circularBorderRadius, t as defaultBorderRadius, i as image, d as imageWithBorder, f as noBorderRadius, e as vars };

package/dist-es/image.js

@@ -78,22 +78,22 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as t, jsxs as R, Fragment as k } from "react/jsx-runtime";
+import { jsx as t, jsxs as k, Fragment as S } from "react/jsx-runtime";
 import * as r from "react";
-import F from "classnames";
-import { SkeletonAnimation as L } from "./skeletons.js";
-import { AspectRatioContainer as N } from "./utils/aspect-ratio-support.js";
-import { getPrefixedDataAttributes as W } from "./utils/dom.js";
-import { useIsInverseVariant as M } from "./theme-variant-context.js";
-import { useTheme as V, useAriaId as D } from "./hooks.js";
-import { VIVO_SKIN as O } from "./skins/constants.js";
-import { sprinkles as j } from "./sprinkles.css-mistica.js";
-import { circularBorderRadius as $, noBorderRadius as P, defaultBorderRadius as U, FADE_IN_DURATION_MS as K, image as Z, imageWithBorder as q } from "./image.css-mistica.js";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { combineRefs as G } from "./utils/common.js";
-import J from "./skeleton-base.js";
-import { isServerSide as Q } from "./utils/environment.js";
-const X = (param)=>{
+import L from "classnames";
+import { SkeletonAnimation as N } 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";
+import { useTheme as D, useAriaId as O } from "./hooks.js";
+import { VIVO_SKIN as j } from "./skins/constants.js";
+import { sprinkles as $ } from "./sprinkles.css-mistica.js";
+import { circularBorderRadius as P, noBorderRadius as U, defaultBorderRadius as K, FADE_IN_DURATION_MS as Z, image as q, imageWithBorder as G } from "./image.css-mistica.js";
+import { vars as a } from "./skins/skin-contract.css-mistica.js";
+import { combineRefs as J } from "./utils/common.js";
+import Q from "./skeleton-base.js";
+import { isServerSide as X } from "./utils/environment.js";
+const Y = (param)=>{
     let { style: e } = param;
     return /* @__PURE__ */ t("svg", {
         width: "48",
@@ -103,13 +103,13 @@ const X = (param)=>{
         style: e,
         children: /* @__PURE__ */ t("path", {
             d: "M24.021 35.7235C24.8145 35.7694 25.0467 36.1913 25.3157 36.5138C25.586 36.8362 29.515 41.551 29.7823 41.8569C30.0475 42.1662 30.7822 42.7329 31.5901 42.8405C32.3967 42.9473 33.282 42.7842 33.8484 42.3748C34.4135 41.965 35.1313 41.4073 35.3833 41.0356C35.6337 40.6638 36.061 40.1302 35.9823 39.2534C35.9028 38.3783 35.7112 37.9204 35.0268 37.1691C34.3433 36.4185 30.2992 31.6657 29.5382 30.7537C29.5382 30.7537 28.8467 29.9423 28.9469 28.7956C29.0476 27.6468 29.567 27.1343 30.6608 26.8487C31.7534 26.5647 36.0267 25.5306 36.0267 25.5306C36.0267 25.5306 38.4728 24.3723 37.9182 22.0776L37.5997 20.904C37.5997 20.904 37.0672 18.2264 33.5519 19.0556C30.0344 19.8869 28.0803 20.377 28.0803 20.377C28.0803 20.377 26.9602 20.4838 26.7999 19.744C26.6417 19.0038 26.8494 18.6218 27.3443 18.4156C27.8387 18.209 30.9611 16.7175 31.3617 12.6853C31.7652 8.65158 28.3882 5.06573 24.0091 5.08104C19.6288 5.0976 16.4594 8.39988 16.4725 11.8185C16.4856 15.2387 18.7033 17.5144 20.4079 18.3638C21.3752 18.8453 21.0656 19.7122 21.0656 19.7122C21.0656 19.7122 20.8334 20.5554 19.8153 20.3311C18.7972 20.1025 13.8657 18.9736 13.8657 18.9736C13.8657 18.9736 10.8914 18.4226 10.1732 21.359C9.4541 24.2978 11.1261 25.4143 12.3532 25.6908C13.5798 25.9669 17.7296 26.9716 17.7296 26.9716C17.7296 26.9716 18.9643 27.581 19.0125 28.8308C19.0425 29.5697 19.0438 30.1824 18.266 31.2832C17.4894 32.3835 12.6598 38.0148 12.6598 38.0148C12.6598 38.0148 10.9997 39.9862 13.4051 41.763C15.8106 43.5401 17.1641 43.1262 18.5921 41.4889C20.0188 39.852 22.8383 36.4243 22.8383 36.4243C22.8383 36.4243 23.2275 35.6788 24.021 35.7235Z",
-            stroke: s.colors.brand,
+            stroke: a.colors.brand,
             strokeWidth: "2"
         })
     });
-}, Y = /*#__PURE__*/ r.forwardRef((param, o)=>{
-    let { borderRadius: e, withIcon: d = !0, border: c, className: m } = param;
-    const a = M(), { skinName: n } = V();
+}, p = /*#__PURE__*/ r.forwardRef((param, o)=>{
+    let { borderRadius: e, withIcon: n = !0, border: d, className: h } = param;
+    const c = V(), { skinName: s } = D();
     return /* @__PURE__ */ t("div", {
         style: {
             height: "100%",
@@ -117,14 +117,14 @@ const X = (param)=>{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            backgroundColor: a ? s.colors.backgroundSkeletonInverse : s.colors.backgroundSkeleton,
+            backgroundColor: c ? a.colors.backgroundSkeletonInverse : a.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: c ? `1px solid ${s.colors.borderLow}` : "none",
+            border: d ? `1px solid ${a.colors.borderLow}` : "none",
             borderRadius: e
         },
         ref: o,
-        className: m,
-        children: d ? n === O ? /* @__PURE__ */ t(X, {
+        className: h,
+        children: n ? s === j ? /* @__PURE__ */ t(Y, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -140,124 +140,126 @@ const X = (param)=>{
                 maxWidth: 48
             },
             children: /* @__PURE__ */ t("path", {
-                fill: a ? s.colors.inverse : s.colors.neutralMedium,
+                fill: c ? a.colors.inverse : a.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__*/ r.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__*/ 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, [
         "aspectRatio",
         "alt",
         "dataAttributes",
         "noBorderRadius",
         "src",
+        "srcSet",
         "onError",
         "onLoad",
         "loadingFallback",
         "errorFallback"
     ]);
-    var v;
-    const h = D(), l = r.useRef(), u = i.circular ? $ : m ? P : U, [I, f] = r.useState(!o), [H, g] = r.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), T = B && !!(C !== 0 || i.width && i.height), w = r.useCallback(()=>{
-        f(!1), l.current && (l.current.style.opacity = "1"), setTimeout(()=>{
-            g(!0);
-        }, K), n == null || n();
+    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(()=>{
+        g(!1), m.current && (m.current.style.opacity = "1"), setTimeout(()=>{
+            C(!0);
+        }, Z), l == null || l();
     }, [
-        n
+        l
     ]);
     r.useEffect(()=>{
-        f(!o), g(!1);
+        g(!o), C(!1);
     }, [
         o
     ]), r.useEffect(()=>{
-        var y;
-        (y = l.current) != null && y.complete && w();
+        var R;
+        (R = m.current) != null && R.complete && I();
     }, [
-        w
+        I
     ]);
-    const _ = Q() || !((v = document.getElementById(h)) != null && v.complete), z = /* @__PURE__ */ R(k, {
+    const z = X() || !((y = document.getElementById(u)) != null && y.complete), F = /* @__PURE__ */ k(S, {
         children: [
             /* @__PURE__ */ t("img", {
                 suppressHydrationWarning: !0,
-                id: h,
+                id: u,
                 style: {
-                    opacity: _ && b ? 0 : 1
+                    opacity: z && w ? 0 : 1
                 },
-                ref: G(l, E),
+                ref: J(m, H),
                 src: o,
-                className: F(u, Z, {
-                    [q]: i.border
-                }, j({
-                    position: C !== 0 ? "absolute" : "static"
+                srcSet: c,
+                className: L(f, q, {
+                    [G]: i.border
+                }, $({
+                    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__ */ t("script", {
+            w && /* @__PURE__ */ t("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")`
                 }
             })
         ]
     });
     var _i_height, _i_width;
-    return /* @__PURE__ */ R(k, {
+    return /* @__PURE__ */ k(S, {
         children: [
-            b && !H && /* @__PURE__ */ t("div", {
+            w && !T && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     overflow: "hidden"
                 },
-                className: u,
-                children: /* @__PURE__ */ t(L, {
+                className: f,
+                children: /* @__PURE__ */ t(N, {
                     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(J, {
+                    children: /* @__PURE__ */ t(Q, {
                         height: "100%",
                         width: "100%",
                         noBorderRadius: !0
                     })
                 })
             }),
-            I && T && /* @__PURE__ */ t("div", {
+            v && _ && /* @__PURE__ */ t("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ t(Y, {
+                children: /* @__PURE__ */ t(p, {
                     border: i.border,
-                    className: u
+                    className: f
                 })
             }),
-            !I && z
+            !v && F
         ]
     });
-}), e1 = /*#__PURE__*/ r.forwardRef((e, d)=>{
+}), t1 = /*#__PURE__*/ r.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];
-    return /* @__PURE__ */ t(N, {
+    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__ */ t(W, {
         style: {
             position: "relative"
         },
-        aspectRatio: c,
+        aspectRatio: d,
         width: e.width,
         height: e.height,
-        dataAttributes: W(e.dataAttributes, "Image"),
-        children: /* @__PURE__ */ t(p, _object_spread_props(_object_spread({}, e), {
-            ref: d
+        dataAttributes: M(e.dataAttributes, "Image"),
+        children: /* @__PURE__ */ t(e1, _object_spread_props(_object_spread({}, e), {
+            ref: n
         }))
     });
-}), g1 = e1;
-export { p as ImageContent, Y as ImageError, S as RATIO, g1 as default };
+}), C1 = t1;
+export { e1 as ImageContent, p as ImageError, x as RATIO, C1 as default };