@micromag/screen-article 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 +167 -225
  3. package/package.json +20 -19
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { ImageMedia, Text, BackgroundElement, Header, Footer } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { ImageMedia, Text, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface ArticleScreenProps {
5
6
  layout?: 'normal';
@@ -17,9 +18,10 @@ interface ArticleScreenProps {
17
18
  current?: boolean;
18
19
  preload?: boolean;
19
20
  type?: string | null;
21
+ mediaRef?: ForwardedRef<MediaElement> | null;
20
22
  className?: string | null;
21
23
  }
22
- declare function ArticleScreen({ image, title, surtitle, date, author, subtitle, text, spacing, background, header, footer, current, preload, type, className, }: ArticleScreenProps): react_jsx_runtime.JSX.Element;
24
+ declare function ArticleScreen({ image, title, surtitle, date, author, subtitle, text, spacing, background, header, footer, current, preload, type, mediaRef: customMediaRef, className, }: ArticleScreenProps): react_jsx_runtime.JSX.Element;
23
25
 
24
26
  declare const _default: {
25
27
  id: string;
package/es/index.js CHANGED
@@ -1,14 +1,11 @@
1
1
  import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
4
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
5
2
  import classNames from 'classnames';
6
3
  import dayjs from 'dayjs';
7
4
  import { useMemo, useState, useCallback } from 'react';
8
5
  import { ScreenElement } from '@micromag/core/components';
9
6
  import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
10
7
  import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
11
- import { isTextFilled, isHeaderFilled, isFooterFilled, isImageFilled, getFooterProps } from '@micromag/core/utils';
8
+ import { isTextFilled, isHeaderFilled, isFooterFilled, isImageFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
12
9
  import Author from '@micromag/element-author';
13
10
  import Background from '@micromag/element-background';
14
11
  import Container from '@micromag/element-container';
@@ -23,122 +20,109 @@ import { jsx, jsxs } from 'react/jsx-runtime';
23
20
 
24
21
  var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptySubtitle":"micromag-screen-article-emptySubtitle","emptyText":"micromag-screen-article-emptyText","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","subtitle":"micromag-screen-article-subtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","author":"micromag-screen-article-author","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
25
22
 
26
- function ArticleScreen(_ref) {
27
- var _ref$image = _ref.image,
28
- image = _ref$image === void 0 ? null : _ref$image,
29
- _ref$title = _ref.title,
30
- title = _ref$title === void 0 ? null : _ref$title,
31
- _ref$surtitle = _ref.surtitle,
32
- surtitle = _ref$surtitle === void 0 ? null : _ref$surtitle,
33
- _ref$date = _ref.date,
34
- date = _ref$date === void 0 ? null : _ref$date,
35
- _ref$author = _ref.author,
36
- author = _ref$author === void 0 ? null : _ref$author,
37
- _ref$subtitle = _ref.subtitle,
38
- subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
39
- _ref$text = _ref.text,
40
- text = _ref$text === void 0 ? null : _ref$text,
41
- _ref$spacing = _ref.spacing,
42
- spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
43
- _ref$background = _ref.background,
44
- background = _ref$background === void 0 ? null : _ref$background,
45
- _ref$header = _ref.header,
46
- header = _ref$header === void 0 ? null : _ref$header,
47
- _ref$footer = _ref.footer,
48
- footer = _ref$footer === void 0 ? null : _ref$footer,
49
- _ref$current = _ref.current,
50
- current = _ref$current === void 0 ? true : _ref$current,
51
- _ref$preload = _ref.preload,
52
- preload = _ref$preload === void 0 ? true : _ref$preload,
53
- _ref$type = _ref.type,
54
- type = _ref$type === void 0 ? null : _ref$type,
55
- _ref$className = _ref.className,
56
- className = _ref$className === void 0 ? null : _ref$className;
57
- var intl = useIntl();
58
- var trackScreenEvent = useTrackScreenEvent(type);
59
- var _useScreenSize = useScreenSize(),
60
- width = _useScreenSize.width,
61
- height = _useScreenSize.height,
62
- resolution = _useScreenSize.resolution;
63
- var _useViewerContext = useViewerContext(),
64
- viewerTopHeight = _useViewerContext.topHeight,
65
- viewerBottomHeight = _useViewerContext.bottomHeight,
66
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
67
- var _useViewerWebView = useViewerWebView(),
68
- openWebView = _useViewerWebView.open;
69
- var _usePlaybackContext = usePlaybackContext(),
70
- muted = _usePlaybackContext.muted;
71
- var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
72
- mediaRef = _usePlaybackMediaRef.ref,
73
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
74
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
75
- var _useDimensionObserver = useDimensionObserver(),
76
- imageCntRef = _useDimensionObserver.ref,
77
- imageHeight = _useDimensionObserver.height;
78
- var _useScreenRenderConte = useScreenRenderContext(),
79
- isView = _useScreenRenderConte.isView,
80
- isPreview = _useScreenRenderConte.isPreview,
81
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
82
- isEdit = _useScreenRenderConte.isEdit,
83
- isStatic = _useScreenRenderConte.isStatic,
84
- isCapture = _useScreenRenderConte.isCapture;
85
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
86
- var mediaShouldLoad = current || preload;
87
- var ready = true;
88
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
89
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
90
- var _ref2 = author || {},
91
- _ref2$name = _ref2.name,
92
- authorName = _ref2$name === void 0 ? null : _ref2$name,
93
- _ref2$image = _ref2.image,
94
- authorImage = _ref2$image === void 0 ? null : _ref2$image,
95
- authorCollabs = _ref2.collaborator;
96
- var hasText = isTextFilled(text);
97
- var hasHeader = isHeaderFilled(header);
98
- var hasFooter = isFooterFilled(footer);
99
- var hasTitle = isTextFilled(title);
100
- var hasSurtitle = isTextFilled(surtitle);
101
- var hasSubtitle = isTextFilled(subtitle);
102
- var hasSimpleAuthor = isTextFilled(author); // legacy
103
- var hasAuthor = isTextFilled(authorName) || isImageFilled(authorImage) || isTextFilled(authorCollabs);
104
- var hasImage = isImageFilled(image);
105
- var hasDate = isTextFilled(date);
106
- var footerProps = getFooterProps(footer, {
107
- isView: isView,
108
- current: current,
109
- openWebView: openWebView,
110
- isPreview: isPreview
23
+ function ArticleScreen({
24
+ // layout,
25
+ image = null,
26
+ title = null,
27
+ surtitle = null,
28
+ date = null,
29
+ author = null,
30
+ subtitle = null,
31
+ text = null,
32
+ spacing = 20,
33
+ background = null,
34
+ header = null,
35
+ footer = null,
36
+ current = true,
37
+ preload = true,
38
+ type = null,
39
+ mediaRef: customMediaRef = null,
40
+ className = null
41
+ }) {
42
+ const intl = useIntl();
43
+ const trackScreenEvent = useTrackScreenEvent(type);
44
+ const {
45
+ width,
46
+ height,
47
+ resolution
48
+ } = useScreenSize();
49
+ const {
50
+ topHeight: viewerTopHeight,
51
+ bottomHeight: viewerBottomHeight,
52
+ bottomSidesWidth: viewerBottomSidesWidth
53
+ } = useViewerContext();
54
+ const {
55
+ open: openWebView
56
+ } = useViewerWebView();
57
+ const {
58
+ muted
59
+ } = usePlaybackContext();
60
+ const {
61
+ ref: mediaRef,
62
+ isCurrent: isCurrentMedia = false
63
+ } = usePlaybackMediaRef(current, true);
64
+ const {
65
+ ref: imageCntRef,
66
+ height: imageHeight
67
+ } = useDimensionObserver();
68
+ const {
69
+ isView,
70
+ isPreview,
71
+ isPlaceholder,
72
+ isEdit,
73
+ isStatic,
74
+ isCapture
75
+ } = useScreenRenderContext();
76
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
77
+ const mediaShouldLoad = current || preload;
78
+ const ready = true;
79
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
80
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
81
+ const {
82
+ name: authorName = null,
83
+ image: authorImage = null,
84
+ collaborator: authorCollabs
85
+ } = author || {};
86
+ const hasText = isTextFilled(text);
87
+ const hasHeader = isHeaderFilled(header);
88
+ const hasFooter = isFooterFilled(footer);
89
+ const hasTitle = isTextFilled(title);
90
+ const hasSurtitle = isTextFilled(surtitle);
91
+ const hasSubtitle = isTextFilled(subtitle);
92
+ const hasSimpleAuthor = isTextFilled(author); // legacy
93
+ const hasAuthor = isTextFilled(authorName) || isImageFilled(authorImage) || isTextFilled(authorCollabs);
94
+ const hasImage = isImageFilled(image);
95
+ const hasDate = isTextFilled(date);
96
+ const footerProps = getFooterProps(footer, {
97
+ isView,
98
+ current,
99
+ openWebView,
100
+ isPreview
111
101
  });
112
- var mediaHeight = useMemo(function () {
102
+ const mediaHeight = useMemo(() => {
113
103
  if (!hasImage) {
114
104
  return 0;
115
105
  }
116
- var _ref3 = image || {},
117
- _ref3$metadata = _ref3.metadata,
118
- metadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
119
- var _ref4 = metadata || {},
120
- _ref4$width = _ref4.width,
121
- initialWidth = _ref4$width === void 0 ? 0 : _ref4$width,
122
- _ref4$height = _ref4.height,
123
- initialHeight = _ref4$height === void 0 ? 0 : _ref4$height;
106
+ const {
107
+ metadata = {}
108
+ } = image || {};
109
+ const {
110
+ width: initialWidth = 0,
111
+ height: initialHeight = 0
112
+ } = metadata || {};
124
113
  return width * initialHeight / initialWidth;
125
114
  }, [image]);
126
- var partialDate = hasDate ? date.body || null : null;
127
- var finalDate = useMemo(function () {
128
- return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs(partialDate).toDate(), {
129
- year: 'numeric',
130
- month: 'long',
131
- day: '2-digit'
132
- }), "</p>") : null;
133
- }, [partialDate]);
134
- var imageElement = /*#__PURE__*/jsx(ScreenElement, {
115
+ const partialDate = hasDate ? date.body || null : null;
116
+ const finalDate = useMemo(() => partialDate !== null ? `<p>${intl.formatDate(dayjs(partialDate).toDate(), {
117
+ year: 'numeric',
118
+ month: 'long',
119
+ day: '2-digit'
120
+ })}</p>` : null, [partialDate]);
121
+ const imageElement = /*#__PURE__*/jsx(ScreenElement, {
135
122
  placeholder: "image",
136
123
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
137
124
  id: "ebsPd4",
138
- defaultMessage: [{
139
- "type": 0,
140
- "value": "Image"
141
- }]
125
+ defaultMessage: "Image"
142
126
  }),
143
127
  emptyClassName: styles.emptyText,
144
128
  isEmpty: !hasImage,
@@ -157,125 +141,111 @@ function ArticleScreen(_ref) {
157
141
  }) : null
158
142
  })
159
143
  });
160
- var titleElement = /*#__PURE__*/jsx(ScreenElement, {
144
+ const titleElement = /*#__PURE__*/jsx(ScreenElement, {
161
145
  placeholder: "title",
162
146
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
163
147
  id: "2ZOPe+",
164
- defaultMessage: [{
165
- "type": 0,
166
- "value": "Title"
167
- }]
148
+ defaultMessage: "Title"
168
149
  }),
169
150
  emptyClassName: styles.emptyTitle,
170
151
  isEmpty: !hasTitle,
171
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
172
- className: styles.title
173
- }, title)) : null
152
+ children: hasTitle ? /*#__PURE__*/jsx(Heading, {
153
+ className: styles.title,
154
+ ...title
155
+ }) : null
174
156
  }, "title");
175
- var surtitleElement = /*#__PURE__*/jsx(ScreenElement, {
157
+ const surtitleElement = /*#__PURE__*/jsx(ScreenElement, {
176
158
  placeholder: "line",
177
159
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
178
160
  id: "vdWMTA",
179
- defaultMessage: [{
180
- "type": 0,
181
- "value": "Surtitle"
182
- }]
161
+ defaultMessage: "Surtitle"
183
162
  }),
184
163
  emptyClassName: styles.emptySurtitle,
185
164
  isEmpty: !hasSurtitle,
186
- children: hasSurtitle ? /*#__PURE__*/jsx(Text, _objectSpread({
187
- className: styles.surtitle
188
- }, surtitle)) : null
165
+ children: hasSurtitle ? /*#__PURE__*/jsx(Text, {
166
+ className: styles.surtitle,
167
+ ...surtitle
168
+ }) : null
189
169
  }, "surtitle");
190
- var subtitleElement = /*#__PURE__*/jsx(ScreenElement, {
170
+ const subtitleElement = /*#__PURE__*/jsx(ScreenElement, {
191
171
  placeholder: "line",
192
172
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
193
173
  id: "d60tSn",
194
- defaultMessage: [{
195
- "type": 0,
196
- "value": "Subtitle"
197
- }]
174
+ defaultMessage: "Subtitle"
198
175
  }),
199
176
  emptyClassName: styles.emptySubtitle,
200
177
  isEmpty: !hasSubtitle,
201
- children: hasSubtitle ? /*#__PURE__*/jsx(Text, _objectSpread({
202
- className: styles.subtitle
203
- }, subtitle)) : null
178
+ children: hasSubtitle ? /*#__PURE__*/jsx(Text, {
179
+ className: styles.subtitle,
180
+ ...subtitle
181
+ }) : null
204
182
  }, "subtitle");
205
- var dateElement = /*#__PURE__*/jsx(ScreenElement, {
183
+ const dateElement = /*#__PURE__*/jsx(ScreenElement, {
206
184
  placeholder: "line",
207
185
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
208
186
  id: "/MsgWe",
209
- defaultMessage: [{
210
- "type": 0,
211
- "value": "Date"
212
- }]
187
+ defaultMessage: "Date"
213
188
  }),
214
189
  emptyClassName: styles.emptyDate,
215
190
  isEmpty: !hasDate,
216
- children: hasDate ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({
217
- className: styles.date
218
- }, date), {}, {
191
+ children: hasDate ? /*#__PURE__*/jsx(Text, {
192
+ className: styles.date,
193
+ ...date,
219
194
  body: finalDate
220
- })) : null
195
+ }) : null
221
196
  }, "date");
222
- var authorElement = /*#__PURE__*/jsxs(ScreenElement, {
197
+ const authorElement = /*#__PURE__*/jsxs(ScreenElement, {
223
198
  placeholder: "line",
224
199
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
225
200
  id: "xYqGzM",
226
- defaultMessage: [{
227
- "type": 0,
228
- "value": "Author"
229
- }]
201
+ defaultMessage: "Author"
230
202
  }),
231
203
  emptyClassName: styles.emptyAuthor,
232
204
  isEmpty: !hasAuthor && !hasSimpleAuthor,
233
- children: [hasSimpleAuthor ? /*#__PURE__*/jsx(Text, _objectSpread({
234
- className: styles.author
235
- }, author)) : null, hasAuthor ? /*#__PURE__*/jsx(Author, {
205
+ children: [hasSimpleAuthor ? /*#__PURE__*/jsx(Text, {
206
+ className: styles.author,
207
+ ...author
208
+ }) : null, hasAuthor ? /*#__PURE__*/jsx(Author, {
236
209
  author: author
237
210
  }) : null]
238
211
  }, "author");
239
- var contentElement = /*#__PURE__*/jsx(ScreenElement, {
212
+ const contentElement = /*#__PURE__*/jsx(ScreenElement, {
240
213
  placeholder: "text",
241
214
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
242
215
  id: "z4CiV1",
243
- defaultMessage: [{
244
- "type": 0,
245
- "value": "Text"
246
- }]
216
+ defaultMessage: "Text"
247
217
  }),
248
218
  emptyClassName: styles.emptyText,
249
219
  isEmpty: !hasText,
250
- children: hasText ? /*#__PURE__*/jsx(Text, _objectSpread({
251
- className: styles.text
252
- }, text)) : null
220
+ children: hasText ? /*#__PURE__*/jsx(Text, {
221
+ className: styles.text,
222
+ ...text
223
+ }) : null
253
224
  });
254
- var _useState = useState(false),
255
- _useState2 = _slicedToArray(_useState, 2),
256
- scrolledBottom = _useState2[0],
257
- setScrolledBottom = _useState2[1];
258
- var onScrolledBottom = useCallback(function (_ref5) {
259
- var initial = _ref5.initial;
225
+ const [scrolledBottom, setScrolledBottom] = useState(false);
226
+ const onScrolledBottom = useCallback(({
227
+ initial
228
+ }) => {
260
229
  if (initial) {
261
230
  trackScreenEvent('scroll', 'Screen');
262
231
  }
263
232
  setScrolledBottom(true);
264
233
  }, [trackScreenEvent]);
265
- var onScrolledTrigger = useCallback(function () {
266
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
234
+ const onScrolledTrigger = useCallback((trigger = null) => {
267
235
  if (trigger !== null) {
268
- var scrollPercent = Math.round(trigger * 100);
236
+ const scrollPercent = Math.round(trigger * 100);
269
237
  trackScreenEvent('scroll', scrollPercent, {
270
- scrollPercent: scrollPercent
238
+ scrollPercent
271
239
  });
272
240
  }
273
241
  }, [trackScreenEvent]);
274
- var onScrolledNotBottom = useCallback(function () {
242
+ const onScrolledNotBottom = useCallback(() => {
275
243
  setScrolledBottom(false);
276
244
  }, [setScrolledBottom]);
277
245
  return /*#__PURE__*/jsxs("div", {
278
- className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
246
+ className: classNames([styles.container, className, {
247
+ [styles.isPlaceholder]: isPlaceholder
248
+ }]),
279
249
  "data-screen-ready": ready,
280
250
  children: [/*#__PURE__*/jsx(Container, {
281
251
  width: width,
@@ -300,21 +270,29 @@ function ArticleScreen(_ref) {
300
270
  height: hasImage && imageHeight > 0 ? 0 : 'auto',
301
271
  paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
302
272
  },
303
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
273
+ children: /*#__PURE__*/jsx(Header, {
274
+ ...header
275
+ })
304
276
  }, "header") : null, /*#__PURE__*/jsxs("div", {
305
- className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText && hasAuthor)]),
277
+ className: classNames([styles.main, {
278
+ [styles.hasText]: hasText && hasAuthor
279
+ }]),
306
280
  children: [imageElement, /*#__PURE__*/jsxs("div", {
307
281
  className: styles.topContent,
308
282
  children: [surtitleElement, dateElement]
309
283
  }), titleElement, authorElement, subtitleElement]
310
284
  }), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
311
- className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
285
+ className: classNames([styles.footer, {
286
+ [styles.disabled]: !scrolledBottom
287
+ }]),
312
288
  style: {
313
289
  paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
314
290
  paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
315
291
  paddingTop: spacing
316
292
  },
317
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
293
+ children: /*#__PURE__*/jsx(Footer, {
294
+ ...footerProps
295
+ })
318
296
  }) : null]
319
297
  })
320
298
  })
@@ -326,7 +304,7 @@ function ArticleScreen(_ref) {
326
304
  playing: backgroundPlaying,
327
305
  muted: muted,
328
306
  shouldLoad: mediaShouldLoad,
329
- mediaRef: mediaRef,
307
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
330
308
  withoutVideo: isPreview,
331
309
  className: styles.background
332
310
  }) : null]
@@ -341,19 +319,13 @@ var definition = [{
341
319
  group: {
342
320
  label: defineMessage({
343
321
  id: "fIawTr",
344
- defaultMessage: [{
345
- "type": 0,
346
- "value": "Text"
347
- }]
322
+ defaultMessage: "Text"
348
323
  }),
349
324
  order: 2
350
325
  },
351
326
  title: defineMessage({
352
327
  id: "ouMwWq",
353
- defaultMessage: [{
354
- "type": 0,
355
- "value": "Article"
356
- }]
328
+ defaultMessage: "Article"
357
329
  }),
358
330
  component: ArticleScreen,
359
331
  layouts: ['normal'],
@@ -363,10 +335,7 @@ var definition = [{
363
335
  type: 'visual',
364
336
  label: defineMessage({
365
337
  id: "xsipID",
366
- defaultMessage: [{
367
- "type": 0,
368
- "value": "Image"
369
- }]
338
+ defaultMessage: "Image"
370
339
  })
371
340
  }, {
372
341
  name: 'title',
@@ -377,60 +346,42 @@ var definition = [{
377
346
  },
378
347
  label: defineMessage({
379
348
  id: "N25iDO",
380
- defaultMessage: [{
381
- "type": 0,
382
- "value": "Title"
383
- }]
349
+ defaultMessage: "Title"
384
350
  })
385
351
  }, {
386
352
  name: 'surtitle',
387
353
  type: 'text-element',
388
354
  label: defineMessage({
389
355
  id: "YD9M2p",
390
- defaultMessage: [{
391
- "type": 0,
392
- "value": "Overtitle"
393
- }]
356
+ defaultMessage: "Overtitle"
394
357
  })
395
358
  }, {
396
359
  name: 'date',
397
360
  type: 'date-element',
398
361
  label: defineMessage({
399
362
  id: "9AP246",
400
- defaultMessage: [{
401
- "type": 0,
402
- "value": "Date"
403
- }]
363
+ defaultMessage: "Date"
404
364
  })
405
365
  }, {
406
366
  name: 'author',
407
367
  type: 'author-element',
408
368
  label: defineMessage({
409
369
  id: "73hxYw",
410
- defaultMessage: [{
411
- "type": 0,
412
- "value": "Author"
413
- }]
370
+ defaultMessage: "Author"
414
371
  })
415
372
  }, {
416
373
  name: 'subtitle',
417
374
  type: 'text-element',
418
375
  label: defineMessage({
419
376
  id: "EcZYpr",
420
- defaultMessage: [{
421
- "type": 0,
422
- "value": "Subtitle"
423
- }]
377
+ defaultMessage: "Subtitle"
424
378
  })
425
379
  }, {
426
380
  name: 'text',
427
381
  type: 'text-modal',
428
382
  label: defineMessage({
429
383
  id: "4E2gbX",
430
- defaultMessage: [{
431
- "type": 0,
432
- "value": "Text"
433
- }]
384
+ defaultMessage: "Text"
434
385
  })
435
386
  },
436
387
  // TODO: think about how to implement this wthout injecting the styles
@@ -465,20 +416,14 @@ var definition = [{
465
416
  type: 'background',
466
417
  label: defineMessage({
467
418
  id: "+MPZRu",
468
- defaultMessage: [{
469
- "type": 0,
470
- "value": "Background"
471
- }]
419
+ defaultMessage: "Background"
472
420
  })
473
421
  }, {
474
422
  name: 'header',
475
423
  type: 'header',
476
424
  label: defineMessage({
477
425
  id: "rhuDxI",
478
- defaultMessage: [{
479
- "type": 0,
480
- "value": "Header"
481
- }]
426
+ defaultMessage: "Header"
482
427
  }),
483
428
  theme: {
484
429
  badge: {
@@ -493,10 +438,7 @@ var definition = [{
493
438
  type: 'footer',
494
439
  label: defineMessage({
495
440
  id: "g4nybp",
496
- defaultMessage: [{
497
- "type": 0,
498
- "value": "Footer"
499
- }]
441
+ defaultMessage: "Footer"
500
442
  }),
501
443
  theme: {
502
444
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-article",
3
- "version": "0.4.70",
3
+ "version": "0.4.74",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -32,6 +32,7 @@
32
32
  "exports": {
33
33
  ".": {
34
34
  "types": "./es/index.d.ts",
35
+ "style": "./assets/css/styles.css",
35
36
  "import": "./es/index.js"
36
37
  },
37
38
  "./assets/css/styles": "./assets/css/styles.css",
@@ -48,28 +49,28 @@
48
49
  "build": "../../scripts/prepare-package.sh --types"
49
50
  },
50
51
  "devDependencies": {
51
- "react": "^18.3.0 || ^19.0.0",
52
- "react-dom": "^18.3.0 || ^19.0.0"
52
+ "react": "^19.0.0",
53
+ "react-dom": "^19.0.0"
53
54
  },
54
55
  "peerDependencies": {
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
  "dependencies": {
59
60
  "@babel/runtime": "^7.28.6",
60
- "@micromag/core": "^0.4.69",
61
- "@micromag/element-author": "^0.4.70",
62
- "@micromag/element-background": "^0.4.70",
63
- "@micromag/element-container": "^0.4.69",
64
- "@micromag/element-footer": "^0.4.70",
65
- "@micromag/element-header": "^0.4.69",
66
- "@micromag/element-heading": "^0.4.69",
67
- "@micromag/element-layout": "^0.4.69",
68
- "@micromag/element-scroll": "^0.4.69",
69
- "@micromag/element-stack": "^0.4.69",
70
- "@micromag/element-text": "^0.4.69",
71
- "@micromag/element-visual": "^0.4.70",
72
- "@micromag/transforms": "^0.4.69",
61
+ "@micromag/core": "^0.4.74",
62
+ "@micromag/element-author": "^0.4.74",
63
+ "@micromag/element-background": "^0.4.74",
64
+ "@micromag/element-container": "^0.4.74",
65
+ "@micromag/element-footer": "^0.4.74",
66
+ "@micromag/element-header": "^0.4.74",
67
+ "@micromag/element-heading": "^0.4.74",
68
+ "@micromag/element-layout": "^0.4.74",
69
+ "@micromag/element-scroll": "^0.4.74",
70
+ "@micromag/element-stack": "^0.4.74",
71
+ "@micromag/element-text": "^0.4.74",
72
+ "@micromag/element-visual": "^0.4.74",
73
+ "@micromag/transforms": "^0.4.74",
73
74
  "classnames": "^2.2.6",
74
75
  "dayjs": "^1.11.10",
75
76
  "lodash": "^4.17.23",
@@ -80,6 +81,6 @@
80
81
  "access": "public",
81
82
  "registry": "https://registry.npmjs.org/"
82
83
  },
83
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
84
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
84
85
  "types": "es/index.d.ts"
85
86
  }