@telefonica/mistica 13.1.2 → 13.2.0

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

@@ -4,7 +4,7 @@ var t = {
     light: "cc7htn8 cc7htn7",
     dark: "cc7htn9 cc7htn7"
 }, v = {
-    default: "cc7htn1 _1y2v1nf57 _1y2v1nf5f _1y2v1nf5l _1y2v1nf93 _1y2v1nf2k _1y2v1nf1m",
-    active: "cc7htn6 cc7htn2 cc7htn1 _1y2v1nf57 _1y2v1nf5f _1y2v1nf5l _1y2v1nf93 _1y2v1nfy _1y2v1nf4t"
-}, f = "cc7htna", a = "cc7htnb";
-export { t as chipInteractiveVariants, v as chipVariants, f as icon, a as iconActive };
+    default: "cc7htn1 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf9d _1y2v1nf2p _1y2v1nf1n",
+    active: "cc7htn6 cc7htn2 cc7htn1 _1y2v1nf5h _1y2v1nf5p _1y2v1nf5v _1y2v1nf9d _1y2v1nfy _1y2v1nf4z"
+}, h = "cc7htna", a = "cc7htnb";
+export { t as chipInteractiveVariants, v as chipVariants, h as icon, a as iconActive };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./circle.css.ts.vanilla.js";
-var p = "_1wpwyyp1 _1y2v1nf56 _1y2v1nf5l _1y2v1nf5f _1y2v1nf95";
-export { p as circle };
+var y = "_1wpwyyp1 _1y2v1nf5g _1y2v1nf5v _1y2v1nf5p _1y2v1nf9f";
+export { y as circle };

package/dist-es/credit-card-number-field.css-mistica.js

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./credit-card-number-field.css.ts.vanilla.js";
-var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf52", f = {
-    default: "yvyo3q4 _1y2v1nf51 yvyo3q5",
-    backface: "yvyo3q4 _1y2v1nf51 yvyo3q6"
+var a = "yvyo3q0", o = "yvyo3q2", r = "_1y2v1nf5c", f = {
+    default: "yvyo3q4 _1y2v1nf5b yvyo3q5",
+    backface: "yvyo3q4 _1y2v1nf5b yvyo3q6"
 };
 export { a as flip, o as flipBack, r as flipFront, f as variants };

package/dist-es/cvv-field.css-mistica.js

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./cvv-field.css.ts.vanilla.js";
-var v = "_10ijton2 _1y2v1nf1m", n = "_1y2v1nf56 _1y2v1nf5l";
-export { v as cvvText, n as tooltipContainer };
+var n = "_10ijton2 _1y2v1nf1n", o = "_1y2v1nf5g _1y2v1nf5v";
+export { n as cvvText, o as tooltipContainer };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./dialog.css.ts.vanilla.js";
-var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf5z", l = "_3dl29lj _1y2v1nf5s _1y2v1nf8n", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf5y _1y2v1nf6c _1y2v1nf6q _1y2v1nf74 _1y2v1nf52 _1y2v1nf9e _1y2v1nfa6", r = "_3dl29la _1y2v1nf2j _1y2v1nf98", o = "_3dl29l5 _1y2v1nf53 _1y2v1nf56 _1y2v1nf5f _1y2v1nf5l _1y2v1nf5c _1y2v1nf9e _1y2v1nfa6 _1y2v1nfak _1y2v1nf9s _1y2v1nf2m", t = {
-    dialog: "_3dl29ld _1y2v1nf56 _1y2v1nf5c _1y2v1nf5i _1y2v1nf6r _1y2v1nf75 _1y2v1nf61 _1y2v1nf6d",
-    default: "_3dl29ld _1y2v1nf56 _1y2v1nf5c _1y2v1nf5i _1y2v1nf5z _1y2v1nf6d _1y2v1nf6r _1y2v1nf75"
-}, e = "_3dl29l3 _1y2v1nf51";
-export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, l as dialogContent, a as iconContainer, d as modalCloseButtonContainer, r as modalContent, o as modalOpacityLayer, t as variants, e as wrapper };
+var _ = "_3dl29lb", y = "_3dl29l6", f = "_3dl29ll _1y2v1nf69", l = "_3dl29lj _1y2v1nf62 _1y2v1nf8x", a = "_3dl29lm", d = "_3dl29l8 _1y2v1nf68 _1y2v1nf6m _1y2v1nf70 _1y2v1nf7e _1y2v1nf5c _1y2v1nf9o _1y2v1nfag", o = "_3dl29la _1y2v1nf2o _1y2v1nf9i", r = "_3dl29l5 _1y2v1nf5d _1y2v1nf5g _1y2v1nf5p _1y2v1nf5v _1y2v1nf5m _1y2v1nf9o _1y2v1nfag _1y2v1nfau _1y2v1nfa2 _1y2v1nf2r", t = {
+    dialog: "_3dl29ld _1y2v1nf5g _1y2v1nf5m _1y2v1nf5s _1y2v1nf71 _1y2v1nf7f _1y2v1nf6b _1y2v1nf6n",
+    default: "_3dl29ld _1y2v1nf5g _1y2v1nf5m _1y2v1nf5s _1y2v1nf69 _1y2v1nf6n _1y2v1nf71 _1y2v1nf7f"
+}, e = "_3dl29l3 _1y2v1nf5b";
+export { _ as closedModalContent, y as closedOpactityLayer, f as dialogActions, l as dialogContent, a as iconContainer, d as modalCloseButtonContainer, o as modalContent, r as modalOpacityLayer, t as variants, e as wrapper };

package/dist-es/double-field.css-mistica.js

@@ -1,8 +1,8 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./text-field-components.css.ts.vanilla.js";
 import "./double-field.css.ts.vanilla.js";
-var n = {
-    default: "skrulh1 _1y2v1nf56 _1y2v1nf5b _1y2v1nf7d",
-    fullWidth: "skrulh2 _1y2v1nf56 _1y2v1nf5b _1y2v1nf7d"
+var v = {
+    default: "skrulh1 _1y2v1nf5g _1y2v1nf5l _1y2v1nf7n",
+    fullWidth: "skrulh2 _1y2v1nf5g _1y2v1nf5l _1y2v1nf7n"
 };
-export { n as variants };
+export { v as variants };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./empty-state-card.css.ts.vanilla.js";
-var a = "_1azor6p0", n = "_1azor6p4 _1y2v1nf7o _1y2v1nf83", v = "_1azor6p2 _1y2v1nf58 _1y2v1nf85";
-export { a as container, n as iconContainer, v as image };
+var n = "_1azor6p0", o = "_1azor6p4 _1y2v1nf7y _1y2v1nf8d", i = "_1azor6p2 _1y2v1nf5i _1y2v1nf8f";
+export { n as container, o as iconContainer, i as image };

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

@@ -1,9 +1,9 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./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)"
 };
-export { n as container, v as contentVariants, e as iconContainer, f as inverseBorder, _ as largeImage, o as largeImageContainer, t as smallImage, u as vars };
+export { n as container, f as contentVariants, v as iconContainer, e as inverseBorder, _ as largeImage, o as largeImageContainer, u as smallImage, t as vars };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./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";
 export { n as container, r as desktopContainer, t as desktopContent, v as feedbackData, f as feedbackDataAppear, o as feedbackDataAppearActive, p as innerContainer };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./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";
-export { v as container, j as elevated, a as fixedFooter, t as footer, e as vars, p as withoutFooter };
+}, p = "_1y2v1nf5f";
+export { v as container, a as elevated, j as fixedFooter, t as footer, e as vars, p as withoutFooter };

package/dist-es/header.js

@@ -77,171 +77,172 @@ function _objectWithoutPropertiesLoose(source, excluded) {
     }
     return target;
 }
-import a from "./box.js";
-import n from "./stack.js";
-import { useIsInverseVariant as I } from "./theme-variant-context.js";
-import y from "./responsive-layout.js";
-import f from "./grid-layout.js";
-import { useScreenSize as m } from "./hooks.js";
-import S from "./overscroll-color-context.js";
-import { Text6 as v, Text8 as P, Text7 as R, Text3 as T } from "./text.js";
-import j from "./button-group.js";
-import { vars as s } from "./skins/skin-contract.css-mistica.js";
-import { jsxs as t, jsx as r } from "./_virtual/jsx-runtime.js";
-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  } = m(), L = I(), g = (p, x)=>{
-        if (typeof p == "string") return /* @__PURE__ */ r(T, _objectSpreadProps(_objectSpread({
+import d from "./box.js";
+import l from "./stack.js";
+import { useIsInverseVariant as P } from "./theme-variant-context.js";
+import S from "./responsive-layout.js";
+import T from "./grid-layout.js";
+import { useScreenSize as h } from "./hooks.js";
+import v from "./overscroll-color-context.js";
+import { Text6 as B, Text3 as u, Text8 as R, Text7 as j } from "./text.js";
+import G from "./button-group.js";
+import { vars as p } from "./skins/skin-contract.css-mistica.js";
+import { jsxs as o, jsx as r } from "./_virtual/jsx-runtime.js";
+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  } = h(), O = P(), f = (m, y)=>{
+        if (typeof m == "string") return /* @__PURE__ */ r(u, _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__ */ r(T, _objectSpreadProps(_objectSpread({
+        return /* @__PURE__ */ r(u, _objectSpreadProps(_objectSpread({
             regular: !0
-        }, x, O), {
-            children: p.text
+        }, y, I), {
+            children: m.text
         }));
     };
-    return /* @__PURE__ */ t(n, {
-        space: H ? 24 : 32,
-        dataAttributes: B,
+    return /* @__PURE__ */ o(l, {
+        space: L ? 24 : 32,
+        dataAttributes: n,
         children: [
-            (e || i) && /* @__PURE__ */ r(a, {
+            (e || i || t) && /* @__PURE__ */ r(d, {
                 paddingRight: 16,
-                children: /* @__PURE__ */ t(n, {
+                children: /* @__PURE__ */ o(l, {
                     space: 8,
                     children: [
-                        i && g(i, {
-                            color: s.colors.textPrimary
+                        i && f(i, {
+                            color: p.colors.textPrimary
                         }),
-                        /* @__PURE__ */ r(v, {
+                        /* @__PURE__ */ r(B, {
                             role: "heading",
                             "aria-level": 2,
                             children: e
+                        }),
+                        t && /* @__PURE__ */ r(u, {
+                            regular: !0,
+                            color: p.colors.textSecondary,
+                            children: t
                         })
                     ]
                 })
             }),
-            (o || l || c || d) && /* @__PURE__ */ t(n, {
+            (a || s || c || g) && /* @__PURE__ */ o(l, {
                 space: 16,
                 children: [
-                    (o || l) && /* @__PURE__ */ t(n, {
+                    (a || s) && /* @__PURE__ */ o(l, {
                         space: 8,
                         children: [
-                            o && g(o, {
-                                color: s.colors.textPrimary
+                            a && f(a, {
+                                color: p.colors.textPrimary
                             }),
-                            /* @__PURE__ */ r(P, {
-                                color: h && !L ? s.colors.highlight : s.colors.textPrimary,
-                                children: l
+                            /* @__PURE__ */ r(R, {
+                                color: H && !O ? p.colors.highlight : p.colors.textPrimary,
+                                children: s
                             })
                         ]
                     }),
-                    (c || u) && /* @__PURE__ */ r(j, {
+                    (c || x) && /* @__PURE__ */ r(G, {
                         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  } = m();
-    return /* @__PURE__ */ t(n, {
+}, K = (param)=>{
+    let { title: i , description: e , button: t  } = param;
+    const { isTabletOrSmaller: n  } = h();
+    return /* @__PURE__ */ o(l, {
         space: 32,
         children: [
-            /* @__PURE__ */ t(n, {
-                space: l ? 12 : 16,
+            /* @__PURE__ */ o(l, {
+                space: n ? 12 : 16,
                 children: [
-                    i && /* @__PURE__ */ r(R, {
+                    i && /* @__PURE__ */ r(j, {
                         role: "heading",
                         "aria-level": 1,
                         children: i
                     }),
-                    e && /* @__PURE__ */ r(v, {
+                    e && /* @__PURE__ */ r(B, {
                         children: e
                     })
                 ]
             }),
-            o
+            t
         ]
     });
-}, K = (param)=>{
-    let { isInverse: i = !0 , breadcrumbs: e , header: o , extra: l , sideBySideExtraOnDesktop: c = !1 , dataAttributes: d  } = param;
-    const { isTabletOrSmaller: h  } = m();
-    return /* @__PURE__ */ t(y, {
+}, N = (param)=>{
+    let { isInverse: i = !0 , breadcrumbs: e , header: t , extra: n , sideBySideExtraOnDesktop: a = !1 , dataAttributes: s  } = param;
+    const { isTabletOrSmaller: c  } = h();
+    return /* @__PURE__ */ o(S, {
         isInverse: i,
         dataAttributes: _objectSpread({
             "component-name": "HeaderLayout"
-        }, d),
+        }, s),
         children: [
-            /* @__PURE__ */ r(S, {}),
-            h ? /* @__PURE__ */ r(a, {
+            /* @__PURE__ */ r(v, {}),
+            c ? /* @__PURE__ */ r(d, {
                 paddingTop: 32,
                 paddingBottom: 24,
-                children: /* @__PURE__ */ t(n, {
+                children: /* @__PURE__ */ o(l, {
                     space: 24,
                     children: [
-                        o,
-                        l
+                        t,
+                        n
                     ]
                 })
-            }) : c ? /* @__PURE__ */ r(a, {
+            }) : a ? /* @__PURE__ */ r(d, {
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
-                children: /* @__PURE__ */ r(f, {
+                children: /* @__PURE__ */ r(T, {
                     template: "6+6",
-                    left: /* @__PURE__ */ t(n, {
+                    left: /* @__PURE__ */ o(l, {
                         space: 32,
                         children: [
                             e,
-                            o
+                            t
                         ]
                     }),
-                    right: l
+                    right: n
                 })
-            }) : /* @__PURE__ */ r(a, {
+            }) : /* @__PURE__ */ r(d, {
                 paddingTop: e ? 16 : 48,
                 paddingBottom: 48,
-                children: /* @__PURE__ */ r(f, {
-                    template: "6+6",
-                    left: /* @__PURE__ */ t(n, {
-                        space: 24,
-                        children: [
-                            /* @__PURE__ */ t(n, {
-                                space: 32,
-                                children: [
-                                    e,
-                                    o
-                                ]
-                            }),
-                            l
-                        ]
-                    }),
-                    right: null
+                children: /* @__PURE__ */ o(l, {
+                    space: c ? 24 : 32,
+                    children: [
+                        /* @__PURE__ */ o(l, {
+                            space: 32,
+                            children: [
+                                e,
+                                t
+                            ]
+                        }),
+                        n
+                    ]
                 })
             })
         ]
     });
-}, N = (param)=>{
+}, Q = (param)=>{
     let { isInverse: i = !0 , children: e  } = param;
-    const { isTabletOrSmaller: o  } = m();
-    return /* @__PURE__ */ t(y, {
+    const { isTabletOrSmaller: t  } = h();
+    return /* @__PURE__ */ o(S, {
         isInverse: i,
         children: [
-            /* @__PURE__ */ r(S, {}),
-            o ? /* @__PURE__ */ r(a, {
+            /* @__PURE__ */ r(v, {}),
+            t ? /* @__PURE__ */ r(d, {
                 paddingTop: 12,
                 paddingBottom: 24,
                 children: e
-            }) : /* @__PURE__ */ r(f, {
+            }) : /* @__PURE__ */ r(T, {
                 template: "6+6",
-                left: /* @__PURE__ */ r(a, {
+                left: /* @__PURE__ */ r(d, {
                     paddingY: 48,
                     children: e
                 }),
@@ -250,4 +251,4 @@ const F = (param)=>{
         ]
     });
 };
-export { F as Header, K as HeaderLayout, J as MainSectionHeader, N as MainSectionHeaderLayout };
+export { J as Header, N as HeaderLayout, K as MainSectionHeader, Q as MainSectionHeaderLayout };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./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";
-export { f as container, y as imageContent, _ as textContainerVariant, r as touchableContainer };
+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";
+export { y as container, f as imageContent, _ as textContainerVariant, r as touchableContainer };

package/dist-es/hooks.js

@@ -1,24 +1,24 @@
 import * as n from "react";
-import f from "./theme-context.js";
+import a from "./theme-context.js";
 import m from "./screen-size-context.js";
-import y from "./aria-id-getter-context.js";
-import { listenResize as g } from "./utils/dom.js";
-const H = ()=>{
-    const t = n.useContext(f);
+import g from "./aria-id-getter-context.js";
+import { listenResize as y } from "./utils/dom.js";
+const S = ()=>{
+    const t = n.useContext(a);
     if (!t) throw Error("To use @telefonica/mistica components you must instantiate <ThemeContextProvider> as their parent.");
     return t;
-}, T = (t)=>{
+}, I = (t)=>{
     n.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;
         }
@@ -26,23 +26,23 @@ const H = ()=>{
     }, [
         t
     ]);
-}, z = ()=>n.useContext(m), C = ()=>{
-    const [t, i] = n.useState(0), [e, s] = n.useState(0), [r, c] = n.useState(null), d = n.useCallback((o)=>{
-        if (!o) {
-            i(0), s(0);
+}, H = ()=>n.useContext(m), T = ()=>{
+    const [t, i] = n.useState(0), [e, o] = n.useState(0), [r, c] = n.useState(null), d = n.useCallback((s)=>{
+        if (!s) {
+            i(0), o(0);
             return;
         }
-        const { width: h , height: w  } = o[0].contentRect;
-        i(h), s(w);
-    }, []), u = n.useCallback((o)=>{
-        c(o);
+        const { width: h , height: w  } = s[0].contentRect;
+        i(h), o(w);
+    }, []), u = n.useCallback((s)=>{
+        c(s);
     }, []);
     return n.useEffect(()=>{
         if (!r) {
-            i(0), s(0);
+            i(0), o(0);
             return;
         }
-        return g(r, d);
+        return y(r, d);
     }, [
         r,
         d
@@ -51,20 +51,23 @@ const H = ()=>{
         height: e,
         ref: u
     };
-}, S = (t)=>{
-    const i = n.useId();
-    return t || i;
-}, b = n.useId !== void 0, R = b ? S : (t)=>{
-    const i = n.useContext(y);
-    return n.useRef(t || i()).current;
+}, z = (t)=>{
+    const { useId: i  } = S();
+    if (i) {
+        const e = i();
+        return t || e;
+    } else {
+        const e1 = n.useContext(g);
+        return n.useRef(t || e1()).current;
+    }
 }, l = ()=>{
-    const [t, i] = n.useState(typeof window < "u" ? window.innerHeight : 1200), [e, s] = n.useState(typeof window < "u" ? window.innerWidth : 800), [r, c] = n.useState(typeof window < "u" ? window.screen.availHeight : 1200), [d, u] = n.useState(typeof window < "u" ? window.screen.availWidth : 800);
+    const [t, i] = n.useState(typeof window < "u" ? window.innerHeight : 1200), [e, o] = n.useState(typeof window < "u" ? window.innerWidth : 800), [r, c] = n.useState(typeof window < "u" ? window.screen.availHeight : 1200), [d, u] = n.useState(typeof window < "u" ? window.screen.availWidth : 800);
     return n.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);
         };
     }, []), n.useMemo(()=>({
             height: t,
@@ -77,17 +80,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" ? n.useLayoutEffect : n.useEffect, D = (t, i, e)=>{
-    const [s, r] = n.useState(i);
+}, L = typeof window < "u" ? n.useLayoutEffect : n.useEffect, M = (t, i, e)=>{
+    const [o, r] = n.useState(i);
     return n.useEffect(()=>{
         if (!t.current) return;
         if (typeof window.IntersectionObserver > "u") return ()=>{};
@@ -106,6 +109,6 @@ const H = ()=>{
         e == null ? void 0 : e.root,
         e == null ? void 0 : e.rootMargin,
         e == null ? void 0 : e.threshold
-    ]), s;
+    ]), o;
 };
-export { R as useAriaId, T as useDisableBodyScroll, C as useElementDimensions, D as useIsInViewport, M as useIsomorphicLayoutEffect, L as useScreenHeight, z as useScreenSize, H as useTheme, A as useWindowHeight, l as useWindowSize, B as useWindowWidth };
+export { z as useAriaId, I as useDisableBodyScroll, T as useElementDimensions, M as useIsInViewport, L as useIsomorphicLayoutEffect, B as useScreenHeight, H as useScreenSize, S as useTheme, C as useWindowHeight, l as useWindowSize, R as useWindowWidth };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./icon-button.css.ts.vanilla.js";
-var t = "yqt1oe1 _1y2v1nf5a";
+var t = "yqt1oe1 _1y2v1nf5k";
 export { t as base };

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

@@ -1,4 +1,4 @@
 import "./sprinkles.css.ts.vanilla.js";
 import "./image.css.ts.vanilla.js";
-var y = 300, f = "_17tt25r1 _1y2v1nf9e _1y2v1nf9s _1y2v1nf58 _1y2v1nf7d _1y2v1nf7t _1y2v1nfay _1y2v1nf91 _1y2v1nf92";
-export { y as FADE_IN_DURATION_MS, f as image };
+var n = 300, f = "_17tt25r1 _1y2v1nf9o _1y2v1nfa2 _1y2v1nf5i _1y2v1nf7n _1y2v1nf83 _1y2v1nfb8 _1y2v1nf9b _1y2v1nf9c";
+export { n as FADE_IN_DURATION_MS, f as image };