@telefonica/mistica 16.5.0 → 16.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (74) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/callout.js +27 -15
  3. package/dist/card.css-mistica.js +5 -5
  4. package/dist/card.d.ts +9 -1
  5. package/dist/card.js +611 -475
  6. package/dist/community/advanced-data-card.css-mistica.js +14 -11
  7. package/dist/community/advanced-data-card.css.d.ts +1 -0
  8. package/dist/community/advanced-data-card.d.ts +1 -1
  9. package/dist/community/advanced-data-card.js +172 -85
  10. package/dist/cover-hero.css-mistica.js +14 -11
  11. package/dist/cover-hero.css.d.ts +1 -0
  12. package/dist/cover-hero.d.ts +1 -0
  13. package/dist/cover-hero.js +101 -59
  14. package/dist/empty-state.js +24 -15
  15. package/dist/header.css-mistica.js +6 -3
  16. package/dist/header.css.d.ts +1 -0
  17. package/dist/header.d.ts +3 -2
  18. package/dist/header.js +148 -79
  19. package/dist/hero.css-mistica.js +11 -8
  20. package/dist/hero.css.d.ts +1 -0
  21. package/dist/hero.d.ts +2 -1
  22. package/dist/hero.js +102 -68
  23. package/dist/highlighted-card.js +32 -23
  24. package/dist/index.d.ts +1 -0
  25. package/dist/index.js +4 -0
  26. package/dist/maybe-dismissable.js +8 -5
  27. package/dist/meter.d.ts +23 -0
  28. package/dist/meter.js +400 -0
  29. package/dist/package-version.js +1 -1
  30. package/dist/sheet-common.css-mistica.js +16 -10
  31. package/dist/sheet-common.css.d.ts +3 -1
  32. package/dist/sheet-common.js +78 -70
  33. package/dist/sheet-info.css-mistica.js +15 -4
  34. package/dist/sheet-info.css.d.ts +2 -0
  35. package/dist/sheet-info.d.ts +3 -0
  36. package/dist/sheet-info.js +61 -43
  37. package/dist/sheet-native.js +59 -48
  38. package/dist/sheet-types.d.ts +6 -1
  39. package/dist/sheet-web.js +6 -4
  40. package/dist/text-tokens.d.ts +10 -0
  41. package/dist/text-tokens.js +54 -38
  42. package/dist/theme-context-provider.js +60 -50
  43. package/dist/theme.d.ts +3 -2
  44. package/dist/utils/headings.d.ts +2 -0
  45. package/dist/utils/headings.js +11 -0
  46. package/dist/utils/types.d.ts +1 -0
  47. package/dist-es/callout.js +55 -43
  48. package/dist-es/card.css-mistica.js +2 -2
  49. package/dist-es/card.js +721 -588
  50. package/dist-es/community/advanced-data-card.css-mistica.js +3 -3
  51. package/dist-es/community/advanced-data-card.js +217 -130
  52. package/dist-es/cover-hero.css-mistica.js +3 -3
  53. package/dist-es/cover-hero.js +132 -90
  54. package/dist-es/empty-state.js +40 -31
  55. package/dist-es/header.css-mistica.js +2 -2
  56. package/dist-es/header.js +174 -104
  57. package/dist-es/hero.css-mistica.js +2 -2
  58. package/dist-es/hero.js +150 -115
  59. package/dist-es/highlighted-card.js +36 -27
  60. package/dist-es/index.js +1839 -1838
  61. package/dist-es/maybe-dismissable.js +17 -14
  62. package/dist-es/meter.js +346 -0
  63. package/dist-es/package-version.js +1 -1
  64. package/dist-es/sheet-common.css-mistica.js +2 -2
  65. package/dist-es/sheet-common.js +124 -116
  66. package/dist-es/sheet-info.css-mistica.js +2 -2
  67. package/dist-es/sheet-info.js +74 -56
  68. package/dist-es/sheet-native.js +59 -48
  69. package/dist-es/sheet-web.js +10 -8
  70. package/dist-es/style.css +1 -1
  71. package/dist-es/text-tokens.js +30 -20
  72. package/dist-es/theme-context-provider.js +88 -78
  73. package/dist-es/utils/headings.js +2 -0
  74. package/package.json +2 -1
@@ -25,10 +25,10 @@ _export(exports, {
25
25
  return o;
26
26
  },
27
27
  buttonMobile: function() {
28
- return i;
28
+ return u;
29
29
  },
30
30
  cardContentStyle: function() {
31
- return u;
31
+ return i;
32
32
  },
33
33
  container: function() {
34
34
  return y;
@@ -42,15 +42,18 @@ _export(exports, {
42
42
  extra: function() {
43
43
  return h;
44
44
  },
45
- footerDirection: function() {
45
+ flexColumn: function() {
46
46
  return b;
47
47
  },
48
- footerImage: function() {
48
+ footerDirection: function() {
49
49
  return d;
50
50
  },
51
- footerText: function() {
51
+ footerImage: function() {
52
52
  return c;
53
53
  },
54
+ footerText: function() {
55
+ return l;
56
+ },
54
57
  marginRightAuto: function() {
55
58
  return m;
56
59
  },
@@ -64,19 +67,19 @@ _export(exports, {
64
67
  return g;
65
68
  },
66
69
  topActionsWithoutIcon: function() {
67
- return l;
70
+ return C;
68
71
  },
69
72
  touchable: function() {
70
73
  return w;
71
74
  },
72
75
  touchableCardHoverOverlay: function() {
73
- return C;
76
+ return H;
74
77
  },
75
78
  vars: function() {
76
- return H;
79
+ return I;
77
80
  },
78
81
  withPaddingTop: function() {
79
- return I;
82
+ return A;
80
83
  }
81
84
  });
82
85
  require("../sprinkles.css.ts.vanilla.css-mistica.js");
@@ -85,6 +88,6 @@ require("./advanced-data-card.css.ts.vanilla.css-mistica.js");
85
88
  var n = 216, _ = "_1x00fru4 _1x00fru2 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfi0 _1y2v1nf9b", a = {
86
89
  default: "_1x00fruk",
87
90
  mobile: "_1x00frul"
88
- }, 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 = {
91
+ }, 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 = {
89
92
  topActionsCount: "var(--_1x00fruv)"
90
- }, I = "_1y2v1nf7w";
93
+ }, A = "_1y2v1nf7w";
@@ -26,3 +26,4 @@ export declare const vars: {
26
26
  topActionsCount: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
27
27
  };
28
28
  export declare const topActionsWithoutIcon: string;
29
+ export declare const flexColumn: string;
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import Tag from '../tag';
2
3
  import type { PressHandler } from '../touchable';
3
4
  import type { ExclusifyUnion } from '../utils/utility-types';
4
5
  import type { CardAction } from '../card';
@@ -7,7 +8,6 @@ import type Image from '../image';
7
8
  import type { ButtonPrimary, ButtonLink } from '../button';
8
9
  import type { DataAttributes, HeadingType, TrackingEvent } from '../utils/types';
9
10
  import type { RendersNullableElement } from '../utils/renders-element';
10
- import type Tag from '../tag';
11
11
  import type { HighlightedValueBlock, InformationBlock, ProgressBlock, RowBlock, SimpleBlock, ValueBlock } from './blocks';
12
12
  type TouchableProps = {
13
13
  trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
@@ -14,7 +14,7 @@ _export(exports, {
14
14
  return br;
15
15
  },
16
16
  default: function() {
17
- return Yr;
17
+ return $r;
18
18
  }
19
19
  });
20
20
  const _jsxruntime = require("react/jsx-runtime");
@@ -35,6 +35,8 @@ const _hooks = require("../hooks.js");
35
35
  const _dom = require("../utils/dom.js");
36
36
  const _inline = /*#__PURE__*/ _interop_require_default(require("../inline.js"));
37
37
  const _css = require("../utils/css.js");
38
+ const _tag = /*#__PURE__*/ _interop_require_default(require("../tag.js"));
39
+ const _headings = require("../utils/headings.js");
38
40
  function _interop_require_default(obj) {
39
41
  return obj && obj.__esModule ? obj : {
40
42
  default: obj
@@ -160,39 +162,107 @@ function _object_without_properties_loose(source, excluded) {
160
162
  }
161
163
  return target;
162
164
  }
163
- const Ar = (param)=>{
164
- 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;
165
- const { textPresets: y } = (0, _hooks.useTheme)();
166
- return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_stack.default, {
167
- space: 4,
165
+ const jr = (param)=>{
166
+ let { headline: a, headlineRef: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: i, titleLinesMax: f, subtitle: e, subtitleLinesMax: c, description: t, descriptionLinesMax: x } = param;
167
+ const { textPresets: m } = (0, _hooks.useTheme)();
168
+ 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", {
169
+ className: _advanceddatacardcssmistica.flexColumn,
168
170
  children: [
169
- a,
170
- o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
171
- color: _skincontractcssmistica.vars.colors.textPrimary,
172
- truncate: m,
173
- as: s,
174
- regular: !0,
175
- hyphens: "auto",
176
- children: o
171
+ (0, _headings.isBiggerHeading)(i, s) ? /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
172
+ children: [
173
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
174
+ style: {
175
+ paddingBottom: e || t ? 4 : 0
176
+ },
177
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
178
+ truncate: f,
179
+ weight: m.cardTitle.weight,
180
+ as: i,
181
+ hyphens: "auto",
182
+ children: o
183
+ }))
184
+ }),
185
+ a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
186
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
187
+ ref: h,
188
+ style: {
189
+ order: -2,
190
+ paddingBottom: 4
191
+ },
192
+ children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
193
+ type: "promo",
194
+ children: a
195
+ }) : a
196
+ }),
197
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
198
+ style: {
199
+ order: -1,
200
+ paddingBottom: o || e || t ? 4 : 0
201
+ },
202
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
203
+ truncate: l,
204
+ as: s,
205
+ regular: !0,
206
+ hyphens: "auto",
207
+ children: n
208
+ })
209
+ })
210
+ ]
211
+ }) : /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
212
+ children: [
213
+ n && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
214
+ style: {
215
+ paddingBottom: o || e || t ? 4 : 0
216
+ },
217
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
218
+ truncate: l,
219
+ as: s,
220
+ regular: !0,
221
+ hyphens: "auto",
222
+ children: n
223
+ })
224
+ }),
225
+ a && // assuming that the headline will always be followed by one of: pretitle, title, subtitle, description
226
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
227
+ ref: h,
228
+ style: {
229
+ order: -1,
230
+ paddingBottom: 4
231
+ },
232
+ children: typeof a == "string" ? /* @__PURE__ */ (0, _jsxruntime.jsx)(_tag.default, {
233
+ type: "promo",
234
+ children: a
235
+ }) : a
236
+ }),
237
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
238
+ style: {
239
+ paddingBottom: e || t ? 4 : 0
240
+ },
241
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
242
+ truncate: f,
243
+ weight: m.cardTitle.weight,
244
+ as: i,
245
+ hyphens: "auto",
246
+ children: o
247
+ }))
248
+ })
249
+ ]
177
250
  }),
178
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text, _object_spread_props(_object_spread({}, _textprops.text4), {
179
- truncate: d,
180
- weight: y.cardTitle.weight,
181
- as: c,
182
- hyphens: "auto",
183
- children: n
184
- })),
185
- /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
186
- color: _skincontractcssmistica.vars.colors.textPrimary,
187
- truncate: i,
188
- as: "p",
189
- regular: !0,
190
- hyphens: "auto",
191
- children: l
251
+ e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
252
+ style: {
253
+ paddingBottom: t ? 4 : 0
254
+ },
255
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
256
+ truncate: c,
257
+ as: "div",
258
+ regular: !0,
259
+ hyphens: "auto",
260
+ children: e
261
+ })
192
262
  }),
193
263
  t && /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
194
- truncate: h,
195
- as: "p",
264
+ truncate: x,
265
+ as: "div",
196
266
  regular: !0,
197
267
  color: _skincontractcssmistica.vars.colors.textSecondary,
198
268
  hyphens: "auto",
@@ -200,9 +270,9 @@ const Ar = (param)=>{
200
270
  })
201
271
  ]
202
272
  });
203
- }, Tr = (param)=>{
204
- let { button: a, footerImage: o, footerText: s, footerTextLinesMax: m, buttonLink: n } = param;
205
- const c = !!a, d = !!o, l = !!s, i = !!n, t = c && (d || l) && i, h = i && !t ? "178px" : "";
273
+ }, Ar = (param)=>{
274
+ let { button: a, footerImage: h, footerText: n, footerTextLinesMax: s, buttonLink: l } = param;
275
+ const o = !!a, i = !!h, f = !!n, e = !!l, c = o && (i || f) && e, t = e && !c ? "178px" : "";
206
276
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
207
277
  children: [
208
278
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
@@ -210,47 +280,47 @@ const Ar = (param)=>{
210
280
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
211
281
  }),
212
282
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
213
- className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[t ? "mobile" : "default"]),
283
+ className: (0, _classnames.default)(_advanceddatacardcssmistica.actions, _advanceddatacardcssmistica.actionsVariants[c ? "mobile" : "default"]),
214
284
  children: [
215
- c && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
285
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
216
286
  className: (0, _classnames.default)(_advanceddatacardcssmistica.marginRightButton, _advanceddatacardcssmistica.buttonMobile),
217
287
  children: a
218
288
  }),
219
289
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
220
- className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, t ? _advanceddatacardcssmistica.marginRightAuto : _advanceddatacardcssmistica.withPaddingTop),
290
+ className: (0, _classnames.default)(_advanceddatacardcssmistica.footerDirection, c ? _advanceddatacardcssmistica.marginRightAuto : _advanceddatacardcssmistica.withPaddingTop),
221
291
  children: [
222
- d && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
292
+ i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
223
293
  className: _advanceddatacardcssmistica.footerImage,
224
294
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
225
295
  style: (0, _css.applyCssVars)({
226
296
  [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
227
297
  }),
228
- children: o
298
+ children: h
229
299
  })
230
300
  }),
231
- l && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
301
+ f && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
232
302
  style: {
233
- maxWidth: h
303
+ maxWidth: t
234
304
  },
235
305
  className: _advanceddatacardcssmistica.footerText,
236
306
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
237
- truncate: m,
307
+ truncate: s,
238
308
  regular: !0,
239
- children: s
309
+ children: n
240
310
  })
241
311
  })
242
312
  ]
243
313
  }),
244
- i && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
245
- className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, t ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
246
- children: n
314
+ e && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
315
+ className: (0, _classnames.default)(_advanceddatacardcssmistica.adjustButtonLink, c ? _advanceddatacardcssmistica.button : _advanceddatacardcssmistica.buttonMobile),
316
+ children: l
247
317
  })
248
318
  ]
249
319
  })
250
320
  ]
251
321
  });
252
- }, br = /*#__PURE__*/ _react.forwardRef((_param, W)=>{
253
- 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, [
322
+ }, br = /*#__PURE__*/ _react.forwardRef((_param, K)=>{
323
+ var { stackingGroup: a, headline: h, pretitle: n, pretitleAs: s, pretitleLinesMax: l, title: o, titleAs: i = "h3", titleLinesMax: f, subtitle: e, subtitleLinesMax: c, description: t, descriptionLinesMax: x, extra: m, extraDividerPadding: _ = 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, [
254
324
  "stackingGroup",
255
325
  "headline",
256
326
  "pretitle",
@@ -276,18 +346,32 @@ const Ar = (param)=>{
276
346
  "aria-label",
277
347
  "onClose"
278
348
  ]);
279
- const x = !!f.href || !!f.onPress || !!f.to, O = {
280
- button: C,
281
- footerImage: A,
282
- footerText: T,
283
- footerTextLinesMax: M,
284
- buttonLink: b
285
- }, D = !!C || !!A || !!T || !!b, I = !!(p != null && p.length), X = ((v == null ? void 0 : v.length) || 0) + (w ? 1 : 0);
349
+ const y = !!p.href || !!p.onPress || !!p.to, M = {
350
+ button: B,
351
+ footerImage: T,
352
+ footerText: C,
353
+ footerTextLinesMax: q,
354
+ buttonLink: w
355
+ }, 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)(i, s) ? [
356
+ o,
357
+ H,
358
+ n,
359
+ e,
360
+ t,
361
+ F
362
+ ] : [
363
+ n,
364
+ H,
365
+ o,
366
+ e,
367
+ t,
368
+ F
369
+ ]).filter(Boolean).join(" ");
286
370
  return /* @__PURE__ */ (0, _jsxruntime.jsxs)("section", _object_spread_props(_object_spread({
287
371
  className: _advanceddatacardcssmistica.container
288
- }, (0, _dom.getPrefixedDataAttributes)(V, "AdvancedDataCard")), {
289
- ref: W,
290
- "aria-label": x ? void 0 : B,
372
+ }, (0, _dom.getPrefixedDataAttributes)(z, "AdvancedDataCard")), {
373
+ ref: K,
374
+ "aria-label": y ? void 0 : S,
291
375
  children: [
292
376
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_boxed.Boxed, {
293
377
  className: _advanceddatacardcssmistica.dataCard,
@@ -297,15 +381,16 @@ const Ar = (param)=>{
297
381
  children: [
298
382
  /* @__PURE__ */ (0, _jsxruntime.jsxs)(_touchable.default, _object_spread_props(_object_spread({
299
383
  maybe: !0
300
- }, f), {
301
- "aria-label": x ? B : void 0,
384
+ }, p), {
385
+ "aria-label": y ? S : void 0,
302
386
  className: _advanceddatacardcssmistica.touchable,
303
387
  children: [
304
- x && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
388
+ y && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
305
389
  className: _advanceddatacardcssmistica.touchableCardHoverOverlay
306
390
  }),
307
391
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
308
- className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !D && !I ? _advanceddatacardcssmistica.minHeight : ""),
392
+ className: (0, _classnames.default)(_advanceddatacardcssmistica.cardContentStyle, !R && !D ? _advanceddatacardcssmistica.minHeight : ""),
393
+ "aria-hidden": y,
309
394
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
310
395
  paddingTop: 8,
311
396
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
@@ -315,24 +400,25 @@ const Ar = (param)=>{
315
400
  space: 8,
316
401
  children: [
317
402
  a,
318
- /* @__PURE__ */ (0, _jsxruntime.jsx)(Ar, {
319
- headline: o,
320
- pretitle: s,
321
- pretitleAs: m,
322
- pretitleLinesMax: n,
323
- title: c,
324
- titleAs: d,
325
- titleLinesMax: l,
326
- subtitle: i,
327
- subtitleLinesMax: t,
328
- description: h,
329
- descriptionLinesMax: y
403
+ /* @__PURE__ */ (0, _jsxruntime.jsx)(jr, {
404
+ headline: h,
405
+ headlineRef: U,
406
+ pretitle: n,
407
+ pretitleAs: s,
408
+ pretitleLinesMax: l,
409
+ title: o,
410
+ titleAs: i,
411
+ titleLinesMax: f,
412
+ subtitle: e,
413
+ subtitleLinesMax: c,
414
+ description: t,
415
+ descriptionLinesMax: x
330
416
  })
331
417
  ]
332
418
  }),
333
419
  !a && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
334
420
  style: (0, _css.applyCssVars)({
335
- [_advanceddatacardcssmistica.vars.topActionsCount]: String(X)
421
+ [_advanceddatacardcssmistica.vars.topActionsCount]: String(Q)
336
422
  }),
337
423
  className: _advanceddatacardcssmistica.topActionsWithoutIcon
338
424
  })
@@ -345,30 +431,31 @@ const Ar = (param)=>{
345
431
  flexGrow: 1
346
432
  }
347
433
  }),
348
- I && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
434
+ D && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
349
435
  className: _advanceddatacardcssmistica.extra,
350
- children: p.map((Y, R)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
436
+ ref: Z,
437
+ children: m.map((L, j)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
351
438
  children: [
352
439
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
353
440
  className: _advanceddatacardcssmistica.paddingX,
354
- children: Y
441
+ children: L
355
442
  }),
356
- R + 1 !== p.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
357
- paddingY: E,
358
- children: !G && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
443
+ j + 1 !== m.length && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
444
+ paddingY: _,
445
+ children: !k && /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
359
446
  })
360
447
  ]
361
- }, R))
448
+ }, j))
362
449
  })
363
450
  ]
364
451
  })),
365
- D && /* @__PURE__ */ (0, _jsxruntime.jsx)(Tr, _object_spread({}, O))
452
+ R && /* @__PURE__ */ (0, _jsxruntime.jsx)(Ar, _object_spread({}, M))
366
453
  ]
367
454
  }),
368
455
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_card.CardActionsGroup, {
369
- actions: v,
370
- onClose: w
456
+ actions: u,
457
+ onClose: I
371
458
  })
372
459
  ]
373
460
  }));
374
- }), Yr = br;
461
+ }), $r = br;
@@ -18,32 +18,35 @@ _export(exports, {
18
18
  coverHeroContainer: function() {
19
19
  return y;
20
20
  },
21
- hasSideExtra: function() {
21
+ flexColumn: function() {
22
22
  return f;
23
23
  },
24
- mainContent: function() {
24
+ hasSideExtra: function() {
25
25
  return _;
26
26
  },
27
- mediaLayer: function() {
27
+ mainContent: function() {
28
28
  return m;
29
29
  },
30
- mediaOverlay: function() {
30
+ mediaLayer: function() {
31
31
  return t;
32
32
  },
33
- minHeight: function() {
33
+ mediaOverlay: function() {
34
34
  return h;
35
35
  },
36
- sideExtra: function() {
36
+ minHeight: function() {
37
37
  return s;
38
38
  },
39
- sixColumns: function() {
39
+ sideExtra: function() {
40
40
  return z;
41
41
  },
42
- vars: function() {
42
+ sixColumns: function() {
43
43
  return p;
44
44
  },
45
- withAspectRatio: function() {
45
+ vars: function() {
46
46
  return c;
47
+ },
48
+ withAspectRatio: function() {
49
+ return x;
47
50
  }
48
51
  });
49
52
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
@@ -51,6 +54,6 @@ require("./responsive-layout.css.ts.vanilla.css-mistica.js");
51
54
  require("./grid-layout.css.ts.vanilla.css-mistica.js");
52
55
  require("./carousel.css.ts.vanilla.css-mistica.js");
53
56
  require("./cover-hero.css.ts.vanilla.css-mistica.js");
54
- 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 = {
57
+ 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 = {
55
58
  aspectRatio: "var(--moeazi0)"
56
- }, c = "moeazi5";
59
+ }, x = "moeazi5";
@@ -12,3 +12,4 @@ export declare const mediaOverlay: string;
12
12
  export declare const mainContent: string;
13
13
  export declare const sixColumns: string;
14
14
  export declare const sideExtra: string;
15
+ export declare const flexColumn: string;
@@ -11,6 +11,7 @@ type BaseProps = {
11
11
  headline?: RendersNullableElement<typeof Tag>;
12
12
  pretitle?: string;
13
13
  pretitleLinesMax?: number;
14
+ pretitleAs?: HeadingType;
14
15
  title: string;
15
16
  titleLinesMax?: number;
16
17
  titleAs?: HeadingType;