@telefonica/mistica 13.1.2 → 13.2.0

package/dist/empty-state.css-mistica.js

@@ -10,19 +10,19 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>n,
-    contentVariants: ()=>v,
-    iconContainer: ()=>e,
-    inverseBorder: ()=>f,
+    contentVariants: ()=>f,
+    iconContainer: ()=>v,
+    inverseBorder: ()=>e,
     largeImage: ()=>_,
     largeImageContainer: ()=>o,
-    smallImage: ()=>t,
-    vars: ()=>u
+    smallImage: ()=>u,
+    vars: ()=>t
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./empty-state.css.ts.vanilla.js");
-var n = "_13fzrua2 _1y2v1nf56 _1y2v1nf50", v = {
+var n = "_13fzrua2 _1y2v1nf5g _1y2v1nf5a", f = {
     default: "_13fzrua3",
     largeImage: "_13fzrua4"
-}, e = "_13fzrua9 _1y2v1nf7q _1y2v1nf85", f = "_13fzruac", _ = "_13fzrua7 _1y2v1nf7t", o = "_13fzrua5", t = "_13fzruab _1y2v1nf58", u = {
+}, v = "_13fzrua9 _1y2v1nf80 _1y2v1nf8f", e = "_13fzruac", _ = "_13fzrua7 _1y2v1nf83", o = "_13fzrua5", u = "_13fzruab _1y2v1nf5i", t = {
     backgroundColor: "var(--_13fzrua0)"
 };

package/dist/feedback.css-mistica.js

@@ -19,4 +19,4 @@ _export(exports, {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./feedback.css.ts.vanilla.js");
-var n = "gx6h6a3 _1y2v1nf56 _1y2v1nf7t _1y2v1nf7d", r = "_1y2v1nf99 _1y2v1nf56 _1y2v1nf5i", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";
+var n = "gx6h6a3 _1y2v1nf5g _1y2v1nf83 _1y2v1nf7n", r = "_1y2v1nf9j _1y2v1nf5g _1y2v1nf5s", t = "gx6h6a1", v = "gx6h6a7", f = "gx6h6a5", o = "gx6h6a6", p = "gx6h6a4";

package/dist/fixed-footer-layout.css-mistica.js

@@ -10,15 +10,15 @@ function _export(target, all) {
 }
 _export(exports, {
     container: ()=>v,
-    elevated: ()=>j,
-    fixedFooter: ()=>a,
+    elevated: ()=>a,
+    fixedFooter: ()=>j,
     footer: ()=>t,
     vars: ()=>e,
     withoutFooter: ()=>p
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./fixed-footer-layout.css.ts.vanilla.js");
-var v = "p5j8j58", j = "p5j8j56 _1y2v1nf2k", a = "p5j8j54", t = "p5j8j53 _1y2v1nf7d _1y2v1nf2j", e = {
+var v = "p5j8j58", a = "p5j8j56 _1y2v1nf2p", j = "p5j8j54", t = "p5j8j53 _1y2v1nf7n _1y2v1nf2o", e = {
     footerHeight: "var(--p5j8j50)",
     backgroundColor: "var(--p5j8j51)"
-}, p = "_1y2v1nf55";
+}, p = "_1y2v1nf5f";

package/dist/header.d.ts

@@ -14,13 +14,32 @@ type RichText = string | ({
 type HeaderProps = {
     pretitle?: RichText;
     title?: string;
+    description?: string;
+    dataAttributes?: DataAttributes;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     preamount?: RichText;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     amount?: string;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     button?: RendersNullableElement<typeof ButtonPrimary>;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     secondaryButton?: RendersNullableElement<typeof ButtonSecondary>;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     subtitle?: RichText;
+    /**
+     * @deprecated This field is deprecated, please use the extra slot in the HeaderLayout component instead.
+     */
     isErrorAmount?: boolean;
-    dataAttributes?: DataAttributes;
 };
 export declare const Header: React.FC<HeaderProps>;
 type MainSectionHeaderProps = {

package/dist/header.js

@@ -9,10 +9,10 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    Header: ()=>F,
-    HeaderLayout: ()=>K,
-    MainSectionHeader: ()=>J,
-    MainSectionHeaderLayout: ()=>N
+    Header: ()=>J,
+    HeaderLayout: ()=>N,
+    MainSectionHeader: ()=>K,
+    MainSectionHeaderLayout: ()=>Q
 });
 const _boxJs = /*#__PURE__*/ _interopRequireDefault(require("./box.js"));
 const _stackJs = /*#__PURE__*/ _interopRequireDefault(require("./stack.js"));
@@ -109,75 +109,80 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-const F = (param)=>{
-    let { pretitle: i , title: e , preamount: o , amount: l , button: c , subtitle: d , isErrorAmount: h , secondaryButton: u , dataAttributes: B  } = param;
-    const { isTabletOrSmaller: H  } = (0, _hooksJs.useScreenSize)(), L = (0, _themeVariantContextJs.useIsInverseVariant)(), g = (p, x)=>{
-        if (typeof p == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
+const J = (param)=>{
+    let { pretitle: i , title: e , description: t , dataAttributes: n , preamount: a , amount: s , button: c , subtitle: g , isErrorAmount: H , secondaryButton: x  } = param;
+    const { isTabletOrSmaller: L  } = (0, _hooksJs.useScreenSize)(), O = (0, _themeVariantContextJs.useIsInverseVariant)(), f = (m, y)=>{
+        if (typeof m == "string") return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, x), {
-            children: p
+        }, y), {
+            children: m
         }));
-        const { text: G  } = p, O = _objectWithoutProperties(p, [
+        const { text: M  } = m, I = _objectWithoutProperties(m, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, x, O), {
-            children: p.text
+        }, y, I), {
+            children: m.text
         }));
     };
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-        space: H ? 24 : 32,
-        dataAttributes: B,
+        space: L ? 24 : 32,
+        dataAttributes: n,
         children: [
-            (e || i) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            (e || i || t) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 8,
                     children: [
-                        i && g(i, {
+                        i && f(i, {
                             color: _skinContractCssMisticaJs.vars.colors.textPrimary
                         }),
                         /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text6, {
                             role: "heading",
                             "aria-level": 2,
                             children: e
+                        }),
+                        t && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text3, {
+                            regular: !0,
+                            color: _skinContractCssMisticaJs.vars.colors.textSecondary,
+                            children: t
                         })
                     ]
                 })
             }),
-            (o || l || c || d) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+            (a || s || c || g) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                 space: 16,
                 children: [
-                    (o || l) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    (a || s) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                         space: 8,
                         children: [
-                            o && g(o, {
+                            a && f(a, {
                                 color: _skinContractCssMisticaJs.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text8, {
-                                color: h && !L ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
-                                children: l
+                                color: H && !O ? _skinContractCssMisticaJs.vars.colors.highlight : _skinContractCssMisticaJs.vars.colors.textPrimary,
+                                children: s
                             })
                         ]
                     }),
-                    (c || u) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
+                    (c || x) && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_buttonGroupJs.default, {
                         primaryButton: c,
-                        secondaryButton: u
+                        secondaryButton: x
                     }),
-                    d && g(d, {})
+                    g && f(g, {})
                 ]
             })
         ]
     });
-}, J = (param)=>{
-    let { title: i , description: e , button: o  } = param;
-    const { isTabletOrSmaller: l  } = (0, _hooksJs.useScreenSize)();
+}, K = (param)=>{
+    let { title: i , description: e , button: t  } = param;
+    const { isTabletOrSmaller: n  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
         space: 32,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                space: l ? 12 : 16,
+                space: n ? 12 : 16,
                 children: [
                     i && /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_textJs.Text7, {
                         role: "heading",
@@ -189,30 +194,30 @@ const F = (param)=>{
                     })
                 ]
             }),
-            o
+            t
         ]
     });
-}, K = (param)=>{
-    let { isInverse: i = !0 , breadcrumbs: e , header: o , extra: l , sideBySideExtraOnDesktop: c = !1 , dataAttributes: d  } = param;
-    const { isTabletOrSmaller: h  } = (0, _hooksJs.useScreenSize)();
+}, N = (param)=>{
+    let { isInverse: i = !0 , breadcrumbs: e , header: t , extra: n , sideBySideExtraOnDesktop: a = !1 , dataAttributes: s  } = param;
+    const { isTabletOrSmaller: c  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: i,
         dataAttributes: _objectSpread({
             "component-name": "HeaderLayout"
-        }, d),
+        }, s),
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            h ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: 32,
                 paddingBottom: 24,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
                     space: 24,
                     children: [
-                        o,
-                        l
+                        t,
+                        n
                     ]
                 })
-            }) : c ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            }) : a ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
                 children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
@@ -221,42 +226,38 @@ const F = (param)=>{
                         space: 32,
                         children: [
                             e,
-                            o
+                            t
                         ]
                     }),
-                    right: l
+                    right: n
                 })
             }) : /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
-                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_gridLayoutJs.default, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                        space: 24,
-                        children: [
-                            /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
-                                space: 32,
-                                children: [
-                                    e,
-                                    o
-                                ]
-                            }),
-                            l
-                        ]
-                    }),
-                    right: null
+                children: /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                    space: c ? 24 : 32,
+                    children: [
+                        /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_stackJs.default, {
+                            space: 32,
+                            children: [
+                                e,
+                                t
+                            ]
+                        }),
+                        n
+                    ]
                 })
             })
         ]
     });
-}, N = (param)=>{
+}, Q = (param)=>{
     let { isInverse: i = !0 , children: e  } = param;
-    const { isTabletOrSmaller: o  } = (0, _hooksJs.useScreenSize)();
+    const { isTabletOrSmaller: t  } = (0, _hooksJs.useScreenSize)();
     return /* @__PURE__ */ (0, _jsxRuntimeJs.jsxs)(_responsiveLayoutJs.default, {
         isInverse: i,
         children: [
             /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_overscrollColorContextJs.default, {}),
-            o ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
+            t ? /* @__PURE__ */ (0, _jsxRuntimeJs.jsx)(_boxJs.default, {
                 paddingTop: 12,
                 paddingBottom: 24,
                 children: e

package/dist/highlighted-card.css-mistica.js

@@ -9,14 +9,14 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    container: ()=>f,
-    imageContent: ()=>y,
+    container: ()=>y,
+    imageContent: ()=>f,
     textContainerVariant: ()=>_,
     touchableContainer: ()=>r
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./highlighted-card.css.ts.vanilla.js");
-var f = "wrb8722 _1y2v1nf56 _1y2v1nf5b _1y2v1nf5i _1y2v1nf5o", y = "wrb8725 _1y2v1nf56", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nf56 _1y2v1nf5c _1y2v1nf5k _1y2v1nf5z _1y2v1nf6d _1y2v1nf6q",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nf56 _1y2v1nf5c _1y2v1nf5k _1y2v1nf5z _1y2v1nf6d _1y2v1nf6q"
-}, r = "_1y2v1nf5t _1y2v1nf67 _1y2v1nf6l _1y2v1nf6z _1y2v1nf56 _1y2v1nf5o _1y2v1nf94 _1y2v1nf7d _1y2v1nf50";
+var y = "wrb8722 _1y2v1nf5g _1y2v1nf5l _1y2v1nf5s _1y2v1nf5y", f = "wrb8725 _1y2v1nf5g", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nf5g _1y2v1nf5m _1y2v1nf5u _1y2v1nf69 _1y2v1nf6n _1y2v1nf70",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nf5g _1y2v1nf5m _1y2v1nf5u _1y2v1nf69 _1y2v1nf6n _1y2v1nf70"
+}, r = "_1y2v1nf63 _1y2v1nf6h _1y2v1nf6v _1y2v1nf79 _1y2v1nf5g _1y2v1nf5y _1y2v1nf9e _1y2v1nf7n _1y2v1nf5a";

package/dist/hooks.js

@@ -9,17 +9,17 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useAriaId: ()=>R,
-    useDisableBodyScroll: ()=>T,
-    useElementDimensions: ()=>C,
-    useIsInViewport: ()=>D,
-    useIsomorphicLayoutEffect: ()=>M,
-    useScreenHeight: ()=>L,
-    useScreenSize: ()=>z,
-    useTheme: ()=>H,
-    useWindowHeight: ()=>A,
+    useAriaId: ()=>z,
+    useDisableBodyScroll: ()=>I,
+    useElementDimensions: ()=>T,
+    useIsInViewport: ()=>M,
+    useIsomorphicLayoutEffect: ()=>L,
+    useScreenHeight: ()=>B,
+    useScreenSize: ()=>H,
+    useTheme: ()=>S,
+    useWindowHeight: ()=>C,
     useWindowSize: ()=>l,
-    useWindowWidth: ()=>B
+    useWindowWidth: ()=>R
 });
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _themeContextJs = /*#__PURE__*/ _interopRequireDefault(require("./theme-context.js"));
@@ -70,22 +70,22 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const H = ()=>{
+const S = ()=>{
     const t = _react.useContext(_themeContextJs.default);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
-}, T = (t)=>{
+}, I = (t)=>{
     _react.useEffect(()=>{
         if (t) {
-            let i = "", e = 0, s = 0;
+            let i = "", e = 0, o = 0;
             const r = document.scrollingElement || document.documentElement, c = ()=>{
-                var u, o, h, w;
-                if (s++, !(s > 1) && (e = (u = r == null ? void 0 : r.scrollTop) != null ? u : 0, i = (h = (o = document.body) == null ? void 0 : o.style.cssText) != null ? h : "", document.body)) {
-                    const a = window.innerWidth > ((w = r == null ? void 0 : r.clientWidth) != null ? w : window.innerWidth) ? "scroll" : "hidden";
-                    document.body.style.cssText = `overflow:hidden;overflow-y:${a};position:fixed;top:${-e}px;left:0px;right:0px;bottom:0px`;
+                var u, s, h, w;
+                if (o++, !(o > 1) && (e = (u = r == null ? void 0 : r.scrollTop) != null ? u : 0, i = (h = (s = document.body) == null ? void 0 : s.style.cssText) != null ? h : "", document.body)) {
+                    const f = window.innerWidth > ((w = r == null ? void 0 : r.clientWidth) != null ? w : window.innerWidth) ? "scroll" : "hidden";
+                    document.body.style.cssText = `overflow:hidden;overflow-y:${f};position:fixed;top:${-e}px;left:0px;right:0px;bottom:0px`;
                 }
             }, d = ()=>{
-                s--, !(s > 0) && (document.body && (document.body.style.cssText = i), r && (r.scrollTop = e));
+                o--, !(o > 0) && (document.body && (document.body.style.cssText = i), r && (r.scrollTop = e));
             };
             return c(), d;
         }
@@ -93,20 +93,20 @@ const H = ()=>{
     }, [
         t
     ]);
-}, z = ()=>_react.useContext(_screenSizeContextJs.default), C = ()=>{
-    const [t, i] = _react.useState(0), [e, s] = _react.useState(0), [r, c] = _react.useState(null), d = _react.useCallback((o)=>{
-        if (!o) {
-            i(0), s(0);
+}, H = ()=>_react.useContext(_screenSizeContextJs.default), T = ()=>{
+    const [t, i] = _react.useState(0), [e, o] = _react.useState(0), [r, c] = _react.useState(null), d = _react.useCallback((s)=>{
+        if (!s) {
+            i(0), o(0);
             return;
         }
-        const { width: h , height: w  } = o[0].contentRect;
-        i(h), s(w);
-    }, []), u = _react.useCallback((o)=>{
-        c(o);
+        const { width: h , height: w  } = s[0].contentRect;
+        i(h), o(w);
+    }, []), u = _react.useCallback((s)=>{
+        c(s);
     }, []);
     return _react.useEffect(()=>{
         if (!r) {
-            i(0), s(0);
+            i(0), o(0);
             return;
         }
         return (0, _domJs.listenResize)(r, d);
@@ -118,20 +118,23 @@ const H = ()=>{
         height: e,
         ref: u
     };
-}, S = (t)=>{
-    const i = _react.useId();
-    return t || i;
-}, b = _react.useId !== void 0, R = b ? S : (t)=>{
-    const i = _react.useContext(_ariaIdGetterContextJs.default);
-    return _react.useRef(t || i()).current;
+}, z = (t)=>{
+    const { useId: i  } = S();
+    if (i) {
+        const e = i();
+        return t || e;
+    } else {
+        const e1 = _react.useContext(_ariaIdGetterContextJs.default);
+        return _react.useRef(t || e1()).current;
+    }
 }, l = ()=>{
-    const [t, i] = _react.useState(typeof window < "u" ? window.innerHeight : 1200), [e, s] = _react.useState(typeof window < "u" ? window.innerWidth : 800), [r, c] = _react.useState(typeof window < "u" ? window.screen.availHeight : 1200), [d, u] = _react.useState(typeof window < "u" ? window.screen.availWidth : 800);
+    const [t, i] = _react.useState(typeof window < "u" ? window.innerHeight : 1200), [e, o] = _react.useState(typeof window < "u" ? window.innerWidth : 800), [r, c] = _react.useState(typeof window < "u" ? window.screen.availHeight : 1200), [d, u] = _react.useState(typeof window < "u" ? window.screen.availWidth : 800);
     return _react.useEffect(()=>{
-        const o = ()=>{
-            i(window.innerHeight), s(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
+        const s = ()=>{
+            i(window.innerHeight), o(window.innerWidth), c(window.screen.availHeight), u(window.screen.availWidth);
         };
-        return window.addEventListener("resize", o), ()=>{
-            window.removeEventListener("resize", o);
+        return window.addEventListener("resize", s), ()=>{
+            window.removeEventListener("resize", s);
         };
     }, []), _react.useMemo(()=>({
             height: t,
@@ -144,17 +147,17 @@ const H = ()=>{
         r,
         d
     ]);
-}, A = ()=>{
+}, C = ()=>{
     const { height: t  } = l();
     return t;
-}, B = ()=>{
+}, R = ()=>{
     const { width: t  } = l();
     return t;
-}, L = ()=>{
+}, B = ()=>{
     const { screenHeight: t  } = l();
     return t;
-}, M = typeof window < "u" ? _react.useLayoutEffect : _react.useEffect, D = (t, i, e)=>{
-    const [s, r] = _react.useState(i);
+}, L = typeof window < "u" ? _react.useLayoutEffect : _react.useEffect, M = (t, i, e)=>{
+    const [o, r] = _react.useState(i);
     return _react.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
@@ -173,5 +176,5 @@ const H = ()=>{
         e == null ? void 0 : e.root,
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
-    ]), s;
+    ]), o;
 };

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

@@ -8,4 +8,4 @@ Object.defineProperty(exports, "base", {
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./icon-button.css.ts.vanilla.js");
-var t = "yqt1oe1 _1y2v1nf5a";
+var t = "yqt1oe1 _1y2v1nf5k";

package/dist/image.css-mistica.js

@@ -9,9 +9,9 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    FADE_IN_DURATION_MS: ()=>y,
+    FADE_IN_DURATION_MS: ()=>n,
     image: ()=>f
 });
 require("./sprinkles.css.ts.vanilla.js");
 require("./image.css.ts.vanilla.js");
-var y = 300, f = "_17tt25r1 _1y2v1nf9e _1y2v1nf9s _1y2v1nf58 _1y2v1nf7d _1y2v1nf7t _1y2v1nfay _1y2v1nf91 _1y2v1nf92";
+var n = 300, f = "_17tt25r1 _1y2v1nf9o _1y2v1nfa2 _1y2v1nf5i _1y2v1nf7n _1y2v1nf83 _1y2v1nfb8 _1y2v1nf9b _1y2v1nf9c";

package/dist/image.d.ts

@@ -23,8 +23,8 @@ export type ImageProps = {
     children?: void;
     dataAttributes?: DataAttributes;
     noBorderRadius?: boolean;
-    onError?: (event: React.SyntheticEvent) => void;
-    onLoad?: (event: React.SyntheticEvent) => void;
+    onError?: () => void;
+    onLoad?: () => void;
     loadingFallback?: boolean;
     errorFallback?: boolean;
 };