@telefonica/mistica 16.5.0 → 16.6.1

package/dist/community/advanced-data-card.css-mistica.js

@@ -25,10 +25,10 @@ _export(exports, {
         return o;
     },
     buttonMobile: function() {
-        return i;
+        return u;
     },
     cardContentStyle: function() {
-        return u;
+        return i;
     },
     container: function() {
         return y;
@@ -42,15 +42,18 @@ _export(exports, {
     extra: function() {
         return h;
     },
-    footerDirection: function() {
+    flexColumn: function() {
         return b;
     },
-    footerImage: function() {
+    footerDirection: function() {
         return d;
     },
-    footerText: function() {
+    footerImage: function() {
         return c;
     },
+    footerText: function() {
+        return l;
+    },
     marginRightAuto: function() {
         return m;
     },
@@ -64,19 +67,19 @@ _export(exports, {
         return g;
     },
     topActionsWithoutIcon: function() {
-        return l;
+        return C;
     },
     touchable: function() {
         return w;
     },
     touchableCardHoverOverlay: function() {
-        return C;
+        return H;
     },
     vars: function() {
-        return H;
+        return I;
     },
     withPaddingTop: function() {
-        return I;
+        return A;
     }
 });
 require("../sprinkles.css.ts.vanilla.css-mistica.js");
@@ -85,6 +88,6 @@ require("./advanced-data-card.css.ts.vanilla.css-mistica.js");
 var n = 216, _ = "_1x00fru4 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfi0 _1y2v1nf9b", a = {
     default: "_1x00fruk",
     mobile: "_1x00frul"
-}, t = "_1x00frut", o = "_1x00fruo", i = "_1x00frup _1x00fruo", u = "_1x00fru8 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf9b", y = "_1y2v1nfhi _1y2v1nfis", x = "_1x00frud _1y2v1nfhi _1y2v1nfho _1y2v1nfia _1y2v1nfhu", e = "_1x00frui", h = "_1x00frua _1y2v1nf7w _1y2v1nf9b _1y2v1nfib", b = "_1x00frus _1y2v1nfho _1y2v1nfht", d = "_1y2v1nfi3 _1y2v1nfho _1y2v1nfbn", c = "_1y2v1nfho _1y2v1nfia _1y2v1nfi3 _1y2v1nfjx", m = "_1x00frum", p = "_1x00fruu", s = "_1x00frub", g = "_1x00fru2 _1y2v1nfae _1y2v1nfbn", l = "_1x00fruw", w = "_1x00fru5", C = "_1x00fru6", H = {
+}, t = "_1x00frut", o = "_1x00fruo", u = "_1x00frup _1x00fruo", i = "_1x00fru8 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nf7q _1y2v1nf9b", y = "_1y2v1nfhi _1y2v1nfis", x = "_1x00frud _1y2v1nfhi _1y2v1nfho _1y2v1nfia _1y2v1nfhu", e = "_1x00frui", h = "_1x00frua _1y2v1nf7w _1y2v1nf9b _1y2v1nfib", b = "_1x00frux", d = "_1x00frus _1y2v1nfho _1y2v1nfht", c = "_1y2v1nfi3 _1y2v1nfho _1y2v1nfbn", l = "_1y2v1nfho _1y2v1nfia _1y2v1nfi3 _1y2v1nfjx", m = "_1x00frum", p = "_1x00fruu", s = "_1x00frub", g = "_1x00fru2 _1y2v1nfae _1y2v1nfbn", C = "_1x00fruw", w = "_1x00fru5", H = "_1x00fru6", I = {
     topActionsCount: "var(--_1x00fruv)"
-}, I = "_1y2v1nf7w";
+}, A = "_1y2v1nf7w";

package/dist/community/advanced-data-card.css.d.ts

@@ -26,3 +26,4 @@ export declare const vars: {
     topActionsCount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
 };
 export declare const topActionsWithoutIcon: string;
+export declare const flexColumn: string;

package/dist/community/advanced-data-card.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Tag from '../tag';
 import type { PressHandler } from '../touchable';
 import type { ExclusifyUnion } from '../utils/utility-types';
 import type { CardAction } from '../card';
@@ -7,7 +8,6 @@ import type Image from '../image';
 import type { ButtonPrimary, ButtonLink } from '../button';
 import type { DataAttributes, HeadingType, TrackingEvent } from '../utils/types';
 import type { RendersNullableElement } from '../utils/renders-element';
-import type Tag from '../tag';
 import type { HighlightedValueBlock, InformationBlock, ProgressBlock, RowBlock, SimpleBlock, ValueBlock } from './blocks';
 type TouchableProps = {
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;

package/dist/community/advanced-data-card.js

@@ -11,10 +11,10 @@ function _export(target, all) {
 }
 _export(exports, {
     AdvancedDataCard: function() {
-        return br;
+        return Er;
     },
     default: function() {
-        return Yr;
+        return $r;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -35,6 +35,8 @@ const _hooks = require("../hooks.js");
 const _dom = require("../utils/dom.js");
 const _inline = /*#__PURE__*/ _interop_require_default(require("../inline.js"));
 const _css = require("../utils/css.js");
+const _tag = /*#__PURE__*/ _interop_require_default(require("../tag.js"));
+const _headings = require("../utils/headings.js");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -160,49 +162,115 @@ function _object_without_properties_loose(source, excluded) {
     }
     return target;
 }
-const Ar = (param)=>{
-    let { headline: a, pretitle: o, pretitleAs: s = "p", pretitleLinesMax: m, title: n, titleAs: c = "h3", titleLinesMax: d, subtitle: l, subtitleLinesMax: i, description: t, descriptionLinesMax: h } = param;
-    const { textPresets: y } = (0, _hooks.useTheme)();
-    return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
-        space: 4,
+const jr = (param)=>{
+    let { headline: d, headlineRef: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: c, titleLinesMax: f, subtitle: a, subtitleLinesMax: i, description: e, descriptionLinesMax: x } = param;
+    const { textPresets: m } = (0, _hooks.useTheme)();
+    return /** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */ /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+        className: _advanceddatacardcssmistica.flexColumn,
         children: [
-            a,
-            o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                color: _skincontractcssmistica.vars.colors.textPrimary,
-                truncate: m,
-                as: s,
-                regular: !0,
-                hyphens: "auto",
-                children: o
+            (0, _headings.isBiggerHeading)(c, s) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingBottom: a || e ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
+                            truncate: f,
+                            weight: m.cardTitle.weight,
+                            as: c,
+                            hyphens: "auto",
+                            children: o
+                        }))
+                    }),
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        ref: h,
+                        style: {
+                            order: -2,
+                            paddingBottom: n || o || a || e ? 4 : 0
+                        },
+                        children: typeof d == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+                            type: "promo",
+                            children: d
+                        }) : d
+                    }),
+                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            order: -1,
+                            paddingBottom: o || a || e ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            truncate: l,
+                            as: s,
+                            regular: !0,
+                            hyphens: "auto",
+                            children: n
+                        })
+                    })
+                ]
+            }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+                children: [
+                    n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingBottom: o || a || e ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                            truncate: l,
+                            as: s,
+                            regular: !0,
+                            hyphens: "auto",
+                            children: n
+                        })
+                    }),
+                    d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        ref: h,
+                        style: {
+                            order: -1,
+                            paddingBottom: n || o || a || e ? 4 : 0
+                        },
+                        children: typeof d == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
+                            type: "promo",
+                            children: d
+                        }) : d
+                    }),
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        style: {
+                            paddingBottom: a || e ? 4 : 0
+                        },
+                        children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
+                            truncate: f,
+                            weight: m.cardTitle.weight,
+                            as: c,
+                            hyphens: "auto",
+                            children: o
+                        }))
+                    })
+                ]
             }),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
-                truncate: d,
-                weight: y.cardTitle.weight,
-                as: c,
-                hyphens: "auto",
-                children: n
-            })),
-            /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                color: _skincontractcssmistica.vars.colors.textPrimary,
-                truncate: i,
-                as: "p",
-                regular: !0,
-                hyphens: "auto",
-                children: l
+            a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                style: {
+                    paddingBottom: e ? 4 : 0
+                },
+                children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                    truncate: i,
+                    as: "div",
+                    regular: !0,
+                    hyphens: "auto",
+                    children: a
+                })
             }),
-            t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                truncate: h,
-                as: "p",
+            e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
+                truncate: x,
+                as: "div",
                 regular: !0,
                 color: _skincontractcssmistica.vars.colors.textSecondary,
                 hyphens: "auto",
-                children: t
+                children: e
             })
         ]
     });
-}, Tr = (param)=>{
-    let { button: a, footerImage: o, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
-    const c = !!a, d = !!o, l = !!s, i = !!n, t = c && (d || l) && i, h = i && !t ? "178px" : "";
+}, Ar = (param)=>{
+    let { button: d, footerImage: h, footerText: n, footerTextLinesMax: s, buttonLink: l } = param;
+    const o = !!d, c = !!h, f = !!n, a = !!l, i = o && (c || f) && a, e = a && !i ? "178px" : "";
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -210,47 +278,47 @@ const Ar = (param)=>{
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[t ? "mobile" : "default"]),
+                className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[i ? "mobile" : "default"]),
                 children: [
-                    c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                    o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                         className: (0, _classnames.default)(_advanceddatacardcssmistica.marginRightButton, _advanceddatacardcssmistica.buttonMobile),
-                        children: a
+                        children: d
                     }),
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, t ? _advanceddatacardcssmistica.marginRightAuto : _advanceddatacardcssmistica.withPaddingTop),
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, i ? _advanceddatacardcssmistica.marginRightAuto : _advanceddatacardcssmistica.withPaddingTop),
                         children: [
-                            d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _advanceddatacardcssmistica.footerImage,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                     style: (0, _css.applyCssVars)({
                                         [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
                                     }),
-                                    children: o
+                                    children: h
                                 })
                             }),
-                            l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 style: {
-                                    maxWidth: h
+                                    maxWidth: e
                                 },
                                 className: _advanceddatacardcssmistica.footerText,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
-                                    truncate: m,
+                                    truncate: s,
                                     regular: !0,
-                                    children: s
+                                    children: n
                                 })
                             })
                         ]
                     }),
-                    i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, t ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
-                        children: n
+                    a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                        className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, i ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
+                        children: l
                     })
                 ]
             })
         ]
     });
-}, br = /*#__PURE__*/ _react.forwardRef((_param, W)=>{
-    var { stackingGroup: a, headline: o, pretitle: s, pretitleAs: m, pretitleLinesMax: n, title: c, titleAs: d, titleLinesMax: l, subtitle: i, subtitleLinesMax: t, description: h, descriptionLinesMax: y, extra: p, extraDividerPadding: E = 24, noExtraDivider: G = !1, button: C, footerImage: A, footerText: T, footerTextLinesMax: M, buttonLink: b, dataAttributes: V, actions: v, "aria-label": B, onClose: w } = _param, f = _object_without_properties(_param, [
+}, Er = /*#__PURE__*/ _react.forwardRef((_param, K)=>{
+    var { stackingGroup: d, headline: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: c = "h3", titleLinesMax: f, subtitle: a, subtitleLinesMax: i, description: e, descriptionLinesMax: x, extra: m, extraDividerPadding: b = 24, noExtraDivider: k = !1, button: B, footerImage: T, footerText: C, footerTextLinesMax: q, buttonLink: w, dataAttributes: z, actions: u, "aria-label": J, onClose: I } = _param, p = _object_without_properties(_param, [
         "stackingGroup",
         "headline",
         "pretitle",
@@ -276,18 +344,32 @@ const Ar = (param)=>{
         "aria-label",
         "onClose"
     ]);
-    const x = !!f.href || !!f.onPress || !!f.to, O = {
-        button: C,
-        footerImage: A,
-        footerText: T,
-        footerTextLinesMax: M,
-        buttonLink: b
-    }, D = !!C || !!A || !!T || !!b, I = !!(p != null && p.length), X = ((v == null ? void 0 : v.length) || 0) + (w ? 1 : 0);
+    const y = !!p.href || !!p.onPress || !!p.to, M = {
+        button: B,
+        footerImage: T,
+        footerText: C,
+        footerTextLinesMax: q,
+        buttonLink: w
+    }, R = !!B || !!T || !!C || !!w, D = !!(m != null && m.length), Q = ((u == null ? void 0 : u.length) || 0) + (I ? 1 : 0), { text: H, ref: U } = (0, _card.useInnerText)(), { text: F, ref: Z } = (0, _card.useInnerText)(), S = J || ((0, _headings.isBiggerHeading)(c, s) ? [
+        o,
+        H,
+        n,
+        a,
+        e,
+        F
+    ] : [
+        n,
+        H,
+        o,
+        a,
+        e,
+        F
+    ]).filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", _object_spread_props(_object_spread({
         className: _advanceddatacardcssmistica.container
-    }, (0, _dom.getPrefixedDataAttributes)(V, "AdvancedDataCard")), {
-        ref: W,
-        "aria-label": x ? void 0 : B,
+    }, (0, _dom.getPrefixedDataAttributes)(z, "AdvancedDataCard")), {
+        ref: K,
+        "aria-label": y ? void 0 : S,
         children: [
             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
                 className: _advanceddatacardcssmistica.dataCard,
@@ -297,15 +379,16 @@ const Ar = (param)=>{
                 children: [
                     /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.default, _object_spread_props(_object_spread({
                         maybe: !0
-                    }, f), {
-                        "aria-label": x ? B : void 0,
+                    }, p), {
+                        "aria-label": y ? S : void 0,
                         className: _advanceddatacardcssmistica.touchable,
                         children: [
-                            x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _advanceddatacardcssmistica.touchableCardHoverOverlay
                             }),
                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
-                                className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !D && !I ? _advanceddatacardcssmistica.minHeight : ""),
+                                className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !R && !D ? _advanceddatacardcssmistica.minHeight : ""),
+                                "aria-hidden": y,
                                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
                                     paddingTop: 8,
                                     children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -314,25 +397,26 @@ const Ar = (param)=>{
                                             /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
                                                 space: 8,
                                                 children: [
-                                                    a,
-                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(Ar, {
-                                                        headline: o,
-                                                        pretitle: s,
-                                                        pretitleAs: m,
-                                                        pretitleLinesMax: n,
-                                                        title: c,
-                                                        titleAs: d,
-                                                        titleLinesMax: l,
-                                                        subtitle: i,
-                                                        subtitleLinesMax: t,
-                                                        description: h,
-                                                        descriptionLinesMax: y
+                                                    d,
+                                                    /* @__PURE__ */ (0, _jsxruntime.jsx)(jr, {
+                                                        headline: h,
+                                                        headlineRef: U,
+                                                        pretitle: n,
+                                                        pretitleAs: s,
+                                                        pretitleLinesMax: l,
+                                                        title: o,
+                                                        titleAs: c,
+                                                        titleLinesMax: f,
+                                                        subtitle: a,
+                                                        subtitleLinesMax: i,
+                                                        description: e,
+                                                        descriptionLinesMax: x
                                                     })
                                                 ]
                                             }),
-                                            !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                                            !d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 style: (0, _css.applyCssVars)({
-                                                    [_advanceddatacardcssmistica.vars.topActionsCount]: String(X)
+                                                    [_advanceddatacardcssmistica.vars.topActionsCount]: String(Q)
                                                 }),
                                                 className: _advanceddatacardcssmistica.topActionsWithoutIcon
                                             })
@@ -345,30 +429,31 @@ const Ar = (param)=>{
                                     flexGrow: 1
                                 }
                             }),
-                            I && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
+                            D && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                 className: _advanceddatacardcssmistica.extra,
-                                children: p.map((Y, R)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
+                                ref: Z,
+                                children: m.map((L, j)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
                                         children: [
                                             /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
                                                 className: _advanceddatacardcssmistica.paddingX,
-                                                children: Y
+                                                children: L
                                             }),
-                                            R + 1 !== p.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
-                                                paddingY: E,
-                                                children: !G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
+                                            j + 1 !== m.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
+                                                paddingY: b,
+                                                children: !k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
                                             })
                                         ]
-                                    }, R))
+                                    }, j))
                             })
                         ]
                     })),
-                    D && /* @__PURE__ */ (0, _jsxruntime.jsx)(Tr, _object_spread({}, O))
+                    R && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ar, _object_spread({}, M))
                 ]
             }),
             /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
-                actions: v,
-                onClose: w
+                actions: u,
+                onClose: I
             })
         ]
     }));
-}), Yr = br;
+}), $r = Er;

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

@@ -18,32 +18,35 @@ _export(exports, {
     coverHeroContainer: function() {
         return y;
     },
-    hasSideExtra: function() {
+    flexColumn: function() {
         return f;
     },
-    mainContent: function() {
+    hasSideExtra: function() {
         return _;
     },
-    mediaLayer: function() {
+    mainContent: function() {
         return m;
     },
-    mediaOverlay: function() {
+    mediaLayer: function() {
         return t;
     },
-    minHeight: function() {
+    mediaOverlay: function() {
         return h;
     },
-    sideExtra: function() {
+    minHeight: function() {
         return s;
     },
-    sixColumns: function() {
+    sideExtra: function() {
         return z;
     },
-    vars: function() {
+    sixColumns: function() {
         return p;
     },
-    withAspectRatio: function() {
+    vars: function() {
         return c;
+    },
+    withAspectRatio: function() {
+        return x;
     }
 });
 require("./sprinkles.css.ts.vanilla.css-mistica.js");
@@ -51,6 +54,6 @@ require("./responsive-layout.css.ts.vanilla.css-mistica.js");
 require("./grid-layout.css.ts.vanilla.css-mistica.js");
 require("./carousel.css.ts.vanilla.css-mistica.js");
 require("./cover-hero.css.ts.vanilla.css-mistica.js");
-var e = "moeazi9 _1y2v1nfi3", o = "moeazi2 _1y2v1nfhi _1y2v1nfho _1y2v1nfhu _1y2v1nfhx _1y2v1nfib _1y2v1nfkv _1y2v1nfm4", y = "moeazi4 _1y2v1nfhi _1y2v1nfho _1y2v1nfib", f = "moeazi7", _ = "_1y2v1nfhi", m = "_1y2v1nfhj _1y2v1nfmj _1y2v1nfib _1y2v1nfis", t = "moeazic _1y2v1nfhj _1y2v1nfkv _1y2v1nfla _1y2v1nfib _1y2v1nfis", h = "moeazi6", s = "_1y2v1nfhi", z = "moeazie", p = {
+var e = "moeazi9 _1y2v1nfi3", o = "moeazi2 _1y2v1nfhi _1y2v1nfho _1y2v1nfhu _1y2v1nfhx _1y2v1nfib _1y2v1nfkv _1y2v1nfm4", y = "moeazi4 _1y2v1nfhi _1y2v1nfho _1y2v1nfib", f = "_1y2v1nfho _1y2v1nfhu", _ = "moeazi7", m = "_1y2v1nfhi", t = "_1y2v1nfhj _1y2v1nfmj _1y2v1nfib _1y2v1nfis", h = "moeazic _1y2v1nfhj _1y2v1nfkv _1y2v1nfla _1y2v1nfib _1y2v1nfis", s = "moeazi6", z = "_1y2v1nfhi", p = "moeazie", c = {
     aspectRatio: "var(--moeazi0)"
-}, c = "moeazi5";
+}, x = "moeazi5";

package/dist/cover-hero.css.d.ts

@@ -12,3 +12,4 @@ export declare const mediaOverlay: string;
 export declare const mainContent: string;
 export declare const sixColumns: string;
 export declare const sideExtra: string;
+export declare const flexColumn: string;

package/dist/cover-hero.d.ts

@@ -11,6 +11,7 @@ type BaseProps = {
     headline?: RendersNullableElement<typeof Tag>;
     pretitle?: string;
     pretitleLinesMax?: number;
+    pretitleAs?: HeadingType;
     title: string;
     titleLinesMax?: number;
     titleAs?: HeadingType;