@telefonica/mistica 14.34.0 → 14.36.0

package/dist/hooks.d.ts

@@ -26,5 +26,16 @@ type IntersectionObserverOptions = {
     rootMargin?: string;
     threshold?: number | Array<number>;
 };
-export declare const useIsInViewport: (ref: React.RefObject<HTMLElement>, defaultValue: boolean, options?: IntersectionObserverOptions) => boolean;
+export declare const useIsInViewport: (ref: React.RefObject<Element>, defaultValue: boolean, options?: IntersectionObserverOptions) => boolean;
+export type BoundingRect = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};
+export declare const useBoundingRect: (ref: React.RefObject<Element>, computeOnEveryFrame?: boolean, trackIfNotVisible?: boolean) => BoundingRect | undefined;
 export {};

package/dist/hooks.js

@@ -10,40 +10,43 @@ function _export(target, all) {
 }
 _export(exports, {
     useAriaId: function() {
-        return B;
+        return q;
+    },
+    useBoundingRect: function() {
+        return G;
     },
     useDisableBodyScroll: function() {
-        return z;
+        return A;
     },
     useElementDimensions: function() {
-        return R;
+        return M;
     },
     useIsInViewport: function() {
-        return k;
+        return E;
     },
     useIsWithinIFrame: function() {
-        return D;
+        return k;
     },
     useIsomorphicLayoutEffect: function() {
-        return V;
+        return $;
     },
     useScreenHeight: function() {
-        return A;
+        return V;
     },
     useScreenSize: function() {
-        return C;
+        return L;
     },
     useTheme: function() {
-        return x;
+        return v;
     },
     useWindowHeight: function() {
-        return L;
+        return D;
     },
     useWindowSize: function() {
-        return a;
+        return w;
     },
     useWindowWidth: function() {
-        return M;
+        return F;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
@@ -52,6 +55,7 @@ const _screensizecontext = /*#__PURE__*/ _interop_require_default(require("./scr
 const _ariaidgettercontext = /*#__PURE__*/ _interop_require_default(require("./aria-id-getter-context.js"));
 const _dom = require("./utils/dom.js");
 const _environment = require("./utils/environment.js");
+const _helpers = require("./utils/helpers.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -98,25 +102,25 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const x = ()=>{
+const v = ()=>{
     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 = "", w = 0, h = 0;
-const z = (t)=>{
+let f = "", a = 0, l = 0;
+const A = (t)=>{
     _react.useEffect(()=>{
         if (t) {
-            const r = document.scrollingElement || document.documentElement, e = ()=>{
+            const n = document.scrollingElement || document.documentElement, e = ()=>{
                 var s;
                 var _ref, _ref1;
-                if (h++, !(h > 1) && (w = (_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)) {
+                if (l++, !(l > 1) && (a = (_ref = n == null ? void 0 : n.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 = r == null ? void 0 : r.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-w}px;left:0px;right:0px;bottom:0px`;
+                    const o = window.innerWidth > ((_ref2 = n == null ? void 0 : n.clientWidth) !== null && _ref2 !== void 0 ? _ref2 : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = `overflow:hidden;overflow-y:${o};position:fixed;top:${-a}px;left:0px;right:0px;bottom:0px`;
                 }
             }, i = ()=>{
-                h--, !(h > 0) && (document.body && (document.body.style.cssText = f), r && (r.scrollTop = w));
+                l--, !(l > 0) && (document.body && (document.body.style.cssText = f), n && (n.scrollTop = a));
             };
             return e(), i;
         }
@@ -124,20 +128,20 @@ const z = (t)=>{
     }, [
         t
     ]);
-}, C = ()=>_react.useContext(_screensizecontext.default), R = ()=>{
-    const [t, r] = _react.useState(0), [e, i] = _react.useState(0), [s, c] = _react.useState(null), o = _react.useCallback((d)=>{
-        if (!d) {
-            r(0), i(0);
+}, L = ()=>_react.useContext(_screensizecontext.default), M = ()=>{
+    const [t, n] = _react.useState(0), [e, i] = _react.useState(0), [s, c] = _react.useState(null), o = _react.useCallback((u)=>{
+        if (!u) {
+            n(0), i(0);
             return;
         }
-        const { width: m, height: g } = d[0].contentRect;
-        r(m), i(g);
-    }, []), l = _react.useCallback((d)=>{
-        c(d);
+        const { width: m, height: g } = u[0].contentRect;
+        n(m), i(g);
+    }, []), d = _react.useCallback((u)=>{
+        c(u);
     }, []);
     return _react.useEffect(()=>{
         if (!s) {
-            r(0), i(0);
+            n(0), i(0);
             return;
         }
         return (0, _dom.listenResize)(s, o);
@@ -147,25 +151,25 @@ const z = (t)=>{
     ]), {
         width: t,
         height: e,
-        ref: l
+        ref: d
     };
-}, B = (t)=>{
-    const { useId: r } = x();
-    if (r) {
-        const e = r();
+}, q = (t)=>{
+    const { useId: n } = v();
+    if (n) {
+        const e = n();
         return t || e;
     } else {
         const e = _react.useContext(_ariaidgettercontext.default);
         return _react.useRef(t || e()).current;
     }
-}, a = ()=>{
-    const [t, r] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, l] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
+}, w = ()=>{
+    const [t, n] = _react.useState((0, _environment.isClientSide)() ? window.innerHeight : 1200), [e, i] = _react.useState((0, _environment.isClientSide)() ? window.innerWidth : 800), [s, c] = _react.useState((0, _environment.isClientSide)() ? window.screen.availHeight : 1200), [o, d] = _react.useState((0, _environment.isClientSide)() ? window.screen.availWidth : 800);
     return _react.useEffect(()=>{
-        const d = ()=>{
-            r(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), l(window.screen.availWidth);
+        const u = ()=>{
+            n(window.innerHeight), i(window.innerWidth), c(window.screen.availHeight), d(window.screen.availWidth);
         };
-        return window.addEventListener("resize", d), ()=>{
-            window.removeEventListener("resize", d);
+        return window.addEventListener("resize", u), ()=>{
+            window.removeEventListener("resize", u);
         };
     }, []), _react.useMemo(()=>({
             height: t,
@@ -178,17 +182,17 @@ const z = (t)=>{
         s,
         o
     ]);
-}, L = ()=>{
-    const { height: t } = a();
+}, D = ()=>{
+    const { height: t } = w();
     return t;
-}, M = ()=>{
-    const { width: t } = a();
+}, F = ()=>{
+    const { width: t } = w();
     return t;
-}, A = ()=>{
-    const { screenHeight: t } = a();
+}, V = ()=>{
+    const { screenHeight: t } = w();
     return t;
-}, D = ()=>(0, _environment.isClientSide)() && window.top !== window.self, V = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, k = (t, r, e)=>{
-    const [i, s] = _react.useState(r);
+}, k = ()=>(0, _environment.isClientSide)() && window.top !== window.self, $ = (0, _environment.isClientSide)() ? _react.useLayoutEffect : _react.useEffect, E = (t, n, e)=>{
+    const [i, s] = _react.useState(n);
     return _react.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
@@ -208,4 +212,37 @@ const z = (t)=>{
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
     ]), i;
+}, I = (t)=>{
+    const { top: n, right: e, bottom: i, left: s, width: c, height: o, x: d, y: u } = t.getBoundingClientRect();
+    return {
+        top: n,
+        right: e,
+        bottom: i,
+        left: s,
+        width: c,
+        height: o,
+        x: d,
+        y: u
+    };
+}, G = 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 [i, s] = _react.useState(), c = E(t, !1);
+    return _react.useEffect(()=>{
+        let o;
+        const d = ()=>{
+            if (t.current && (c || e)) {
+                const u = I(t.current);
+                (0, _helpers.isEqual)(i, u) || s(u), n && (o = requestAnimationFrame(d));
+            } else s(void 0);
+        };
+        return o = requestAnimationFrame(d), ()=>{
+            cancelAnimationFrame(o);
+        };
+    }, [
+        t,
+        i,
+        c,
+        n,
+        e
+    ]), i;
 };

package/dist/image.css-mistica.js

@@ -10,12 +10,17 @@ function _export(target, all) {
 }
 _export(exports, {
     FADE_IN_DURATION_MS: function() {
-        return f;
+        return r;
     },
     image: function() {
+        return f;
+    },
+    vars: function() {
         return n;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./image.css.ts.vanilla.css-mistica.js");
-var f = 300, n = "_17tt25r1 _1y2v1nfeg _1y2v1nfev _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg4 _1y2v1nfdp _1y2v1nfdq";
+var r = 300, f = "_17tt25r2 _1y2v1nfeh _1y2v1nfew _1y2v1nfbc _1y2v1nfbx _1y2v1nfce _1y2v1nfg5 _1y2v1nfdp _1y2v1nfdq _1y2v1nfe1", n = {
+    mediaBorderRadius: "var(--_17tt25r0)"
+};

package/dist/image.css.d.ts

@@ -1,3 +1,6 @@
 export declare const FADE_IN_DURATION_MS = 300;
+export declare const vars: {
+    mediaBorderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+};
 export declare const image: string;
 export declare const noBorder: string;

package/dist/image.d.ts

@@ -1,15 +1,9 @@
 import * as React from 'react';
 import type { ExclusifyUnion } from './utils/utility-types';
 import type { DataAttributes } from './utils/types';
-export declare const useMediaBorderRadius: () => boolean;
-export declare const MediaBorderRadiusProvider: ({ children, value, }: {
-    children: React.ReactNode;
-    value: boolean;
-}) => JSX.Element;
 type ImageErrorProps = {
-    noBorderRadius?: boolean;
-    circular?: boolean;
     withIcon?: boolean;
+    borderRadius?: string | number;
     border?: boolean;
 };
 export declare const ImageError: React.ForwardRefExoticComponent<ImageErrorProps & React.RefAttributes<HTMLDivElement>>;

package/dist/image.js

@@ -11,22 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     ImageContent: function() {
-        return Q;
+        return G;
     },
     ImageError: function() {
-        return J;
-    },
-    MediaBorderRadiusProvider: function() {
-        return m1;
+        return q;
     },
     RATIO: function() {
-        return I;
+        return k;
     },
     default: function() {
-        return u1;
-    },
-    useMediaBorderRadius: function() {
-        return q;
+        return m1;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -43,6 +37,7 @@ const _imagecssmistica = require("./image.css-mistica.js");
 const _skincontractcssmistica = require("./skins/skin-contract.css-mistica.js");
 const _common = require("./utils/common.js");
 const _skeletonbase = /*#__PURE__*/ _interop_require_default(require("./skeleton-base.js"));
+const _css = require("@vanilla-extract/css");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -168,28 +163,22 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x), m1 = (param)=>/* @__PURE__ */ {
-    let { children: e, value: a } = param;
-    return (0, _jsxruntime.jsx)(x.Provider, {
-        value: a,
-        children: e
-    });
-}, G = (param)=>/* @__PURE__ */ {
-    let { style: e } = param;
+const Z = (param)=>/* @__PURE__ */ {
+    let { style: t } = param;
     return (0, _jsxruntime.jsx)("svg", {
         width: "48",
         height: "48",
         viewBox: "0 0 48 48",
         fill: "none",
-        style: e,
+        style: t,
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("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: _skincontractcssmistica.vars.colors.brand,
             strokeWidth: "2"
         })
     });
-}, J = /*#__PURE__*/ _react.forwardRef((param, c)=>{
-    let { noBorderRadius: e, circular: a, withIcon: d = !0, border: l } = param;
+}, q = /*#__PURE__*/ _react.forwardRef((param, d)=>{
+    let { borderRadius: t, withIcon: a = !0, border: c } = param;
     const s = (0, _themevariantcontext.useIsInverseVariant)(), { skinName: n } = (0, _hooks.useTheme)();
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: {
@@ -200,11 +189,11 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
             justifyContent: "center",
             backgroundColor: s ? _skincontractcssmistica.vars.colors.backgroundSkeletonInverse : _skincontractcssmistica.vars.colors.backgroundSkeleton,
             boxSizing: "border-box",
-            border: l ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
-            borderRadius: a ? "50%" : e ? void 0 : _skincontractcssmistica.vars.borderRadii.container
+            border: c ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none",
+            borderRadius: t
         },
-        ref: c,
-        children: d ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(G, {
+        ref: d,
+        children: a ? n === _constants.VIVO_SKIN ? /* @__PURE__ */ (0, _jsxruntime.jsx)(Z, {
             style: {
                 width: "10%",
                 minWidth: 24,
@@ -224,13 +213,13 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
             })
         }) : void 0
     });
-}), I = {
+}), k = {
     "1:1": 1,
     "16:9": 16 / 9,
     "7:10": 7 / 10,
     "4:3": 4 / 3
-}, k = "1:1", Q = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
-    var { aspectRatio: e = k, alt: a = "", dataAttributes: d, noBorderRadius: l, src: c, onError: s, onLoad: n, loadingFallback: y = !0, errorFallback: S = !0 } = _param, i = _object_without_properties(_param, [
+}, x = "1:1", G = /*#__PURE__*/ _react.forwardRef((_param, A)=>{
+    var { aspectRatio: t = x, alt: a = "", dataAttributes: c, noBorderRadius: d, src: s, onError: n, onLoad: l, loadingFallback: R = !0, errorFallback: y = !0 } = _param, i = _object_without_properties(_param, [
         "aspectRatio",
         "alt",
         "dataAttributes",
@@ -241,86 +230,86 @@ const x = /*#__PURE__*/ _react.createContext(!0), q = ()=>_react.useContext(x),
         "loadingFallback",
         "errorFallback"
     ]);
-    const C = _react.useRef(), B = q(), z = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = l !== null && l !== void 0 ? l : !B, [f, g] = _react.useState(!c), [M, b] = _react.useState(!0), [F, R] = _react.useState(!1), u = i.circular ? 1 : typeof e == "number" ? e : I[e], w = y && !!(u !== 0 || i.width && i.height), L = S && !!(u !== 0 || i.width && i.height), h = _react.useCallback(()=>{
+    const f = _react.useRef(), S = i.border ? `1px solid ${_skincontractcssmistica.vars.colors.borderLow}` : "none", m = i.circular ? "50%" : d ? "0px" : (0, _css.fallbackVar)(_imagecssmistica.vars.mediaBorderRadius, _skincontractcssmistica.vars.borderRadii.container), [C, g] = _react.useState(!s), [z, b] = _react.useState(!0), [F, w] = _react.useState(!1), h = i.circular ? 1 : typeof t == "number" ? t : k[t], v = R && !!(h !== 0 || i.width && i.height), L = y && !!(h !== 0 || i.width && i.height), u = _react.useCallback(()=>{
         g(!1), b(!1), setTimeout(()=>{
-            R(!0);
-        }, _imagecssmistica.FADE_IN_DURATION_MS), n == null || n();
+            w(!0);
+        }, _imagecssmistica.FADE_IN_DURATION_MS), l == null || l();
     }, [
-        n
+        l
     ]), T = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     /* @__PURE__ */ (0, _jsxruntime.jsx)("img", {
-        style: _object_spread_props(_object_spread({}, M && w ? {
+        style: _object_spread_props(_object_spread({}, z && v ? {
             opacity: 0
         } : {
             opacity: 1
         }), {
             boxSizing: "border-box",
-            border: z
+            border: S,
+            borderRadius: m
         }),
-        ref: (0, _common.combineRefs)(C, A),
-        src: c,
+        ref: (0, _common.combineRefs)(f, A),
+        src: s,
         className: (0, _classnames.default)(_imagecssmistica.image, (0, _sprinklescssmistica.sprinkles)({
-            position: u !== 0 ? "absolute" : "static",
-            borderRadius: i.circular ? "50%" : m ? void 0 : _skincontractcssmistica.vars.borderRadii.container
+            position: h !== 0 ? "absolute" : "static"
         })),
         alt: a,
         onError: ()=>{
-            g(!0), b(!1), R(!0), s == null || s();
+            g(!0), b(!1), w(!0), n == null || n();
         },
-        onLoad: h
+        onLoad: u
     });
+    var _i_height, _i_width;
     return _react.useEffect(()=>{
-        var v;
-        (v = C.current) != null && v.complete && h();
+        var I;
+        (I = f.current) != null && I.complete && u();
     }, [
-        h
+        u
     ]), /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            w && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            v && !F && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%"
                 },
-                children: i.circular ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletonbase.default, {
-                    width: "100%",
-                    height: "100%",
-                    radius: "50%"
-                }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_skeletons.SkeletonRectangle, {
-                    width: i.width,
-                    height: i.height,
-                    noBorderRadius: m
+                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%",
+                        radius: m
+                    })
                 })
             }),
-            f && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            C && L && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 style: {
                     position: "absolute",
                     width: "100%",
                     height: "100%",
                     zIndex: 1
                 },
-                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(J, {
-                    circular: i.circular,
-                    noBorderRadius: m,
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(q, {
+                    borderRadius: m,
                     border: i.border
                 })
             }),
-            !f && T
+            !C && T
         ]
     });
-}), X = /*#__PURE__*/ _react.forwardRef((e, a)=>{
-    var _e_aspectRatio;
-    const d = e.circular ? 1 : typeof e.aspectRatio == "number" ? e.aspectRatio : I[(_e_aspectRatio = e.aspectRatio) !== null && _e_aspectRatio !== void 0 ? _e_aspectRatio : k];
+}), J = /*#__PURE__*/ _react.forwardRef((t, a)=>{
+    var _t_aspectRatio;
+    const c = t.circular ? 1 : typeof t.aspectRatio == "number" ? t.aspectRatio : k[(_t_aspectRatio = t.aspectRatio) !== null && _t_aspectRatio !== void 0 ? _t_aspectRatio : x];
     return /* @__PURE__ */ (0, _jsxruntime.jsx)(_aspectratiosupport.AspectRatioContainer, {
         style: {
             position: "relative"
         },
-        aspectRatio: d,
-        width: e.width,
-        height: e.height,
-        dataAttributes: (0, _dom.getPrefixedDataAttributes)(e.dataAttributes, "Image"),
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(Q, _object_spread_props(_object_spread({}, e), {
+        aspectRatio: c,
+        width: t.width,
+        height: t.height,
+        dataAttributes: (0, _dom.getPrefixedDataAttributes)(t.dataAttributes, "Image"),
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(G, _object_spread_props(_object_spread({}, t), {
             ref: a
         }))
     });
-}), u1 = X;
+}), m1 = J;

package/dist/index.d.ts

@@ -14,6 +14,7 @@ export { default as Counter } from './counter';
 export { default as FixedFooterLayout } from './fixed-footer-layout';
 export { default as ButtonFixedFooterLayout } from './button-fixed-footer-layout';
 export { default as Snackbar } from './snackbar';
+export { useSnackbar } from './snackbar-context';
 export { Portal } from './portal';
 export { default as LoadingBar } from './loading-bar';
 export { default as FixedToTop, TopDistanceContext } from './fixed-to-top';
@@ -289,6 +290,9 @@ export { default as IconBalanceRegular } from './generated/mistica-icons/icon-ba
 export { default as IconBandAidFilled } from './generated/mistica-icons/icon-band-aid-filled';
 export { default as IconBandAidLight } from './generated/mistica-icons/icon-band-aid-light';
 export { default as IconBandAidRegular } from './generated/mistica-icons/icon-band-aid-regular';
+export { default as IconBarChartFilled } from './generated/mistica-icons/icon-bar-chart-filled';
+export { default as IconBarChartLight } from './generated/mistica-icons/icon-bar-chart-light';
+export { default as IconBarChartRegular } from './generated/mistica-icons/icon-bar-chart-regular';
 export { default as IconBarcodeFilled } from './generated/mistica-icons/icon-barcode-filled';
 export { default as IconBarcodeLight } from './generated/mistica-icons/icon-barcode-light';
 export { default as IconBarcodeRegular } from './generated/mistica-icons/icon-barcode-regular';
@@ -426,6 +430,9 @@ export { default as IconCarWithClockRegular } from './generated/mistica-icons/ic
 export { default as IconCasinoFilled } from './generated/mistica-icons/icon-casino-filled';
 export { default as IconCasinoLight } from './generated/mistica-icons/icon-casino-light';
 export { default as IconCasinoRegular } from './generated/mistica-icons/icon-casino-regular';
+export { default as IconCatFilled } from './generated/mistica-icons/icon-cat-filled';
+export { default as IconCatLight } from './generated/mistica-icons/icon-cat-light';
+export { default as IconCatRegular } from './generated/mistica-icons/icon-cat-regular';
 export { default as IconCertificateFilled } from './generated/mistica-icons/icon-certificate-filled';
 export { default as IconCertificateLight } from './generated/mistica-icons/icon-certificate-light';
 export { default as IconCertificateRegular } from './generated/mistica-icons/icon-certificate-regular';
@@ -682,6 +689,9 @@ export { default as IconDocumentOtherRegular } from './generated/mistica-icons/i
 export { default as IconDocumentsFilled } from './generated/mistica-icons/icon-documents-filled';
 export { default as IconDocumentsLight } from './generated/mistica-icons/icon-documents-light';
 export { default as IconDocumentsRegular } from './generated/mistica-icons/icon-documents-regular';
+export { default as IconDogFilled } from './generated/mistica-icons/icon-dog-filled';
+export { default as IconDogLight } from './generated/mistica-icons/icon-dog-light';
+export { default as IconDogRegular } from './generated/mistica-icons/icon-dog-regular';
 export { default as IconDollarSymbolCircleFilled } from './generated/mistica-icons/icon-dollar-symbol-circle-filled';
 export { default as IconDollarSymbolCircleLight } from './generated/mistica-icons/icon-dollar-symbol-circle-light';
 export { default as IconDollarSymbolCircleRegular } from './generated/mistica-icons/icon-dollar-symbol-circle-regular';
@@ -1067,6 +1077,9 @@ export { default as IconListDocumentRegular } from './generated/mistica-icons/ic
 export { default as IconListFilled } from './generated/mistica-icons/icon-list-filled';
 export { default as IconListLight } from './generated/mistica-icons/icon-list-light';
 export { default as IconListRegular } from './generated/mistica-icons/icon-list-regular';
+export { default as IconLoanFilled } from './generated/mistica-icons/icon-loan-filled';
+export { default as IconLoanLight } from './generated/mistica-icons/icon-loan-light';
+export { default as IconLoanRegular } from './generated/mistica-icons/icon-loan-regular';
 export { default as IconLocationFilled } from './generated/mistica-icons/icon-location-filled';
 export { default as IconLocationLight } from './generated/mistica-icons/icon-location-light';
 export { default as IconLocationMapFilled } from './generated/mistica-icons/icon-location-map-filled';
@@ -1097,6 +1110,9 @@ export { default as IconLossTheftDevicesRegular } from './generated/mistica-icon
 export { default as IconLostFoundFilled } from './generated/mistica-icons/icon-lost-found-filled';
 export { default as IconLostFoundLight } from './generated/mistica-icons/icon-lost-found-light';
 export { default as IconLostFoundRegular } from './generated/mistica-icons/icon-lost-found-regular';
+export { default as IconLotusFilled } from './generated/mistica-icons/icon-lotus-filled';
+export { default as IconLotusLight } from './generated/mistica-icons/icon-lotus-light';
+export { default as IconLotusRegular } from './generated/mistica-icons/icon-lotus-regular';
 export { default as IconLoudspeakerFilled } from './generated/mistica-icons/icon-loudspeaker-filled';
 export { default as IconLoudspeakerLight } from './generated/mistica-icons/icon-loudspeaker-light';
 export { default as IconLoudspeakerRegular } from './generated/mistica-icons/icon-loudspeaker-regular';
@@ -1210,6 +1226,9 @@ export { default as IconNotConexionRegular } from './generated/mistica-icons/ico
 export { default as IconNotesFilled } from './generated/mistica-icons/icon-notes-filled';
 export { default as IconNotesLight } from './generated/mistica-icons/icon-notes-light';
 export { default as IconNotesRegular } from './generated/mistica-icons/icon-notes-regular';
+export { default as IconNotPhotoCameraFilled } from './generated/mistica-icons/icon-not-photo-camera-filled';
+export { default as IconNotPhotoCameraLight } from './generated/mistica-icons/icon-not-photo-camera-light';
+export { default as IconNotPhotoCameraRegular } from './generated/mistica-icons/icon-not-photo-camera-regular';
 export { default as IconNumericKeypadFilled } from './generated/mistica-icons/icon-numeric-keypad-filled';
 export { default as IconNumericKeypadLight } from './generated/mistica-icons/icon-numeric-keypad-light';
 export { default as IconNumericKeypadRegular } from './generated/mistica-icons/icon-numeric-keypad-regular';
@@ -1366,6 +1385,9 @@ export { default as IconProcessLoadingRegular } from './generated/mistica-icons/
 export { default as IconPuzzleFilled } from './generated/mistica-icons/icon-puzzle-filled';
 export { default as IconPuzzleLight } from './generated/mistica-icons/icon-puzzle-light';
 export { default as IconPuzzleRegular } from './generated/mistica-icons/icon-puzzle-regular';
+export { default as IconQrCodeFilled } from './generated/mistica-icons/icon-qr-code-filled';
+export { default as IconQrCodeLight } from './generated/mistica-icons/icon-qr-code-light';
+export { default as IconQrCodeRegular } from './generated/mistica-icons/icon-qr-code-regular';
 export { default as IconQuestionFilled } from './generated/mistica-icons/icon-question-filled';
 export { default as IconQuestionLight } from './generated/mistica-icons/icon-question-light';
 export { default as IconQuestionRegular } from './generated/mistica-icons/icon-question-regular';
@@ -1375,6 +1397,9 @@ export { default as IconQueueRegular } from './generated/mistica-icons/icon-queu
 export { default as IconRatingFilled } from './generated/mistica-icons/icon-rating-filled';
 export { default as IconRatingLight } from './generated/mistica-icons/icon-rating-light';
 export { default as IconRatingRegular } from './generated/mistica-icons/icon-rating-regular';
+export { default as IconReadingQrFilled } from './generated/mistica-icons/icon-reading-qr-filled';
+export { default as IconReadingQrLight } from './generated/mistica-icons/icon-reading-qr-light';
+export { default as IconReadingQrRegular } from './generated/mistica-icons/icon-reading-qr-regular';
 export { default as IconRecordingFilled } from './generated/mistica-icons/icon-recording-filled';
 export { default as IconRecordingLight } from './generated/mistica-icons/icon-recording-light';
 export { default as IconRecordingRegular } from './generated/mistica-icons/icon-recording-regular';
@@ -1544,6 +1569,7 @@ export { default as IconSubtitlesRegular } from './generated/mistica-icons/icon-
 export { default as IconSubtractCircleFilled } from './generated/mistica-icons/icon-subtract-circle-filled';
 export { default as IconSubtractCircleLight } from './generated/mistica-icons/icon-subtract-circle-light';
 export { default as IconSubtractCircleRegular } from './generated/mistica-icons/icon-subtract-circle-regular';
+export { default as IconSubtractFilled } from './generated/mistica-icons/icon-subtract-filled';
 export { default as IconSubtractLight } from './generated/mistica-icons/icon-subtract-light';
 export { default as IconSubtractRegular } from './generated/mistica-icons/icon-subtract-regular';
 export { default as IconSunFilled } from './generated/mistica-icons/icon-sun-filled';