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