@micromag/screen-text 0.4.71 → 0.4.76

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 +508 -196
  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, HeadingElement, Header, Footer, BackgroundElement } from '@micromag/core';
3
+ import { TextElement, HeadingElement, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
4
4
 
5
5
  interface TextScreenProps {
6
6
  layout?: 'top' | 'middle' | 'bottom' | 'split';
@@ -13,7 +13,7 @@ interface TextScreenProps {
13
13
  background?: BackgroundElement | null;
14
14
  current?: boolean;
15
15
  preload?: boolean;
16
- mediaRef?: ForwardedRef<HTMLMediaElement> | null;
16
+ mediaRef?: ForwardedRef<MediaElement> | null;
17
17
  className?: string | null;
18
18
  }
19
19
  declare function TextScreen({ layout, text, title, withTitle, spacing, header, footer, background, current, preload, mediaRef: customMediaRef, className, }: TextScreenProps): 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,137 +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$mediaRef = _ref.mediaRef,
43
- customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
44
- _ref$className = _ref.className,
45
- className = _ref$className === void 0 ? null : _ref$className;
46
- var _useScreenSize = useScreenSize(),
47
- width = _useScreenSize.width,
48
- height = _useScreenSize.height,
49
- resolution = _useScreenSize.resolution;
50
- var _useScreenRenderConte = useScreenRenderContext(),
51
- isView = _useScreenRenderConte.isView,
52
- isPreview = _useScreenRenderConte.isPreview,
53
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
54
- isEdit = _useScreenRenderConte.isEdit;
55
- var _useViewerContext = useViewerContext(),
56
- viewerTopHeight = _useViewerContext.topHeight,
57
- viewerBottomHeight = _useViewerContext.bottomHeight,
58
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
59
- var _useViewerWebView = useViewerWebView(),
60
- openWebView = _useViewerWebView.open;
61
- var _usePlaybackContext = usePlaybackContext(),
62
- muted = _usePlaybackContext.muted;
63
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
64
- mediaRef = _usePlaybackMediaRef.ref,
65
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
66
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
67
- var hasTitle = isTextFilled(title);
68
- var hasText = isTextFilled(text);
69
- var isSplitted = layout === 'split';
70
- var isTopLayout = layout === 'top';
71
- var isMiddleLayout = layout === 'middle';
72
- var isBottomLayout = layout === 'bottom';
73
- var verticalAlign = isSplitted ? null : layout;
74
- var titleWithMargin = hasTitle && hasText && !isSplitted;
75
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
76
- var mediaShouldLoad = current || preload;
77
- var hasHeader = isHeaderFilled(header);
78
- var hasFooter = isFooterFilled(footer);
79
- var footerProps = getFooterProps(footer, {
80
- isView: isView,
81
- current: current,
82
- openWebView: openWebView,
83
- isPreview: isPreview
84
- });
85
- return /*#__PURE__*/jsxs("div", {
86
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
87
- "data-screen-ready": true,
88
- children: [/*#__PURE__*/jsx(Container, {
89
- width: width,
90
- height: height,
91
- className: styles.content,
92
- children: /*#__PURE__*/jsxs(Layout, {
93
- className: styles.layout,
94
- fullscreen: true,
95
- verticalAlign: verticalAlign,
96
- style: !isPlaceholder ? {
97
- paddingLeft: spacing,
98
- paddingRight: spacing,
99
- paddingTop: (!isPreview ? viewerTopHeight : 0) + (hasHeader ? spacing / 2 : spacing),
100
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (hasFooter ? spacing / 2 : spacing)
101
- } : null,
102
- children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
103
- style: {
104
- paddingBottom: spacing
105
- },
106
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
107
- }) : 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, {
108
- placeholder: "title",
109
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
110
- id: "2ZOPe+",
111
- defaultMessage: [{
112
- "type": 0,
113
- "value": "Title"
114
- }]
115
- }),
116
- emptyClassName: styles.emptyTitle,
117
- isEmpty: !hasTitle,
118
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
119
- className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
120
- }, title)) : null
121
- }, "title") : null, isSplitted && withTitle ? /*#__PURE__*/jsx(Spacer, {}, "spacer") : null, /*#__PURE__*/jsx(ScreenElement, {
122
- placeholder: "text",
123
- emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
124
- id: "z4CiV1",
125
- defaultMessage: [{
126
- "type": 0,
127
- "value": "Text"
128
- }]
129
- }),
130
- emptyClassName: styles.emptyText,
131
- isEmpty: !hasText,
132
- children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
133
- className: styles.text
134
- }, text)) : null
135
- }, "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", {
136
- className: styles.footer,
137
- style: {
138
- paddingTop: spacing,
139
- paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
140
- paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
141
- },
142
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
143
- }) : 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
144
395
  })
145
- }), !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, {
146
454
  background: background,
147
455
  width: width,
148
456
  height: height,
@@ -153,15 +461,64 @@ function TextScreen(_ref) {
153
461
  mediaRef: mergeRefs(mediaRef, customMediaRef),
154
462
  withoutVideo: isPreview,
155
463
  className: styles.background
156
- }) : null]
157
- });
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;
158
496
  }
159
497
 
160
- function TextTitleScreen(_ref) {
161
- var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
162
- return /*#__PURE__*/jsx(TextScreen, _objectSpread(_objectSpread({}, props), {}, {
163
- withTitle: true
164
- }));
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;
165
522
  }
166
523
 
167
524
  // import * as transforms from './transforms/index';
@@ -172,19 +529,13 @@ var definition = [{
172
529
  group: {
173
530
  label: defineMessage({
174
531
  id: "fIawTr",
175
- defaultMessage: [{
176
- "type": 0,
177
- "value": "Text"
178
- }]
532
+ defaultMessage: "Text"
179
533
  }),
180
534
  order: 2
181
535
  },
182
536
  title: defineMessage({
183
537
  id: "S9YpbV",
184
- defaultMessage: [{
185
- "type": 0,
186
- "value": "Text"
187
- }]
538
+ defaultMessage: "Text"
188
539
  }),
189
540
  component: TextScreen,
190
541
  layouts: ['top', 'middle', 'bottom'],
@@ -195,10 +546,7 @@ var definition = [{
195
546
  defaultValue: 'top',
196
547
  label: defineMessage({
197
548
  id: "4iBXj2",
198
- defaultMessage: [{
199
- "type": 0,
200
- "value": "Layout"
201
- }]
549
+ defaultMessage: "Layout"
202
550
  })
203
551
  }, {
204
552
  name: 'text',
@@ -208,30 +556,21 @@ var definition = [{
208
556
  },
209
557
  label: defineMessage({
210
558
  id: "4E2gbX",
211
- defaultMessage: [{
212
- "type": 0,
213
- "value": "Text"
214
- }]
559
+ defaultMessage: "Text"
215
560
  })
216
561
  }, {
217
562
  name: 'background',
218
563
  type: 'background',
219
564
  label: defineMessage({
220
565
  id: "+MPZRu",
221
- defaultMessage: [{
222
- "type": 0,
223
- "value": "Background"
224
- }]
566
+ defaultMessage: "Background"
225
567
  })
226
568
  }, {
227
569
  name: 'header',
228
570
  type: 'header',
229
571
  label: defineMessage({
230
572
  id: "rhuDxI",
231
- defaultMessage: [{
232
- "type": 0,
233
- "value": "Header"
234
- }]
573
+ defaultMessage: "Header"
235
574
  }),
236
575
  theme: {
237
576
  badge: {
@@ -246,10 +585,7 @@ var definition = [{
246
585
  type: 'footer',
247
586
  label: defineMessage({
248
587
  id: "g4nybp",
249
- defaultMessage: [{
250
- "type": 0,
251
- "value": "Footer"
252
- }]
588
+ defaultMessage: "Footer"
253
589
  }),
254
590
  theme: {
255
591
  callToAction: {
@@ -266,19 +602,13 @@ var definition = [{
266
602
  group: {
267
603
  label: defineMessage({
268
604
  id: "fIawTr",
269
- defaultMessage: [{
270
- "type": 0,
271
- "value": "Text"
272
- }]
605
+ defaultMessage: "Text"
273
606
  }),
274
607
  order: 2
275
608
  },
276
609
  title: defineMessage({
277
610
  id: "oCBQKV",
278
- defaultMessage: [{
279
- "type": 0,
280
- "value": "Text with title"
281
- }]
611
+ defaultMessage: "Text with title"
282
612
  }),
283
613
  component: TextTitleScreen,
284
614
  layouts: ['top', 'middle', 'bottom', 'split'],
@@ -289,10 +619,7 @@ var definition = [{
289
619
  defaultValue: 'top',
290
620
  label: defineMessage({
291
621
  id: "4iBXj2",
292
- defaultMessage: [{
293
- "type": 0,
294
- "value": "Layout"
295
- }]
622
+ defaultMessage: "Layout"
296
623
  })
297
624
  }, {
298
625
  name: 'title',
@@ -303,10 +630,7 @@ var definition = [{
303
630
  },
304
631
  label: defineMessage({
305
632
  id: "N25iDO",
306
- defaultMessage: [{
307
- "type": 0,
308
- "value": "Title"
309
- }]
633
+ defaultMessage: "Title"
310
634
  })
311
635
  }, {
312
636
  name: 'text',
@@ -316,30 +640,21 @@ var definition = [{
316
640
  },
317
641
  label: defineMessage({
318
642
  id: "4E2gbX",
319
- defaultMessage: [{
320
- "type": 0,
321
- "value": "Text"
322
- }]
643
+ defaultMessage: "Text"
323
644
  })
324
645
  }, {
325
646
  name: 'background',
326
647
  type: 'background',
327
648
  label: defineMessage({
328
649
  id: "+MPZRu",
329
- defaultMessage: [{
330
- "type": 0,
331
- "value": "Background"
332
- }]
650
+ defaultMessage: "Background"
333
651
  })
334
652
  }, {
335
653
  name: 'header',
336
654
  type: 'header',
337
655
  label: defineMessage({
338
656
  id: "rhuDxI",
339
- defaultMessage: [{
340
- "type": 0,
341
- "value": "Header"
342
- }]
657
+ defaultMessage: "Header"
343
658
  }),
344
659
  theme: {
345
660
  badge: {
@@ -354,10 +669,7 @@ var definition = [{
354
669
  type: 'footer',
355
670
  label: defineMessage({
356
671
  id: "g4nybp",
357
- defaultMessage: [{
358
- "type": 0,
359
- "value": "Footer"
360
- }]
672
+ defaultMessage: "Footer"
361
673
  }),
362
674
  theme: {
363
675
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-text",
3
- "version": "0.4.71",
3
+ "version": "0.4.76",
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-heading": "^0.4.71",
70
- "@micromag/element-layout": "^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.76",
67
+ "@micromag/element-container": "^0.4.74",
68
+ "@micromag/element-footer": "^0.4.76",
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": "9101554bc5761e32b4a002a10d26800608c69773",
83
+ "gitHead": "42a24f578994b23090271013f136b7f78956b632",
83
84
  "types": "es/index.d.ts"
84
85
  }