@telefonica/mistica 14.13.0 → 14.15.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 (231) hide show
  1. package/css/mistica.css +1 -1
  2. package/dist/avatar.css-mistica.js +1 -1
  3. package/dist/badge.css-mistica.js +3 -3
  4. package/dist/badge.js +19 -10
  5. package/dist/box.d.ts +1 -1
  6. package/dist/boxed.css-mistica.js +4 -4
  7. package/dist/boxed.css.d.ts +1 -1
  8. package/dist/boxed.js +12 -14
  9. package/dist/button-layout.css-mistica.js +4 -4
  10. package/dist/button.css-mistica.js +19 -19
  11. package/dist/button.js +112 -112
  12. package/dist/callout.css-mistica.js +1 -1
  13. package/dist/card.css-mistica.js +38 -15
  14. package/dist/card.css.d.ts +11 -0
  15. package/dist/card.d.ts +36 -34
  16. package/dist/card.js +631 -480
  17. package/dist/carousel.css-mistica.js +13 -13
  18. package/dist/checkbox.css-mistica.js +5 -5
  19. package/dist/chip.css-mistica.js +4 -4
  20. package/dist/chip.d.ts +1 -0
  21. package/dist/chip.js +57 -41
  22. package/dist/circle.css-mistica.js +1 -1
  23. package/dist/dialog.css-mistica.js +3 -3
  24. package/dist/double-field.css-mistica.js +2 -2
  25. package/dist/empty-state-card.css-mistica.js +1 -1
  26. package/dist/empty-state.css-mistica.js +3 -3
  27. package/dist/feedback.css-mistica.js +3 -3
  28. package/dist/fixed-footer-layout.css-mistica.js +1 -1
  29. package/dist/fixed-footer-layout.js +79 -26
  30. package/dist/generated/mistica-icons/icon-alert-filled.js +15 -5
  31. package/dist/generated/mistica-icons/icon-alert-light.js +24 -8
  32. package/dist/generated/mistica-icons/icon-alert-regular.js +30 -14
  33. package/dist/generated/mistica-icons/icon-bell-filled.js +19 -9
  34. package/dist/generated/mistica-icons/icon-bell-light.js +16 -6
  35. package/dist/generated/mistica-icons/icon-bell-regular.js +19 -9
  36. package/dist/generated/mistica-icons/icon-dollar-symbol-circle-light.js +28 -11
  37. package/dist/generated/mistica-icons/icon-dollar-symbol-circle-regular.js +20 -9
  38. package/dist/generated/mistica-icons/icon-edit-pencil-light.js +21 -10
  39. package/dist/generated/mistica-icons/icon-edit-pencil-regular.js +22 -12
  40. package/dist/generated/mistica-icons/icon-gift-filled.js +19 -9
  41. package/dist/generated/mistica-icons/icon-gift-light.js +20 -10
  42. package/dist/generated/mistica-icons/icon-gift-regular.js +19 -9
  43. package/dist/generated/mistica-icons/icon-heart-filled.js +16 -6
  44. package/dist/generated/mistica-icons/icon-heart-light.js +18 -8
  45. package/dist/generated/mistica-icons/icon-heart-regular.js +24 -14
  46. package/dist/generated/mistica-icons/icon-home-filled.js +23 -13
  47. package/dist/generated/mistica-icons/icon-home-light.js +24 -14
  48. package/dist/generated/mistica-icons/icon-home-regular.js +21 -11
  49. package/dist/generated/mistica-icons/icon-home-wifi-filled.js +24 -7
  50. package/dist/generated/mistica-icons/icon-home-wifi-light.js +25 -8
  51. package/dist/generated/mistica-icons/icon-home-wifi-regular.js +24 -7
  52. package/dist/generated/mistica-icons/icon-pause-regular.js +10 -12
  53. package/dist/generated/mistica-icons/icon-play-regular.js +14 -16
  54. package/dist/generated/mistica-icons/icon-reload-light.js +22 -12
  55. package/dist/generated/mistica-icons/icon-reload-regular.js +24 -14
  56. package/dist/generated/mistica-icons/icon-share-filled.js +20 -10
  57. package/dist/generated/mistica-icons/icon-share-light.js +21 -11
  58. package/dist/generated/mistica-icons/icon-share-regular.js +21 -11
  59. package/dist/generated/mistica-icons/icon-shopping-bag-filled.d.ts +4 -0
  60. package/dist/generated/mistica-icons/icon-shopping-bag-filled.js +110 -0
  61. package/dist/generated/mistica-icons/icon-shopping-bag-light.d.ts +4 -0
  62. package/dist/generated/mistica-icons/icon-shopping-bag-light.js +110 -0
  63. package/dist/generated/mistica-icons/icon-shopping-bag-regular.d.ts +4 -0
  64. package/dist/generated/mistica-icons/icon-shopping-bag-regular.js +110 -0
  65. package/dist/generated/mistica-icons/icon-tickets-filled.js +17 -7
  66. package/dist/generated/mistica-icons/icon-tickets-light.js +26 -10
  67. package/dist/generated/mistica-icons/icon-tickets-regular.js +35 -19
  68. package/dist/grid.css.d.ts +6 -6
  69. package/dist/hero.css-mistica.js +1 -1
  70. package/dist/highlighted-card.css-mistica.js +3 -3
  71. package/dist/hooks.js +57 -56
  72. package/dist/image.css-mistica.js +1 -1
  73. package/dist/index.d.ts +3 -0
  74. package/dist/index.js +14 -1
  75. package/dist/list.css-mistica.js +7 -7
  76. package/dist/loading-bar.css-mistica.js +4 -4
  77. package/dist/maybe-dismissable.css-mistica.js +3 -3
  78. package/dist/menu.css-mistica.js +1 -1
  79. package/dist/navigation-bar.css-mistica.js +11 -11
  80. package/dist/navigation-breadcrumbs.css-mistica.js +1 -1
  81. package/dist/package-version.js +1 -1
  82. package/dist/password-field.css-mistica.js +1 -1
  83. package/dist/popover.css-mistica.js +3 -3
  84. package/dist/progress-bar.css-mistica.js +1 -1
  85. package/dist/radio-button.css-mistica.js +5 -5
  86. package/dist/responsive-layout.css-mistica.js +2 -2
  87. package/dist/screen-reader-only.css-mistica.js +1 -1
  88. package/dist/select.css-mistica.js +13 -13
  89. package/dist/skins/blau.js +13 -1
  90. package/dist/skins/defaults.js +12 -0
  91. package/dist/skins/movistar-legacy.js +15 -3
  92. package/dist/skins/movistar.js +12 -0
  93. package/dist/skins/o2.js +12 -0
  94. package/dist/skins/telefonica.js +12 -0
  95. package/dist/skins/types/index.d.ts +15 -9
  96. package/dist/skins/vivo-new.js +12 -0
  97. package/dist/skins/vivo.js +12 -0
  98. package/dist/snackbar.css-mistica.js +3 -3
  99. package/dist/sprinkles.css-mistica.js +226 -190
  100. package/dist/sprinkles.css.d.ts +16 -16
  101. package/dist/stepper.css-mistica.js +3 -3
  102. package/dist/stepper.js +26 -26
  103. package/dist/switch-component.css-mistica.js +10 -10
  104. package/dist/tabs.css-mistica.js +7 -7
  105. package/dist/tag.css-mistica.js +1 -1
  106. package/dist/tag.js +15 -14
  107. package/dist/text-field-base.css-mistica.js +6 -6
  108. package/dist/text-field-components.css-mistica.js +6 -6
  109. package/dist/text-link.css-mistica.js +5 -5
  110. package/dist/text.d.ts +6 -8
  111. package/dist/text.js +8 -7
  112. package/dist/theme-context-provider.js +34 -30
  113. package/dist/title.js +27 -24
  114. package/dist/tooltip.css-mistica.js +6 -6
  115. package/dist/tooltip.js +35 -34
  116. package/dist/touchable.css-mistica.js +3 -3
  117. package/dist/utils/aspect-ratio-support.css-mistica.js +2 -2
  118. package/dist/utils/dom.js +10 -10
  119. package/dist/utils/environment.d.ts +1 -0
  120. package/dist/utils/environment.js +12 -4
  121. package/dist/video.css-mistica.js +1 -1
  122. package/dist-es/avatar.css-mistica.js +1 -1
  123. package/dist-es/badge.css-mistica.js +2 -2
  124. package/dist-es/badge.js +29 -20
  125. package/dist-es/boxed.css-mistica.js +3 -3
  126. package/dist-es/boxed.js +16 -18
  127. package/dist-es/button-layout.css-mistica.js +3 -3
  128. package/dist-es/button.css-mistica.js +9 -9
  129. package/dist-es/button.js +154 -154
  130. package/dist-es/callout.css-mistica.js +1 -1
  131. package/dist-es/card.css-mistica.js +4 -2
  132. package/dist-es/card.js +671 -521
  133. package/dist-es/carousel.css-mistica.js +2 -2
  134. package/dist-es/checkbox.css-mistica.js +5 -5
  135. package/dist-es/chip.css-mistica.js +4 -4
  136. package/dist-es/chip.js +77 -61
  137. package/dist-es/circle.css-mistica.js +1 -1
  138. package/dist-es/dialog.css-mistica.js +3 -3
  139. package/dist-es/double-field.css-mistica.js +2 -2
  140. package/dist-es/empty-state-card.css-mistica.js +1 -1
  141. package/dist-es/empty-state.css-mistica.js +2 -2
  142. package/dist-es/feedback.css-mistica.js +2 -2
  143. package/dist-es/fixed-footer-layout.css-mistica.js +1 -1
  144. package/dist-es/fixed-footer-layout.js +97 -44
  145. package/dist-es/generated/mistica-icons/icon-alert-filled.js +18 -8
  146. package/dist-es/generated/mistica-icons/icon-alert-light.js +30 -14
  147. package/dist-es/generated/mistica-icons/icon-alert-regular.js +36 -20
  148. package/dist-es/generated/mistica-icons/icon-bell-filled.js +26 -16
  149. package/dist-es/generated/mistica-icons/icon-bell-light.js +20 -10
  150. package/dist-es/generated/mistica-icons/icon-bell-regular.js +20 -10
  151. package/dist-es/generated/mistica-icons/icon-dollar-symbol-circle-light.js +33 -16
  152. package/dist-es/generated/mistica-icons/icon-dollar-symbol-circle-regular.js +25 -14
  153. package/dist-es/generated/mistica-icons/icon-edit-pencil-light.js +25 -14
  154. package/dist-es/generated/mistica-icons/icon-edit-pencil-regular.js +30 -20
  155. package/dist-es/generated/mistica-icons/icon-gift-filled.js +22 -12
  156. package/dist-es/generated/mistica-icons/icon-gift-light.js +23 -13
  157. package/dist-es/generated/mistica-icons/icon-gift-regular.js +22 -12
  158. package/dist-es/generated/mistica-icons/icon-heart-filled.js +18 -8
  159. package/dist-es/generated/mistica-icons/icon-heart-light.js +24 -14
  160. package/dist-es/generated/mistica-icons/icon-heart-regular.js +25 -15
  161. package/dist-es/generated/mistica-icons/icon-home-filled.js +30 -20
  162. package/dist-es/generated/mistica-icons/icon-home-light.js +27 -17
  163. package/dist-es/generated/mistica-icons/icon-home-regular.js +27 -17
  164. package/dist-es/generated/mistica-icons/icon-home-wifi-filled.js +28 -11
  165. package/dist-es/generated/mistica-icons/icon-home-wifi-light.js +29 -12
  166. package/dist-es/generated/mistica-icons/icon-home-wifi-regular.js +28 -11
  167. package/dist-es/generated/mistica-icons/icon-pause-regular.js +12 -14
  168. package/dist-es/generated/mistica-icons/icon-play-regular.js +19 -21
  169. package/dist-es/generated/mistica-icons/icon-reload-light.js +27 -17
  170. package/dist-es/generated/mistica-icons/icon-reload-regular.js +27 -17
  171. package/dist-es/generated/mistica-icons/icon-share-filled.js +25 -15
  172. package/dist-es/generated/mistica-icons/icon-share-light.js +28 -18
  173. package/dist-es/generated/mistica-icons/icon-share-regular.js +28 -18
  174. package/dist-es/generated/mistica-icons/icon-shopping-bag-filled.js +101 -0
  175. package/dist-es/generated/mistica-icons/icon-shopping-bag-light.js +101 -0
  176. package/dist-es/generated/mistica-icons/icon-shopping-bag-regular.js +101 -0
  177. package/dist-es/generated/mistica-icons/icon-tickets-filled.js +21 -11
  178. package/dist-es/generated/mistica-icons/icon-tickets-light.js +30 -14
  179. package/dist-es/generated/mistica-icons/icon-tickets-regular.js +43 -27
  180. package/dist-es/hero.css-mistica.js +1 -1
  181. package/dist-es/highlighted-card.css-mistica.js +3 -3
  182. package/dist-es/hooks.js +51 -50
  183. package/dist-es/image.css-mistica.js +1 -1
  184. package/dist-es/index.js +1762 -1758
  185. package/dist-es/list.css-mistica.js +2 -2
  186. package/dist-es/loading-bar.css-mistica.js +2 -2
  187. package/dist-es/maybe-dismissable.css-mistica.js +2 -2
  188. package/dist-es/menu.css-mistica.js +1 -1
  189. package/dist-es/navigation-bar.css-mistica.js +8 -8
  190. package/dist-es/navigation-breadcrumbs.css-mistica.js +1 -1
  191. package/dist-es/package-version.js +1 -1
  192. package/dist-es/password-field.css-mistica.js +1 -1
  193. package/dist-es/popover.css-mistica.js +2 -2
  194. package/dist-es/progress-bar.css-mistica.js +1 -1
  195. package/dist-es/radio-button.css-mistica.js +4 -4
  196. package/dist-es/responsive-layout.css-mistica.js +2 -2
  197. package/dist-es/screen-reader-only.css-mistica.js +1 -1
  198. package/dist-es/select.css-mistica.js +10 -10
  199. package/dist-es/skins/blau.js +13 -1
  200. package/dist-es/skins/defaults.js +12 -0
  201. package/dist-es/skins/movistar-legacy.js +15 -3
  202. package/dist-es/skins/movistar.js +12 -0
  203. package/dist-es/skins/o2.js +12 -0
  204. package/dist-es/skins/telefonica.js +12 -0
  205. package/dist-es/skins/vivo-new.js +12 -0
  206. package/dist-es/skins/vivo.js +12 -0
  207. package/dist-es/snackbar.css-mistica.js +2 -2
  208. package/dist-es/sprinkles.css-mistica.js +226 -190
  209. package/dist-es/stepper.css-mistica.js +2 -2
  210. package/dist-es/stepper.js +50 -50
  211. package/dist-es/style.css +1 -1
  212. package/dist-es/switch-component.css-mistica.js +10 -10
  213. package/dist-es/tabs.css-mistica.js +6 -6
  214. package/dist-es/tag.css-mistica.js +1 -1
  215. package/dist-es/tag.js +28 -27
  216. package/dist-es/text-field-base.css-mistica.js +2 -2
  217. package/dist-es/text-field-components.css-mistica.js +2 -2
  218. package/dist-es/text-link.css-mistica.js +5 -5
  219. package/dist-es/text.js +11 -10
  220. package/dist-es/theme-context-provider.js +72 -68
  221. package/dist-es/title.js +36 -33
  222. package/dist-es/tooltip.css-mistica.js +3 -3
  223. package/dist-es/tooltip.js +37 -36
  224. package/dist-es/touchable.css-mistica.js +2 -2
  225. package/dist-es/utils/aspect-ratio-support.css-mistica.js +2 -2
  226. package/dist-es/utils/dom.js +9 -9
  227. package/dist-es/utils/environment.js +2 -2
  228. package/dist-es/video.css-mistica.js +1 -1
  229. package/package.json +2 -1
  230. package/dist/boxed.css.ts.vanilla.css-mistica.js +0 -11
  231. package/dist-es/boxed.css.ts.vanilla.css-mistica.js +0 -2
package/dist-es/card.js CHANGED
@@ -77,104 +77,110 @@ function _object_without_properties_loose(source, excluded) {
77
77
  }
78
78
  return target;
79
79
  }
80
- import { jsx as e, jsxs as t } from "react/jsx-runtime";
81
- import * as C from "react";
82
- import ce from "./tag.js";
83
- import f from "./stack.js";
84
- import w from "./box.js";
85
- import { Text2 as b, Text6 as he, Text3 as pe, Text as J } from "./text.js";
86
- import { Boxed as j, InternalBoxed as K } from "./boxed.js";
87
- import V from "./button-group.js";
88
- import ue, { MediaBorderRadiusProvider as me } from "./image.js";
89
- import { BaseTouchable as ge } from "./touchable.js";
90
- import { vars as y } from "./skins/skin-contract.css-mistica.js";
91
- import { boxed as P, mediaCard as fe, mediaCardContent as ve, dataCard as ye, actions as Q, snapCardTouchableHover as Ce, snapCardTouchableHoverTransparent as Te, snapCard as xe, videoAction as _, displayCardContainer as U, displayCardBackground as Y, displayCardContent as Z, displayCardGradient as $, cardActionIconButton as q, cardAction as Ie, cardActionInverse as Se } from "./card.css-mistica.js";
92
- import { useTheme as G } from "./hooks.js";
93
- import { sprinkles as X } from "./sprinkles.css-mistica.js";
94
- import be from "./inline.js";
95
- import Ne from "./icon-button.js";
96
- import we from "./generated/mistica-icons/icon-close-regular.js";
97
- import Ae from "./generated/mistica-icons/icon-pause-filled.js";
98
- import Be from "./generated/mistica-icons/icon-play-filled.js";
99
- import { combineRefs as Re } from "./utils/common.js";
100
- import ze from "./spinner.js";
101
- import De from "./video.js";
102
- import { useIsInverseVariant as ee, ThemeVariant as re } from "./theme-variant-context.js";
103
- const ie = (param)=>/* @__PURE__ */ {
104
- let { actions: r , isInverse: i } = param;
105
- return e(be, {
106
- space: 0,
107
- children: r.map((param, a)=>{
108
- let { onPress: n , label: s , Icon: l , iconSize: o = 20 , iconColor: p = y.colors.neutralHigh , iconBackground: c = Ie , iconBackgroundInverse: d = Se } = param;
109
- return l ? /* @__PURE__ */ e(Ne, {
110
- size: 48,
111
- onPress: n,
112
- "aria-label": s,
113
- className: q,
114
- style: {
115
- display: "flex"
116
- },
117
- children: /* @__PURE__ */ e("div", {
118
- className: i ? d : c,
119
- children: /* @__PURE__ */ e(l, {
120
- color: p,
121
- size: o
122
- })
123
- })
124
- }, a) : /* @__PURE__ */ e("div", {
125
- className: q
126
- }, a);
127
- })
128
- });
129
- }, ne = (r, i)=>{
130
- const { texts: n } = G(), s = r ? [
80
+ import { jsxs as n, jsx as e, Fragment as Ce } from "react/jsx-runtime";
81
+ import * as T from "react";
82
+ import Te from "./tag.js";
83
+ import y from "./stack.js";
84
+ import D from "./box.js";
85
+ import { Text2 as A, Text6 as Se, Text3 as xe, Text as L } from "./text.js";
86
+ import { Boxed as q, InternalBoxed as ee } from "./boxed.js";
87
+ import J from "./button-group.js";
88
+ import we, { MediaBorderRadiusProvider as Be } from "./image.js";
89
+ import { BaseTouchable as O } from "./touchable.js";
90
+ import { vars as v } from "./skins/skin-contract.css-mistica.js";
91
+ import { touchableContainer as _, boxed as P, touchable as E, mediaCard as Ie, mediaCardContent as Ae, dataCard as be, actions as re, snapCard as Re, videoAction as V, displayCardContainer as ae, displayCardBackground as ie, displayCardContent as ne, displayCardGradient as te, cardActionIconButton as $, cardContainer as De, vars as Me, touchableMediaCardOverlay as ze, touchableCardOverlay as K, touchableCardOverlayInverse as se, touchableCardOverlayMedia as oe, cardAction as He, cardActionInverse as Oe, cardActionMedia as _e } from "./card.css-mistica.js";
92
+ import { useTheme as Q } from "./hooks.js";
93
+ import { sprinkles as k } from "./sprinkles.css-mistica.js";
94
+ import Pe from "./icon-button.js";
95
+ import Ee from "./generated/mistica-icons/icon-close-regular.js";
96
+ import We from "./generated/mistica-icons/icon-pause-filled.js";
97
+ import Ge from "./generated/mistica-icons/icon-play-filled.js";
98
+ import { combineRefs as Xe } from "./utils/common.js";
99
+ import je from "./spinner.js";
100
+ import Fe from "./video.js";
101
+ import { useIsInverseVariant as le, ThemeVariant as de } from "./theme-variant-context.js";
102
+ import Ve from "classnames";
103
+ import { assignInlineVars as ke } from "@vanilla-extract/dynamic";
104
+ const ce = (r, a)=>{
105
+ const { texts: i } = Q(), s = r ? [
131
106
  ...r
132
107
  ] : [];
133
- return i && s.push({
134
- label: n.closeButtonLabel,
135
- onPress: i,
136
- Icon: we
108
+ return a && s.push({
109
+ label: i.closeButtonLabel,
110
+ onPress: a,
111
+ Icon: Ee
137
112
  }), s;
138
- }, Pe = {
139
- "1:1": "1",
140
- "16:9": "16 / 9",
141
- "7:10": "7 / 10",
142
- "9:10": "9 / 10",
143
- auto: "auto"
144
- }, F = (param)=>{
145
- let { children: r , width: i = "100%" , height: n = "100%" , minWidth: s , minHeight: l , aspectRatio: o , actions: p , onClose: c , isInverse: d , "aria-label": a } = param;
146
- const h = ne(p, c), u = h.length > 0, m = o ? typeof o == "number" ? String(o) : Pe[o] : void 0;
147
- return /* @__PURE__ */ t("section", {
148
- "aria-label": a,
113
+ }, he = 48, U = (param)=>{
114
+ let { actions: r , onClose: a , type: i = "default" } = param;
115
+ const s = ce(r, a), h = s.length > 0, o = {
116
+ default: v.colors.neutralHigh,
117
+ inverse: v.colors.inverse,
118
+ media: "#000000"
119
+ }, u = {
120
+ default: He,
121
+ inverse: Oe,
122
+ media: _e
123
+ };
124
+ return h ? /* @__PURE__ */ e("div", {
149
125
  style: {
150
- width: i,
151
- height: n,
152
- minWidth: s,
153
- minHeight: l,
154
- aspectRatio: m,
155
- position: "relative"
126
+ position: "absolute",
127
+ right: 8,
128
+ top: 8,
129
+ zIndex: 3
156
130
  },
157
- children: [
158
- r,
159
- u && /* @__PURE__ */ e("div", {
160
- style: {
161
- position: "absolute",
162
- right: 8,
163
- top: 8,
164
- zIndex: 2
165
- },
166
- children: /* @__PURE__ */ e(ie, {
167
- actions: h,
168
- isInverse: d
169
- })
131
+ children: /* @__PURE__ */ e("div", {
132
+ className: k({
133
+ display: "flex"
134
+ }),
135
+ children: s.map((param, m)=>{
136
+ let { onPress: l , label: d , Icon: t , iconSize: p = 20 } = param;
137
+ return t ? /* @__PURE__ */ e(Pe, {
138
+ size: he,
139
+ onPress: l,
140
+ "aria-label": d,
141
+ className: $,
142
+ style: {
143
+ display: "flex"
144
+ },
145
+ children: /* @__PURE__ */ e("div", {
146
+ className: u[i],
147
+ children: /* @__PURE__ */ e(t, {
148
+ color: o[i],
149
+ size: p
150
+ })
151
+ })
152
+ }, m) : /* @__PURE__ */ e("div", {
153
+ className: $
154
+ }, m);
170
155
  })
171
- ]
156
+ })
157
+ }) : /* @__PURE__ */ e(Ce, {});
158
+ }, Ue = (r)=>r ? typeof r == "number" ? r : ({
159
+ "1:1": 1,
160
+ "16:9": 16 / 9,
161
+ "7:10": 7 / 10,
162
+ "9:10": 9 / 10,
163
+ auto: 0
164
+ })[r] : 0, W = (param)=>{
165
+ let { children: r , width: a = "100%" , height: i = "100%" , minWidth: s , aspectRatio: h , className: o , "aria-label": u } = param;
166
+ const l = Ue(h);
167
+ return /* @__PURE__ */ e("section", {
168
+ "aria-label": u,
169
+ className: Ve(o, De),
170
+ style: _object_spread({
171
+ width: a,
172
+ height: i,
173
+ minWidth: s
174
+ }, l ? ke({
175
+ [Me.aspectRatio]: String(l)
176
+ }) : {}),
177
+ children: r
172
178
  });
173
- }, ae = (r)=>/* @__PURE__ */ e(ue, {
179
+ }, me = (r)=>/* @__PURE__ */ e(we, {
174
180
  width: "100%",
175
181
  height: "100%",
176
182
  src: r !== null && r !== void 0 ? r : "//:0"
177
- }), Me = {
183
+ }), Ye = {
178
184
  loading: {
179
185
  showSpinner: "loadingTimeout",
180
186
  play: "playing",
@@ -198,96 +204,103 @@ const ie = (param)=>/* @__PURE__ */ {
198
204
  error: {
199
205
  reset: "loading"
200
206
  }
201
- }, He = (r, i)=>Me[r][i] || r, oe = (r)=>{
207
+ }, Ze = (r, a)=>Ye[r][a] || r, qe = (param)=>/* @__PURE__ */ {
208
+ let { size: r , color: a } = param;
209
+ return e(je, {
210
+ size: r,
211
+ color: a,
212
+ delay: "0"
213
+ });
214
+ }, ue = (r)=>{
202
215
  switch(r){
203
216
  case "playing":
204
- return Ae;
205
- case "paused":
206
217
  case "loading":
207
- return Be;
218
+ return We;
219
+ case "paused":
220
+ return Ge;
208
221
  case "loadingTimeout":
209
- return ze;
222
+ return qe;
210
223
  default:
211
224
  return;
212
225
  }
213
- }, te = (r, i, n)=>{
214
- const s = C.useRef(null), [l, o] = C.useReducer(He, "loading");
215
- return C.useEffect(()=>{
216
- var a;
226
+ }, pe = (r, a, i)=>{
227
+ const s = T.useRef(null), [h, o] = T.useReducer(Ze, "loading");
228
+ return T.useEffect(()=>{
229
+ var t;
217
230
  const d = setTimeout(()=>o("showSpinner"), 2e3);
218
- return (a = s.current) == null || a.load(), ()=>{
231
+ return (t = s.current) == null || t.load(), ()=>{
219
232
  clearTimeout(d), o("reset");
220
233
  };
221
234
  }, [
222
235
  r
223
236
  ]), {
224
- video: C.useMemo(()=>r ? /* @__PURE__ */ e(De, {
225
- ref: Re(s, n),
237
+ video: T.useMemo(()=>r ? /* @__PURE__ */ e(Fe, {
238
+ ref: Xe(s, i),
226
239
  src: r,
227
240
  width: "100%",
228
241
  height: "100%",
229
- poster: i,
242
+ poster: a,
230
243
  onError: ()=>o("fail"),
231
244
  onPause: ()=>o("pause"),
232
245
  onPlay: ()=>o("play")
233
246
  }) : void 0, [
234
- n,
247
+ i,
235
248
  r,
236
- i
249
+ a
237
250
  ]),
238
- videoStatus: l,
251
+ videoStatus: h,
239
252
  onVideoControlPress: ()=>{
240
253
  const d = s.current;
241
- d && (l === "loading" ? o("showSpinner") : l === "paused" ? d.play() : l === "playing" && d.pause());
254
+ d && (h === "loading" ? o("showSpinner") : h === "paused" ? d.play() : h === "playing" && d.pause());
242
255
  }
243
256
  };
244
- }, se = (param)=>{
245
- let { headline: r , pretitle: i , pretitleLinesMax: n , title: s , titleLinesMax: l , subtitle: o , subtitleLinesMax: p , description: c , descriptionLinesMax: d , extra: a , button: h , buttonLink: u } = param;
246
- const { textPresets: m } = G(), v = ()=>r ? typeof r == "string" ? /* @__PURE__ */ e(ce, {
257
+ }, fe = (param)=>{
258
+ let { headline: r , pretitle: a , pretitleLinesMax: i , title: s , titleLinesMax: h , subtitle: o , subtitleLinesMax: u , description: l , descriptionLinesMax: d , extra: t , button: p , buttonLink: m } = param;
259
+ const { textPresets: f } = Q(), g = ()=>r ? typeof r == "string" ? /* @__PURE__ */ e(Te, {
247
260
  type: "promo",
248
261
  children: r
249
262
  }) : r : null;
250
- return /* @__PURE__ */ t("div", {
251
- className: X({
263
+ return /* @__PURE__ */ n("div", {
264
+ className: k({
252
265
  display: "flex",
253
266
  flex: 1,
254
267
  justifyContent: "space-between",
255
268
  flexDirection: "column"
256
269
  }),
257
270
  children: [
258
- /* @__PURE__ */ t("div", {
271
+ /* @__PURE__ */ n("div", {
259
272
  children: [
260
- /* @__PURE__ */ t(f, {
273
+ /* @__PURE__ */ n(y, {
261
274
  space: 8,
262
275
  children: [
263
- (r || i || s || o) && /* @__PURE__ */ e("header", {
264
- children: /* @__PURE__ */ t(f, {
276
+ (r || a || s || o) && /* @__PURE__ */ e("header", {
277
+ children: /* @__PURE__ */ n(y, {
265
278
  space: 8,
266
279
  children: [
267
- v(),
268
- /* @__PURE__ */ t(f, {
280
+ g(),
281
+ /* @__PURE__ */ n(y, {
269
282
  space: 4,
270
283
  children: [
271
- i && /* @__PURE__ */ e(b, {
272
- truncate: n,
284
+ a && /* @__PURE__ */ e(A, {
285
+ truncate: i,
273
286
  as: "div",
274
287
  regular: !0,
275
288
  hyphens: "auto",
276
- children: i
289
+ children: a
277
290
  }),
278
- /* @__PURE__ */ e(J, {
291
+ /* @__PURE__ */ e(L, {
279
292
  mobileSize: 18,
280
293
  mobileLineHeight: "24px",
281
294
  desktopSize: 20,
282
295
  desktopLineHeight: "28px",
283
- truncate: l,
284
- weight: m.cardTitle.weight,
296
+ truncate: h,
297
+ weight: f.cardTitle.weight,
285
298
  as: "h3",
286
299
  hyphens: "auto",
287
300
  children: s
288
301
  }),
289
- /* @__PURE__ */ e(b, {
290
- truncate: p,
302
+ /* @__PURE__ */ e(A, {
303
+ truncate: u,
291
304
  as: "div",
292
305
  regular: !0,
293
306
  hyphens: "auto",
@@ -298,150 +311,211 @@ const ie = (param)=>/* @__PURE__ */ {
298
311
  ]
299
312
  })
300
313
  }),
301
- c && /* @__PURE__ */ e(b, {
314
+ l && /* @__PURE__ */ e(A, {
302
315
  truncate: d,
303
316
  as: "p",
304
317
  regular: !0,
305
- color: y.colors.textSecondary,
318
+ color: v.colors.textSecondary,
306
319
  hyphens: "auto",
307
- children: c
320
+ children: l
308
321
  })
309
322
  ]
310
323
  }),
311
- a && /* @__PURE__ */ e("div", {
312
- children: a
324
+ t && /* @__PURE__ */ e("div", {
325
+ children: t
313
326
  })
314
327
  ]
315
328
  }),
316
- (h || u) && /* @__PURE__ */ e("div", {
317
- className: Q,
318
- children: /* @__PURE__ */ e(V, {
319
- primaryButton: h,
320
- link: u
329
+ (p || m) && /* @__PURE__ */ e("div", {
330
+ className: re,
331
+ children: /* @__PURE__ */ e(J, {
332
+ primaryButton: p,
333
+ link: m
321
334
  })
322
335
  })
323
336
  ]
324
337
  });
325
- }, or = /*#__PURE__*/ C.forwardRef((param, g)=>/* @__PURE__ */ {
326
- let { media: r , headline: i , pretitle: n , pretitleLinesMax: s , subtitle: l , subtitleLinesMax: o , title: p , titleLinesMax: c , description: d , descriptionLinesMax: a , extra: h , actions: u , button: m , buttonLink: v , dataAttributes: I , "aria-label": T , onClose: x } = param;
327
- return e(F, {
328
- onClose: x,
329
- actions: u,
330
- "aria-label": T,
331
- isInverse: !0,
332
- children: /* @__PURE__ */ e(j, {
333
- className: P,
334
- dataAttributes: _object_spread({
335
- "component-name": "MediaCard"
336
- }, I),
337
- ref: g,
338
- width: "100%",
339
- height: "100%",
340
- children: /* @__PURE__ */ t("div", {
341
- className: fe,
342
- children: [
343
- /* @__PURE__ */ e(me, {
344
- value: !1,
345
- children: r
346
- }),
347
- /* @__PURE__ */ e("div", {
348
- className: ve,
349
- children: /* @__PURE__ */ e(se, {
350
- headline: i,
351
- pretitle: n,
352
- pretitleLinesMax: s,
353
- title: p,
354
- titleLinesMax: c,
355
- subtitle: l,
356
- subtitleLinesMax: o,
357
- description: d,
358
- descriptionLinesMax: a,
359
- extra: h,
360
- button: m,
361
- buttonLink: v
338
+ }, Cr = /*#__PURE__*/ T.forwardRef((_param, w)=>{
339
+ var { media: r , headline: a , pretitle: i , pretitleLinesMax: s , subtitle: h , subtitleLinesMax: o , title: u , titleLinesMax: l , description: d , descriptionLinesMax: t , extra: p , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": N , onClose: S } = _param, c = _object_without_properties(_param, [
340
+ "media",
341
+ "headline",
342
+ "pretitle",
343
+ "pretitleLinesMax",
344
+ "subtitle",
345
+ "subtitleLinesMax",
346
+ "title",
347
+ "titleLinesMax",
348
+ "description",
349
+ "descriptionLinesMax",
350
+ "extra",
351
+ "actions",
352
+ "button",
353
+ "buttonLink",
354
+ "dataAttributes",
355
+ "aria-label",
356
+ "onClose"
357
+ ]);
358
+ const C = c.href || c.to || c.onPress, b = ze;
359
+ return /* @__PURE__ */ n(W, {
360
+ "aria-label": N,
361
+ className: _,
362
+ children: [
363
+ /* @__PURE__ */ e(q, {
364
+ className: P,
365
+ dataAttributes: _object_spread({
366
+ "component-name": "MediaCard"
367
+ }, x),
368
+ ref: w,
369
+ width: "100%",
370
+ height: "100%",
371
+ children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
372
+ maybe: !0
373
+ }, c), {
374
+ className: E,
375
+ "aria-label": N,
376
+ children: [
377
+ C && /* @__PURE__ */ e("div", {
378
+ className: b
379
+ }),
380
+ /* @__PURE__ */ n("div", {
381
+ className: Ie,
382
+ children: [
383
+ /* @__PURE__ */ e(Be, {
384
+ value: !1,
385
+ children: r
386
+ }),
387
+ /* @__PURE__ */ e("div", {
388
+ className: Ae,
389
+ children: /* @__PURE__ */ e(fe, {
390
+ headline: a,
391
+ pretitle: i,
392
+ pretitleLinesMax: s,
393
+ title: u,
394
+ titleLinesMax: l,
395
+ subtitle: h,
396
+ subtitleLinesMax: o,
397
+ description: d,
398
+ descriptionLinesMax: t,
399
+ extra: p,
400
+ button: f,
401
+ buttonLink: g
402
+ })
403
+ })
404
+ ]
362
405
  })
363
- })
364
- ]
406
+ ]
407
+ }))
408
+ }),
409
+ /* @__PURE__ */ e(U, {
410
+ onClose: S,
411
+ actions: m,
412
+ type: "media"
365
413
  })
366
- })
414
+ ]
367
415
  });
368
- }), tr = /*#__PURE__*/ C.forwardRef((param, g)=>{
369
- let { icon: r , headline: i , pretitle: n , pretitleLinesMax: s , title: l , titleLinesMax: o , subtitle: p , subtitleLinesMax: c , description: d , descriptionLinesMax: a , extra: h , actions: u , button: m , buttonLink: v , dataAttributes: I , "aria-label": T , onClose: x } = param;
370
- const N = ne(u, x), z = N.length > 0, A = !!r, D = {
371
- position: "absolute",
372
- top: 8,
373
- right: 8,
374
- zIndex: 2
375
- }, B = {
376
- marginRight: -8,
377
- marginTop: -16
416
+ }), Tr = /*#__PURE__*/ T.forwardRef((_param, w)=>{
417
+ var { icon: r , headline: a , pretitle: i , pretitleLinesMax: s , title: h , titleLinesMax: o , subtitle: u , subtitleLinesMax: l , description: d , descriptionLinesMax: t , extra: p , actions: m , button: f , buttonLink: g , dataAttributes: x , "aria-label": N , onClose: S } = _param, c = _object_without_properties(_param, [
418
+ "icon",
419
+ "headline",
420
+ "pretitle",
421
+ "pretitleLinesMax",
422
+ "title",
423
+ "titleLinesMax",
424
+ "subtitle",
425
+ "subtitleLinesMax",
426
+ "description",
427
+ "descriptionLinesMax",
428
+ "extra",
429
+ "actions",
430
+ "button",
431
+ "buttonLink",
432
+ "dataAttributes",
433
+ "aria-label",
434
+ "onClose"
435
+ ]);
436
+ const C = !!r, b = c.href || c.to || c.onPress, z = K, H = ce(m, S), R = {
437
+ marginRight: -16,
438
+ marginTop: -24,
439
+ width: he * H.length
378
440
  };
379
- return /* @__PURE__ */ e("section", {
380
- "aria-label": T,
381
- style: {
382
- height: "100%",
383
- position: "relative"
384
- },
385
- children: /* @__PURE__ */ e(j, {
386
- className: P,
387
- dataAttributes: _object_spread({
388
- "component-name": "DataCard"
389
- }, I),
390
- ref: g,
391
- width: "100%",
392
- height: "100%",
393
- children: /* @__PURE__ */ t("div", {
394
- className: ye,
395
- children: [
396
- /* @__PURE__ */ t("div", {
397
- className: X({
398
- display: "flex"
441
+ return /* @__PURE__ */ n(W, {
442
+ "aria-label": N,
443
+ className: _,
444
+ children: [
445
+ /* @__PURE__ */ e(q, {
446
+ className: P,
447
+ dataAttributes: _object_spread({
448
+ "component-name": "DataCard"
449
+ }, x),
450
+ ref: w,
451
+ width: "100%",
452
+ height: "100%",
453
+ children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
454
+ maybe: !0
455
+ }, c), {
456
+ className: E,
457
+ "aria-label": N,
458
+ children: [
459
+ b && /* @__PURE__ */ e("div", {
460
+ className: z
399
461
  }),
400
- children: [
401
- /* @__PURE__ */ t(f, {
402
- space: 16,
403
- className: X({
404
- flex: 1
462
+ /* @__PURE__ */ n("div", {
463
+ className: be,
464
+ children: [
465
+ /* @__PURE__ */ n("div", {
466
+ className: k({
467
+ display: "flex"
468
+ }),
469
+ children: [
470
+ /* @__PURE__ */ n(y, {
471
+ space: 16,
472
+ className: k({
473
+ flex: 1
474
+ }),
475
+ children: [
476
+ C ? r : null,
477
+ /* @__PURE__ */ e(fe, {
478
+ headline: a,
479
+ pretitle: i,
480
+ pretitleLinesMax: s,
481
+ title: h,
482
+ titleLinesMax: o,
483
+ subtitle: u,
484
+ subtitleLinesMax: l,
485
+ description: d,
486
+ descriptionLinesMax: t
487
+ })
488
+ ]
489
+ }),
490
+ !C && /* @__PURE__ */ e("div", {
491
+ style: R
492
+ })
493
+ ]
405
494
  }),
406
- children: [
407
- A ? r : null,
408
- /* @__PURE__ */ e(se, {
409
- headline: i,
410
- pretitle: n,
411
- pretitleLinesMax: s,
412
- title: l,
413
- titleLinesMax: o,
414
- subtitle: p,
415
- subtitleLinesMax: c,
416
- description: d,
417
- descriptionLinesMax: a
495
+ p && /* @__PURE__ */ e("div", {
496
+ children: p
497
+ }),
498
+ (f || g) && /* @__PURE__ */ e("div", {
499
+ className: re,
500
+ children: /* @__PURE__ */ e(J, {
501
+ primaryButton: f,
502
+ link: g
418
503
  })
419
- ]
420
- }),
421
- z && /* @__PURE__ */ e("div", {
422
- style: A ? D : B,
423
- children: /* @__PURE__ */ e(ie, {
424
- actions: N
425
504
  })
426
- })
427
- ]
428
- }),
429
- h && /* @__PURE__ */ e("div", {
430
- children: h
431
- }),
432
- (m || v) && /* @__PURE__ */ e("div", {
433
- className: Q,
434
- children: /* @__PURE__ */ e(V, {
435
- primaryButton: m,
436
- link: v
505
+ ]
437
506
  })
438
- })
439
- ]
507
+ ]
508
+ }))
509
+ }),
510
+ /* @__PURE__ */ e(U, {
511
+ onClose: S,
512
+ actions: m,
513
+ type: "default"
440
514
  })
441
- })
515
+ ]
442
516
  });
443
- }), sr = /*#__PURE__*/ C.forwardRef((_param, h)=>{
444
- var { icon: r , title: i , titleLinesMax: n , subtitle: s , subtitleLinesMax: l , dataAttributes: o , "aria-label": p , extra: c , isInverse: d = !1 } = _param, a = _object_without_properties(_param, [
517
+ }), Sr = /*#__PURE__*/ T.forwardRef((_param, p)=>{
518
+ var { icon: r , title: a , titleLinesMax: i , subtitle: s , subtitleLinesMax: h , dataAttributes: o , "aria-label": u , extra: l , isInverse: d = !1 } = _param, t = _object_without_properties(_param, [
445
519
  "icon",
446
520
  "title",
447
521
  "titleLinesMax",
@@ -452,335 +526,411 @@ const ie = (param)=>/* @__PURE__ */ {
452
526
  "extra",
453
527
  "isInverse"
454
528
  ]);
455
- const { isDarkMode: u } = G(), m = !!(a.to || a.href || a.onPress);
456
- return /* @__PURE__ */ e(j, {
457
- className: P,
458
- dataAttributes: _object_spread({
459
- "component-name": "SnapCard"
460
- }, o),
461
- ref: h,
462
- isInverse: d,
463
- width: "100%",
464
- height: "100%",
465
- children: /* @__PURE__ */ e(ge, _object_spread_props(_object_spread({
466
- maybe: !0
467
- }, a), {
468
- className: // @todo: define hover background color for inverse and for dark mode
469
- m && !d && !u ? Ce : Te,
470
- "aria-label": p,
471
- children: /* @__PURE__ */ t("section", {
472
- className: xe,
529
+ const m = t.href || t.to || t.onPress, f = d ? se : K;
530
+ return /* @__PURE__ */ e(W, {
531
+ className: _,
532
+ children: /* @__PURE__ */ e(q, {
533
+ className: P,
534
+ dataAttributes: _object_spread({
535
+ "component-name": "SnapCard"
536
+ }, o),
537
+ ref: p,
538
+ isInverse: d,
539
+ width: "100%",
540
+ height: "100%",
541
+ children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
542
+ maybe: !0
543
+ }, t), {
544
+ className: E,
545
+ "aria-label": u,
473
546
  children: [
474
- /* @__PURE__ */ t("div", {
547
+ m && /* @__PURE__ */ e("div", {
548
+ className: f
549
+ }),
550
+ /* @__PURE__ */ n("section", {
551
+ className: Re,
475
552
  children: [
476
- r && /* @__PURE__ */ e(w, {
477
- paddingBottom: 16,
478
- children: r
479
- }),
480
- /* @__PURE__ */ t(f, {
481
- space: 4,
553
+ /* @__PURE__ */ n("div", {
482
554
  children: [
483
- i && /* @__PURE__ */ e(b, {
484
- truncate: n,
485
- as: "h3",
486
- regular: !0,
487
- hyphens: "auto",
488
- children: i
555
+ r && /* @__PURE__ */ e(D, {
556
+ paddingBottom: 16,
557
+ children: r
489
558
  }),
490
- s && /* @__PURE__ */ e(b, {
491
- truncate: l,
492
- regular: !0,
493
- color: y.colors.textSecondary,
494
- as: "p",
495
- hyphens: "auto",
496
- children: s
559
+ /* @__PURE__ */ n(y, {
560
+ space: 4,
561
+ children: [
562
+ a && /* @__PURE__ */ e(A, {
563
+ truncate: i,
564
+ as: "h3",
565
+ regular: !0,
566
+ hyphens: "auto",
567
+ children: a
568
+ }),
569
+ s && /* @__PURE__ */ e(A, {
570
+ truncate: h,
571
+ regular: !0,
572
+ color: v.colors.textSecondary,
573
+ as: "p",
574
+ hyphens: "auto",
575
+ children: s
576
+ })
577
+ ]
497
578
  })
498
579
  ]
580
+ }),
581
+ l && /* @__PURE__ */ e("div", {
582
+ children: l
499
583
  })
500
584
  ]
501
- }),
502
- c && /* @__PURE__ */ e("div", {
503
- children: c
504
585
  })
505
586
  ]
506
- })
507
- }))
587
+ }))
588
+ })
508
589
  });
509
- }), de = /*#__PURE__*/ C.forwardRef((param, M)=>{
510
- let { isInverse: r , backgroundImage: i , backgroundVideo: n , backgroundVideoRef: s , poster: l , icon: o , headline: p , pretitle: c , pretitleLinesMax: d , title: a , titleLinesMax: h , description: u , descriptionLinesMax: m , extra: v , button: I , secondaryButton: T , onClose: x , actions: g , buttonLink: N , dataAttributes: z , width: A , height: D , aspectRatio: B , "aria-label": W } = param;
511
- const S = ae(i), { video: H , videoStatus: E , onVideoControlPress: k } = te(n, l, s);
512
- n && (g = [
590
+ }), Je = 264, ve = /*#__PURE__*/ T.forwardRef((_param, G)=>{
591
+ var { isInverse: r , backgroundImage: a , backgroundVideo: i , backgroundVideoRef: s , poster: h , icon: o , headline: u , pretitle: l , pretitleLinesMax: d , title: t , titleLinesMax: p , description: m , descriptionLinesMax: f , extra: g , button: x , secondaryButton: N , onClose: S , actions: c , buttonLink: w , dataAttributes: C , width: b , height: z , aspectRatio: H , "aria-label": R } = _param, M = _object_without_properties(_param, [
592
+ "isInverse",
593
+ "backgroundImage",
594
+ "backgroundVideo",
595
+ "backgroundVideoRef",
596
+ "poster",
597
+ "icon",
598
+ "headline",
599
+ "pretitle",
600
+ "pretitleLinesMax",
601
+ "title",
602
+ "titleLinesMax",
603
+ "description",
604
+ "descriptionLinesMax",
605
+ "extra",
606
+ "button",
607
+ "secondaryButton",
608
+ "onClose",
609
+ "actions",
610
+ "buttonLink",
611
+ "dataAttributes",
612
+ "width",
613
+ "height",
614
+ "aspectRatio",
615
+ "aria-label"
616
+ ]);
617
+ const B = me(a), { video: X , videoStatus: j , onVideoControlPress: Y } = pe(i, h, s);
618
+ i && (c = [
513
619
  {
514
- Icon: oe(E),
515
- onPress: k,
620
+ Icon: ue(j),
621
+ onPress: Y,
516
622
  label: "Video controls",
517
- iconSize: E === "loadingTimeout" ? 16 : 12,
518
- iconColor: y.colors.inverse,
519
- iconBackground: _,
520
- iconBackgroundInverse: _
623
+ iconSize: j === "loadingTimeout" ? 16 : 12,
624
+ iconColor: v.colors.inverse,
625
+ iconBackground: V,
626
+ iconBackgroundInverse: V
521
627
  }
522
628
  ]);
523
- const L = ee(), R = !!i || !!n, O = R ? "0 0 16px rgba(0,0,0,0.4)" : void 0, le = (g == null ? void 0 : g.length) || x;
524
- return /* @__PURE__ */ e(F, {
525
- width: A,
526
- height: D,
527
- aspectRatio: B,
528
- onClose: x,
529
- actions: g,
530
- "aria-label": W,
531
- isInverse: r,
532
- children: /* @__PURE__ */ e(K, {
533
- borderRadius: y.borderRadii.legacyDisplay,
534
- className: P,
535
- dataAttributes: z,
536
- ref: M,
537
- width: "100%",
538
- minHeight: "100%",
539
- isInverse: r,
540
- background: i || n ? L ? y.colors.backgroundContainerBrandOverInverse : y.colors.backgroundContainer : void 0,
541
- children: /* @__PURE__ */ t("div", {
542
- className: U,
543
- children: [
544
- /* @__PURE__ */ e(re, {
545
- isInverse: L,
546
- children: /* @__PURE__ */ e("div", {
547
- className: Y,
548
- style: {
549
- zIndex: 0
550
- },
551
- children: n ? H : i ? S : void 0
552
- })
553
- }),
554
- /* @__PURE__ */ t("div", {
555
- className: Z,
556
- style: {
557
- paddingTop: R && !o && !le ? 0 : 24,
558
- zIndex: 1
559
- },
560
- children: [
561
- o ? /* @__PURE__ */ e(w, {
562
- paddingBottom: R ? 0 : 40,
563
- paddingX: 24,
564
- children: o
565
- }) : /* @__PURE__ */ e(w, {
566
- paddingBottom: g != null && g.length || x ? R ? 24 : 64 : 0
567
- }),
568
- /* @__PURE__ */ e(w, {
569
- paddingX: 24,
570
- paddingTop: R ? 40 : 0,
571
- paddingBottom: 24,
572
- className: R ? $ : void 0,
573
- children: /* @__PURE__ */ t(f, {
574
- space: 24,
629
+ const F = le(), I = !!a || !!i, Z = I ? "0 0 16px rgba(0,0,0,0.4)" : void 0, ye = (c == null ? void 0 : c.length) || S, ge = M.href || M.to || M.onPress, Ne = a || i ? oe : r ? se : K;
630
+ return /* @__PURE__ */ n(W, {
631
+ width: b,
632
+ height: z,
633
+ aspectRatio: H,
634
+ "aria-label": R,
635
+ minWidth: Je,
636
+ className: _,
637
+ children: [
638
+ /* @__PURE__ */ e(ee, {
639
+ borderRadius: v.borderRadii.legacyDisplay,
640
+ className: P,
641
+ dataAttributes: C,
642
+ ref: G,
643
+ width: "100%",
644
+ minHeight: "100%",
645
+ isInverse: r,
646
+ background: a || i ? F ? v.colors.backgroundContainerBrandOverInverse : v.colors.backgroundContainer : void 0,
647
+ children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
648
+ maybe: !0
649
+ }, M), {
650
+ className: E,
651
+ "aria-label": R,
652
+ children: [
653
+ ge && /* @__PURE__ */ e("div", {
654
+ className: Ne
655
+ }),
656
+ /* @__PURE__ */ n("div", {
657
+ className: ae,
658
+ children: [
659
+ /* @__PURE__ */ e(de, {
660
+ isInverse: F,
661
+ children: /* @__PURE__ */ e("div", {
662
+ className: ie,
663
+ children: i ? X : a ? B : void 0
664
+ })
665
+ }),
666
+ /* @__PURE__ */ n("div", {
667
+ className: ne,
668
+ style: {
669
+ paddingTop: I && !o && !ye ? 0 : 24
670
+ },
575
671
  children: [
576
- /* @__PURE__ */ t("div", {
577
- children: [
578
- /* @__PURE__ */ t(f, {
579
- space: 8,
580
- children: [
581
- (p || c || a) && /* @__PURE__ */ e("header", {
582
- children: /* @__PURE__ */ t(f, {
583
- space: 16,
672
+ o ? /* @__PURE__ */ e(D, {
673
+ paddingBottom: I ? 0 : 40,
674
+ paddingX: 24,
675
+ children: o
676
+ }) : /* @__PURE__ */ e(D, {
677
+ paddingBottom: c != null && c.length || S ? I ? 24 : 64 : 0
678
+ }),
679
+ /* @__PURE__ */ e(D, {
680
+ paddingX: 24,
681
+ paddingTop: I ? 40 : 0,
682
+ paddingBottom: 24,
683
+ className: I ? te : void 0,
684
+ children: /* @__PURE__ */ n(y, {
685
+ space: 24,
686
+ children: [
687
+ /* @__PURE__ */ n("div", {
688
+ children: [
689
+ /* @__PURE__ */ n(y, {
690
+ space: 8,
584
691
  children: [
585
- p,
586
- /* @__PURE__ */ t(f, {
587
- space: 4,
588
- children: [
589
- c && /* @__PURE__ */ e(b, {
590
- forceMobileSizes: !0,
591
- truncate: d,
592
- as: "div",
593
- regular: !0,
594
- textShadow: O,
595
- children: c
596
- }),
597
- /* @__PURE__ */ e(he, {
598
- forceMobileSizes: !0,
599
- truncate: h,
600
- as: "h3",
601
- textShadow: O,
602
- hyphens: "auto",
603
- children: a
604
- })
605
- ]
692
+ (u || l || t) && /* @__PURE__ */ e("header", {
693
+ children: /* @__PURE__ */ n(y, {
694
+ space: 16,
695
+ children: [
696
+ u,
697
+ /* @__PURE__ */ n(y, {
698
+ space: 4,
699
+ children: [
700
+ l && /* @__PURE__ */ e(A, {
701
+ forceMobileSizes: !0,
702
+ truncate: d,
703
+ as: "div",
704
+ regular: !0,
705
+ textShadow: Z,
706
+ children: l
707
+ }),
708
+ /* @__PURE__ */ e(Se, {
709
+ forceMobileSizes: !0,
710
+ truncate: p,
711
+ as: "h3",
712
+ textShadow: Z,
713
+ hyphens: "auto",
714
+ children: t
715
+ })
716
+ ]
717
+ })
718
+ ]
719
+ })
720
+ }),
721
+ m && /* @__PURE__ */ e(xe, {
722
+ forceMobileSizes: !0,
723
+ truncate: f,
724
+ as: "p",
725
+ regular: !0,
726
+ color: v.colors.textSecondary,
727
+ textShadow: Z,
728
+ hyphens: "auto",
729
+ children: m
606
730
  })
607
731
  ]
608
- })
609
- }),
610
- u && /* @__PURE__ */ e(pe, {
611
- forceMobileSizes: !0,
612
- truncate: m,
613
- as: "p",
614
- regular: !0,
615
- color: y.colors.textSecondary,
616
- textShadow: O,
617
- hyphens: "auto",
618
- children: u
619
- })
620
- ]
621
- }),
622
- v
623
- ]
624
- }),
625
- (I || T || N) && /* @__PURE__ */ e(V, {
626
- primaryButton: I,
627
- secondaryButton: T,
628
- link: N
732
+ }),
733
+ g
734
+ ]
735
+ }),
736
+ (x || N || w) && /* @__PURE__ */ e(J, {
737
+ primaryButton: x,
738
+ secondaryButton: N,
739
+ link: w
740
+ })
741
+ ]
742
+ })
629
743
  })
630
744
  ]
631
745
  })
632
- })
633
- ]
634
- })
635
- ]
746
+ ]
747
+ })
748
+ ]
749
+ }))
750
+ }),
751
+ /* @__PURE__ */ e(U, {
752
+ onClose: S,
753
+ actions: c,
754
+ type: a || i ? "media" : r ? "inverse" : "default"
636
755
  })
637
- })
756
+ ]
638
757
  });
639
- }), dr = /*#__PURE__*/ C.forwardRef((_param, n)=>/* @__PURE__ */ {
640
- var { dataAttributes: r } = _param, i = _object_without_properties(_param, [
758
+ }), xr = /*#__PURE__*/ T.forwardRef((_param, i)=>/* @__PURE__ */ {
759
+ var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
641
760
  "dataAttributes"
642
761
  ]);
643
- return e(de, _object_spread_props(_object_spread({}, i), {
644
- ref: n,
762
+ return e(ve, _object_spread_props(_object_spread({}, a), {
763
+ ref: i,
645
764
  isInverse: !0,
646
765
  dataAttributes: _object_spread_props(_object_spread({}, r), {
647
766
  "component-name": "DisplayMediaCard"
648
767
  })
649
768
  }));
650
- }), lr = /*#__PURE__*/ C.forwardRef((_param, n)=>/* @__PURE__ */ {
651
- var { dataAttributes: r } = _param, i = _object_without_properties(_param, [
769
+ }), wr = /*#__PURE__*/ T.forwardRef((_param, i)=>/* @__PURE__ */ {
770
+ var { dataAttributes: r } = _param, a = _object_without_properties(_param, [
652
771
  "dataAttributes"
653
772
  ]);
654
- return e(de, _object_spread_props(_object_spread({}, i), {
655
- ref: n,
773
+ return e(ve, _object_spread_props(_object_spread({}, a), {
774
+ ref: i,
656
775
  dataAttributes: _object_spread_props(_object_spread({}, r), {
657
776
  "component-name": "DisplayDataCard"
658
777
  })
659
778
  }));
660
- }), Ee = 140, _e = 112, cr = /*#__PURE__*/ C.forwardRef((param, z)=>{
661
- let { dataAttributes: r , backgroundImage: i , backgroundVideo: n , poster: s , backgroundVideoRef: l , width: o , height: p , aspectRatio: c = "7:10" , ariaLabel: d , actions: a , onClose: h , icon: u , headline: m , pretitle: v , pretitleLinesMax: I , title: T , titleLinesMax: x , description: g , descriptionLinesMax: N } = param;
662
- const A = ae(i), { video: D , videoStatus: B , onVideoControlPress: W } = te(n, s, l);
663
- n && (a = [
779
+ }), Ke = 140, Br = /*#__PURE__*/ T.forwardRef((_param, b)=>{
780
+ var { dataAttributes: r , backgroundImage: a , backgroundVideo: i , poster: s , backgroundVideoRef: h , width: o , height: u , aspectRatio: l = "7:10" , ariaLabel: d , actions: t , onClose: p , icon: m , headline: f , pretitle: g , pretitleLinesMax: x , title: N , titleLinesMax: S , description: c , descriptionLinesMax: w } = _param, C = _object_without_properties(_param, [
781
+ "dataAttributes",
782
+ "backgroundImage",
783
+ "backgroundVideo",
784
+ "poster",
785
+ "backgroundVideoRef",
786
+ "width",
787
+ "height",
788
+ "aspectRatio",
789
+ "ariaLabel",
790
+ "actions",
791
+ "onClose",
792
+ "icon",
793
+ "headline",
794
+ "pretitle",
795
+ "pretitleLinesMax",
796
+ "title",
797
+ "titleLinesMax",
798
+ "description",
799
+ "descriptionLinesMax"
800
+ ]);
801
+ const z = me(a), { video: H , videoStatus: R , onVideoControlPress: M } = pe(i, s, h);
802
+ i && (t = [
664
803
  {
665
- Icon: oe(B),
666
- onPress: W,
804
+ Icon: ue(R),
805
+ onPress: M,
667
806
  label: "Video controls",
668
- iconSize: B === "loadingTimeout" ? 16 : 12,
669
- iconColor: y.colors.inverse,
670
- iconBackground: _,
671
- iconBackgroundInverse: _
807
+ iconSize: R === "loadingTimeout" ? 16 : 12,
808
+ iconColor: v.colors.inverse,
809
+ iconBackground: V,
810
+ iconBackgroundInverse: V
672
811
  }
673
812
  ]);
674
- const M = ee(), S = !!i || !!n, H = S ? "0 0 16px rgba(0,0,0,0.4)" : void 0, E = (a == null ? void 0 : a.length) || h, { textPresets: k } = G();
675
- return /* @__PURE__ */ e(F, {
813
+ const G = le(), B = !!a || !!i, X = B ? "0 0 16px rgba(0,0,0,0.4)" : void 0, j = (t == null ? void 0 : t.length) || p, { textPresets: Y } = Q(), F = C.href || C.to || C.onPress, I = oe;
814
+ return /* @__PURE__ */ n(W, {
676
815
  width: o,
677
- height: p,
678
- minWidth: Ee,
679
- minHeight: _e,
680
- aspectRatio: c,
681
- onClose: h,
682
- actions: a,
816
+ height: u,
817
+ minWidth: Ke,
818
+ aspectRatio: l,
683
819
  "aria-label": d,
684
- isInverse: !0,
685
- children: /* @__PURE__ */ e(K, {
686
- borderRadius: y.borderRadii.legacyDisplay,
687
- className: P,
688
- dataAttributes: r,
689
- ref: z,
690
- width: "100%",
691
- minHeight: "100%",
692
- isInverse: !0,
693
- background: i || n ? M ? y.colors.backgroundContainerBrandOverInverse : y.colors.backgroundContainer : void 0,
694
- children: /* @__PURE__ */ t("div", {
695
- className: U,
696
- children: [
697
- /* @__PURE__ */ e(re, {
698
- isInverse: M,
699
- children: /* @__PURE__ */ e("div", {
700
- className: Y,
701
- style: {
702
- zIndex: 0
703
- },
704
- children: n ? D : i ? A : void 0
705
- })
706
- }),
707
- /* @__PURE__ */ t("div", {
708
- className: Z,
709
- style: {
710
- paddingTop: S && !u && !E ? 0 : 24,
711
- zIndex: 1
712
- },
713
- children: [
714
- u ? /* @__PURE__ */ e(w, {
715
- paddingBottom: S ? 0 : 40,
716
- paddingX: 24,
717
- children: u
718
- }) : /* @__PURE__ */ e(w, {
719
- paddingBottom: a != null && a.length || h ? S ? 24 : 64 : 0
720
- }),
721
- /* @__PURE__ */ e(w, {
722
- paddingX: 16,
723
- paddingTop: S ? 40 : 0,
724
- paddingBottom: 24,
725
- className: S ? $ : void 0,
726
- children: /* @__PURE__ */ e(f, {
727
- space: 24,
820
+ className: _,
821
+ children: [
822
+ /* @__PURE__ */ e(ee, {
823
+ borderRadius: v.borderRadii.legacyDisplay,
824
+ className: P,
825
+ dataAttributes: r,
826
+ ref: b,
827
+ width: "100%",
828
+ minHeight: "100%",
829
+ isInverse: !0,
830
+ background: a || i ? G ? v.colors.backgroundContainerBrandOverInverse : v.colors.backgroundContainer : void 0,
831
+ children: /* @__PURE__ */ n(O, _object_spread_props(_object_spread({
832
+ maybe: !0
833
+ }, C), {
834
+ className: E,
835
+ "aria-label": d,
836
+ children: [
837
+ F && /* @__PURE__ */ e("div", {
838
+ className: I
839
+ }),
840
+ /* @__PURE__ */ n("div", {
841
+ className: ae,
842
+ children: [
843
+ /* @__PURE__ */ e(de, {
844
+ isInverse: G,
728
845
  children: /* @__PURE__ */ e("div", {
729
- children: /* @__PURE__ */ t(f, {
730
- space: 8,
731
- children: [
732
- (m || v || T) && /* @__PURE__ */ e("header", {
733
- children: /* @__PURE__ */ t(f, {
734
- space: 16,
846
+ className: ie,
847
+ children: i ? H : a ? z : void 0
848
+ })
849
+ }),
850
+ /* @__PURE__ */ n("div", {
851
+ className: ne,
852
+ style: {
853
+ paddingTop: B && !m && !j ? 0 : 24
854
+ },
855
+ children: [
856
+ m ? /* @__PURE__ */ e(D, {
857
+ paddingBottom: B ? 0 : 40,
858
+ paddingX: 24,
859
+ children: m
860
+ }) : /* @__PURE__ */ e(D, {
861
+ paddingBottom: t != null && t.length || p ? B ? 24 : 64 : 0
862
+ }),
863
+ /* @__PURE__ */ e(D, {
864
+ paddingX: 16,
865
+ paddingTop: B ? 40 : 0,
866
+ paddingBottom: 24,
867
+ className: B ? te : void 0,
868
+ children: /* @__PURE__ */ e(y, {
869
+ space: 24,
870
+ children: /* @__PURE__ */ e("div", {
871
+ children: /* @__PURE__ */ n(y, {
872
+ space: 8,
735
873
  children: [
736
- m,
737
- /* @__PURE__ */ t(f, {
738
- space: 4,
739
- children: [
740
- v && /* @__PURE__ */ e(b, {
741
- forceMobileSizes: !0,
742
- truncate: I,
743
- as: "div",
744
- regular: !0,
745
- textShadow: H,
746
- hyphens: "auto",
747
- children: v
748
- }),
749
- /* @__PURE__ */ e(J, {
750
- desktopSize: 20,
751
- mobileSize: 18,
752
- mobileLineHeight: "24px",
753
- desktopLineHeight: "28px",
754
- truncate: x,
755
- weight: k.cardTitle.weight,
756
- as: "h3",
757
- hyphens: "auto",
758
- children: T
759
- })
760
- ]
874
+ (f || g || N) && /* @__PURE__ */ e("header", {
875
+ children: /* @__PURE__ */ n(y, {
876
+ space: 16,
877
+ children: [
878
+ f,
879
+ /* @__PURE__ */ n(y, {
880
+ space: 4,
881
+ children: [
882
+ g && /* @__PURE__ */ e(A, {
883
+ forceMobileSizes: !0,
884
+ truncate: x,
885
+ as: "div",
886
+ regular: !0,
887
+ textShadow: X,
888
+ hyphens: "auto",
889
+ children: g
890
+ }),
891
+ /* @__PURE__ */ e(L, {
892
+ desktopSize: 20,
893
+ mobileSize: 18,
894
+ mobileLineHeight: "24px",
895
+ desktopLineHeight: "28px",
896
+ truncate: S,
897
+ weight: Y.cardTitle.weight,
898
+ as: "h3",
899
+ hyphens: "auto",
900
+ children: N
901
+ })
902
+ ]
903
+ })
904
+ ]
905
+ })
906
+ }),
907
+ c && /* @__PURE__ */ e(A, {
908
+ forceMobileSizes: !0,
909
+ truncate: w,
910
+ as: "p",
911
+ regular: !0,
912
+ textShadow: X,
913
+ hyphens: "auto",
914
+ children: c
761
915
  })
762
916
  ]
763
917
  })
764
- }),
765
- g && /* @__PURE__ */ e(b, {
766
- forceMobileSizes: !0,
767
- truncate: N,
768
- as: "p",
769
- regular: !0,
770
- textShadow: H,
771
- hyphens: "auto",
772
- children: g
773
918
  })
774
- ]
919
+ })
775
920
  })
776
- })
921
+ ]
777
922
  })
778
- })
779
- ]
780
- })
781
- ]
923
+ ]
924
+ })
925
+ ]
926
+ }))
927
+ }),
928
+ /* @__PURE__ */ e(U, {
929
+ onClose: p,
930
+ actions: t,
931
+ type: "media"
782
932
  })
783
- })
933
+ ]
784
934
  });
785
935
  });
786
- export { tr as DataCard, lr as DisplayDataCard, dr as DisplayMediaCard, or as MediaCard, cr as PosterCard, sr as SnapCard };
936
+ export { Tr as DataCard, wr as DisplayDataCard, xr as DisplayMediaCard, Cr as MediaCard, Br as PosterCard, Sr as SnapCard };