@telefonica/mistica 14.48.0 → 15.1.0

package/dist-es/header.js

@@ -80,180 +80,179 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import f from "./box.js";
-import a from "./stack.js";
-import { useIsInverseVariant as L } from "./theme-variant-context.js";
+import d from "./stack.js";
+import { useIsInverseVariant as S } from "./theme-variant-context.js";
 import b from "./responsive-layout.js";
 import y from "./grid-layout.js";
 import { useSetOverscrollColor as v } from "./overscroll-color-context.js";
-import { Text2 as S, Text3 as k, Text8 as C, Text7 as A, Text6 as M } from "./text.js";
-import N from "./button-group.js";
-import { vars as l } from "./skins/skin-contract.css-mistica.js";
-import { hideOnTabletOrSmaller as R, hideOnDesktop as j, breadcrumbs as G } from "./header.css-mistica.js";
-import { getPrefixedDataAttributes as O } from "./utils/dom.js";
-import { Title2 as P, Title3 as V } from "./title.js";
-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 = L(), g = (u, T)=>{
+import { Text2 as C, Text3 as k, Text8 as M, Text7 as N, Text6 as R } from "./text.js";
+import j from "./button-group.js";
+import { vars as c } from "./skins/skin-contract.css-mistica.js";
+import { hideOnTabletOrSmaller as A, hideOnDesktop as G, breadcrumbs as O } from "./header.css-mistica.js";
+import { getPrefixedDataAttributes as P } from "./utils/dom.js";
+import { Title2 as V, Title3 as q } from "./title.js";
+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 = S(), g = (u, T)=>{
         if (typeof u == "string") return /* @__PURE__ */ r(k, _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__ */ r(k, _object_spread_props(_object_spread({
             regular: !0
-        }, T, H), {
+        }, T, L), {
             children: u.text
         }));
     };
-    return /* @__PURE__ */ i(a, {
+    return /* @__PURE__ */ i(d, {
         space: {
             mobile: 24,
             desktop: 32
         },
-        dataAttributes: d,
+        dataAttributes: p,
         children: [
-            (e || o || t) && /* @__PURE__ */ r(f, {
+            (e || o || l) && /* @__PURE__ */ r(f, {
                 paddingRight: 16,
-                children: /* @__PURE__ */ i(a, {
+                children: /* @__PURE__ */ i(d, {
                     space: 8,
                     children: [
                         o && g(o, {
-                            color: l.colors.textPrimary
+                            color: c.colors.textPrimary
                         }),
-                        e && (m ? /* @__PURE__ */ r(P, {
-                            as: "h2",
+                        e && (h ? /* @__PURE__ */ r(V, {
+                            as: t,
                             children: e
-                        }) : /* @__PURE__ */ r(V, {
-                            as: "h2",
+                        }) : /* @__PURE__ */ r(q, {
+                            as: t,
                             children: e
                         })),
-                        t && (m ? /* @__PURE__ */ r(S, {
+                        l && (h ? /* @__PURE__ */ r(C, {
                             regular: !0,
-                            color: l.colors.textSecondary,
-                            children: t
+                            color: c.colors.textSecondary,
+                            children: l
                         }) : /* @__PURE__ */ r(k, {
                             regular: !0,
-                            color: l.colors.textSecondary,
-                            children: t
+                            color: c.colors.textSecondary,
+                            children: l
                         }))
                     ]
                 })
             }),
-            (s || p || n || c) && /* @__PURE__ */ i(a, {
+            (m || a || n || s) && /* @__PURE__ */ i(d, {
                 space: 16,
                 children: [
-                    (s || p) && /* @__PURE__ */ i(a, {
+                    (m || a) && /* @__PURE__ */ i(d, {
                         space: 8,
                         children: [
-                            s && g(s, {
-                                color: l.colors.textPrimary
+                            m && g(m, {
+                                color: c.colors.textPrimary
                             }),
-                            /* @__PURE__ */ r(C, {
-                                color: h && !B ? l.colors.highlight : l.colors.textPrimary,
-                                children: p
+                            /* @__PURE__ */ r(M, {
+                                color: B && !H ? c.colors.highlight : c.colors.textPrimary,
+                                children: a
                             })
                         ]
                     }),
-                    (n || x) && /* @__PURE__ */ r(N, {
+                    (n || x) && /* @__PURE__ */ r(j, {
                         primaryButton: n,
                         secondaryButton: x
                     }),
-                    c && g(c, {})
+                    s && g(s, {})
                 ]
             })
         ]
     });
-}, E = (param)=>{
-    let { title: o, description: e, button: t } = param;
-    return /* @__PURE__ */ i(a, {
+}, Y = (param)=>{
+    let { title: o, titleAs: e = "h1", description: t, button: l } = param;
+    return /* @__PURE__ */ i(d, {
         space: 32,
         children: [
-            /* @__PURE__ */ i(a, {
+            /* @__PURE__ */ i(d, {
                 space: {
                     mobile: 12,
                     desktop: 16
                 },
                 children: [
-                    o && /* @__PURE__ */ r(A, {
-                        role: "heading",
-                        "aria-level": 1,
+                    o && /* @__PURE__ */ r(N, {
+                        as: e,
                         children: o
                     }),
-                    e && /* @__PURE__ */ r(M, {
-                        children: e
+                    t && /* @__PURE__ */ r(R, {
+                        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__ */ i("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__ */ i("div", {
         children: [
             e && /* @__PURE__ */ r("div", {
-                className: G,
+                className: O,
                 children: e
             }),
             t
         ]
     });
     return v(o ? {
-        topColor: l.colors.backgroundBrandTop
-    } : {}), /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, O(_object_spread({
+        topColor: c.colors.backgroundBrandTop
+    } : {}), /* @__PURE__ */ i("div", _object_spread_props(_object_spread({}, P(_object_spread({
         "component-name": "HeaderLayout"
-    }, s))), {
+    }, h))), {
         children: [
             /* @__PURE__ */ r(b, {
                 isInverse: o,
                 children: /* @__PURE__ */ r(f, {
-                    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__ */ r(y, {
+                    children: p ? /* @__PURE__ */ r(y, {
                         template: "6+6",
-                        left: h,
+                        left: s,
                         right: /* @__PURE__ */ r("div", {
-                            className: c ? R : "",
+                            className: n ? A : "",
                             children: /* @__PURE__ */ r(f, {
                                 paddingTop: {
                                     mobile: t ? 24 : 0,
                                     desktop: 0
                                 },
-                                children: d
+                                children: l
                             })
                         })
-                    }) : /* @__PURE__ */ i(a, {
+                    }) : /* @__PURE__ */ i(d, {
                         space: t ? {
                             mobile: 24,
                             desktop: 32
                         } : 0,
                         children: [
-                            h,
-                            !c && d
+                            s,
+                            !n && l
                         ]
                     })
                 })
             }),
-            c && /* @__PURE__ */ r(b, {
-                className: m ? j : "",
-                backgroundColor: `linear-gradient(to bottom, ${l.colors.backgroundBrand} 40px, ${l.colors.background} 0%)`,
-                children: d
+            n && /* @__PURE__ */ r(b, {
+                className: p ? G : "",
+                backgroundColor: `linear-gradient(to bottom, ${c.colors.backgroundBrand} 40px, ${c.colors.background} 0%)`,
+                children: l
             })
         ]
     }));
-}, rr = (param)=>{
+}, or = (param)=>{
     let { isInverse: o = !0, children: e, dataAttributes: t } = param;
     return v(o ? {
-        topColor: l.colors.backgroundBrandTop
+        topColor: c.colors.backgroundBrandTop
     } : {}), /* @__PURE__ */ r(b, {
         isInverse: o,
         dataAttributes: _object_spread({
@@ -276,4 +275,4 @@ const $ = (param)=>{
         })
     });
 };
-export { $ as Header, Y as HeaderLayout, E as MainSectionHeader, rr as MainSectionHeaderLayout };
+export { E as Header, rr as HeaderLayout, Y as MainSectionHeader, or as MainSectionHeaderLayout };

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

@@ -1,7 +1,7 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./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)"
 };
-export { t as actions, v as container, a as containerDesktop, _ as containerMobile, i as layout, p as vars };
+export { t as actions, v as container, n as containerDesktop, _ as containerMobile, i as layout, p as vars };

package/dist-es/hero.js

@@ -78,23 +78,23 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
 import * as I from "react";
-import h from "classnames";
+import u from "classnames";
 import { useScreenSize as T } from "./hooks.js";
 import { Text3 as y, Text8 as D } from "./text.js";
 import O from "./grid-layout.js";
-import s from "./box.js";
+import d from "./box.js";
 import x from "./stack.js";
 import j from "./button-group.js";
-import { vars as t } from "./skins/skin-contract.css-mistica.js";
-import { container as u, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
+import { vars as a } from "./skins/skin-contract.css-mistica.js";
+import { container as g, containerMobile as G, containerDesktop as b, layout as L, actions as $, vars as B } from "./hero.css-mistica.js";
 import { vars as N } from "./image.css-mistica.js";
 import { useIsInsideSlideshowContext as A } from "./carousel.js";
 import { getPrefixedDataAttributes as S } from "./utils/dom.js";
 import { sprinkles as k } from "./sprinkles.css-mistica.js";
 import { ThemeVariant as V } from "./theme-variant-context.js";
-import { applyCssVars as p } from "./utils/css.js";
+import { applyCssVars as f } from "./utils/css.js";
 const C = (param)=>{
     let { children: e, isInverse: o } = param;
     return /* @__PURE__ */ r(V, {
@@ -104,9 +104,9 @@ 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;
-    return /* @__PURE__ */ c("section", {
+}, 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__ */ m("section", {
         className: k({
             height: "100%",
             display: "flex",
@@ -114,22 +114,22 @@ const C = (param)=>{
             flexDirection: "column"
         }),
         children: [
-            /* @__PURE__ */ c("div", {
+            /* @__PURE__ */ m("div", {
                 children: [
-                    /* @__PURE__ */ c(x, {
+                    /* @__PURE__ */ m(x, {
                         space: 16,
                         children: [
                             e && e,
-                            /* @__PURE__ */ c(x, {
+                            /* @__PURE__ */ m(x, {
                                 space: 8,
                                 children: [
-                                    a && /* @__PURE__ */ r(y, {
+                                    t && /* @__PURE__ */ r(y, {
                                         as: "p",
                                         regular: !0,
-                                        children: a
+                                        children: t
                                     }),
                                     o && /* @__PURE__ */ r(D, {
-                                        as: "h1",
+                                        as: i,
                                         children: o
                                     })
                                 ]
@@ -137,90 +137,90 @@ const C = (param)=>{
                             n && /* @__PURE__ */ r(y, {
                                 as: "p",
                                 regular: !0,
-                                color: t.colors.textSecondary,
-                                truncate: d,
+                                color: a.colors.textSecondary,
+                                truncate: l,
                                 children: n
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ r("div", {
-                        children: i
+                    s && /* @__PURE__ */ r("div", {
+                        children: s
                     })
                 ]
             }),
-            (l || m) && /* @__PURE__ */ r("div", {
+            (p || c) && /* @__PURE__ */ r("div", {
                 className: $,
                 children: /* @__PURE__ */ r(j, {
-                    primaryButton: l,
-                    secondaryButton: f,
-                    link: m
+                    primaryButton: p,
+                    secondaryButton: h,
+                    link: c
                 })
             })
         ]
     });
 }, R = {
-    default: t.colors.background,
-    alternative: t.colors.backgroundAlternative,
-    brand: t.colors.backgroundBrand,
-    "brand-secondary": t.colors.backgroundBrandSecondary
-}, Y = /*#__PURE__*/ I.forwardRef((_param, l)=>{
-    var { height: e, background: o = "default", media: a, desktopMediaPosition: n = "left", dataAttributes: d } = _param, i = _object_without_properties(_param, [
+    default: a.colors.background,
+    alternative: a.colors.backgroundAlternative,
+    brand: a.colors.backgroundBrand,
+    "brand-secondary": a.colors.backgroundBrandSecondary
+}, Y = /*#__PURE__*/ I.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 } = T(), m = A(), v = o === "brand" || o === "brand-secondary";
-    if (f) return /* @__PURE__ */ r("div", {
-        style: p({
+    const { isTabletOrSmaller: p } = T(), h = A(), c = o === "brand" || o === "brand-secondary";
+    if (p) return /* @__PURE__ */ r("div", {
+        style: f({
             [N.mediaBorderRadius]: "0px"
         }),
-        children: /* @__PURE__ */ c("div", _object_spread_props(_object_spread({}, S(_object_spread({
+        children: /* @__PURE__ */ m("div", _object_spread_props(_object_spread({}, S(_object_spread({
             "component-name": "Hero"
-        }, d))), {
-            ref: l,
+        }, n))), {
+            ref: s,
             style: _object_spread({
                 backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, p({
+            } : {}, f({
                 [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
-            className: h(u, G),
+            className: u(g, G),
             children: [
-                a,
+                i,
                 /* @__PURE__ */ r(C, {
-                    isInverse: v,
-                    children: /* @__PURE__ */ r(s, {
+                    isInverse: c,
+                    children: /* @__PURE__ */ r(d, {
                         paddingTop: 24,
-                        paddingBottom: m ? 48 : 24,
-                        children: /* @__PURE__ */ r(g, _object_spread({}, i))
+                        paddingBottom: h ? 48 : 24,
+                        children: /* @__PURE__ */ r(v, _object_spread({}, l))
                     })
                 })
             ]
         }))
     });
-    const H = n === "left" ? a : /* @__PURE__ */ r(s, {
+    const H = t === "left" ? i : /* @__PURE__ */ r(d, {
         paddingRight: 24,
-        children: /* @__PURE__ */ r(g, _object_spread({}, i))
-    }), w = n === "right" ? a : /* @__PURE__ */ r(s, {
+        children: /* @__PURE__ */ r(v, _object_spread({}, l))
+    }), w = t === "right" ? i : /* @__PURE__ */ r(d, {
         paddingLeft: 24,
-        children: /* @__PURE__ */ r(g, _object_spread({}, i))
+        children: /* @__PURE__ */ r(v, _object_spread({}, l))
     });
     return /* @__PURE__ */ r("div", {
-        style: p({
-            [N.mediaBorderRadius]: t.borderRadii.container
+        style: f({
+            [N.mediaBorderRadius]: a.borderRadii.container
         }),
         children: /* @__PURE__ */ r("div", _object_spread_props(_object_spread({}, S(_object_spread({
             "component-name": "Hero"
-        }, d))), {
-            ref: l,
+        }, n))), {
+            ref: s,
             style: _object_spread({
                 backgroundColor: R[o]
             }, e === "100vh" ? {
                 maxHeight: "-webkit-fill-available"
-            } : {}, p({
+            } : {}, f({
                 [B.height]: e !== null && e !== void 0 ? e : "100%"
             })),
             className: k({
@@ -229,17 +229,17 @@ const C = (param)=>{
                 alignItems: "center"
             }),
             children: /* @__PURE__ */ r(C, {
-                isInverse: v,
+                isInverse: c,
                 children: /* @__PURE__ */ r(O, {
                     template: "6+6",
-                    left: /* @__PURE__ */ r(s, {
+                    left: /* @__PURE__ */ r(d, {
                         paddingY: 56,
-                        className: h(u, b),
+                        className: u(g, b),
                         children: H
                     }),
-                    right: /* @__PURE__ */ r(s, {
+                    right: /* @__PURE__ */ r(d, {
                         paddingY: 56,
-                        className: h(u, b),
+                        className: u(g, b),
                         children: w
                     })
                 })

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

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

package/dist-es/highlighted-card.js

@@ -78,23 +78,23 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-import { jsxs as l, jsx as i, Fragment as v } from "react/jsx-runtime";
+import { jsxs as l, jsx as i, Fragment as w } from "react/jsx-runtime";
 import * as h from "react";
 import { useIsInverseVariant as g } from "./theme-variant-context.js";
-import w from "./stack.js";
+import x from "./stack.js";
 import { BaseTouchable as c } from "./touchable.js";
-import { Text as x, Text2 as k } from "./text.js";
-import { Boxed as I } from "./boxed.js";
-import C, { useIsDismissable as H } from "./maybe-dismissable.js";
-import { container as P, textContainerVariant as T, imageContent as y, touchableContainer as m } from "./highlighted-card.css-mistica.js";
-import { vars as E } from "./skins/skin-contract.css-mistica.js";
-import { useTheme as N } from "./hooks.js";
-const O = /*#__PURE__*/ h.forwardRef((e, t)=>{
+import { Text as k, Text2 as I } from "./text.js";
+import { Boxed as C } from "./boxed.js";
+import H, { useIsDismissable as P } from "./maybe-dismissable.js";
+import { container as T, textContainerVariant as y, imageContent as E, touchableContainer as m } from "./highlighted-card.css-mistica.js";
+import { vars as N } from "./skins/skin-contract.css-mistica.js";
+import { useTheme as O } from "./hooks.js";
+const S = /*#__PURE__*/ h.forwardRef((e, t)=>{
     var _e_isInverse;
-    const { title: s, description: n, imageUrl: a, imageFit: r } = e, u = g(), f = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : u, d = H(), { textPresets: b } = N(), o = /* @__PURE__ */ l(I, {
+    const { title: s, description: n, imageUrl: a, imageFit: r, titleAs: u = "h3" } = e, f = g(), b = (_e_isInverse = e.isInverse) !== null && _e_isInverse !== void 0 ? _e_isInverse : f, d = P(), { textPresets: v } = O(), o = /* @__PURE__ */ l(C, {
         ref: t,
-        isInverse: f,
-        className: P,
+        isInverse: b,
+        className: T,
         dataAttributes: _object_spread({
             "component-name": "HighlightedCard"
         }, e.dataAttributes),
@@ -103,26 +103,26 @@ const O = /*#__PURE__*/ h.forwardRef((e, t)=>{
         children: [
             /* @__PURE__ */ l("div", {
                 role: d ? void 0 : "region",
-                className: T[a ? "withImage" : "withoutImage"],
+                className: y[a ? "withImage" : "withoutImage"],
                 "aria-label": d ? void 0 : e["aria-label"],
                 children: [
-                    /* @__PURE__ */ l(w, {
+                    /* @__PURE__ */ l(x, {
                         space: 8,
                         children: [
-                            !!s && /* @__PURE__ */ i(x, {
+                            !!s && /* @__PURE__ */ i(k, {
                                 mobileSize: 18,
                                 mobileLineHeight: "24px",
                                 desktopSize: 20,
                                 desktopLineHeight: "28px",
                                 truncate: e.titleLinesMax,
-                                weight: b.cardTitle.weight,
-                                as: "h3",
+                                weight: v.cardTitle.weight,
+                                as: u,
                                 hyphens: "auto",
                                 children: s
                             }),
-                            !!n && /* @__PURE__ */ i(k, {
+                            !!n && /* @__PURE__ */ i(I, {
                                 regular: !0,
-                                color: E.colors.textSecondary,
+                                color: N.colors.textSecondary,
                                 truncate: e.descriptionLinesMax,
                                 as: "p",
                                 hyphens: "auto",
@@ -130,7 +130,7 @@ const O = /*#__PURE__*/ h.forwardRef((e, t)=>{
                             })
                         ]
                     }),
-                    e.button && /* @__PURE__ */ l(v, {
+                    e.button && /* @__PURE__ */ l(w, {
                         children: [
                             /* @__PURE__ */ i("div", {
                                 style: {
@@ -144,7 +144,7 @@ const O = /*#__PURE__*/ h.forwardRef((e, t)=>{
                 ]
             }),
             a && /* @__PURE__ */ i("div", {
-                className: y,
+                className: E,
                 style: {
                     backgroundImage: `url(${a})`,
                     backgroundRepeat: "no-repeat",
@@ -172,22 +172,22 @@ const O = /*#__PURE__*/ h.forwardRef((e, t)=>{
         className: m,
         children: o
     }) : o;
-}), S = /*#__PURE__*/ h.forwardRef((_param, s)=>{
+}), L = /*#__PURE__*/ h.forwardRef((_param, s)=>{
     var { "aria-label": e } = _param, t = _object_without_properties(_param, [
         "aria-label"
     ]);
     var _t_isInverse;
     const n = e || t.title || t.description, a = g(), r = (_t_isInverse = t.isInverse) !== null && _t_isInverse !== void 0 ? _t_isInverse : a;
-    return /* @__PURE__ */ i(C, {
+    return /* @__PURE__ */ i(H, {
         onClose: t.onClose,
         "aria-label": n,
         width: t.width,
         isOverMedia: !!t.imageUrl,
         isInverse: r,
-        children: /* @__PURE__ */ i(O, _object_spread_props(_object_spread({}, t), {
+        children: /* @__PURE__ */ i(S, _object_spread_props(_object_spread({}, t), {
             "aria-label": n,
             ref: s
         }))
     });
-}), F = S;
-export { F as default };
+}), U = L;
+export { U as default };

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

@@ -1,5 +1,5 @@
 import "./sprinkles.css.ts.vanilla.css-mistica.js";
 import "./responsive-layout.css.ts.vanilla.css-mistica.js";
 import "./horizontal-scroll.css.ts.vanilla.css-mistica.js";
-var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfh8";
+var m = "_1gl3gmv2", v = "_1gl3gmv1 _1y2v1nfha";
 export { m as noScrollbar, v as scroll };