@telefonica/mistica 14.34.0 → 14.35.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 (156) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +1 -1
  3. package/dist/button.css-mistica.js +7 -7
  4. package/dist/callout.css-mistica.js +1 -1
  5. package/dist/callout.js +17 -12
  6. package/dist/card.js +277 -244
  7. package/dist/carousel.css-mistica.js +5 -5
  8. package/dist/carousel.js +54 -52
  9. package/dist/checkbox.js +18 -18
  10. package/dist/community/advanced-data-card.css-mistica.js +3 -3
  11. package/dist/community/advanced-data-card.js +57 -50
  12. package/dist/community/blocks.js +42 -35
  13. package/dist/counter.css-mistica.js +1 -1
  14. package/dist/cvv-field.js +1 -1
  15. package/dist/dialog.css-mistica.js +3 -3
  16. package/dist/dialog.js +2 -2
  17. package/dist/hero.js +34 -30
  18. package/dist/hooks.d.ts +12 -1
  19. package/dist/hooks.js +85 -48
  20. package/dist/image.css-mistica.js +7 -2
  21. package/dist/image.css.d.ts +3 -0
  22. package/dist/image.d.ts +1 -7
  23. package/dist/image.js +55 -66
  24. package/dist/list.css-mistica.js +1 -1
  25. package/dist/list.js +80 -75
  26. package/dist/loading-bar.css-mistica.js +6 -6
  27. package/dist/maybe-dismissable.css-mistica.js +1 -1
  28. package/dist/menu.js +32 -32
  29. package/dist/navigation-bar.css-mistica.js +10 -10
  30. package/dist/overlay.js +10 -10
  31. package/dist/package-version.js +1 -1
  32. package/dist/pin-field.css-mistica.js +3 -3
  33. package/dist/popover.css-mistica.js +4 -4
  34. package/dist/radio-button.css-mistica.js +5 -5
  35. package/dist/radio-button.js +7 -7
  36. package/dist/screen-reader-only.css-mistica.js +1 -1
  37. package/dist/select.css-mistica.js +7 -7
  38. package/dist/select.js +65 -53
  39. package/dist/sheet.css-mistica.js +8 -8
  40. package/dist/skeletons.d.ts +9 -1
  41. package/dist/skeletons.js +3 -0
  42. package/dist/skins/blau.js +2 -1
  43. package/dist/skins/defaults.js +2 -1
  44. package/dist/skins/movistar-legacy.js +2 -1
  45. package/dist/skins/movistar.js +2 -1
  46. package/dist/skins/o2.js +2 -1
  47. package/dist/skins/skin-contract.css-mistica.js +2 -1
  48. package/dist/skins/skin-contract.css.d.ts +1 -0
  49. package/dist/skins/telefonica.js +2 -1
  50. package/dist/skins/types/index.d.ts +1 -0
  51. package/dist/skins/vivo-new.js +2 -1
  52. package/dist/skins/vivo.js +2 -1
  53. package/dist/slider.css-mistica.js +19 -19
  54. package/dist/slider.css.d.ts +8 -8
  55. package/dist/slider.d.ts +28 -8
  56. package/dist/slider.js +226 -106
  57. package/dist/snackbar.css-mistica.js +5 -5
  58. package/dist/sprinkles.css-mistica.js +71 -68
  59. package/dist/stacking-group.js +31 -24
  60. package/dist/stepper.css-mistica.js +3 -3
  61. package/dist/switch-component.css-mistica.js +17 -17
  62. package/dist/switch-component.js +12 -12
  63. package/dist/tab-focus.js +12 -12
  64. package/dist/tabs.css-mistica.js +1 -1
  65. package/dist/text-field-base.css-mistica.js +1 -1
  66. package/dist/text-field-components.css-mistica.js +7 -7
  67. package/dist/text-link.css-mistica.js +3 -3
  68. package/dist/theme-context-provider.js +39 -36
  69. package/dist/tooltip-context-provider.d.ts +14 -0
  70. package/dist/tooltip-context-provider.js +90 -0
  71. package/dist/tooltip.css-mistica.js +25 -54
  72. package/dist/tooltip.css.d.ts +19 -26
  73. package/dist/tooltip.d.ts +15 -1
  74. package/dist/tooltip.js +255 -207
  75. package/dist/touchable.css-mistica.js +1 -1
  76. package/dist/touchable.js +8 -8
  77. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  78. package/dist/utils/environment.d.ts +1 -0
  79. package/dist/utils/environment.js +4 -1
  80. package/dist/utils/keys.d.ts +8 -0
  81. package/dist/utils/{key-codes.js → keys.js} +6 -6
  82. package/dist/video.css-mistica.js +1 -1
  83. package/dist/video.js +33 -31
  84. package/dist-es/avatar.css-mistica.js +1 -1
  85. package/dist-es/button.css-mistica.js +7 -7
  86. package/dist-es/callout.css-mistica.js +1 -1
  87. package/dist-es/callout.js +33 -28
  88. package/dist-es/card.js +416 -383
  89. package/dist-es/carousel.css-mistica.js +2 -2
  90. package/dist-es/carousel.js +84 -82
  91. package/dist-es/checkbox.js +18 -18
  92. package/dist-es/community/advanced-data-card.css-mistica.js +2 -2
  93. package/dist-es/community/advanced-data-card.js +83 -76
  94. package/dist-es/community/blocks.js +77 -70
  95. package/dist-es/counter.css-mistica.js +1 -1
  96. package/dist-es/cvv-field.js +1 -1
  97. package/dist-es/dialog.css-mistica.js +3 -3
  98. package/dist-es/dialog.js +2 -2
  99. package/dist-es/hero.js +69 -65
  100. package/dist-es/hooks.js +83 -49
  101. package/dist-es/image.css-mistica.js +4 -2
  102. package/dist-es/image.js +74 -79
  103. package/dist-es/list.css-mistica.js +1 -1
  104. package/dist-es/list.js +116 -111
  105. package/dist-es/loading-bar.css-mistica.js +2 -2
  106. package/dist-es/maybe-dismissable.css-mistica.js +1 -1
  107. package/dist-es/menu.js +41 -41
  108. package/dist-es/navigation-bar.css-mistica.js +6 -6
  109. package/dist-es/overlay.js +14 -14
  110. package/dist-es/package-version.js +1 -1
  111. package/dist-es/pin-field.css-mistica.js +2 -2
  112. package/dist-es/popover.css-mistica.js +2 -2
  113. package/dist-es/radio-button.css-mistica.js +4 -4
  114. package/dist-es/radio-button.js +2 -2
  115. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  116. package/dist-es/select.css-mistica.js +7 -7
  117. package/dist-es/select.js +89 -77
  118. package/dist-es/sheet.css-mistica.js +2 -2
  119. package/dist-es/skeletons.js +1 -1
  120. package/dist-es/skins/blau.js +2 -1
  121. package/dist-es/skins/defaults.js +2 -1
  122. package/dist-es/skins/movistar-legacy.js +2 -1
  123. package/dist-es/skins/movistar.js +2 -1
  124. package/dist-es/skins/o2.js +2 -1
  125. package/dist-es/skins/skin-contract.css-mistica.js +2 -1
  126. package/dist-es/skins/telefonica.js +2 -1
  127. package/dist-es/skins/vivo-new.js +2 -1
  128. package/dist-es/skins/vivo.js +2 -1
  129. package/dist-es/slider.css-mistica.js +2 -8
  130. package/dist-es/slider.js +231 -111
  131. package/dist-es/snackbar.css-mistica.js +4 -4
  132. package/dist-es/sprinkles.css-mistica.js +71 -68
  133. package/dist-es/stacking-group.js +37 -30
  134. package/dist-es/stepper.css-mistica.js +2 -2
  135. package/dist-es/style.css +1 -1
  136. package/dist-es/switch-component.css-mistica.js +13 -13
  137. package/dist-es/switch-component.js +14 -14
  138. package/dist-es/tab-focus.js +14 -14
  139. package/dist-es/tabs.css-mistica.js +1 -1
  140. package/dist-es/text-field-base.css-mistica.js +1 -1
  141. package/dist-es/text-field-components.css-mistica.js +2 -2
  142. package/dist-es/text-link.css-mistica.js +3 -3
  143. package/dist-es/theme-context-provider.js +53 -50
  144. package/dist-es/tooltip-context-provider.js +29 -0
  145. package/dist-es/tooltip.css-mistica.js +16 -9
  146. package/dist-es/tooltip.js +264 -216
  147. package/dist-es/touchable.css-mistica.js +1 -1
  148. package/dist-es/touchable.js +8 -8
  149. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  150. package/dist-es/utils/environment.js +2 -2
  151. package/dist-es/utils/keys.js +2 -0
  152. package/dist-es/video.css-mistica.js +1 -1
  153. package/dist-es/video.js +41 -39
  154. package/package.json +1 -1
  155. package/dist/utils/key-codes.d.ts +0 -8
  156. package/dist-es/utils/key-codes.js +0 -2
@@ -78,24 +78,26 @@ function _object_without_properties_loose(source, excluded) {
78
78
  }
79
79
  return target;
80
80
  }
81
- import { jsx as e, jsxs as r, Fragment as P } from "react/jsx-runtime";
82
- import * as U from "react";
83
- import { Boxed as V } from "../boxed.js";
81
+ import { jsx as e, jsxs as t, Fragment as P } from "react/jsx-runtime";
82
+ import * as M from "react";
83
+ import { Boxed as U } from "../boxed.js";
84
84
  import { sprinkles as C } from "../sprinkles.css-mistica.js";
85
85
  import j from "../stack.js";
86
- import { dataCard as X, touchableContainer as Y, touchableCardOverlay as Z, cardContentStyle as q, minHeight as J, zindex as K, paddingX as Q, touchableArea as $, divider as ee, actions as te, actionsVariants as re, marginRightButton as ae, buttonMobile as O, footerDirection as ie, marginRightAuto as oe, footerText as ne, adjustButtonLink as se, button as de } from "./advanced-data-card.css-mistica.js";
86
+ import { dataCard as X, touchableContainer as Y, touchableCardOverlay as Z, cardContentStyle as q, minHeight as J, zindex as K, paddingX as Q, touchableArea as $, divider as ee, actions as re, actionsVariants as te, marginRightButton as ae, buttonMobile as O, footerDirection as ie, marginRightAuto as oe, footerText as se, adjustButtonLink as ne, button as de } from "./advanced-data-card.css-mistica.js";
87
+ import { vars as le } from "../image.css-mistica.js";
87
88
  import k from "../divider.js";
88
89
  import { Text2 as v, Text as ce } from "../text.js";
89
- import { vars as T } from "../skins/skin-contract.css-mistica.js";
90
+ import { vars as y } from "../skins/skin-contract.css-mistica.js";
90
91
  import N from "../box.js";
91
- import le from "../touchable.js";
92
- import m from "classnames";
93
- import { CardActionsGroup as he, TOP_ACTION_BUTTON_SIZE as me } from "../card.js";
94
- import { useTheme as pe } from "../hooks.js";
95
- import { getPrefixedDataAttributes as ue } from "../utils/dom.js";
96
- import ge from "../inline.js";
97
- const fe = (_param)=>{
98
- var { headline: a, pretitle: i, pretitleAs: s = "p", pretitleLinesMax: p, title: d, titleAs: c = "h3", titleLinesMax: l, subtitle: h, subtitleLinesMax: o, description: t, descriptionLinesMax: u, ariaLabel: x } = _param, n = _object_without_properties(_param, [
92
+ import me from "../touchable.js";
93
+ import h from "classnames";
94
+ import { CardActionsGroup as he, TOP_ACTION_BUTTON_SIZE as pe } from "../card.js";
95
+ import { useTheme as ue } from "../hooks.js";
96
+ import { getPrefixedDataAttributes as ge } from "../utils/dom.js";
97
+ import fe from "../inline.js";
98
+ import { applyCssVars as ve } from "../utils/css.js";
99
+ const ye = (_param)=>{
100
+ var { headline: a, pretitle: i, pretitleAs: n = "p", pretitleLinesMax: p, title: d, titleAs: l = "h3", titleLinesMax: c, subtitle: m, subtitleLinesMax: o, description: r, descriptionLinesMax: u, ariaLabel: x } = _param, s = _object_without_properties(_param, [
99
101
  "headline",
100
102
  "pretitle",
101
103
  "pretitleAs",
@@ -109,23 +111,23 @@ const fe = (_param)=>{
109
111
  "descriptionLinesMax",
110
112
  "ariaLabel"
111
113
  ]);
112
- const { textPresets: y } = pe();
113
- return /* @__PURE__ */ r(j, {
114
+ const { textPresets: T } = ue();
115
+ return /* @__PURE__ */ t(j, {
114
116
  space: 4,
115
117
  children: [
116
118
  a,
117
- /* @__PURE__ */ e(le, _object_spread_props(_object_spread({
119
+ /* @__PURE__ */ e(me, _object_spread_props(_object_spread({
118
120
  tabIndex: 0,
119
121
  maybe: !0,
120
- className: m($)
121
- }, n), {
122
+ className: h($)
123
+ }, s), {
122
124
  "aria-label": x,
123
125
  children: /* @__PURE__ */ e(P, {})
124
126
  })),
125
127
  i && /* @__PURE__ */ e(v, {
126
- color: T.colors.textPrimary,
128
+ color: y.colors.textPrimary,
127
129
  truncate: p,
128
- as: s,
130
+ as: n,
129
131
  regular: !0,
130
132
  hyphens: "auto",
131
133
  children: i
@@ -135,82 +137,87 @@ const fe = (_param)=>{
135
137
  mobileLineHeight: "24px",
136
138
  desktopSize: 20,
137
139
  desktopLineHeight: "28px",
138
- truncate: l,
139
- weight: y.cardTitle.weight,
140
- as: c,
140
+ truncate: c,
141
+ weight: T.cardTitle.weight,
142
+ as: l,
141
143
  hyphens: "auto",
142
144
  children: d
143
145
  }),
144
146
  /* @__PURE__ */ e(v, {
145
- color: T.colors.textPrimary,
147
+ color: y.colors.textPrimary,
146
148
  truncate: o,
147
149
  as: "p",
148
150
  regular: !0,
149
151
  hyphens: "auto",
150
- children: h
152
+ children: m
151
153
  }),
152
- t && /* @__PURE__ */ e(v, {
154
+ r && /* @__PURE__ */ e(v, {
153
155
  truncate: u,
154
156
  as: "p",
155
157
  regular: !0,
156
- color: T.colors.textSecondary,
158
+ color: y.colors.textSecondary,
157
159
  hyphens: "auto",
158
- children: t
160
+ children: r
159
161
  })
160
162
  ]
161
163
  });
162
- }, ve = (param)=>{
163
- let { button: a, footerImage: i, footerText: s, footerTextLinesMax: p, buttonLink: d } = param;
164
- const c = !!a, l = !!i, h = !!s, o = !!d, t = c && (l || h) && o, u = o && !t ? "178px" : "";
165
- return /* @__PURE__ */ r(P, {
164
+ }, Ne = (param)=>{
165
+ let { button: a, footerImage: i, footerText: n, footerTextLinesMax: p, buttonLink: d } = param;
166
+ const l = !!a, c = !!i, m = !!n, o = !!d, r = l && (c || m) && o, u = o && !r ? "178px" : "";
167
+ return /* @__PURE__ */ t(P, {
166
168
  children: [
167
169
  /* @__PURE__ */ e("div", {
168
170
  className: ee,
169
171
  children: /* @__PURE__ */ e(k, {})
170
172
  }),
171
- /* @__PURE__ */ r("div", {
172
- className: m(te, re[t ? "mobile" : "default"]),
173
+ /* @__PURE__ */ t("div", {
174
+ className: h(re, te[r ? "mobile" : "default"]),
173
175
  children: [
174
- c && /* @__PURE__ */ e("div", {
175
- className: m(ae, O),
176
+ l && /* @__PURE__ */ e("div", {
177
+ className: h(ae, O),
176
178
  children: a
177
179
  }),
178
- /* @__PURE__ */ r("div", {
179
- className: m(ie, t ? oe : C({
180
+ /* @__PURE__ */ t("div", {
181
+ className: h(ie, r ? oe : C({
180
182
  paddingTop: 16
181
183
  })),
182
184
  children: [
183
- l && /* @__PURE__ */ e(N, {
185
+ c && /* @__PURE__ */ e(N, {
184
186
  paddingRight: 16,
185
187
  className: C({
186
188
  alignItems: "center",
187
189
  display: "flex"
188
190
  }),
189
- children: i
191
+ children: /* @__PURE__ */ e("div", {
192
+ style: ve({
193
+ [le.mediaBorderRadius]: y.borderRadii.mediaSmall
194
+ }),
195
+ children: i
196
+ })
190
197
  }),
191
- h && /* @__PURE__ */ e("div", {
198
+ m && /* @__PURE__ */ e("div", {
192
199
  style: {
193
200
  maxWidth: u
194
201
  },
195
- className: ne,
202
+ className: se,
196
203
  children: /* @__PURE__ */ e(v, {
197
204
  truncate: p,
198
205
  regular: !0,
199
- children: s
206
+ children: n
200
207
  })
201
208
  })
202
209
  ]
203
210
  }),
204
211
  o && /* @__PURE__ */ e("div", {
205
- className: m(se, t ? de : O),
212
+ className: h(ne, r ? de : O),
206
213
  children: d
207
214
  })
208
215
  ]
209
216
  })
210
217
  ]
211
218
  });
212
- }, Ne = /*#__PURE__*/ U.forwardRef((_param, _)=>{
213
- var { stackingGroup: a, headline: i, pretitle: s, pretitleAs: p, pretitleLinesMax: d, title: c, titleAs: l, titleLinesMax: h, subtitle: o, subtitleLinesMax: t, description: u, descriptionLinesMax: x, extra: n, extraDividerPadding: y = 24, button: A, footerImage: b, footerText: B, footerTextLinesMax: z, buttonLink: S, dataAttributes: H, actions: g, "aria-label": w, onClose: D } = _param, f = _object_without_properties(_param, [
219
+ }, xe = /*#__PURE__*/ M.forwardRef((_param, _)=>{
220
+ var { stackingGroup: a, headline: i, pretitle: n, pretitleAs: p, pretitleLinesMax: d, title: l, titleAs: c, titleLinesMax: m, subtitle: o, subtitleLinesMax: r, description: u, descriptionLinesMax: x, extra: s, extraDividerPadding: T = 24, button: b, footerImage: A, footerText: B, footerTextLinesMax: z, buttonLink: R, dataAttributes: H, actions: g, "aria-label": S, onClose: w } = _param, f = _object_without_properties(_param, [
214
221
  "stackingGroup",
215
222
  "headline",
216
223
  "pretitle",
@@ -235,63 +242,63 @@ const fe = (_param)=>{
235
242
  "aria-label",
236
243
  "onClose"
237
244
  ]);
238
- const E = !!f.href || !!f.onPress || !!f.to, W = {
239
- button: A,
240
- footerImage: b,
245
+ const E = !!f.href || !!f.onPress || !!f.to, V = {
246
+ button: b,
247
+ footerImage: A,
241
248
  footerText: B,
242
249
  footerTextLinesMax: z,
243
- buttonLink: S
244
- }, I = !!A || !!b || !!B || !!S, R = !!(n != null && n.length), G = ((g == null ? void 0 : g.length) || 0) + (D ? 1 : 0), L = {
250
+ buttonLink: R
251
+ }, D = !!b || !!A || !!B || !!R, I = !!(s != null && s.length), W = ((g == null ? void 0 : g.length) || 0) + (w ? 1 : 0), G = {
245
252
  marginRight: -16,
246
253
  marginTop: -24,
247
- width: me * G
254
+ width: pe * W
248
255
  };
249
256
  return /* @__PURE__ */ e("section", _object_spread_props(_object_spread({
250
257
  className: C({
251
258
  position: "relative",
252
259
  height: "100%"
253
260
  })
254
- }, ue(H, "AdvancedDataCard")), {
261
+ }, ge(H, "AdvancedDataCard")), {
255
262
  ref: _,
256
- "aria-label": w,
257
- children: /* @__PURE__ */ r(V, {
263
+ "aria-label": S,
264
+ children: /* @__PURE__ */ t(U, {
258
265
  className: X,
259
266
  children: [
260
- /* @__PURE__ */ r("div", {
267
+ /* @__PURE__ */ t("div", {
261
268
  className: Y,
262
269
  children: [
263
270
  E && /* @__PURE__ */ e("div", {
264
271
  className: Z
265
272
  }),
266
273
  /* @__PURE__ */ e("div", {
267
- className: m(q, !I && !R ? J : ""),
274
+ className: h(q, !D && !I ? J : ""),
268
275
  children: /* @__PURE__ */ e(N, {
269
276
  paddingTop: 8,
270
- children: /* @__PURE__ */ r(ge, {
277
+ children: /* @__PURE__ */ t(fe, {
271
278
  space: 0,
272
279
  children: [
273
- /* @__PURE__ */ r(j, {
280
+ /* @__PURE__ */ t(j, {
274
281
  space: 8,
275
282
  children: [
276
283
  a,
277
- /* @__PURE__ */ e(fe, _object_spread({
284
+ /* @__PURE__ */ e(ye, _object_spread({
278
285
  headline: i,
279
- pretitle: s,
286
+ pretitle: n,
280
287
  pretitleAs: p,
281
288
  pretitleLinesMax: d,
282
- title: c,
283
- titleAs: l,
284
- titleLinesMax: h,
289
+ title: l,
290
+ titleAs: c,
291
+ titleLinesMax: m,
285
292
  subtitle: o,
286
- subtitleLinesMax: t,
293
+ subtitleLinesMax: r,
287
294
  description: u,
288
295
  descriptionLinesMax: x,
289
- ariaLabel: w
296
+ ariaLabel: S
290
297
  }, f))
291
298
  ]
292
299
  }),
293
300
  !a && /* @__PURE__ */ e("div", {
294
- style: L
301
+ style: G
295
302
  })
296
303
  ]
297
304
  })
@@ -302,19 +309,19 @@ const fe = (_param)=>{
302
309
  flexGrow: 1
303
310
  }
304
311
  }),
305
- R && /* @__PURE__ */ e(N, {
312
+ I && /* @__PURE__ */ e(N, {
306
313
  paddingTop: 16,
307
314
  paddingBottom: 24,
308
315
  width: "100%",
309
316
  className: K,
310
- children: n.map((M, F)=>/* @__PURE__ */ r("div", {
317
+ children: s.map((L, F)=>/* @__PURE__ */ t("div", {
311
318
  children: [
312
319
  /* @__PURE__ */ e("div", {
313
320
  className: Q,
314
- children: M
321
+ children: L
315
322
  }),
316
- F + 1 !== n.length && /* @__PURE__ */ e(N, {
317
- paddingY: y,
323
+ F + 1 !== s.length && /* @__PURE__ */ e(N, {
324
+ paddingY: T,
318
325
  children: /* @__PURE__ */ e(k, {})
319
326
  })
320
327
  ]
@@ -322,14 +329,14 @@ const fe = (_param)=>{
322
329
  }),
323
330
  /* @__PURE__ */ e(he, {
324
331
  actions: g,
325
- onClose: D,
332
+ onClose: w,
326
333
  padding: 7
327
334
  })
328
335
  ]
329
336
  }),
330
- I && /* @__PURE__ */ e(ve, _object_spread({}, W))
337
+ D && /* @__PURE__ */ e(Ne, _object_spread({}, V))
331
338
  ]
332
339
  })
333
340
  }));
334
- }), je = Ne;
335
- export { Ne as AdvancedDataCard, je as default };
341
+ }), _e = xe;
342
+ export { xe as AdvancedDataCard, _e as default };
@@ -1,94 +1,101 @@
1
- import { jsx as r, jsxs as a } from "react/jsx-runtime";
2
- import p from "../stack.js";
1
+ import { jsx as r, jsxs as c } from "react/jsx-runtime";
2
+ import g from "../stack.js";
3
3
  import { column as x, rightContent as y } from "./blocks.css-mistica.js";
4
- import { Text2 as n, Text5 as f, Text8 as h, Text3 as v } from "../text.js";
5
- import { vars as c } from "../skins/skin-contract.css-mistica.js";
4
+ import { vars as f } from "../image.css-mistica.js";
5
+ import { Text2 as n, Text5 as v, Text8 as m, Text3 as S } from "../text.js";
6
+ import { vars as o } from "../skins/skin-contract.css-mistica.js";
6
7
  import s from "../inline.js";
7
8
  import u from "../box.js";
8
- import { ProgressBar as S } from "../progress-bar.js";
9
- import B from "classnames";
10
- const g = (param)=>{
11
- let { title: o, description: e } = param;
9
+ import { ProgressBar as B } from "../progress-bar.js";
10
+ import I from "classnames";
11
+ import { applyCssVars as k } from "../utils/css.js";
12
+ const p = (param)=>{
13
+ let { title: a, description: e } = param;
12
14
  const l = typeof e == "string" ? [
13
15
  e
14
16
  ] : e;
15
- return /* @__PURE__ */ a("div", {
17
+ return /* @__PURE__ */ c("div", {
16
18
  className: x,
17
19
  children: [
18
- /* @__PURE__ */ r(v, {
20
+ /* @__PURE__ */ r(S, {
19
21
  regular: !0,
20
- color: c.colors.textPrimary,
21
- children: o
22
+ color: o.colors.textPrimary,
23
+ children: a
22
24
  }),
23
25
  l && l.map((t, i)=>/* @__PURE__ */ r(n, {
24
26
  regular: !0,
25
- color: c.colors.textSecondary,
27
+ color: o.colors.textSecondary,
26
28
  as: "p",
27
29
  children: t
28
30
  }, i))
29
31
  ]
30
32
  });
31
- }, L = (param)=>/* @__PURE__ */ {
32
- let { title: o, stackingGroup: e, description: l, "aria-label": t } = param;
33
+ }, z = (param)=>/* @__PURE__ */ {
34
+ let { title: a, stackingGroup: e, description: l, "aria-label": t } = param;
33
35
  return r("div", {
34
36
  "aria-label": t,
35
- children: /* @__PURE__ */ a(s, {
37
+ children: /* @__PURE__ */ c(s, {
36
38
  space: "between",
37
39
  alignItems: "center",
38
40
  children: [
39
- o && /* @__PURE__ */ r(u, {
41
+ a && /* @__PURE__ */ r(u, {
40
42
  paddingRight: 32,
41
43
  children: /* @__PURE__ */ r(n, {
42
44
  regular: !0,
43
- children: o
45
+ children: a
44
46
  })
45
47
  }),
46
48
  e || /* @__PURE__ */ r(n, {
47
49
  regular: !0,
48
- color: c.colors.textSecondary,
50
+ color: o.colors.textSecondary,
49
51
  children: l
50
52
  })
51
53
  ]
52
54
  })
53
55
  });
54
- }, V = (param)=>/* @__PURE__ */ {
55
- let { image: o, description: e, "aria-label": l } = param;
56
+ }, A = (param)=>/* @__PURE__ */ {
57
+ let { image: a, description: e, "aria-label": l } = param;
56
58
  return r("div", {
57
59
  "aria-label": l,
58
- children: /* @__PURE__ */ a(s, {
60
+ children: /* @__PURE__ */ c(s, {
59
61
  space: 16,
60
62
  alignItems: "center",
61
63
  children: [
62
- o,
64
+ /* @__PURE__ */ r("div", {
65
+ style: k({
66
+ [f.mediaBorderRadius]: o.borderRadii.mediaSmall
67
+ }),
68
+ children: a
69
+ }),
63
70
  /* @__PURE__ */ r(n, {
64
71
  regular: !0,
65
- color: c.colors.textSecondary,
72
+ color: o.colors.textSecondary,
66
73
  children: e
67
74
  })
68
75
  ]
69
76
  })
70
77
  });
71
- }, q = (param)=>/* @__PURE__ */ {
72
- let { title: o, description: e, secondaryValue: l, value: t, valueColor: i = c.colors.textPrimary, "aria-label": d } = param;
73
- return a(s, {
78
+ }, D = (param)=>/* @__PURE__ */ {
79
+ let { title: a, description: e, secondaryValue: l, value: t, valueColor: i = o.colors.textPrimary, "aria-label": d } = param;
80
+ return c(s, {
74
81
  space: "between",
75
82
  alignItems: "flex-end",
76
83
  "aria-label": d,
77
84
  children: [
78
- /* @__PURE__ */ r(g, {
79
- title: o,
85
+ /* @__PURE__ */ r(p, {
86
+ title: a,
80
87
  description: e
81
88
  }),
82
- /* @__PURE__ */ a("div", {
83
- className: B(x, y),
89
+ /* @__PURE__ */ c("div", {
90
+ className: I(x, y),
84
91
  children: [
85
92
  /* @__PURE__ */ r(n, {
86
93
  regular: !0,
87
- color: c.colors.textSecondary,
94
+ color: o.colors.textSecondary,
88
95
  decoration: "line-through",
89
96
  children: l
90
97
  }),
91
- /* @__PURE__ */ r(f, {
98
+ /* @__PURE__ */ r(v, {
92
99
  color: i,
93
100
  children: t
94
101
  })
@@ -96,91 +103,91 @@ const g = (param)=>{
96
103
  })
97
104
  ]
98
105
  });
99
- }, z = (param)=>/* @__PURE__ */ {
100
- let { headline: o, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: m = c.colors.textPrimary, "aria-label": b } = param;
101
- return a("div", {
106
+ }, E = (param)=>/* @__PURE__ */ {
107
+ let { headline: a, mainHeading: e, secondHeading: l, secondaryValue: t, title: i, description: d, valueColor: h = o.colors.textPrimary, "aria-label": b } = param;
108
+ return c("div", {
102
109
  "aria-label": b,
103
110
  children: [
104
- o && /* @__PURE__ */ r(u, {
111
+ a && /* @__PURE__ */ r(u, {
105
112
  paddingBottom: 24,
106
- children: o
113
+ children: a
107
114
  }),
108
- /* @__PURE__ */ a(p, {
115
+ /* @__PURE__ */ c(g, {
109
116
  space: 2,
110
117
  children: [
111
- /* @__PURE__ */ a(s, {
118
+ /* @__PURE__ */ c(s, {
112
119
  space: 8,
113
120
  alignItems: "baseline",
114
121
  children: [
115
- /* @__PURE__ */ r(h, {
116
- color: m,
122
+ /* @__PURE__ */ r(m, {
123
+ color: h,
117
124
  children: e.value
118
125
  }),
119
126
  /* @__PURE__ */ r(n, {
120
127
  regular: !0,
121
- color: c.colors.textSecondary,
128
+ color: o.colors.textSecondary,
122
129
  children: e.text
123
130
  })
124
131
  ]
125
132
  }),
126
- l && /* @__PURE__ */ a(s, {
133
+ l && /* @__PURE__ */ c(s, {
127
134
  space: 8,
128
135
  alignItems: "baseline",
129
136
  children: [
130
- /* @__PURE__ */ r(h, {
131
- color: m,
137
+ /* @__PURE__ */ r(m, {
138
+ color: h,
132
139
  children: l.value
133
140
  }),
134
141
  /* @__PURE__ */ r(n, {
135
142
  regular: !0,
136
- color: c.colors.textSecondary,
143
+ color: o.colors.textSecondary,
137
144
  children: l.text
138
145
  })
139
146
  ]
140
147
  }),
141
- t && /* @__PURE__ */ r(h, {
142
- color: c.colors.textSecondary,
148
+ t && /* @__PURE__ */ r(m, {
149
+ color: o.colors.textSecondary,
143
150
  children: t
144
151
  })
145
152
  ]
146
153
  }),
147
154
  i || d ? /* @__PURE__ */ r(u, {
148
155
  paddingTop: 8,
149
- children: /* @__PURE__ */ r(g, {
156
+ children: /* @__PURE__ */ r(p, {
150
157
  title: i,
151
158
  description: d
152
159
  })
153
160
  }) : null
154
161
  ]
155
162
  });
156
- }, A = (param)=>/* @__PURE__ */ {
157
- let { title: o, value: e, description: l, valueColor: t = c.colors.textPrimary, "aria-label": i } = param;
158
- return a("div", {
163
+ }, F = (param)=>/* @__PURE__ */ {
164
+ let { title: a, value: e, description: l, valueColor: t = o.colors.textPrimary, "aria-label": i } = param;
165
+ return c("div", {
159
166
  "aria-label": i,
160
167
  className: x,
161
168
  children: [
162
169
  /* @__PURE__ */ r(n, {
163
170
  regular: !0,
164
- color: c.colors.textPrimary,
165
- children: o
171
+ color: o.colors.textPrimary,
172
+ children: a
166
173
  }),
167
- /* @__PURE__ */ r(h, {
174
+ /* @__PURE__ */ r(m, {
168
175
  color: t,
169
176
  children: e
170
177
  }),
171
- /* @__PURE__ */ r(g, {
178
+ /* @__PURE__ */ r(p, {
172
179
  description: l
173
180
  })
174
181
  ]
175
182
  });
176
- }, D = (param)=>/* @__PURE__ */ {
177
- let { title: o, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": m } = param;
183
+ }, J = (param)=>/* @__PURE__ */ {
184
+ let { title: a, stackingGroup: e, progressPercent: l, reverse: t, heading: i, description: d, "aria-label": h } = param;
178
185
  return r("div", {
179
- "aria-label": m,
180
- children: /* @__PURE__ */ a(p, {
186
+ "aria-label": h,
187
+ children: /* @__PURE__ */ c(g, {
181
188
  space: 8,
182
189
  children: [
183
- /* @__PURE__ */ a(s, {
190
+ /* @__PURE__ */ c(s, {
184
191
  space: "between",
185
192
  alignItems: "flex-end",
186
193
  children: [
@@ -188,38 +195,38 @@ const g = (param)=>{
188
195
  paddingRight: 32,
189
196
  children: /* @__PURE__ */ r(n, {
190
197
  regular: !0,
191
- children: o
198
+ children: a
192
199
  })
193
200
  }),
194
201
  e
195
202
  ]
196
203
  }),
197
- l !== void 0 && /* @__PURE__ */ r(S, {
204
+ l !== void 0 && /* @__PURE__ */ r(B, {
198
205
  progressPercent: l,
199
206
  reverse: t
200
207
  }),
201
- /* @__PURE__ */ a(s, {
208
+ /* @__PURE__ */ c(s, {
202
209
  space: 8,
203
210
  alignItems: "baseline",
204
211
  children: [
205
- /* @__PURE__ */ r(h, {
206
- color: i.valueColor || c.colors.textPrimary,
212
+ /* @__PURE__ */ r(m, {
213
+ color: i.valueColor || o.colors.textPrimary,
207
214
  children: i.value
208
215
  }),
209
216
  /* @__PURE__ */ r(n, {
210
217
  regular: !0,
211
- color: c.colors.textSecondary,
218
+ color: o.colors.textSecondary,
212
219
  children: i.text
213
220
  })
214
221
  ]
215
222
  }),
216
223
  d && /* @__PURE__ */ r(n, {
217
224
  regular: !0,
218
- color: c.colors.textSecondary,
225
+ color: o.colors.textSecondary,
219
226
  children: d
220
227
  })
221
228
  ]
222
229
  })
223
230
  });
224
231
  };
225
- export { z as HighlightedValueBlock, q as InformationBlock, D as ProgressBlock, L as RowBlock, V as SimpleBlock, A as ValueBlock };
232
+ export { E as HighlightedValueBlock, D as InformationBlock, J as ProgressBlock, z as RowBlock, A as SimpleBlock, F as ValueBlock };
@@ -1,4 +1,4 @@
1
1
  import "./sprinkles.css.ts.vanilla.css-mistica.js";
2
2
  import "./counter.css.ts.vanilla.css-mistica.js";
3
- var s = "rijsns8 _1y2v1nf62 _1y2v1nfds _1y2v1nfb5 _1y2v1nfc8 _1y2v1nfco", v = "rijsnse _1y2v1nfc7 _1y2v1nfcn _1y2v1nfb5 _1y2v1nfdz _1y2v1nf5o", a = "rijsns6", t = "rijsns3 _1y2v1nfdz _1y2v1nf33 _1y2v1nfbb _1y2v1nfea", f = "rijsnsc rijsnsa _1y2v1nfb5", o = "rijsnsa _1y2v1nfb5", y = "rijsns4", _ = "rijsns0", i = "rijsns1", b = "rijsnsb rijsnsa _1y2v1nfb5", e = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbj";
3
+ var s = "rijsns8 _1y2v1nf62 _1y2v1nfds _1y2v1nfb5 _1y2v1nfc8 _1y2v1nfco", v = "rijsnse _1y2v1nfc7 _1y2v1nfcn _1y2v1nfb5 _1y2v1nfdz _1y2v1nf5o", a = "rijsns6", t = "rijsns3 _1y2v1nfdz _1y2v1nf33 _1y2v1nfbb _1y2v1nfeb", f = "rijsnsc rijsnsa _1y2v1nfb5", o = "rijsnsa _1y2v1nfb5", y = "rijsns4", _ = "rijsns0", i = "rijsns1", b = "rijsnsb rijsnsa _1y2v1nfb5", e = "_1y2v1nfb4 _1y2v1nfba _1y2v1nfbj";
4
4
  export { s as button, v as buttonBackground, a as buttonContainer, t as counter, f as decreaseButtonIcon, o as defaultButtonIcon, y as disabled, _ as hasTrashIcon, i as isButtonDisabled, b as trashButtonIcon, e as valueContainer };
@@ -187,7 +187,6 @@ const O = (param)=>{
187
187
  children: /* @__PURE__ */ r(O, {
188
188
  acceptedCards: y
189
189
  }),
190
- targetLabel: l.formCreditCardCvvTooltipVisaMcButton,
191
190
  target: /* @__PURE__ */ r("div", {
192
191
  style: {
193
192
  width: 16,
@@ -204,6 +203,7 @@ const O = (param)=>{
204
203
  // (40 - 16) / 2
205
204
  top: -12
206
205
  },
206
+ "aria-label": l.formCreditCardCvvTooltipVisaMcButton,
207
207
  children: /* @__PURE__ */ r(N, {
208
208
  size: 16,
209
209
  color: K.colors.neutralMedium