@telefonica/mistica 16.4.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 (108) hide show
  1. package/css/mistica.css +1 -1
  2. package/css/vivo-new.css +11 -11
  3. package/dist/accordion.css-mistica.js +16 -13
  4. package/dist/accordion.css.d.ts +1 -0
  5. package/dist/accordion.d.ts +4 -0
  6. package/dist/accordion.js +110 -93
  7. package/dist/callout.js +27 -15
  8. package/dist/card.css-mistica.js +5 -5
  9. package/dist/card.d.ts +9 -1
  10. package/dist/card.js +611 -475
  11. package/dist/community/advanced-data-card.css-mistica.js +14 -11
  12. package/dist/community/advanced-data-card.css.d.ts +1 -0
  13. package/dist/community/advanced-data-card.d.ts +1 -1
  14. package/dist/community/advanced-data-card.js +172 -85
  15. package/dist/cover-hero.css-mistica.js +14 -11
  16. package/dist/cover-hero.css.d.ts +1 -0
  17. package/dist/cover-hero.d.ts +1 -0
  18. package/dist/cover-hero.js +101 -59
  19. package/dist/empty-state.js +24 -15
  20. package/dist/header.css-mistica.js +6 -3
  21. package/dist/header.css.d.ts +1 -0
  22. package/dist/header.d.ts +3 -2
  23. package/dist/header.js +148 -79
  24. package/dist/hero.css-mistica.js +11 -8
  25. package/dist/hero.css.d.ts +1 -0
  26. package/dist/hero.d.ts +2 -1
  27. package/dist/hero.js +102 -68
  28. package/dist/highlighted-card.js +32 -23
  29. package/dist/index.d.ts +1 -0
  30. package/dist/index.js +4 -0
  31. package/dist/maybe-dismissable.js +8 -5
  32. package/dist/meter.d.ts +23 -0
  33. package/dist/meter.js +400 -0
  34. package/dist/mosaic.d.ts +6 -2
  35. package/dist/mosaic.js +50 -48
  36. package/dist/navigation-bar.css-mistica.js +96 -37
  37. package/dist/navigation-bar.css.d.ts +27 -1
  38. package/dist/navigation-bar.d.ts +65 -30
  39. package/dist/navigation-bar.js +818 -193
  40. package/dist/package-version.js +1 -1
  41. package/dist/sheet-common.css-mistica.js +16 -10
  42. package/dist/sheet-common.css.d.ts +3 -1
  43. package/dist/sheet-common.js +78 -70
  44. package/dist/sheet-info.css-mistica.js +15 -4
  45. package/dist/sheet-info.css.d.ts +2 -0
  46. package/dist/sheet-info.d.ts +3 -0
  47. package/dist/sheet-info.js +61 -43
  48. package/dist/sheet-native.js +59 -48
  49. package/dist/sheet-types.d.ts +6 -1
  50. package/dist/sheet-web.js +6 -4
  51. package/dist/skins/blau.js +94 -94
  52. package/dist/skins/movistar.js +94 -94
  53. package/dist/skins/o2-new.js +94 -94
  54. package/dist/skins/o2.js +94 -94
  55. package/dist/skins/telefonica.js +94 -94
  56. package/dist/skins/tu.js +94 -94
  57. package/dist/skins/vivo-new.js +98 -98
  58. package/dist/skins/vivo.js +94 -94
  59. package/dist/text-tokens.d.ts +14 -0
  60. package/dist/text-tokens.js +134 -102
  61. package/dist/theme-context-provider.js +60 -50
  62. package/dist/theme.d.ts +3 -2
  63. package/dist/theme.js +20 -17
  64. package/dist/utils/headings.d.ts +2 -0
  65. package/dist/utils/headings.js +11 -0
  66. package/dist/utils/types.d.ts +1 -0
  67. package/dist-es/accordion.css-mistica.js +7 -7
  68. package/dist-es/accordion.js +140 -123
  69. package/dist-es/callout.js +55 -43
  70. package/dist-es/card.css-mistica.js +2 -2
  71. package/dist-es/card.js +721 -588
  72. package/dist-es/community/advanced-data-card.css-mistica.js +3 -3
  73. package/dist-es/community/advanced-data-card.js +217 -130
  74. package/dist-es/cover-hero.css-mistica.js +3 -3
  75. package/dist-es/cover-hero.js +132 -90
  76. package/dist-es/empty-state.js +40 -31
  77. package/dist-es/header.css-mistica.js +2 -2
  78. package/dist-es/header.js +174 -104
  79. package/dist-es/hero.css-mistica.js +2 -2
  80. package/dist-es/hero.js +150 -115
  81. package/dist-es/highlighted-card.js +36 -27
  82. package/dist-es/index.js +1839 -1838
  83. package/dist-es/maybe-dismissable.js +17 -14
  84. package/dist-es/meter.js +346 -0
  85. package/dist-es/mosaic.js +73 -71
  86. package/dist-es/navigation-bar.css-mistica.js +14 -15
  87. package/dist-es/navigation-bar.js +864 -240
  88. package/dist-es/package-version.js +1 -1
  89. package/dist-es/sheet-common.css-mistica.js +2 -2
  90. package/dist-es/sheet-common.js +124 -116
  91. package/dist-es/sheet-info.css-mistica.js +2 -2
  92. package/dist-es/sheet-info.js +74 -56
  93. package/dist-es/sheet-native.js +59 -48
  94. package/dist-es/sheet-web.js +10 -8
  95. package/dist-es/skins/blau.js +94 -94
  96. package/dist-es/skins/movistar.js +94 -94
  97. package/dist-es/skins/o2-new.js +94 -94
  98. package/dist-es/skins/o2.js +94 -94
  99. package/dist-es/skins/telefonica.js +94 -94
  100. package/dist-es/skins/tu.js +94 -94
  101. package/dist-es/skins/vivo-new.js +98 -98
  102. package/dist-es/skins/vivo.js +94 -94
  103. package/dist-es/style.css +1 -1
  104. package/dist-es/text-tokens.js +72 -52
  105. package/dist-es/theme-context-provider.js +88 -78
  106. package/dist-es/theme.js +20 -20
  107. package/dist-es/utils/headings.js +2 -0
  108. package/package.json +2 -1
@@ -13,32 +13,35 @@ _export(exports, {
13
13
  return e;
14
14
  },
15
15
  chevronContainer: function() {
16
- return v;
16
+ return r;
17
17
  },
18
18
  itemContent: function() {
19
- return r;
19
+ return a;
20
20
  },
21
21
  panel: function() {
22
- return a;
22
+ return v;
23
23
  },
24
24
  panelContainer: function() {
25
- return _;
25
+ return t;
26
26
  },
27
27
  panelTransitionClasses: function() {
28
- return t;
28
+ return _;
29
29
  },
30
- touchableBackground: function() {
30
+ rightContentContainer: function() {
31
31
  return i;
32
32
  },
33
- touchableBackgroundInverse: function() {
33
+ touchableBackground: function() {
34
34
  return o;
35
+ },
36
+ touchableBackgroundInverse: function() {
37
+ return x;
35
38
  }
36
39
  });
37
40
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
38
41
  require("./accordion.css.ts.vanilla.css-mistica.js");
39
- var e = "_1y2v1nfib", v = "_8s3szx3", r = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfib _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhq _1y2v1nfis", a = "_8s3szx9", _ = "_8s3szx4", t = {
40
- enter: "_8s3szx5",
41
- enterActive: "_8s3szx6",
42
- exit: "_8s3szx7",
43
- exitActive: "_8s3szx8"
44
- }, i = "_8s3szx1", o = "_8s3szx2";
42
+ var e = "_1y2v1nfib", r = "_8s3szx4", a = "_1y2v1nf7h _1y2v1nf8q _1y2v1nf9z _1y2v1nfb8 _1y2v1nfib _1y2v1nfk6 _1y2v1nf7g _1y2v1nfhq _1y2v1nfis", v = "_8s3szxa", t = "_8s3szx5", _ = {
43
+ enter: "_8s3szx6",
44
+ enterActive: "_8s3szx7",
45
+ exit: "_8s3szx8",
46
+ exitActive: "_8s3szx9"
47
+ }, i = "_8s3szx3", o = "_8s3szx1", x = "_8s3szx2";
@@ -1,6 +1,7 @@
1
1
  export declare const itemContent: string;
2
2
  export declare const touchableBackground: string;
3
3
  export declare const touchableBackgroundInverse: string;
4
+ export declare const rightContentContainer: string;
4
5
  export declare const chevronContainer: string;
5
6
  export declare const panelContainer: string;
6
7
  export declare const panelTransitionClasses: {
@@ -12,6 +12,10 @@ interface AccordionItemContentProps {
12
12
  dataAttributes?: DataAttributes;
13
13
  trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
14
14
  role?: string;
15
+ detail?: string;
16
+ right?: React.ReactNode;
17
+ 'aria-label'?: string;
18
+ 'aria-labelledby'?: string;
15
19
  }
16
20
  export declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemContentProps & React.RefAttributes<TouchableElement>>;
17
21
  type AccordionBaseProps = {
package/dist/accordion.js CHANGED
@@ -11,16 +11,16 @@ function _export(target, all) {
11
11
  }
12
12
  _export(exports, {
13
13
  Accordion: function() {
14
- return de;
14
+ return pe;
15
15
  },
16
16
  AccordionItem: function() {
17
- return ie;
17
+ return fe;
18
18
  },
19
19
  BoxedAccordion: function() {
20
- return ae;
20
+ return xe;
21
21
  },
22
22
  BoxedAccordionItem: function() {
23
- return se;
23
+ return Ie;
24
24
  }
25
25
  });
26
26
  const _jsxruntime = require("react/jsx-runtime");
@@ -39,6 +39,7 @@ const _boxed = require("./boxed.js");
39
39
  const _themevariantcontext = require("./theme-variant-context.js");
40
40
  const _reacttransitiongroup = require("react-transition-group");
41
41
  const _platform = require("./utils/platform.js");
42
+ const _inline = /*#__PURE__*/ _interop_require_default(require("./inline.js"));
42
43
  function _interop_require_default(obj) {
43
44
  return obj && obj.__esModule ? obj : {
44
45
  default: obj
@@ -164,196 +165,212 @@ function _object_without_properties_loose(source, excluded) {
164
165
  }
165
166
  return target;
166
167
  }
167
- const v = 400, g = /*#__PURE__*/ _react.createContext({
168
+ const R = 400, C = /*#__PURE__*/ _react.createContext({
168
169
  index: [],
169
170
  toggle: ()=>{}
170
- }), F = ()=>_react.useContext(g), B = (param)=>{
171
- let { value: t, defaultValue: r, onChange: n, singleOpen: i } = param;
172
- const m = t !== void 0, s = (e)=>e === void 0 ? [] : typeof e == "number" ? [
171
+ }), Q = ()=>_react.useContext(C), N = (param)=>{
172
+ let { value: n, defaultValue: r, onChange: t, singleOpen: c } = param;
173
+ const d = n !== void 0, s = (e)=>e === void 0 ? [] : typeof e == "number" ? [
173
174
  e
174
- ] : e, [d, a] = _react.useState(s(r));
175
+ ] : e, [a, u] = _react.useState(s(r));
175
176
  _react.useEffect(()=>{
176
- if (d.length > 1 && i) {
177
+ if (a.length > 1 && c) {
177
178
  const e = [
178
- ...d
179
+ ...a
179
180
  ];
180
- e.splice(1), a(e);
181
+ e.splice(1), u(e);
181
182
  }
182
183
  }, [
183
- i,
184
- d
184
+ c,
185
+ a
185
186
  ]);
186
- const p = (e, l)=>{
187
+ const m = (e, l)=>{
187
188
  if (!l) return [
188
189
  e
189
190
  ];
190
- const u = l.indexOf(e);
191
+ const p = l.indexOf(e);
191
192
  let I = [
192
193
  ...l
193
194
  ];
194
- return u === -1 ? i ? I = [
195
+ return p === -1 ? c ? I = [
195
196
  e
196
- ] : I.push(e) : I.splice(u, 1), I;
197
+ ] : I.push(e) : I.splice(p, 1), I;
197
198
  }, f = (e)=>{
198
- if (m || a(p(e, d)), n) {
199
- const l = (m ? s(t) : d).includes(e);
200
- n(e, !l);
199
+ if (d || u(m(e, a)), t) {
200
+ const l = (d ? s(n) : a).includes(e);
201
+ t(e, !l);
201
202
  }
202
203
  };
203
- return m ? [
204
- s(t),
204
+ return d ? [
205
+ s(n),
205
206
  f
206
207
  ] : [
207
- d,
208
+ a,
208
209
  f
209
210
  ];
210
- }, H = (t)=>{
211
- const r = t == null ? void 0 : t.closest("[data-accordion]");
212
- if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((n)=>n.closest("[data-accordion]") === r).findIndex((n)=>n === t);
213
- }, b = /*#__PURE__*/ _react.forwardRef((_param, m)=>{
214
- var { content: t, dataAttributes: r, trackingEvent: n } = _param, i = _object_without_properties(_param, [
211
+ }, W = (n)=>{
212
+ const r = n == null ? void 0 : n.closest("[data-accordion]");
213
+ if (r) return Array.from(r.querySelectorAll("[data-accordion-item]")).filter((t)=>t.closest("[data-accordion]") === r).findIndex((t)=>t === n);
214
+ }, S = /*#__PURE__*/ _react.forwardRef((_param, u)=>{
215
+ var { content: n, dataAttributes: r, trackingEvent: t, right: c, "aria-label": d, "aria-labelledby": s } = _param, a = _object_without_properties(_param, [
215
216
  "content",
216
217
  "dataAttributes",
217
- "trackingEvent"
218
+ "trackingEvent",
219
+ "right",
220
+ "aria-label",
221
+ "aria-labelledby"
218
222
  ]);
219
- const s = _react.useRef(null), d = _react.useRef(null), { index: a, toggle: p } = F(), f = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), e = _react.useId(), l = _react.useId(), [u, I] = _react.useState(), x = u !== void 0 && (a == null ? void 0 : a.includes(u));
223
+ const m = _react.useRef(null), f = _react.useRef(null), { index: e, toggle: l } = Q(), p = (0, _themevariantcontext.useIsInverseOrMediaVariant)(), I = _react.useId(), b = _react.useId(), [x, y] = _react.useState(), h = x !== void 0 && (e == null ? void 0 : e.includes(x));
220
224
  return _react.useEffect(()=>{
221
- I(H(d.current));
225
+ y(W(f.current));
222
226
  }, []), /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", _object_spread_props(_object_spread({
223
- ref: d
227
+ ref: f
224
228
  }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
225
229
  "accordion-item": !0
226
230
  }))), {
227
231
  children: [
228
232
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_touchable.BaseTouchable, {
229
- ref: m,
230
- className: (0, _classnames.default)(_accordioncssmistica.itemContent, f ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
233
+ ref: u,
234
+ className: (0, _classnames.default)(_accordioncssmistica.itemContent, p ? _accordioncssmistica.touchableBackgroundInverse : _accordioncssmistica.touchableBackground),
231
235
  onPress: ()=>{
232
- u !== void 0 && p(u);
236
+ x !== void 0 && l(x);
233
237
  },
234
- trackingEvent: n,
235
- "aria-expanded": x,
236
- "aria-controls": l,
238
+ trackingEvent: t,
239
+ "aria-expanded": h,
240
+ "aria-controls": b,
241
+ "aria-label": d,
242
+ "aria-labelledby": s,
237
243
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
238
244
  paddingX: 16,
239
245
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_list.Content, _object_spread_props(_object_spread({
240
- labelId: e
241
- }, i), {
242
- right: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
243
- className: _accordioncssmistica.chevronContainer,
244
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
245
- size: 24,
246
- transitionDuration: v,
247
- direction: x ? "up" : "down",
248
- color: f ? _skincontractcssmistica.vars.colors.inverse : x ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
249
- })
250
- })
246
+ labelId: I
247
+ }, a), {
248
+ right: (param)=>{
249
+ let { centerY: O } = param;
250
+ return /* @__PURE__ */ (0, _jsxruntime.jsxs)(_inline.default, {
251
+ space: 4,
252
+ alignItems: O ? "center" : void 0,
253
+ className: _accordioncssmistica.rightContentContainer,
254
+ children: [
255
+ c,
256
+ /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
257
+ className: _accordioncssmistica.chevronContainer,
258
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconchevron.default, {
259
+ size: 24,
260
+ transitionDuration: R,
261
+ direction: h ? "up" : "down",
262
+ color: p ? _skincontractcssmistica.vars.colors.inverse : h ? _skincontractcssmistica.vars.colors.neutralHigh : _skincontractcssmistica.vars.colors.neutralMedium
263
+ })
264
+ })
265
+ ]
266
+ });
267
+ }
251
268
  }))
252
269
  })
253
270
  }),
254
271
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_reacttransitiongroup.CSSTransition, {
255
- in: x,
256
- timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : v,
257
- nodeRef: s,
272
+ in: h,
273
+ timeout: (0, _platform.isRunningAcceptanceTest)() ? 0 : R,
274
+ nodeRef: m,
258
275
  classNames: _accordioncssmistica.panelTransitionClasses,
259
276
  mountOnEnter: !0,
260
277
  unmountOnExit: !0,
261
278
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
262
279
  className: _accordioncssmistica.panelContainer,
263
- ref: s,
280
+ ref: m,
264
281
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
265
282
  className: _accordioncssmistica.panel,
266
283
  role: "region",
267
- "aria-labelledby": e,
268
- id: l,
284
+ "aria-labelledby": I,
285
+ id: b,
269
286
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
270
287
  paddingX: 16,
271
288
  paddingBottom: 16,
272
- children: t
289
+ children: n
273
290
  })
274
291
  })
275
292
  })
276
293
  })
277
294
  ]
278
295
  }));
279
- }), ie = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
280
- var { dataAttributes: t, role: r } = _param, n = _object_without_properties(_param, [
296
+ }), fe = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
297
+ var { dataAttributes: n, role: r } = _param, t = _object_without_properties(_param, [
281
298
  "dataAttributes",
282
299
  "role"
283
300
  ]);
284
301
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
285
302
  role: r,
286
303
  className: _accordioncssmistica.accordionItem,
287
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread_props(_object_spread({}, n), {
288
- ref: i,
304
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread_props(_object_spread({}, t), {
305
+ ref: c,
289
306
  dataAttributes: _object_spread({
290
307
  "component-name": "AccordionItem"
291
- }, t)
308
+ }, n)
292
309
  }))
293
310
  });
294
- }), de = (param)=>{
295
- let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: m, singleOpen: s, role: d } = param;
296
- const [a, p] = B({
297
- value: n,
298
- defaultValue: i,
299
- onChange: m,
311
+ }), pe = (param)=>{
312
+ let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: d, singleOpen: s, role: a } = param;
313
+ const [u, m] = N({
314
+ value: t,
315
+ defaultValue: c,
316
+ onChange: d,
300
317
  singleOpen: s
301
- }), f = _react.Children.toArray(t).filter(Boolean), e = f.length - 1;
302
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
318
+ }), f = _react.Children.toArray(n).filter(Boolean), e = f.length - 1;
319
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(C.Provider, {
303
320
  value: {
304
- index: a,
305
- toggle: p
321
+ index: u,
322
+ toggle: m
306
323
  },
307
324
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)("div", _object_spread_props(_object_spread({
308
- role: d
325
+ role: a
309
326
  }, (0, _dom.getPrefixedDataAttributes)(_object_spread_props(_object_spread({}, r), {
310
327
  accordion: !0
311
328
  }), "Accordion")), {
312
- children: f.map((l, u)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
329
+ children: f.map((l, p)=>/* @__PURE__ */ (0, _jsxruntime.jsxs)(_react.Fragment, {
313
330
  children: [
314
331
  l,
315
- u < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
332
+ p < e && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
316
333
  paddingX: 16,
317
334
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_divider.default, {})
318
335
  })
319
336
  ]
320
- }, u))
337
+ }, p))
321
338
  }))
322
339
  });
323
- }, se = /*#__PURE__*/ _react.forwardRef((_param, i)=>{
324
- var { dataAttributes: t, isInverse: r } = _param, n = _object_without_properties(_param, [
340
+ }, Ie = /*#__PURE__*/ _react.forwardRef((_param, c)=>{
341
+ var { dataAttributes: n, isInverse: r } = _param, t = _object_without_properties(_param, [
325
342
  "dataAttributes",
326
343
  "isInverse"
327
344
  ]);
328
345
  return /* @__PURE__ */ (0, _jsxruntime.jsx)(_boxed.Boxed, {
329
- isInverse: r,
330
- ref: i,
346
+ variant: r ? "inverse" : "default",
347
+ ref: c,
331
348
  dataAttributes: _object_spread({
332
349
  "component-name": "BoxedAccordionItem"
333
- }, t),
334
- children: /* @__PURE__ */ (0, _jsxruntime.jsx)(b, _object_spread({}, n))
350
+ }, n),
351
+ children: /* @__PURE__ */ (0, _jsxruntime.jsx)(S, _object_spread({}, t))
335
352
  });
336
- }), ae = (param)=>{
337
- let { children: t, dataAttributes: r, index: n, defaultIndex: i, onChange: m, singleOpen: s, role: d } = param;
338
- const [a, p] = B({
339
- value: n,
340
- defaultValue: i,
341
- onChange: m,
353
+ }), xe = (param)=>{
354
+ let { children: n, dataAttributes: r, index: t, defaultIndex: c, onChange: d, singleOpen: s, role: a } = param;
355
+ const [u, m] = N({
356
+ value: t,
357
+ defaultValue: c,
358
+ onChange: d,
342
359
  singleOpen: s
343
360
  });
344
- return /* @__PURE__ */ (0, _jsxruntime.jsx)(g.Provider, {
361
+ return /* @__PURE__ */ (0, _jsxruntime.jsx)(C.Provider, {
345
362
  value: {
346
- index: a,
347
- toggle: p
363
+ index: u,
364
+ toggle: m
348
365
  },
349
366
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_stack.default, {
350
367
  space: 16,
351
- role: d,
368
+ role: a,
352
369
  dataAttributes: _object_spread({
353
370
  "component-name": "BoxedAccordion",
354
371
  accordion: !0
355
372
  }, r),
356
- children: t
373
+ children: n
357
374
  })
358
375
  });
359
376
  };
package/dist/callout.js CHANGED
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  Object.defineProperty(exports, "default", {
7
7
  enumerable: true,
8
8
  get: function() {
9
- return or;
9
+ return at;
10
10
  }
11
11
  });
12
12
  const _jsxruntime = require("react/jsx-runtime");
@@ -84,22 +84,25 @@ function _object_spread_props(target, source) {
84
84
  return target;
85
85
  }
86
86
  const W = (param)=>{
87
- let { title: o, titleAs: c = "h2", description: d, asset: a, onClose: t, closeButtonLabel: p, button: i, secondaryButton: l, buttonLink: m, "aria-label": u, dataAttributes: f, role: h } = param;
88
- const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t: g } = (0, _hooks.useTheme)();
87
+ let { title: a, titleAs: c = "h2", description: d, asset: o, onClose: r, closeButtonLabel: u, button: i, secondaryButton: s, buttonLink: l, "aria-label": p, dataAttributes: f, role: h } = param;
88
+ const b = (0, _themevariantcontext.useThemeVariant)(), { texts: x, t: B } = (0, _hooks.useTheme)();
89
89
  return /* @__PURE__ */ (0, _jsxruntime.jsx)("section", _object_spread_props(_object_spread({
90
90
  className: (0, _classnames.default)(_calloutcssmistica.container, _calloutcssmistica.background[b]),
91
91
  style: (0, _css.applyCssVars)({
92
92
  [_imagecssmistica.vars.mediaBorderRadius]: _skincontractcssmistica.vars.borderRadii.mediaSmall
93
93
  }),
94
- "aria-label": u !== null && u !== void 0 ? u : o,
94
+ "aria-label": p !== null && p !== void 0 ? p : a,
95
95
  role: h
96
96
  }, (0, _dom.getPrefixedDataAttributes)(f, "Callout")), {
97
97
  children: /* @__PURE__ */ (0, _jsxruntime.jsxs)(_themevariantcontext.ThemeVariant, {
98
98
  isInverse: !1,
99
99
  children: [
100
- a && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
100
+ o && /* @__PURE__ */ (0, _jsxruntime.jsx)(_box.default, {
101
101
  paddingRight: 16,
102
- children: a
102
+ dataAttributes: {
103
+ testid: "asset"
104
+ },
105
+ children: o
103
106
  }),
104
107
  /* @__PURE__ */ (0, _jsxruntime.jsxs)("div", {
105
108
  className: _calloutcssmistica.content,
@@ -118,39 +121,48 @@ const W = (param)=>{
118
121
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text3, {
119
122
  as: c,
120
123
  regular: !0,
121
- children: o
124
+ dataAttributes: {
125
+ testid: "title"
126
+ },
127
+ children: a
122
128
  }),
123
129
  /* @__PURE__ */ (0, _jsxruntime.jsx)(_text.Text2, {
124
130
  as: "p",
125
131
  regular: !0,
126
132
  color: _skincontractcssmistica.vars.colors.textSecondary,
133
+ dataAttributes: {
134
+ testid: "description"
135
+ },
127
136
  children: d
128
137
  })
129
138
  ]
130
139
  }),
131
- t && // Create empty div in order to fill space that iconButton occupies.
140
+ r && // Create empty div in order to fill space that iconButton occupies.
132
141
  // Without this, the content's vertical alignment can be affected
133
142
  /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
134
143
  className: _calloutcssmistica.closeButtonContainerSize
135
144
  })
136
145
  ]
137
146
  }),
138
- (i || l || m) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
147
+ (i || s || l) && /* @__PURE__ */ (0, _jsxruntime.jsx)(_buttongroup.default, {
139
148
  primaryButton: i,
140
- secondaryButton: l,
141
- link: m
149
+ secondaryButton: s,
150
+ link: l
142
151
  })
143
152
  ]
144
153
  }),
145
- t && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
154
+ r && /* @__PURE__ */ (0, _jsxruntime.jsx)("div", {
146
155
  className: _calloutcssmistica.closeButtonContainer,
147
156
  children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_iconbutton.IconButton, {
157
+ dataAttributes: {
158
+ testid: "closeButton"
159
+ },
148
160
  small: !0,
149
161
  bleedY: !0,
150
162
  bleedRight: !0,
151
163
  Icon: _iconcloseregular.default,
152
- onPress: t,
153
- "aria-label": p || x.closeButtonLabel || g(_texttokens.closeButtonLabel)
164
+ onPress: r,
165
+ "aria-label": u || x.closeButtonLabel || B(_texttokens.closeButtonLabel)
154
166
  })
155
167
  })
156
168
  ]
@@ -158,4 +170,4 @@ const W = (param)=>{
158
170
  ]
159
171
  })
160
172
  }));
161
- }, or = W;
173
+ }, at = W;
@@ -28,10 +28,10 @@ _export(exports, {
28
28
  return i;
29
29
  },
30
30
  dataCardTopActionsWithoutIcon: function() {
31
- return s;
31
+ return t;
32
32
  },
33
33
  displayCardBackground: function() {
34
- return t;
34
+ return s;
35
35
  },
36
36
  displayCardContainer: function() {
37
37
  return o;
@@ -55,10 +55,10 @@ _export(exports, {
55
55
  return p;
56
56
  },
57
57
  mediaCard: function() {
58
- return c;
58
+ return u;
59
59
  },
60
60
  mediaCardAsset: function() {
61
- return u;
61
+ return c;
62
62
  },
63
63
  mediaCardContent: function() {
64
64
  return m;
@@ -100,7 +100,7 @@ _export(exports, {
100
100
  require("./sprinkles.css.ts.vanilla.css-mistica.js");
101
101
  require("./icon-button.css.ts.vanilla.css-mistica.js");
102
102
  require("./card.css.ts.vanilla.css-mistica.js");
103
- var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", s = "_15e54s913", t = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_15e54s914", c = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", u = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
103
+ var _ = "_15e54s91 _1y2v1nfho _1y2v1nfia _1y2v1nfi4", y = "_15e54s93 _1y2v1nfho _1y2v1nfhi", e = "_15e54s912", r = "_1y2v1nfho _1y2v1nfia _1y2v1nfi0 _1y2v1nfhu", f = "_15e54s99", i = "_15e54s9m _1y2v1nfae _1y2v1nfbn _1y2v1nf82 _1y2v1nf9b _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfib", t = "_15e54s913", s = "_15e54s9v", o = "_1y2v1nfib _1y2v1nfis _1y2v1nfho _1y2v1nfhi", d = "_15e54s9s", C = "_1y2v1nf7w _1y2v1nf84", h = "_1y2v1nf82", b = "_1y2v1nfak _1y2v1nfbt _1y2v1nf9b", l = "_15e54s9y _1y2v1nf88", p = "_1y2v1nfho _1y2v1nfhu", u = "_1y2v1nfho _1y2v1nfhu _1y2v1nfis _1y2v1nfib _1y2v1nfia", c = "_15e54s9i _1y2v1nfae _1y2v1nfam _1y2v1nf7w _1y2v1nf84", m = "_15e54s9g _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nf7w _1y2v1nf9b _1y2v1nfhu _1y2v1nfi0", O = "_15e54s9k _1y2v1nfho _1y2v1nfia _1y2v1nfhi _1y2v1nfhu _1y2v1nfi0 _1y2v1nf7w _1y2v1nfbn", k = "_1y2v1nfae _1y2v1nfam _1y2v1nfbn _1y2v1nfbv _1y2v1nf9b", w = "_15e54s9o _1y2v1nf7w _1y2v1nf95 _1y2v1nfae _1y2v1nfbn _1y2v1nfho _1y2v1nfhi _1y2v1nfis _1y2v1nfhu _1y2v1nfi0 _1y2v1nfib _1y2v1nfia", W = "_15e54s96", A = "_15e54s9b _15e54s97", M = "_15e54s9c _15e54s97", x = "_15e54s9d _15e54s97", g = "_15e54s95", I = "_15e54s98 _15e54s97", T = "_15e54s9a _15e54s97", B = {
104
104
  aspectRatio: "var(--_15e54s910)",
105
105
  topActionsCount: "var(--_15e54s911)"
106
106
  };
package/dist/card.d.ts CHANGED
@@ -2,12 +2,16 @@ import * as React from 'react';
2
2
  import Tag from './tag';
3
3
  import Image from './image';
4
4
  import Video from './video';
5
+ import { type DataAttributes, type HeadingType, type IconProps, type RendersElement, type RendersNullableElement, type TrackingEvent } from './utils/types';
5
6
  import type { Variant } from './theme-variant-context';
6
7
  import type { PressHandler } from './touchable';
7
8
  import type { VideoElement, VideoSource } from './video';
8
9
  import type { ButtonLink, ButtonPrimary, ButtonSecondary } from './button';
9
10
  import type { ExclusifyUnion } from './utils/utility-types';
10
- import type { DataAttributes, HeadingType, IconProps, RendersElement, RendersNullableElement, TrackingEvent } from './utils/types';
11
+ export declare const useInnerText: () => {
12
+ text: string;
13
+ ref: (instance: HTMLElement | null) => void;
14
+ };
11
15
  type BaseIconButtonAction = {
12
16
  Icon: (props: IconProps) => JSX.Element;
13
17
  label: string;
@@ -73,6 +77,7 @@ interface MediaCardBaseProps {
73
77
  asset?: React.ReactElement;
74
78
  headline?: string | RendersNullableElement<typeof Tag>;
75
79
  pretitle?: string;
80
+ pretitleAs?: HeadingType;
76
81
  pretitleLinesMax?: number;
77
82
  title?: string;
78
83
  titleAs?: HeadingType;
@@ -116,6 +121,7 @@ interface DataCardBaseProps {
116
121
  asset?: React.ReactElement;
117
122
  headline?: string | RendersNullableElement<typeof Tag>;
118
123
  pretitle?: string;
124
+ pretitleAs?: HeadingType;
119
125
  pretitleLinesMax?: number;
120
126
  title?: string;
121
127
  titleAs?: HeadingType;
@@ -168,6 +174,7 @@ interface CommonDisplayCardProps {
168
174
  dataAttributes?: DataAttributes;
169
175
  headline?: React.ReactComponentElement<typeof Tag>;
170
176
  pretitle?: string;
177
+ pretitleAs?: HeadingType;
171
178
  pretitleLinesMax?: number;
172
179
  title: string;
173
180
  titleAs?: HeadingType;
@@ -222,6 +229,7 @@ interface PosterCardBaseProps {
222
229
  dataAttributes?: DataAttributes;
223
230
  headline?: string | RendersNullableElement<typeof Tag>;
224
231
  pretitle?: string;
232
+ pretitleAs?: HeadingType;
225
233
  pretitleLinesMax?: number;
226
234
  title?: string;
227
235
  titleAs?: HeadingType;