@micromag/screen-quote 0.4.71 → 0.4.74

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 (3) hide show
  1. package/es/index.d.ts +2 -2
  2. package/es/index.js +499 -158
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ForwardedRef } from 'react';
3
- import { TextElement, BackgroundElement, Header, Footer } from '@micromag/core';
3
+ import { TextElement, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface QuoteScreenProps {
6
6
  layout?: 'top' | 'middle' | 'bottom' | 'split';
@@ -12,7 +12,7 @@ interface QuoteScreenProps {
12
12
  footer?: Footer | null;
13
13
  current?: boolean;
14
14
  preload?: boolean;
15
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
15
+ mediaRef?: ForwardedRef<MediaElement> | null;
16
16
  className?: string | null;
17
17
  }
18
18
  declare function QuoteScreen({ layout, quote, author, spacing, background, header, footer, current, preload, mediaRef: customMediaRef, className, }: QuoteScreenProps): react_jsx_runtime.JSX.Element;
package/es/index.js CHANGED
@@ -1,6 +1,5 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
3
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
+ import { c } from 'react/compiler-runtime';
4
3
  import classNames from 'classnames';
5
4
  import { ScreenElement } from '@micromag/core/components';
6
5
  import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
@@ -12,132 +11,468 @@ import Header from '@micromag/element-header';
12
11
  import Layout, { Spacer } from '@micromag/element-layout';
13
12
  import Quote from '@micromag/element-quote';
14
13
  import Text from '@micromag/element-text';
15
- import { jsxs, jsx } from 'react/jsx-runtime';
14
+ import { jsx, jsxs } from 'react/jsx-runtime';
16
15
 
17
16
  var styles = {"container":"micromag-screen-quote-container","background":"micromag-screen-quote-background","content":"micromag-screen-quote-content","emptyQuote":"micromag-screen-quote-emptyQuote","emptyAuthor":"micromag-screen-quote-emptyAuthor","quote":"micromag-screen-quote-quote","withMargin":"micromag-screen-quote-withMargin","isPlaceholder":"micromag-screen-quote-isPlaceholder","layout":"micromag-screen-quote-layout"};
18
17
 
19
- function QuoteScreen(_ref) {
20
- var _ref$layout = _ref.layout,
21
- layout = _ref$layout === void 0 ? 'top' : _ref$layout,
22
- _ref$quote = _ref.quote,
23
- quote = _ref$quote === void 0 ? null : _ref$quote,
24
- _ref$author = _ref.author,
25
- author = _ref$author === void 0 ? null : _ref$author,
26
- _ref$spacing = _ref.spacing,
27
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
28
- _ref$background = _ref.background,
29
- background = _ref$background === void 0 ? null : _ref$background,
30
- _ref$header = _ref.header,
31
- header = _ref$header === void 0 ? null : _ref$header,
32
- _ref$footer = _ref.footer,
33
- footer = _ref$footer === void 0 ? null : _ref$footer,
34
- _ref$current = _ref.current,
35
- current = _ref$current === void 0 ? true : _ref$current,
36
- _ref$preload = _ref.preload,
37
- preload = _ref$preload === void 0 ? true : _ref$preload,
38
- _ref$mediaRef = _ref.mediaRef,
39
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
40
- _ref$className = _ref.className,
41
- className = _ref$className === void 0 ? null : _ref$className;
42
- var _useScreenSize = useScreenSize(),
43
- width = _useScreenSize.width,
44
- height = _useScreenSize.height,
45
- resolution = _useScreenSize.resolution;
46
- var _useScreenRenderConte = useScreenRenderContext(),
47
- isView = _useScreenRenderConte.isView,
48
- isPreview = _useScreenRenderConte.isPreview,
49
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
50
- isEdit = _useScreenRenderConte.isEdit;
51
- var _useViewerContext = useViewerContext(),
52
- viewerTopHeight = _useViewerContext.topHeight,
53
- viewerBottomHeight = _useViewerContext.bottomHeight,
54
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
55
- var _useViewerWebView = useViewerWebView(),
56
- openWebView = _useViewerWebView.open;
57
- var _usePlaybackContext = usePlaybackContext(),
58
- muted = _usePlaybackContext.muted;
59
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
60
- mediaRef = _usePlaybackMediaRef.ref,
61
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
62
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
63
- var isSplitted = layout === 'split';
64
- var isTopLayout = layout === 'top';
65
- var isMiddleLayout = layout === 'middle';
66
- var isBottomLayout = layout === 'bottom';
67
- var verticalAlign = isSplitted ? null : layout;
68
- var hasHeader = isHeaderFilled(header);
69
- var hasFooter = isFooterFilled(footer);
70
- var footerProps = getFooterProps(footer, {
71
- isView: isView,
72
- current: current,
73
- openWebView: openWebView,
74
- isPreview: isPreview
75
- });
76
- var hasQuote = isTextFilled(quote);
77
- var hasAuthor = isTextFilled(author);
78
- var quoteWithMargin = hasQuote && hasAuthor && !isSplitted;
79
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
80
- var mediaShouldLoad = current || preload;
81
- return /*#__PURE__*/jsxs("div", {
82
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
83
- "data-screen-ready": true,
84
- children: [/*#__PURE__*/jsx(Container, {
85
- width: width,
86
- height: height,
87
- className: styles.content,
88
- children: /*#__PURE__*/jsxs(Layout, {
89
- className: styles.layout,
90
- fullscreen: true,
91
- verticalAlign: verticalAlign,
92
- style: !isPlaceholder ? {
93
- paddingLeft: spacing,
94
- paddingRight: spacing,
95
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
96
- paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
97
- } : null,
98
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
99
- style: {
100
- paddingBottom: spacing
101
- },
102
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
103
- }) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, /*#__PURE__*/jsx(ScreenElement, {
104
- placeholder: "quote",
105
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
106
- id: "CrzYgw",
107
- defaultMessage: [{
108
- "type": 0,
109
- "value": "Quote"
110
- }]
111
- }),
112
- emptyClassName: styles.emptyQuote,
113
- isEmpty: !hasQuote,
114
- children: hasQuote ? /*#__PURE__*/jsx(Quote, _objectSpread({
115
- className: classNames([styles.quote, _defineProperty({}, styles.withMargin, quoteWithMargin)])
116
- }, quote)) : null
117
- }, "quote"), isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
118
- placeholder: "subtitle",
119
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
120
- id: "xYqGzM",
121
- defaultMessage: [{
122
- "type": 0,
123
- "value": "Author"
124
- }]
125
- }),
126
- emptyClassName: styles.emptyAuthor,
127
- isEmpty: !hasAuthor,
128
- children: hasAuthor ? /*#__PURE__*/jsx(Text, _objectSpread({
129
- className: styles.author
130
- }, author)) : null
131
- }, "author"), !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
132
- style: {
133
- paddingTop: spacing,
134
- paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
135
- paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
136
- },
137
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
138
- }) : null]
18
+ function QuoteScreen(t0) {
19
+ const $ = c(159);
20
+ const {
21
+ layout: t1,
22
+ quote: t2,
23
+ author: t3,
24
+ spacing: t4,
25
+ background: t5,
26
+ header: t6,
27
+ footer: t7,
28
+ current: t8,
29
+ preload: t9,
30
+ mediaRef: t10,
31
+ className: t11
32
+ } = t0;
33
+ const layout = t1 === undefined ? "top" : t1;
34
+ const quote = t2 === undefined ? null : t2;
35
+ const author = t3 === undefined ? null : t3;
36
+ const spacing = t4 === undefined ? 20 : t4;
37
+ const background = t5 === undefined ? null : t5;
38
+ const header = t6 === undefined ? null : t6;
39
+ const footer = t7 === undefined ? null : t7;
40
+ const current = t8 === undefined ? true : t8;
41
+ const preload = t9 === undefined ? true : t9;
42
+ const customMediaRef = t10 === undefined ? null : t10;
43
+ const className = t11 === undefined ? null : t11;
44
+ const {
45
+ width,
46
+ height,
47
+ resolution
48
+ } = useScreenSize();
49
+ const {
50
+ isView,
51
+ isPreview,
52
+ isPlaceholder,
53
+ isEdit
54
+ } = useScreenRenderContext();
55
+ const {
56
+ topHeight: viewerTopHeight,
57
+ bottomHeight: viewerBottomHeight,
58
+ bottomSidesWidth: viewerBottomSidesWidth
59
+ } = useViewerContext();
60
+ const {
61
+ open: openWebView
62
+ } = useViewerWebView();
63
+ const {
64
+ muted
65
+ } = usePlaybackContext();
66
+ const {
67
+ ref: mediaRef,
68
+ isCurrent: t12
69
+ } = usePlaybackMediaRef(current, true);
70
+ const isCurrentMedia = t12 === undefined ? false : t12;
71
+ const isSplitted = layout === "split";
72
+ const isTopLayout = layout === "top";
73
+ const isMiddleLayout = layout === "middle";
74
+ const isBottomLayout = layout === "bottom";
75
+ const verticalAlign = isSplitted ? null : layout;
76
+ let t13;
77
+ if ($[0] !== header) {
78
+ t13 = isHeaderFilled(header);
79
+ $[0] = header;
80
+ $[1] = t13;
81
+ } else {
82
+ t13 = $[1];
83
+ }
84
+ const hasHeader = t13;
85
+ let t14;
86
+ if ($[2] !== footer) {
87
+ t14 = isFooterFilled(footer);
88
+ $[2] = footer;
89
+ $[3] = t14;
90
+ } else {
91
+ t14 = $[3];
92
+ }
93
+ const hasFooter = t14;
94
+ let t15;
95
+ if ($[4] !== current || $[5] !== footer || $[6] !== isPreview || $[7] !== isView || $[8] !== openWebView) {
96
+ t15 = getFooterProps(footer, {
97
+ isView,
98
+ current,
99
+ openWebView,
100
+ isPreview
101
+ });
102
+ $[4] = current;
103
+ $[5] = footer;
104
+ $[6] = isPreview;
105
+ $[7] = isView;
106
+ $[8] = openWebView;
107
+ $[9] = t15;
108
+ } else {
109
+ t15 = $[9];
110
+ }
111
+ const footerProps = t15;
112
+ let T0;
113
+ let T1;
114
+ let T2;
115
+ let backgroundPlaying;
116
+ let hasAuthor;
117
+ let mediaShouldLoad;
118
+ let t16;
119
+ let t17;
120
+ let t18;
121
+ let t19;
122
+ let t20;
123
+ let t21;
124
+ let t22;
125
+ let t23;
126
+ let t24;
127
+ let t25;
128
+ let t26;
129
+ let t27;
130
+ let t28;
131
+ let t29;
132
+ let t30;
133
+ let t31;
134
+ let t32;
135
+ let t33;
136
+ let t34;
137
+ if ($[10] !== author || $[11] !== className || $[12] !== current || $[13] !== hasFooter || $[14] !== hasHeader || $[15] !== header || $[16] !== height || $[17] !== isBottomLayout || $[18] !== isCurrentMedia || $[19] !== isEdit || $[20] !== isMiddleLayout || $[21] !== isPlaceholder || $[22] !== isPreview || $[23] !== isSplitted || $[24] !== isView || $[25] !== preload || $[26] !== quote || $[27] !== spacing || $[28] !== verticalAlign || $[29] !== viewerBottomHeight || $[30] !== viewerTopHeight || $[31] !== width) {
138
+ const hasQuote = isTextFilled(quote);
139
+ hasAuthor = isTextFilled(author);
140
+ const quoteWithMargin = hasQuote && hasAuthor && !isSplitted;
141
+ backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
142
+ mediaShouldLoad = current || preload;
143
+ if ($[57] !== className || $[58] !== isPlaceholder) {
144
+ t33 = classNames([styles.container, className, {
145
+ [styles.isPlaceholder]: isPlaceholder
146
+ }]);
147
+ $[57] = className;
148
+ $[58] = isPlaceholder;
149
+ $[59] = t33;
150
+ } else {
151
+ t33 = $[59];
152
+ }
153
+ t34 = true;
154
+ T2 = Container;
155
+ t30 = width;
156
+ t31 = height;
157
+ t32 = styles.content;
158
+ T1 = Layout;
159
+ t22 = styles.layout;
160
+ t23 = true;
161
+ t24 = verticalAlign;
162
+ if ($[60] !== hasFooter || $[61] !== hasHeader || $[62] !== isPlaceholder || $[63] !== isPreview || $[64] !== spacing || $[65] !== viewerBottomHeight || $[66] !== viewerTopHeight) {
163
+ t25 = !isPlaceholder ? {
164
+ paddingLeft: spacing,
165
+ paddingRight: spacing,
166
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
167
+ paddingBottom: (!isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
168
+ } : null;
169
+ $[60] = hasFooter;
170
+ $[61] = hasHeader;
171
+ $[62] = isPlaceholder;
172
+ $[63] = isPreview;
173
+ $[64] = spacing;
174
+ $[65] = viewerBottomHeight;
175
+ $[66] = viewerTopHeight;
176
+ $[67] = t25;
177
+ } else {
178
+ t25 = $[67];
179
+ }
180
+ if ($[68] !== hasHeader || $[69] !== header || $[70] !== isPlaceholder || $[71] !== spacing) {
181
+ t26 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
182
+ style: {
183
+ paddingBottom: spacing
184
+ },
185
+ children: /*#__PURE__*/jsx(Header, {
186
+ ...header
187
+ })
188
+ }) : null;
189
+ $[68] = hasHeader;
190
+ $[69] = header;
191
+ $[70] = isPlaceholder;
192
+ $[71] = spacing;
193
+ $[72] = t26;
194
+ } else {
195
+ t26 = $[72];
196
+ }
197
+ if ($[73] !== hasFooter || $[74] !== isMiddleLayout || $[75] !== isPlaceholder) {
198
+ t27 = !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
199
+ $[73] = hasFooter;
200
+ $[74] = isMiddleLayout;
201
+ $[75] = isPlaceholder;
202
+ $[76] = t27;
203
+ } else {
204
+ t27 = $[76];
205
+ }
206
+ if ($[77] !== hasHeader || $[78] !== isBottomLayout || $[79] !== isPlaceholder) {
207
+ t28 = !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
208
+ $[77] = hasHeader;
209
+ $[78] = isBottomLayout;
210
+ $[79] = isPlaceholder;
211
+ $[80] = t28;
212
+ } else {
213
+ t28 = $[80];
214
+ }
215
+ if ($[81] !== hasFooter || $[82] !== hasHeader || $[83] !== isMiddleLayout || $[84] !== isPlaceholder) {
216
+ t29 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
217
+ $[81] = hasFooter;
218
+ $[82] = hasHeader;
219
+ $[83] = isMiddleLayout;
220
+ $[84] = isPlaceholder;
221
+ $[85] = t29;
222
+ } else {
223
+ t29 = $[85];
224
+ }
225
+ T0 = ScreenElement;
226
+ t16 = "quote";
227
+ t17 = "quote";
228
+ if ($[86] === Symbol.for("react.memo_cache_sentinel")) {
229
+ t18 = /*#__PURE__*/jsx(FormattedMessage, {
230
+ id: "CrzYgw",
231
+ defaultMessage: "Quote"
232
+ });
233
+ $[86] = t18;
234
+ } else {
235
+ t18 = $[86];
236
+ }
237
+ t19 = styles.emptyQuote;
238
+ t20 = !hasQuote;
239
+ t21 = hasQuote ? /*#__PURE__*/jsx(Quote, {
240
+ className: classNames([styles.quote, {
241
+ [styles.withMargin]: quoteWithMargin
242
+ }]),
243
+ ...quote
244
+ }) : null;
245
+ $[10] = author;
246
+ $[11] = className;
247
+ $[12] = current;
248
+ $[13] = hasFooter;
249
+ $[14] = hasHeader;
250
+ $[15] = header;
251
+ $[16] = height;
252
+ $[17] = isBottomLayout;
253
+ $[18] = isCurrentMedia;
254
+ $[19] = isEdit;
255
+ $[20] = isMiddleLayout;
256
+ $[21] = isPlaceholder;
257
+ $[22] = isPreview;
258
+ $[23] = isSplitted;
259
+ $[24] = isView;
260
+ $[25] = preload;
261
+ $[26] = quote;
262
+ $[27] = spacing;
263
+ $[28] = verticalAlign;
264
+ $[29] = viewerBottomHeight;
265
+ $[30] = viewerTopHeight;
266
+ $[31] = width;
267
+ $[32] = T0;
268
+ $[33] = T1;
269
+ $[34] = T2;
270
+ $[35] = backgroundPlaying;
271
+ $[36] = hasAuthor;
272
+ $[37] = mediaShouldLoad;
273
+ $[38] = t16;
274
+ $[39] = t17;
275
+ $[40] = t18;
276
+ $[41] = t19;
277
+ $[42] = t20;
278
+ $[43] = t21;
279
+ $[44] = t22;
280
+ $[45] = t23;
281
+ $[46] = t24;
282
+ $[47] = t25;
283
+ $[48] = t26;
284
+ $[49] = t27;
285
+ $[50] = t28;
286
+ $[51] = t29;
287
+ $[52] = t30;
288
+ $[53] = t31;
289
+ $[54] = t32;
290
+ $[55] = t33;
291
+ $[56] = t34;
292
+ } else {
293
+ T0 = $[32];
294
+ T1 = $[33];
295
+ T2 = $[34];
296
+ backgroundPlaying = $[35];
297
+ hasAuthor = $[36];
298
+ mediaShouldLoad = $[37];
299
+ t16 = $[38];
300
+ t17 = $[39];
301
+ t18 = $[40];
302
+ t19 = $[41];
303
+ t20 = $[42];
304
+ t21 = $[43];
305
+ t22 = $[44];
306
+ t23 = $[45];
307
+ t24 = $[46];
308
+ t25 = $[47];
309
+ t26 = $[48];
310
+ t27 = $[49];
311
+ t28 = $[50];
312
+ t29 = $[51];
313
+ t30 = $[52];
314
+ t31 = $[53];
315
+ t32 = $[54];
316
+ t33 = $[55];
317
+ t34 = $[56];
318
+ }
319
+ let t35;
320
+ if ($[87] !== T0 || $[88] !== t16 || $[89] !== t17 || $[90] !== t18 || $[91] !== t19 || $[92] !== t20 || $[93] !== t21) {
321
+ t35 = /*#__PURE__*/jsx(T0, {
322
+ placeholder: t17,
323
+ emptyLabel: t18,
324
+ emptyClassName: t19,
325
+ isEmpty: t20,
326
+ children: t21
327
+ }, t16);
328
+ $[87] = T0;
329
+ $[88] = t16;
330
+ $[89] = t17;
331
+ $[90] = t18;
332
+ $[91] = t19;
333
+ $[92] = t20;
334
+ $[93] = t21;
335
+ $[94] = t35;
336
+ } else {
337
+ t35 = $[94];
338
+ }
339
+ let t36;
340
+ if ($[95] !== isSplitted) {
341
+ t36 = isSplitted ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
342
+ $[95] = isSplitted;
343
+ $[96] = t36;
344
+ } else {
345
+ t36 = $[96];
346
+ }
347
+ let t37;
348
+ if ($[97] === Symbol.for("react.memo_cache_sentinel")) {
349
+ t37 = /*#__PURE__*/jsx(FormattedMessage, {
350
+ id: "xYqGzM",
351
+ defaultMessage: "Author"
352
+ });
353
+ $[97] = t37;
354
+ } else {
355
+ t37 = $[97];
356
+ }
357
+ const t38 = !hasAuthor;
358
+ let t39;
359
+ if ($[98] !== author || $[99] !== hasAuthor) {
360
+ t39 = hasAuthor ? /*#__PURE__*/jsx(Text, {
361
+ className: styles.author,
362
+ ...author
363
+ }) : null;
364
+ $[98] = author;
365
+ $[99] = hasAuthor;
366
+ $[100] = t39;
367
+ } else {
368
+ t39 = $[100];
369
+ }
370
+ let t40;
371
+ if ($[101] !== t38 || $[102] !== t39) {
372
+ t40 = /*#__PURE__*/jsx(ScreenElement, {
373
+ placeholder: "subtitle",
374
+ emptyLabel: t37,
375
+ emptyClassName: styles.emptyAuthor,
376
+ isEmpty: t38,
377
+ children: t39
378
+ }, "author");
379
+ $[101] = t38;
380
+ $[102] = t39;
381
+ $[103] = t40;
382
+ } else {
383
+ t40 = $[103];
384
+ }
385
+ let t41;
386
+ if ($[104] !== hasFooter || $[105] !== isMiddleLayout || $[106] !== isPlaceholder || $[107] !== isTopLayout) {
387
+ t41 = !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
388
+ $[104] = hasFooter;
389
+ $[105] = isMiddleLayout;
390
+ $[106] = isPlaceholder;
391
+ $[107] = isTopLayout;
392
+ $[108] = t41;
393
+ } else {
394
+ t41 = $[108];
395
+ }
396
+ let t42;
397
+ if ($[109] !== hasFooter || $[110] !== hasHeader || $[111] !== isMiddleLayout || $[112] !== isPlaceholder) {
398
+ t42 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
399
+ $[109] = hasFooter;
400
+ $[110] = hasHeader;
401
+ $[111] = isMiddleLayout;
402
+ $[112] = isPlaceholder;
403
+ $[113] = t42;
404
+ } else {
405
+ t42 = $[113];
406
+ }
407
+ let t43;
408
+ if ($[114] !== footerProps || $[115] !== hasFooter || $[116] !== isPlaceholder || $[117] !== spacing || $[118] !== viewerBottomSidesWidth) {
409
+ t43 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
410
+ style: {
411
+ paddingTop: spacing,
412
+ paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
413
+ paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
414
+ },
415
+ children: /*#__PURE__*/jsx(Footer, {
416
+ ...footerProps
139
417
  })
140
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
418
+ }) : null;
419
+ $[114] = footerProps;
420
+ $[115] = hasFooter;
421
+ $[116] = isPlaceholder;
422
+ $[117] = spacing;
423
+ $[118] = viewerBottomSidesWidth;
424
+ $[119] = t43;
425
+ } else {
426
+ t43 = $[119];
427
+ }
428
+ let t44;
429
+ if ($[120] !== T1 || $[121] !== t22 || $[122] !== t23 || $[123] !== t24 || $[124] !== t25 || $[125] !== t26 || $[126] !== t27 || $[127] !== t28 || $[128] !== t29 || $[129] !== t35 || $[130] !== t36 || $[131] !== t40 || $[132] !== t41 || $[133] !== t42 || $[134] !== t43) {
430
+ t44 = /*#__PURE__*/jsxs(T1, {
431
+ className: t22,
432
+ fullscreen: t23,
433
+ verticalAlign: t24,
434
+ style: t25,
435
+ children: [t26, t27, t28, t29, t35, t36, t40, t41, t42, t43]
436
+ });
437
+ $[120] = T1;
438
+ $[121] = t22;
439
+ $[122] = t23;
440
+ $[123] = t24;
441
+ $[124] = t25;
442
+ $[125] = t26;
443
+ $[126] = t27;
444
+ $[127] = t28;
445
+ $[128] = t29;
446
+ $[129] = t35;
447
+ $[130] = t36;
448
+ $[131] = t40;
449
+ $[132] = t41;
450
+ $[133] = t42;
451
+ $[134] = t43;
452
+ $[135] = t44;
453
+ } else {
454
+ t44 = $[135];
455
+ }
456
+ let t45;
457
+ if ($[136] !== T2 || $[137] !== t30 || $[138] !== t31 || $[139] !== t32 || $[140] !== t44) {
458
+ t45 = /*#__PURE__*/jsx(T2, {
459
+ width: t30,
460
+ height: t31,
461
+ className: t32,
462
+ children: t44
463
+ });
464
+ $[136] = T2;
465
+ $[137] = t30;
466
+ $[138] = t31;
467
+ $[139] = t32;
468
+ $[140] = t44;
469
+ $[141] = t45;
470
+ } else {
471
+ t45 = $[141];
472
+ }
473
+ let t46;
474
+ if ($[142] !== background || $[143] !== backgroundPlaying || $[144] !== customMediaRef || $[145] !== height || $[146] !== isPlaceholder || $[147] !== isPreview || $[148] !== mediaRef || $[149] !== mediaShouldLoad || $[150] !== muted || $[151] !== resolution || $[152] !== width) {
475
+ t46 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
141
476
  background: background,
142
477
  width: width,
143
478
  height: height,
@@ -148,8 +483,38 @@ function QuoteScreen(_ref) {
148
483
  mediaRef: mergeRefs(mediaRef, customMediaRef),
149
484
  withoutVideo: isPreview,
150
485
  className: styles.background
151
- }) : null]
152
- });
486
+ }) : null;
487
+ $[142] = background;
488
+ $[143] = backgroundPlaying;
489
+ $[144] = customMediaRef;
490
+ $[145] = height;
491
+ $[146] = isPlaceholder;
492
+ $[147] = isPreview;
493
+ $[148] = mediaRef;
494
+ $[149] = mediaShouldLoad;
495
+ $[150] = muted;
496
+ $[151] = resolution;
497
+ $[152] = width;
498
+ $[153] = t46;
499
+ } else {
500
+ t46 = $[153];
501
+ }
502
+ let t47;
503
+ if ($[154] !== t33 || $[155] !== t34 || $[156] !== t45 || $[157] !== t46) {
504
+ t47 = /*#__PURE__*/jsxs("div", {
505
+ className: t33,
506
+ "data-screen-ready": t34,
507
+ children: [t45, t46]
508
+ });
509
+ $[154] = t33;
510
+ $[155] = t34;
511
+ $[156] = t45;
512
+ $[157] = t46;
513
+ $[158] = t47;
514
+ } else {
515
+ t47 = $[158];
516
+ }
517
+ return t47;
153
518
  }
154
519
 
155
520
  // import * as transforms from './transforms/index';
@@ -160,19 +525,13 @@ var definition = {
160
525
  group: {
161
526
  label: defineMessage({
162
527
  id: "fIawTr",
163
- defaultMessage: [{
164
- "type": 0,
165
- "value": "Text"
166
- }]
528
+ defaultMessage: "Text"
167
529
  }),
168
530
  order: 2
169
531
  },
170
532
  title: defineMessage({
171
533
  id: "3q9GPv",
172
- defaultMessage: [{
173
- "type": 0,
174
- "value": "Quote"
175
- }]
534
+ defaultMessage: "Quote"
176
535
  }),
177
536
  component: QuoteScreen,
178
537
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -183,10 +542,7 @@ var definition = {
183
542
  defaultValue: 'top',
184
543
  label: defineMessage({
185
544
  id: "4iBXj2",
186
- defaultMessage: [{
187
- "type": 0,
188
- "value": "Layout"
189
- }]
545
+ defaultMessage: "Layout"
190
546
  })
191
547
  }, {
192
548
  name: 'quote',
@@ -197,10 +553,7 @@ var definition = {
197
553
  },
198
554
  label: defineMessage({
199
555
  id: "88/Ge8",
200
- defaultMessage: [{
201
- "type": 0,
202
- "value": "Quote"
203
- }]
556
+ defaultMessage: "Quote"
204
557
  })
205
558
  }, {
206
559
  name: 'author',
@@ -210,30 +563,21 @@ var definition = {
210
563
  },
211
564
  label: defineMessage({
212
565
  id: "73hxYw",
213
- defaultMessage: [{
214
- "type": 0,
215
- "value": "Author"
216
- }]
566
+ defaultMessage: "Author"
217
567
  })
218
568
  }, {
219
569
  name: 'background',
220
570
  type: 'background',
221
571
  label: defineMessage({
222
572
  id: "+MPZRu",
223
- defaultMessage: [{
224
- "type": 0,
225
- "value": "Background"
226
- }]
573
+ defaultMessage: "Background"
227
574
  })
228
575
  }, {
229
576
  name: 'header',
230
577
  type: 'header',
231
578
  label: defineMessage({
232
579
  id: "rhuDxI",
233
- defaultMessage: [{
234
- "type": 0,
235
- "value": "Header"
236
- }]
580
+ defaultMessage: "Header"
237
581
  }),
238
582
  theme: {
239
583
  badge: {
@@ -248,10 +592,7 @@ var definition = {
248
592
  type: 'footer',
249
593
  label: defineMessage({
250
594
  id: "g4nybp",
251
- defaultMessage: [{
252
- "type": 0,
253
- "value": "Footer"
254
- }]
595
+ defaultMessage: "Footer"
255
596
  }),
256
597
  theme: {
257
598
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-quote",
3
- "version": "0.4.71",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -36,6 +36,7 @@
36
36
  "exports": {
37
37
  ".": {
38
38
  "types": "./es/index.d.ts",
39
+ "style": "./assets/css/styles.css",
39
40
  "import": "./es/index.js"
40
41
  },
41
42
  "./assets/css/styles": "./assets/css/styles.css",
@@ -52,24 +53,24 @@
52
53
  "build": "../../scripts/prepare-package.sh --types"
53
54
  },
54
55
  "devDependencies": {
55
- "react": "^18.3.0 || ^19.0.0",
56
- "react-dom": "^18.3.0 || ^19.0.0"
56
+ "react": "^19.0.0",
57
+ "react-dom": "^19.0.0"
57
58
  },
58
59
  "peerDependencies": {
59
- "react": "^18.3.0 || ^19.0.0",
60
- "react-dom": "^18.3.0 || ^19.0.0"
60
+ "react": "^19.0.0",
61
+ "react-dom": "^19.0.0"
61
62
  },
62
63
  "dependencies": {
63
64
  "@babel/runtime": "^7.28.6",
64
- "@micromag/core": "^0.4.71",
65
- "@micromag/element-background": "^0.4.71",
66
- "@micromag/element-container": "^0.4.71",
67
- "@micromag/element-footer": "^0.4.71",
68
- "@micromag/element-header": "^0.4.71",
69
- "@micromag/element-layout": "^0.4.71",
70
- "@micromag/element-quote": "^0.4.71",
71
- "@micromag/element-text": "^0.4.71",
72
- "@micromag/transforms": "^0.4.71",
65
+ "@micromag/core": "^0.4.74",
66
+ "@micromag/element-background": "^0.4.74",
67
+ "@micromag/element-container": "^0.4.74",
68
+ "@micromag/element-footer": "^0.4.74",
69
+ "@micromag/element-header": "^0.4.74",
70
+ "@micromag/element-layout": "^0.4.74",
71
+ "@micromag/element-quote": "^0.4.74",
72
+ "@micromag/element-text": "^0.4.74",
73
+ "@micromag/transforms": "^0.4.74",
73
74
  "classnames": "^2.2.6",
74
75
  "lodash": "^4.17.23",
75
76
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -79,6 +80,6 @@
79
80
  "access": "public",
80
81
  "registry": "https://registry.npmjs.org/"
81
82
  },
82
- "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
83
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
83
84
  "types": "es/index.d.ts"
84
85
  }