@telefonica/mistica 15.0.0 → 15.1.0

package/dist/header.js

@@ -11,16 +11,16 @@ function _export(target, all) {
 }
 _export(exports, {
     Header: function() {
-        return $;
+        return E;
     },
     HeaderLayout: function() {
-        return Y;
+        return rr;
     },
     MainSectionHeader: function() {
-        return E;
+        return Y;
     },
     MainSectionHeaderLayout: function() {
-        return rr;
+        return or;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -120,20 +120,20 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const $ = (param)=>{
-    let { pretitle: o, title: e, description: t, dataAttributes: d, small: m = !1, preamount: s, amount: p, button: n, subtitle: c, isErrorAmount: h, secondaryButton: x } = param;
-    const B = (0, _themevariantcontext.useIsInverseVariant)(), g = (u, T)=>{
+const E = (param)=>{
+    let { pretitle: o, title: e, titleAs: t = "h2", description: l, dataAttributes: p, small: h = !1, preamount: m, amount: a, button: n, subtitle: s, isErrorAmount: B, secondaryButton: x } = param;
+    const H = (0, _themevariantcontext.useIsInverseVariant)(), g = (u, T)=>{
         if (typeof u == "string") return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
             regular: !0
         }, T), {
             children: u
         }));
-        const { text: q } = u, H = _object_without_properties(u, [
+        const { text: w } = u, L = _object_without_properties(u, [
             "text"
         ]);
         return /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, _object_spread_props(_object_spread({
             regular: !0
-        }, T, H), {
+        }, T, L), {
             children: u.text
         }));
     };
@@ -142,9 +142,9 @@ const $ = (param)=>{
             mobile: 24,
             desktop: 32
         },
-        dataAttributes: d,
+        dataAttributes: p,
         children: [
-            (e || o || t) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+            (e || o || l) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                 paddingRight: 16,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                     space: 8,
@@ -152,37 +152,37 @@ const $ = (param)=>{
                         o && g(o, {
                             color: _skincontractcssmistica.vars.colors.textPrimary
                         }),
-                        e && (m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title2, {
-                            as: "h2",
+                        e && (h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title2, {
+                            as: t,
                             children: e
                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_title.Title3, {
-                            as: "h2",
+                            as: t,
                             children: e
                         })),
-                        t && (m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                        l && (h ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: t
+                            children: l
                         }) : /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                             regular: !0,
                             color: _skincontractcssmistica.vars.colors.textSecondary,
-                            children: t
+                            children: l
                         }))
                     ]
                 })
             }),
-            (s || p || n || c) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+            (m || a || n || s) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                 space: 16,
                 children: [
-                    (s || p) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
+                    (m || a) && /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                         space: 8,
                         children: [
-                            s && g(s, {
+                            m && g(m, {
                                 color: _skincontractcssmistica.vars.colors.textPrimary
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                color: h && !B ? _skincontractcssmistica.vars.colors.highlight : _skincontractcssmistica.vars.colors.textPrimary,
-                                children: p
+                                color: B && !H ? _skincontractcssmistica.vars.colors.highlight : _skincontractcssmistica.vars.colors.textPrimary,
+                                children: a
                             })
                         ]
                     }),
@@ -190,13 +190,13 @@ const $ = (param)=>{
                         primaryButton: n,
                         secondaryButton: x
                     }),
-                    c && g(c, {})
+                    s && g(s, {})
                 ]
             })
         ]
     });
-}, E = (param)=>{
-    let { title: o, description: e, button: t } = param;
+}, Y = (param)=>{
+    let { title: o, titleAs: e = "h1", description: t, button: l } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
         space: 32,
         children: [
@@ -207,21 +207,20 @@ const $ = (param)=>{
                 },
                 children: [
                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text7, {
-                        role: "heading",
-                        "aria-level": 1,
+                        as: e,
                         children: o
                     }),
-                    e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
-                        children: e
+                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text6, {
+                        children: t
                     })
                 ]
             }),
-            t
+            l
         ]
     });
-}, Y = (param)=>{
-    let { isInverse: o = !0, breadcrumbs: e, header: t, extra: d, sideBySideExtraOnDesktop: m = !1, dataAttributes: s, bleed: p = !1, noPaddingY: n = !1 } = param;
-    const c = p && o && d, h = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+}, rr = (param)=>{
+    let { isInverse: o = !0, breadcrumbs: e, header: t, extra: l, sideBySideExtraOnDesktop: p = !1, dataAttributes: h, bleed: m = !1, noPaddingY: a = !1 } = param;
+    const n = m && o && l, s = /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
         children: [
             e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _headercssmistica.breadcrumbs,
@@ -234,30 +233,30 @@ const $ = (param)=>{
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
         "component-name": "HeaderLayout"
-    }, s))), {
+    }, h))), {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
                 isInverse: o,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                    paddingTop: n ? 0 : {
+                    paddingTop: a ? 0 : {
                         mobile: t ? 32 : 0,
                         desktop: e ? 16 : 48
                     },
                     paddingBottom: {
-                        mobile: n && !c ? 0 : 24,
-                        desktop: c && !m ? 32 : n ? 0 : 48
+                        mobile: a && !n ? 0 : 24,
+                        desktop: n && !p ? 32 : a ? 0 : 48
                     },
-                    children: m ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
+                    children: p ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                         template: "6+6",
-                        left: h,
+                        left: s,
                         right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                            className: c ? _headercssmistica.hideOnTabletOrSmaller : "",
+                            className: n ? _headercssmistica.hideOnTabletOrSmaller : "",
                             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                 paddingTop: {
                                     mobile: t ? 24 : 0,
                                     desktop: 0
                                 },
-                                children: d
+                                children: l
                             })
                         })
                     }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
@@ -266,20 +265,20 @@ const $ = (param)=>{
                             desktop: 32
                         } : 0,
                         children: [
-                            h,
-                            !c && d
+                            s,
+                            !n && l
                         ]
                     })
                 })
             }),
-            c && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
-                className: m ? _headercssmistica.hideOnDesktop : "",
+            n && /* @__PURE__ */ (0, _jsxruntime.jsx)(_responsivelayout.default, {
+                className: p ? _headercssmistica.hideOnDesktop : "",
                 backgroundColor: `linear-gradient(to bottom, ${_skincontractcssmistica.vars.colors.backgroundBrand} 40px, ${_skincontractcssmistica.vars.colors.background} 0%)`,
-                children: d
+                children: l
             })
         ]
     }));
-}, rr = (param)=>{
+}, or = (param)=>{
     let { isInverse: o = !0, children: e, dataAttributes: t } = param;
     return (0, _overscrollcolorcontext.useSetOverscrollColor)(o ? {
         topColor: _skincontractcssmistica.vars.colors.backgroundBrandTop

package/dist/hero.css-mistica.js

@@ -16,7 +16,7 @@ _export(exports, {
         return v;
     },
     containerDesktop: function() {
-        return a;
+        return n;
     },
     containerMobile: function() {
         return _;
@@ -31,6 +31,6 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./hero.css.ts.vanilla.css-mistica.js");
-var t = "_16rbpto6 _1y2v1nfh8 _1y2v1nfhu _1y2v1nfho", v = "_16rbpto2 _1y2v1nfh8", a = "_1y2v1nfhn _1y2v1nfic", _ = "_1y2v1nfhe", i = "_16rbpto7", p = {
+var t = "_16rbpto6 _1y2v1nfha _1y2v1nfhw _1y2v1nfhq", v = "_16rbpto2 _1y2v1nfha", n = "_1y2v1nfhp _1y2v1nfie", _ = "_1y2v1nfhg", i = "_16rbpto7", p = {
     height: "var(--_16rbpto0)"
 };

package/dist/hero.d.ts

@@ -11,6 +11,7 @@ type HeroProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
     title?: string;
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     description?: string;
     descriptionLinesMax?: number;
     extra?: React.ReactNode;

package/dist/hero.js

@@ -160,8 +160,8 @@ const C = (param)=>{
             children: e
         })
     });
-}, g = (param)=>{
-    let { headline: e, title: o, pretitle: a, description: n, descriptionLinesMax: d, extra: i, button: l, secondaryButton: f, buttonLink: m } = param;
+}, v = (param)=>{
+    let { headline: e, title: o, titleAs: i = "h1", pretitle: t, description: n, descriptionLinesMax: l, extra: s, button: p, secondaryButton: h, buttonLink: c } = param;
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", {
         className: (0, _sprinklescssmistica.sprinkles)({
             height: "100%",
@@ -179,13 +179,13 @@ const C = (param)=>{
                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                 space: 8,
                                 children: [
-                                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
+                                    t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
                                         as: "p",
                                         regular: !0,
-                                        children: a
+                                        children: t
                                     }),
                                     o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text8, {
-                                        as: "h1",
+                                        as: i,
                                         children: o
                                     })
                                 ]
@@ -194,22 +194,22 @@ const C = (param)=>{
                                 as: "p",
                                 regular: !0,
                                 color: _skincontractcssmistica.vars.colors.textSecondary,
-                                truncate: d,
+                                truncate: l,
                                 children: n
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        children: i
+                    s && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        children: s
                     })
                 ]
             }),
-            (l || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+            (p || c) && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                 className: _herocssmistica.actions,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
-                    primaryButton: l,
-                    secondaryButton: f,
-                    link: m
+                    primaryButton: p,
+                    secondaryButton: h,
+                    link: c
                 })
             })
         ]
@@ -219,23 +219,23 @@ const C = (param)=>{
     alternative: _skincontractcssmistica.vars.colors.backgroundAlternative,
     brand: _skincontractcssmistica.vars.colors.backgroundBrand,
     "brand-secondary": _skincontractcssmistica.vars.colors.backgroundBrandSecondary
-}, Y = /*#__PURE__*/ _react.forwardRef((_param, l)=>{
-    var { height: e, background: o = "default", media: a, desktopMediaPosition: n = "left", dataAttributes: d } = _param, i = _object_without_properties(_param, [
+}, Y = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
+    var { height: e, background: o = "default", media: i, desktopMediaPosition: t = "left", dataAttributes: n } = _param, l = _object_without_properties(_param, [
         "height",
         "background",
         "media",
         "desktopMediaPosition",
         "dataAttributes"
     ]);
-    const { isTabletOrSmaller: f } = (0, _hooks.useScreenSize)(), m = (0, _carousel.useIsInsideSlideshowContext)(), v = o === "brand" || o === "brand-secondary";
-    if (f) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+    const { isTabletOrSmaller: p } = (0, _hooks.useScreenSize)(), h = (0, _carousel.useIsInsideSlideshowContext)(), c = o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: (0, _css.applyCssVars)({
             [_imagecssmistica.vars.mediaBorderRadius]: "0px"
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
-        }, d))), {
-            ref: l,
+        }, n))), {
+            ref: s,
             style: _object_spread({
                 backgroundColor: R[o]
             }, e === "100vh" ? {
@@ -245,24 +245,24 @@ const C = (param)=>{
             })),
             className: (0, _classnames.default)(_herocssmistica.container, _herocssmistica.containerMobile),
             children: [
-                a,
+                i,
                 /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
-                    isInverse: v,
+                    isInverse: c,
                     children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                         paddingTop: 24,
-                        paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
+                        paddingBottom: h ? 48 : 24,
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
                     })
                 })
             ]
         }))
     });
-    const H = n === "left" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+    const H = t === "left" ? i : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingRight: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
-    }), w = n === "right" ? a : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
+    }), w = t === "right" ? i : /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(g, _object_spread({}, i))
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(v, _object_spread({}, l))
     });
     return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
         style: (0, _css.applyCssVars)({
@@ -270,8 +270,8 @@ const C = (param)=>{
         }),
         children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({}, (0, _dom.getPrefixedDataAttributes)(_object_spread({
             "component-name": "Hero"
-        }, d))), {
-            ref: l,
+        }, n))), {
+            ref: s,
             style: _object_spread({
                 backgroundColor: R[o]
             }, e === "100vh" ? {
@@ -285,7 +285,7 @@ const C = (param)=>{
                 alignItems: "center"
             }),
             children: /* @__PURE__ */ (0, _jsxruntime.jsx)(C, {
-                isInverse: v,
+                isInverse: c,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_gridlayout.default, {
                     template: "6+6",
                     left: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {

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

@@ -10,21 +10,21 @@ function _export(target, all) {
 }
 _export(exports, {
     container: function() {
-        return y;
+        return f;
     },
     imageContent: function() {
-        return f;
+        return y;
     },
     textContainerVariant: function() {
         return _;
     },
     touchableContainer: function() {
-        return h;
+        return a;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./highlighted-card.css.ts.vanilla.css-mistica.js");
-var y = "wrb8722 _1y2v1nfh8 _1y2v1nfhd _1y2v1nfhk _1y2v1nfhq", f = "wrb8725 _1y2v1nfh8", _ = {
-    withImage: "wrb8728 wrb8727 _1y2v1nfh8 _1y2v1nfhe _1y2v1nfhm _1y2v1nf7m _1y2v1nf8v _1y2v1nf9y",
-    withoutImage: "wrb8729 wrb8727 _1y2v1nfh8 _1y2v1nfhe _1y2v1nfhm _1y2v1nf7m _1y2v1nf8v _1y2v1nf9y"
-}, h = "_1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfh8 _1y2v1nfhq _1y2v1nfjq _1y2v1nfhv _1y2v1nf70";
+var f = "wrb8722 _1y2v1nfha _1y2v1nfhf _1y2v1nfhm _1y2v1nfhs", y = "wrb8725 _1y2v1nfha", _ = {
+    withImage: "wrb8728 wrb8727 _1y2v1nfha _1y2v1nfhg _1y2v1nfho _1y2v1nf7o _1y2v1nf8x _1y2v1nfa0",
+    withoutImage: "wrb8729 wrb8727 _1y2v1nfha _1y2v1nfhg _1y2v1nfho _1y2v1nf7o _1y2v1nf8x _1y2v1nfa0"
+}, a = "_1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfha _1y2v1nfhs _1y2v1nfjs _1y2v1nfhx _1y2v1nf72";

package/dist/highlighted-card.d.ts

@@ -12,9 +12,8 @@ type TextProps = {
     description: string;
 };
 type CommonProps = TextProps & {
-    title?: string;
+    titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     titleLinesMax?: number;
-    description?: string;
     descriptionLinesMax?: number;
     imageUrl?: string;
     imageFit?: 'fit' | 'fill' | 'fill-center';

package/dist/highlighted-card.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
     enumerable: true,
     get: function() {
-        return F;
+        return U;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -145,11 +145,11 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const O = /*#__PURE__*/ _react.forwardRef((e, t)=>{
+const S = /*#__PURE__*/ _react.forwardRef((e, t)=>{
     var _e_isInverse;
-    const { title: s, description: n, imageUrl: a, imageFit: r } = e, u = (0, _themevariantcontext.useIsInverseVariant)(), f = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : u, d = (0, _maybedismissable.useIsDismissable)(), { textPresets: b } = (0, _hooks.useTheme)(), o = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
+    const { title: s, description: n, imageUrl: a, imageFit: r, titleAs: u = "h3" } = e, f = (0, _themevariantcontext.useIsInverseVariant)(), b = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : f, d = (0, _maybedismissable.useIsDismissable)(), { textPresets: v } = (0, _hooks.useTheme)(), o = /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
         ref: t,
-        isInverse: f,
+        isInverse: b,
         className: _highlightedcardcssmistica.container,
         dataAttributes: _object_spread({
             "component-name": "HighlightedCard"
@@ -171,8 +171,8 @@ const O = /*#__PURE__*/ _react.forwardRef((e, t)=>{
                                 desktopSize: 20,
                                 desktopLineHeight: "28px",
                                 truncate: e.titleLinesMax,
-                                weight: b.cardTitle.weight,
-                                as: "h3",
+                                weight: v.cardTitle.weight,
+                                as: u,
                                 hyphens: "auto",
                                 children: s
                             }),
@@ -228,7 +228,7 @@ const O = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         className: _highlightedcardcssmistica.touchableContainer,
         children: o
     }) : o;
-}), S = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
+}), L = /*#__PURE__*/ _react.forwardRef((_param, s)=>{
     var { "aria-label": e } = _param, t = _object_without_properties(_param, [
         "aria-label"
     ]);
@@ -240,9 +240,9 @@ const O = /*#__PURE__*/ _react.forwardRef((e, t)=>{
         width: t.width,
         isOverMedia: !!t.imageUrl,
         isInverse: r,
-        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(O, _object_spread_props(_object_spread({}, t), {
+        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, t), {
             "aria-label": n,
             ref: s
         }))
     });
-}), F = S;
+}), U = L;

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

@@ -19,4 +19,4 @@ _export(exports, {
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
 require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./horizontal-scroll.css.ts.vanilla.css-mistica.js");
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfh8";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfha";

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

@@ -37,25 +37,25 @@ _export(exports, {
         return d;
     },
     iconContainerSize: function() {
-        return q;
+        return i;
     },
     iconSize: function() {
-        return i;
+        return q;
     },
-    interactiveAreaBleed: function() {
+    isLoading: function() {
         return s;
     },
-    isLoading: function() {
+    minimumInteractiveArea: function() {
         return _;
     },
     overlay: function() {
         return u;
     },
     overlayContainer: function() {
-        return h;
+        return m;
     },
     spinner: function() {
-        return m;
+        return p;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
@@ -70,9 +70,9 @@ var a = {
     default: "yqt1oe1a",
     small: "yqt1oe1b"
 }, o = {
-    default: "yqt1oe12 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh",
-    small: "yqt1oe13 _1y2v1nf71 _1y2v1nf8a _1y2v1nf9j _1y2v1nfas _1y2v1nfjq _1y2v1nf70 _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh"
-}, y = "yqt1oe1m _1y2v1nfhc", v = "yqt1oey", l = "yqt1oe1i _1y2v1nfh2 _1y2v1nfh9", f = {
+    default: "yqt1oe12 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfha _1y2v1nfhp _1y2v1nfhj",
+    small: "yqt1oe13 _1y2v1nf73 _1y2v1nf8c _1y2v1nf9l _1y2v1nfau _1y2v1nfjs _1y2v1nf72 _1y2v1nfha _1y2v1nfhp _1y2v1nfhj"
+}, y = "yqt1oe1m _1y2v1nfhe", v = "yqt1oey", l = "yqt1oe1i _1y2v1nfh4 _1y2v1nfhb", f = {
     "brand-solid-default": "yqt1oe4",
     "brand-solid-inverse": "yqt1oe5",
     "brand-solid-alternative": "yqt1oe6",
@@ -104,15 +104,12 @@ var a = {
     "neutral-media": "yqt1oew",
     "danger-media": "yqt1oex"
 }, d = {
-    default: "yqt1oe1e yqt1oe1d _1y2v1nfjr _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh _1y2v1nfk9 _1y2v1nfh2",
-    small: "yqt1oe1f yqt1oe1d _1y2v1nfjr _1y2v1nfh8 _1y2v1nfhn _1y2v1nfhh _1y2v1nfk9 _1y2v1nfh2"
-}, q = {
+    default: "yqt1oe1e yqt1oe1d _1y2v1nfjt _1y2v1nfha _1y2v1nfhp _1y2v1nfhj _1y2v1nfkb _1y2v1nfh4",
+    small: "yqt1oe1f yqt1oe1d _1y2v1nfjt _1y2v1nfha _1y2v1nfhp _1y2v1nfhj _1y2v1nfkb _1y2v1nfh4"
+}, i = {
     default: "calc(1.5rem + 24px)",
     small: "calc(1.25rem + 12px)"
-}, i = {
+}, q = {
     default: "1.5rem",
     small: "1.25rem"
-}, s = {
-    default: "yqt1oe14",
-    small: "yqt1oe15"
-}, _ = "yqt1oez", u = "yqt1oe1g", h = "yqt1oe10", m = "yqt1oe1k _1y2v1nfh3";
+}, s = "yqt1oez", _ = "yqt1oe15", u = "yqt1oe1g", m = "yqt1oe10", p = "yqt1oe1k _1y2v1nfh5";

package/dist/icon-button.css.d.ts

@@ -11,7 +11,7 @@ export declare const iconContainerSize: {
     small: string;
 };
 export declare const buttonContainer: Record<"default" | "small", string>;
-export declare const interactiveAreaBleed: Record<"default" | "small", string>;
+export declare const minimumInteractiveArea: string;
 export declare const bleedLeft: Record<"default" | "small", string>;
 export declare const bleedRight: Record<"default" | "small", string>;
 export declare const bleedY: Record<"default" | "small", string>;