@micromag/screen-text 0.4.70 → 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 +4 -2
  2. package/es/index.js +510 -196
  3. package/package.json +16 -15
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { TextElement, HeadingElement, Header, Footer, BackgroundElement } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { TextElement, HeadingElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface TextScreenProps {
5
6
  layout?: 'top' | 'middle' | 'bottom' | 'split';
@@ -12,9 +13,10 @@ interface TextScreenProps {
12
13
  background?: BackgroundElement | null;
13
14
  current?: boolean;
14
15
  preload?: boolean;
16
+ mediaRef?: ForwardedRef<MediaElement> | null;
15
17
  className?: string | null;
16
18
  }
17
- declare function TextScreen({ layout, text, title, withTitle, spacing, header, footer, background, current, preload, className, }: TextScreenProps): react_jsx_runtime.JSX.Element;
19
+ declare function TextScreen({ layout, text, title, withTitle, spacing, header, footer, background, current, preload, mediaRef: customMediaRef, className, }: TextScreenProps): react_jsx_runtime.JSX.Element;
18
20
 
19
21
  declare function TextTitleScreen({ ...props }: {
20
22
  [x: string]: any;
package/es/index.js CHANGED
@@ -1,10 +1,9 @@
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';
7
- import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
6
+ import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
8
7
  import Background from '@micromag/element-background';
9
8
  import Container from '@micromag/element-container';
10
9
  import Footer from '@micromag/element-footer';
@@ -12,135 +11,446 @@ import Header from '@micromag/element-header';
12
11
  import Heading from '@micromag/element-heading';
13
12
  import Layout, { Spacer } from '@micromag/element-layout';
14
13
  import Text from '@micromag/element-text';
15
- import { jsxs, jsx } from 'react/jsx-runtime';
16
- import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
17
- import _extends from '@babel/runtime/helpers/extends';
14
+ import { jsx, jsxs } from 'react/jsx-runtime';
18
15
 
19
16
  var styles = {"container":"micromag-screen-text-container","background":"micromag-screen-text-background","content":"micromag-screen-text-content","emptyTitle":"micromag-screen-text-emptyTitle","emptyText":"micromag-screen-text-emptyText","title":"micromag-screen-text-title","withMargin":"micromag-screen-text-withMargin","isPlaceholder":"micromag-screen-text-isPlaceholder","layout":"micromag-screen-text-layout"};
20
17
 
21
- function TextScreen(_ref) {
22
- var _ref$layout = _ref.layout,
23
- layout = _ref$layout === void 0 ? 'top' : _ref$layout,
24
- _ref$text = _ref.text,
25
- text = _ref$text === void 0 ? null : _ref$text,
26
- _ref$title = _ref.title,
27
- title = _ref$title === void 0 ? null : _ref$title,
28
- _ref$withTitle = _ref.withTitle,
29
- withTitle = _ref$withTitle === void 0 ? false : _ref$withTitle,
30
- _ref$spacing = _ref.spacing,
31
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
32
- _ref$header = _ref.header,
33
- header = _ref$header === void 0 ? null : _ref$header,
34
- _ref$footer = _ref.footer,
35
- footer = _ref$footer === void 0 ? null : _ref$footer,
36
- _ref$background = _ref.background,
37
- background = _ref$background === void 0 ? null : _ref$background,
38
- _ref$current = _ref.current,
39
- current = _ref$current === void 0 ? true : _ref$current,
40
- _ref$preload = _ref.preload,
41
- preload = _ref$preload === void 0 ? true : _ref$preload,
42
- _ref$className = _ref.className,
43
- className = _ref$className === void 0 ? null : _ref$className;
44
- var _useScreenSize = useScreenSize(),
45
- width = _useScreenSize.width,
46
- height = _useScreenSize.height,
47
- resolution = _useScreenSize.resolution;
48
- var _useScreenRenderConte = useScreenRenderContext(),
49
- isView = _useScreenRenderConte.isView,
50
- isPreview = _useScreenRenderConte.isPreview,
51
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
52
- isEdit = _useScreenRenderConte.isEdit;
53
- var _useViewerContext = useViewerContext(),
54
- viewerTopHeight = _useViewerContext.topHeight,
55
- viewerBottomHeight = _useViewerContext.bottomHeight,
56
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
57
- var _useViewerWebView = useViewerWebView(),
58
- openWebView = _useViewerWebView.open;
59
- var _usePlaybackContext = usePlaybackContext(),
60
- muted = _usePlaybackContext.muted;
61
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
62
- mediaRef = _usePlaybackMediaRef.ref,
63
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
64
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
65
- var hasTitle = isTextFilled(title);
66
- var hasText = isTextFilled(text);
67
- var isSplitted = layout === 'split';
68
- var isTopLayout = layout === 'top';
69
- var isMiddleLayout = layout === 'middle';
70
- var isBottomLayout = layout === 'bottom';
71
- var verticalAlign = isSplitted ? null : layout;
72
- var titleWithMargin = hasTitle && hasText && !isSplitted;
73
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
74
- var mediaShouldLoad = current || preload;
75
- var hasHeader = isHeaderFilled(header);
76
- var hasFooter = isFooterFilled(footer);
77
- var footerProps = getFooterProps(footer, {
78
- isView: isView,
79
- current: current,
80
- openWebView: openWebView,
81
- isPreview: isPreview
82
- });
83
- return /*#__PURE__*/jsxs("div", {
84
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
85
- "data-screen-ready": true,
86
- children: [/*#__PURE__*/jsx(Container, {
87
- width: width,
88
- height: height,
89
- className: styles.content,
90
- children: /*#__PURE__*/jsxs(Layout, {
91
- className: styles.layout,
92
- fullscreen: true,
93
- verticalAlign: verticalAlign,
94
- style: !isPlaceholder ? {
95
- paddingLeft: spacing,
96
- paddingRight: spacing,
97
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
98
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
99
- } : null,
100
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
101
- style: {
102
- paddingBottom: spacing
103
- },
104
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
105
- }) : 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, withTitle ? /*#__PURE__*/jsx(ScreenElement, {
106
- placeholder: "title",
107
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
108
- id: "2ZOPe+",
109
- defaultMessage: [{
110
- "type": 0,
111
- "value": "Title"
112
- }]
113
- }),
114
- emptyClassName: styles.emptyTitle,
115
- isEmpty: !hasTitle,
116
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
117
- className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
118
- }, title)) : null
119
- }, "title") : null, isSplitted && withTitle ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
120
- placeholder: "text",
121
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
122
- id: "z4CiV1",
123
- defaultMessage: [{
124
- "type": 0,
125
- "value": "Text"
126
- }]
127
- }),
128
- emptyClassName: styles.emptyText,
129
- isEmpty: !hasText,
130
- children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
131
- className: styles.text
132
- }, text)) : null
133
- }, "description"), !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", {
134
- className: styles.footer,
135
- style: {
136
- paddingTop: spacing,
137
- paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
138
- paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
139
- },
140
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
141
- }) : null]
18
+ function TextScreen(t0) {
19
+ const $ = c(150);
20
+ const {
21
+ layout: t1,
22
+ text: t2,
23
+ title: t3,
24
+ withTitle: t4,
25
+ spacing: t5,
26
+ header: t6,
27
+ footer: t7,
28
+ background: t8,
29
+ current: t9,
30
+ preload: t10,
31
+ mediaRef: t11,
32
+ className: t12
33
+ } = t0;
34
+ const layout = t1 === undefined ? "top" : t1;
35
+ const text = t2 === undefined ? null : t2;
36
+ const title = t3 === undefined ? null : t3;
37
+ const withTitle = t4 === undefined ? false : t4;
38
+ const spacing = t5 === undefined ? 20 : t5;
39
+ const header = t6 === undefined ? null : t6;
40
+ const footer = t7 === undefined ? null : t7;
41
+ const background = t8 === undefined ? null : t8;
42
+ const current = t9 === undefined ? true : t9;
43
+ const preload = t10 === undefined ? true : t10;
44
+ const customMediaRef = t11 === undefined ? null : t11;
45
+ const className = t12 === undefined ? null : t12;
46
+ const {
47
+ width,
48
+ height,
49
+ resolution
50
+ } = useScreenSize();
51
+ const {
52
+ isView,
53
+ isPreview,
54
+ isPlaceholder,
55
+ isEdit
56
+ } = useScreenRenderContext();
57
+ const {
58
+ topHeight: viewerTopHeight,
59
+ bottomHeight: viewerBottomHeight,
60
+ bottomSidesWidth: viewerBottomSidesWidth
61
+ } = useViewerContext();
62
+ const {
63
+ open: openWebView
64
+ } = useViewerWebView();
65
+ const {
66
+ muted
67
+ } = usePlaybackContext();
68
+ const {
69
+ ref: mediaRef,
70
+ isCurrent: t13
71
+ } = usePlaybackMediaRef(current, true);
72
+ const isCurrentMedia = t13 === undefined ? false : t13;
73
+ let T0;
74
+ let T1;
75
+ let backgroundPlaying;
76
+ let footerProps;
77
+ let hasFooter;
78
+ let hasHeader;
79
+ let hasText;
80
+ let isMiddleLayout;
81
+ let isSplitted;
82
+ let isTopLayout;
83
+ let mediaShouldLoad;
84
+ let t14;
85
+ let t15;
86
+ let t16;
87
+ let t17;
88
+ let t18;
89
+ let t19;
90
+ let t20;
91
+ let t21;
92
+ let t22;
93
+ let t23;
94
+ let t24;
95
+ let t25;
96
+ let t26;
97
+ let t27;
98
+ if ($[0] !== className || $[1] !== current || $[2] !== footer || $[3] !== header || $[4] !== height || $[5] !== isCurrentMedia || $[6] !== isEdit || $[7] !== isPlaceholder || $[8] !== isPreview || $[9] !== isView || $[10] !== layout || $[11] !== openWebView || $[12] !== preload || $[13] !== spacing || $[14] !== text || $[15] !== title || $[16] !== viewerBottomHeight || $[17] !== viewerTopHeight || $[18] !== width || $[19] !== withTitle) {
99
+ const hasTitle = isTextFilled(title);
100
+ hasText = isTextFilled(text);
101
+ isSplitted = layout === "split";
102
+ isTopLayout = layout === "top";
103
+ isMiddleLayout = layout === "middle";
104
+ const isBottomLayout = layout === "bottom";
105
+ const verticalAlign = isSplitted ? null : layout;
106
+ const titleWithMargin = hasTitle && hasText && !isSplitted;
107
+ backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
108
+ mediaShouldLoad = current || preload;
109
+ let t28;
110
+ if ($[45] !== header) {
111
+ t28 = isHeaderFilled(header);
112
+ $[45] = header;
113
+ $[46] = t28;
114
+ } else {
115
+ t28 = $[46];
116
+ }
117
+ hasHeader = t28;
118
+ let t29;
119
+ if ($[47] !== footer) {
120
+ t29 = isFooterFilled(footer);
121
+ $[47] = footer;
122
+ $[48] = t29;
123
+ } else {
124
+ t29 = $[48];
125
+ }
126
+ hasFooter = t29;
127
+ let t30;
128
+ if ($[49] !== current || $[50] !== footer || $[51] !== isPreview || $[52] !== isView || $[53] !== openWebView) {
129
+ t30 = getFooterProps(footer, {
130
+ isView,
131
+ current,
132
+ openWebView,
133
+ isPreview
134
+ });
135
+ $[49] = current;
136
+ $[50] = footer;
137
+ $[51] = isPreview;
138
+ $[52] = isView;
139
+ $[53] = openWebView;
140
+ $[54] = t30;
141
+ } else {
142
+ t30 = $[54];
143
+ }
144
+ footerProps = t30;
145
+ if ($[55] !== className || $[56] !== isPlaceholder) {
146
+ t26 = classNames([styles.container, className, {
147
+ [styles.isPlaceholder]: isPlaceholder
148
+ }]);
149
+ $[55] = className;
150
+ $[56] = isPlaceholder;
151
+ $[57] = t26;
152
+ } else {
153
+ t26 = $[57];
154
+ }
155
+ t27 = true;
156
+ T1 = Container;
157
+ t23 = width;
158
+ t24 = height;
159
+ t25 = styles.content;
160
+ T0 = Layout;
161
+ t14 = styles.layout;
162
+ t15 = true;
163
+ t16 = verticalAlign;
164
+ if ($[58] !== current || $[59] !== hasFooter || $[60] !== hasHeader || $[61] !== isPlaceholder || $[62] !== isPreview || $[63] !== spacing || $[64] !== viewerBottomHeight || $[65] !== viewerTopHeight) {
165
+ t17 = !isPlaceholder ? {
166
+ paddingLeft: spacing,
167
+ paddingRight: spacing,
168
+ paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
169
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
170
+ } : null;
171
+ $[58] = current;
172
+ $[59] = hasFooter;
173
+ $[60] = hasHeader;
174
+ $[61] = isPlaceholder;
175
+ $[62] = isPreview;
176
+ $[63] = spacing;
177
+ $[64] = viewerBottomHeight;
178
+ $[65] = viewerTopHeight;
179
+ $[66] = t17;
180
+ } else {
181
+ t17 = $[66];
182
+ }
183
+ if ($[67] !== hasHeader || $[68] !== header || $[69] !== isPlaceholder || $[70] !== spacing) {
184
+ t18 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
185
+ style: {
186
+ paddingBottom: spacing
187
+ },
188
+ children: /*#__PURE__*/jsx(Header, {
189
+ ...header
190
+ })
191
+ }) : null;
192
+ $[67] = hasHeader;
193
+ $[68] = header;
194
+ $[69] = isPlaceholder;
195
+ $[70] = spacing;
196
+ $[71] = t18;
197
+ } else {
198
+ t18 = $[71];
199
+ }
200
+ if ($[72] !== hasFooter || $[73] !== isMiddleLayout || $[74] !== isPlaceholder) {
201
+ t19 = !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
202
+ $[72] = hasFooter;
203
+ $[73] = isMiddleLayout;
204
+ $[74] = isPlaceholder;
205
+ $[75] = t19;
206
+ } else {
207
+ t19 = $[75];
208
+ }
209
+ if ($[76] !== hasHeader || $[77] !== isBottomLayout || $[78] !== isPlaceholder) {
210
+ t20 = !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
211
+ $[76] = hasHeader;
212
+ $[77] = isBottomLayout;
213
+ $[78] = isPlaceholder;
214
+ $[79] = t20;
215
+ } else {
216
+ t20 = $[79];
217
+ }
218
+ if ($[80] !== hasFooter || $[81] !== hasHeader || $[82] !== isMiddleLayout || $[83] !== isPlaceholder) {
219
+ t21 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null;
220
+ $[80] = hasFooter;
221
+ $[81] = hasHeader;
222
+ $[82] = isMiddleLayout;
223
+ $[83] = isPlaceholder;
224
+ $[84] = t21;
225
+ } else {
226
+ t21 = $[84];
227
+ }
228
+ t22 = withTitle ? /*#__PURE__*/jsx(ScreenElement, {
229
+ placeholder: "title",
230
+ emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
231
+ id: "2ZOPe+",
232
+ defaultMessage: "Title"
233
+ }),
234
+ emptyClassName: styles.emptyTitle,
235
+ isEmpty: !hasTitle,
236
+ children: hasTitle ? /*#__PURE__*/jsx(Heading, {
237
+ className: classNames([styles.title, {
238
+ [styles.withMargin]: titleWithMargin
239
+ }]),
240
+ ...title
241
+ }) : null
242
+ }, "title") : null;
243
+ $[0] = className;
244
+ $[1] = current;
245
+ $[2] = footer;
246
+ $[3] = header;
247
+ $[4] = height;
248
+ $[5] = isCurrentMedia;
249
+ $[6] = isEdit;
250
+ $[7] = isPlaceholder;
251
+ $[8] = isPreview;
252
+ $[9] = isView;
253
+ $[10] = layout;
254
+ $[11] = openWebView;
255
+ $[12] = preload;
256
+ $[13] = spacing;
257
+ $[14] = text;
258
+ $[15] = title;
259
+ $[16] = viewerBottomHeight;
260
+ $[17] = viewerTopHeight;
261
+ $[18] = width;
262
+ $[19] = withTitle;
263
+ $[20] = T0;
264
+ $[21] = T1;
265
+ $[22] = backgroundPlaying;
266
+ $[23] = footerProps;
267
+ $[24] = hasFooter;
268
+ $[25] = hasHeader;
269
+ $[26] = hasText;
270
+ $[27] = isMiddleLayout;
271
+ $[28] = isSplitted;
272
+ $[29] = isTopLayout;
273
+ $[30] = mediaShouldLoad;
274
+ $[31] = t14;
275
+ $[32] = t15;
276
+ $[33] = t16;
277
+ $[34] = t17;
278
+ $[35] = t18;
279
+ $[36] = t19;
280
+ $[37] = t20;
281
+ $[38] = t21;
282
+ $[39] = t22;
283
+ $[40] = t23;
284
+ $[41] = t24;
285
+ $[42] = t25;
286
+ $[43] = t26;
287
+ $[44] = t27;
288
+ } else {
289
+ T0 = $[20];
290
+ T1 = $[21];
291
+ backgroundPlaying = $[22];
292
+ footerProps = $[23];
293
+ hasFooter = $[24];
294
+ hasHeader = $[25];
295
+ hasText = $[26];
296
+ isMiddleLayout = $[27];
297
+ isSplitted = $[28];
298
+ isTopLayout = $[29];
299
+ mediaShouldLoad = $[30];
300
+ t14 = $[31];
301
+ t15 = $[32];
302
+ t16 = $[33];
303
+ t17 = $[34];
304
+ t18 = $[35];
305
+ t19 = $[36];
306
+ t20 = $[37];
307
+ t21 = $[38];
308
+ t22 = $[39];
309
+ t23 = $[40];
310
+ t24 = $[41];
311
+ t25 = $[42];
312
+ t26 = $[43];
313
+ t27 = $[44];
314
+ }
315
+ let t28;
316
+ if ($[85] !== isSplitted || $[86] !== withTitle) {
317
+ t28 = isSplitted && withTitle ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null;
318
+ $[85] = isSplitted;
319
+ $[86] = withTitle;
320
+ $[87] = t28;
321
+ } else {
322
+ t28 = $[87];
323
+ }
324
+ let t29;
325
+ if ($[88] === Symbol.for("react.memo_cache_sentinel")) {
326
+ t29 = /*#__PURE__*/jsx(FormattedMessage, {
327
+ id: "z4CiV1",
328
+ defaultMessage: "Text"
329
+ });
330
+ $[88] = t29;
331
+ } else {
332
+ t29 = $[88];
333
+ }
334
+ const t30 = !hasText;
335
+ let t31;
336
+ if ($[89] !== hasText || $[90] !== text) {
337
+ t31 = hasText ? /*#__PURE__*/jsx(Text, {
338
+ className: styles.text,
339
+ ...text
340
+ }) : null;
341
+ $[89] = hasText;
342
+ $[90] = text;
343
+ $[91] = t31;
344
+ } else {
345
+ t31 = $[91];
346
+ }
347
+ let t32;
348
+ if ($[92] !== t30 || $[93] !== t31) {
349
+ t32 = /*#__PURE__*/jsx(ScreenElement, {
350
+ placeholder: "text",
351
+ emptyLabel: t29,
352
+ emptyClassName: styles.emptyText,
353
+ isEmpty: t30,
354
+ children: t31
355
+ }, "description");
356
+ $[92] = t30;
357
+ $[93] = t31;
358
+ $[94] = t32;
359
+ } else {
360
+ t32 = $[94];
361
+ }
362
+ let t33;
363
+ if ($[95] !== hasFooter || $[96] !== isMiddleLayout || $[97] !== isPlaceholder || $[98] !== isTopLayout) {
364
+ t33 = !isPlaceholder && hasFooter && (isTopLayout || isMiddleLayout) ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
365
+ $[95] = hasFooter;
366
+ $[96] = isMiddleLayout;
367
+ $[97] = isPlaceholder;
368
+ $[98] = isTopLayout;
369
+ $[99] = t33;
370
+ } else {
371
+ t33 = $[99];
372
+ }
373
+ let t34;
374
+ if ($[100] !== hasFooter || $[101] !== hasHeader || $[102] !== isMiddleLayout || $[103] !== isPlaceholder) {
375
+ t34 = !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-bottom") : null;
376
+ $[100] = hasFooter;
377
+ $[101] = hasHeader;
378
+ $[102] = isMiddleLayout;
379
+ $[103] = isPlaceholder;
380
+ $[104] = t34;
381
+ } else {
382
+ t34 = $[104];
383
+ }
384
+ let t35;
385
+ if ($[105] !== footerProps || $[106] !== hasFooter || $[107] !== isPlaceholder || $[108] !== spacing || $[109] !== viewerBottomSidesWidth) {
386
+ t35 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
387
+ className: styles.footer,
388
+ style: {
389
+ paddingTop: spacing,
390
+ paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
391
+ paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
392
+ },
393
+ children: /*#__PURE__*/jsx(Footer, {
394
+ ...footerProps
142
395
  })
143
- }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
396
+ }) : null;
397
+ $[105] = footerProps;
398
+ $[106] = hasFooter;
399
+ $[107] = isPlaceholder;
400
+ $[108] = spacing;
401
+ $[109] = viewerBottomSidesWidth;
402
+ $[110] = t35;
403
+ } else {
404
+ t35 = $[110];
405
+ }
406
+ let t36;
407
+ if ($[111] !== T0 || $[112] !== t14 || $[113] !== t15 || $[114] !== t16 || $[115] !== t17 || $[116] !== t18 || $[117] !== t19 || $[118] !== t20 || $[119] !== t21 || $[120] !== t22 || $[121] !== t28 || $[122] !== t32 || $[123] !== t33 || $[124] !== t34 || $[125] !== t35) {
408
+ t36 = /*#__PURE__*/jsxs(T0, {
409
+ className: t14,
410
+ fullscreen: t15,
411
+ verticalAlign: t16,
412
+ style: t17,
413
+ children: [t18, t19, t20, t21, t22, t28, t32, t33, t34, t35]
414
+ });
415
+ $[111] = T0;
416
+ $[112] = t14;
417
+ $[113] = t15;
418
+ $[114] = t16;
419
+ $[115] = t17;
420
+ $[116] = t18;
421
+ $[117] = t19;
422
+ $[118] = t20;
423
+ $[119] = t21;
424
+ $[120] = t22;
425
+ $[121] = t28;
426
+ $[122] = t32;
427
+ $[123] = t33;
428
+ $[124] = t34;
429
+ $[125] = t35;
430
+ $[126] = t36;
431
+ } else {
432
+ t36 = $[126];
433
+ }
434
+ let t37;
435
+ if ($[127] !== T1 || $[128] !== t23 || $[129] !== t24 || $[130] !== t25 || $[131] !== t36) {
436
+ t37 = /*#__PURE__*/jsx(T1, {
437
+ width: t23,
438
+ height: t24,
439
+ className: t25,
440
+ children: t36
441
+ });
442
+ $[127] = T1;
443
+ $[128] = t23;
444
+ $[129] = t24;
445
+ $[130] = t25;
446
+ $[131] = t36;
447
+ $[132] = t37;
448
+ } else {
449
+ t37 = $[132];
450
+ }
451
+ let t38;
452
+ if ($[133] !== background || $[134] !== backgroundPlaying || $[135] !== customMediaRef || $[136] !== height || $[137] !== isPlaceholder || $[138] !== isPreview || $[139] !== mediaRef || $[140] !== mediaShouldLoad || $[141] !== muted || $[142] !== resolution || $[143] !== width) {
453
+ t38 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
144
454
  background: background,
145
455
  width: width,
146
456
  height: height,
@@ -148,18 +458,67 @@ function TextScreen(_ref) {
148
458
  playing: backgroundPlaying,
149
459
  muted: muted,
150
460
  shouldLoad: mediaShouldLoad,
151
- mediaRef: mediaRef,
461
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
152
462
  withoutVideo: isPreview,
153
463
  className: styles.background
154
- }) : null]
155
- });
464
+ }) : null;
465
+ $[133] = background;
466
+ $[134] = backgroundPlaying;
467
+ $[135] = customMediaRef;
468
+ $[136] = height;
469
+ $[137] = isPlaceholder;
470
+ $[138] = isPreview;
471
+ $[139] = mediaRef;
472
+ $[140] = mediaShouldLoad;
473
+ $[141] = muted;
474
+ $[142] = resolution;
475
+ $[143] = width;
476
+ $[144] = t38;
477
+ } else {
478
+ t38 = $[144];
479
+ }
480
+ let t39;
481
+ if ($[145] !== t26 || $[146] !== t27 || $[147] !== t37 || $[148] !== t38) {
482
+ t39 = /*#__PURE__*/jsxs("div", {
483
+ className: t26,
484
+ "data-screen-ready": t27,
485
+ children: [t37, t38]
486
+ });
487
+ $[145] = t26;
488
+ $[146] = t27;
489
+ $[147] = t37;
490
+ $[148] = t38;
491
+ $[149] = t39;
492
+ } else {
493
+ t39 = $[149];
494
+ }
495
+ return t39;
156
496
  }
157
497
 
158
- function TextTitleScreen(_ref) {
159
- var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
160
- return /*#__PURE__*/jsx(TextScreen, _objectSpread(_objectSpread({}, props), {}, {
161
- withTitle: true
162
- }));
498
+ function TextTitleScreen(t0) {
499
+ const $ = c(4);
500
+ let props;
501
+ if ($[0] !== t0) {
502
+ ({
503
+ ...props
504
+ } = t0);
505
+ $[0] = t0;
506
+ $[1] = props;
507
+ } else {
508
+ props = $[1];
509
+ }
510
+ let t1;
511
+ if ($[2] !== props) {
512
+ t1 = /*#__PURE__*/jsx(TextScreen, {
513
+ ...props,
514
+ withTitle: true
515
+ });
516
+ $[2] = props;
517
+ $[3] = t1;
518
+ } else {
519
+ t1 = $[3];
520
+ }
521
+ return t1;
163
522
  }
164
523
 
165
524
  // import * as transforms from './transforms/index';
@@ -170,19 +529,13 @@ var definition = [{
170
529
  group: {
171
530
  label: defineMessage({
172
531
  id: "fIawTr",
173
- defaultMessage: [{
174
- "type": 0,
175
- "value": "Text"
176
- }]
532
+ defaultMessage: "Text"
177
533
  }),
178
534
  order: 2
179
535
  },
180
536
  title: defineMessage({
181
537
  id: "S9YpbV",
182
- defaultMessage: [{
183
- "type": 0,
184
- "value": "Text"
185
- }]
538
+ defaultMessage: "Text"
186
539
  }),
187
540
  component: TextScreen,
188
541
  layouts: ['top', 'middle', 'bottom'],
@@ -193,10 +546,7 @@ var definition = [{
193
546
  defaultValue: 'top',
194
547
  label: defineMessage({
195
548
  id: "4iBXj2",
196
- defaultMessage: [{
197
- "type": 0,
198
- "value": "Layout"
199
- }]
549
+ defaultMessage: "Layout"
200
550
  })
201
551
  }, {
202
552
  name: 'text',
@@ -206,30 +556,21 @@ var definition = [{
206
556
  },
207
557
  label: defineMessage({
208
558
  id: "4E2gbX",
209
- defaultMessage: [{
210
- "type": 0,
211
- "value": "Text"
212
- }]
559
+ defaultMessage: "Text"
213
560
  })
214
561
  }, {
215
562
  name: 'background',
216
563
  type: 'background',
217
564
  label: defineMessage({
218
565
  id: "+MPZRu",
219
- defaultMessage: [{
220
- "type": 0,
221
- "value": "Background"
222
- }]
566
+ defaultMessage: "Background"
223
567
  })
224
568
  }, {
225
569
  name: 'header',
226
570
  type: 'header',
227
571
  label: defineMessage({
228
572
  id: "rhuDxI",
229
- defaultMessage: [{
230
- "type": 0,
231
- "value": "Header"
232
- }]
573
+ defaultMessage: "Header"
233
574
  }),
234
575
  theme: {
235
576
  badge: {
@@ -244,10 +585,7 @@ var definition = [{
244
585
  type: 'footer',
245
586
  label: defineMessage({
246
587
  id: "g4nybp",
247
- defaultMessage: [{
248
- "type": 0,
249
- "value": "Footer"
250
- }]
588
+ defaultMessage: "Footer"
251
589
  }),
252
590
  theme: {
253
591
  callToAction: {
@@ -264,19 +602,13 @@ var definition = [{
264
602
  group: {
265
603
  label: defineMessage({
266
604
  id: "fIawTr",
267
- defaultMessage: [{
268
- "type": 0,
269
- "value": "Text"
270
- }]
605
+ defaultMessage: "Text"
271
606
  }),
272
607
  order: 2
273
608
  },
274
609
  title: defineMessage({
275
610
  id: "oCBQKV",
276
- defaultMessage: [{
277
- "type": 0,
278
- "value": "Text with title"
279
- }]
611
+ defaultMessage: "Text with title"
280
612
  }),
281
613
  component: TextTitleScreen,
282
614
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -287,10 +619,7 @@ var definition = [{
287
619
  defaultValue: 'top',
288
620
  label: defineMessage({
289
621
  id: "4iBXj2",
290
- defaultMessage: [{
291
- "type": 0,
292
- "value": "Layout"
293
- }]
622
+ defaultMessage: "Layout"
294
623
  })
295
624
  }, {
296
625
  name: 'title',
@@ -301,10 +630,7 @@ var definition = [{
301
630
  },
302
631
  label: defineMessage({
303
632
  id: "N25iDO",
304
- defaultMessage: [{
305
- "type": 0,
306
- "value": "Title"
307
- }]
633
+ defaultMessage: "Title"
308
634
  })
309
635
  }, {
310
636
  name: 'text',
@@ -314,30 +640,21 @@ var definition = [{
314
640
  },
315
641
  label: defineMessage({
316
642
  id: "4E2gbX",
317
- defaultMessage: [{
318
- "type": 0,
319
- "value": "Text"
320
- }]
643
+ defaultMessage: "Text"
321
644
  })
322
645
  }, {
323
646
  name: 'background',
324
647
  type: 'background',
325
648
  label: defineMessage({
326
649
  id: "+MPZRu",
327
- defaultMessage: [{
328
- "type": 0,
329
- "value": "Background"
330
- }]
650
+ defaultMessage: "Background"
331
651
  })
332
652
  }, {
333
653
  name: 'header',
334
654
  type: 'header',
335
655
  label: defineMessage({
336
656
  id: "rhuDxI",
337
- defaultMessage: [{
338
- "type": 0,
339
- "value": "Header"
340
- }]
657
+ defaultMessage: "Header"
341
658
  }),
342
659
  theme: {
343
660
  badge: {
@@ -352,10 +669,7 @@ var definition = [{
352
669
  type: 'footer',
353
670
  label: defineMessage({
354
671
  id: "g4nybp",
355
- defaultMessage: [{
356
- "type": 0,
357
- "value": "Footer"
358
- }]
672
+ defaultMessage: "Footer"
359
673
  }),
360
674
  theme: {
361
675
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-text",
3
- "version": "0.4.70",
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.69",
65
- "@micromag/element-background": "^0.4.70",
66
- "@micromag/element-container": "^0.4.69",
67
- "@micromag/element-footer": "^0.4.70",
68
- "@micromag/element-header": "^0.4.69",
69
- "@micromag/element-heading": "^0.4.69",
70
- "@micromag/element-layout": "^0.4.69",
71
- "@micromag/element-text": "^0.4.69",
72
- "@micromag/transforms": "^0.4.69",
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-heading": "^0.4.74",
71
+ "@micromag/element-layout": "^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": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
83
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
83
84
  "types": "es/index.d.ts"
84
85
  }