@micromag/screen-timeline 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 +321 -462
  3. package/package.json +18 -17
package/es/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { HeadingElement, TextElement, TextStyle, Color, Header, Footer, BackgroundElement, Alternatives } from '@micromag/core';
2
+ import { ForwardedRef } from 'react';
3
+ import { HeadingElement, TextElement, TextStyle, Color, Header, Footer, BackgroundElement, Alternatives, MediaElement } from '@micromag/core';
3
4
 
4
5
  interface TimelineProps {
5
6
  layout?: 'normal' | 'title-description-image' | 'title-image-description' | 'image-title-description';
@@ -22,9 +23,10 @@ interface TimelineProps {
22
23
  active?: boolean;
23
24
  preload?: boolean;
24
25
  type?: string | null;
26
+ mediaRef?: ForwardedRef<MediaElement> | null;
25
27
  className?: string | null;
26
28
  }
27
- declare function Timeline({ layout, title, items, itemTitleStyle, itemDescriptionStyle, withoutLine, bulletColor, lineColor, bulletShape, bulletFilled, illustrated, spacing: initialSpacing, itemBottomSpacing: initialItemBottomSpacing, header, footer, background, alternatives, current, active, preload, type, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
29
+ declare function Timeline({ layout, title, items, itemTitleStyle, itemDescriptionStyle, withoutLine, bulletColor, lineColor, bulletShape, bulletFilled, illustrated, spacing: initialSpacing, itemBottomSpacing: initialItemBottomSpacing, header, footer, background, alternatives, current, active, preload, type, mediaRef: customMediaRef, className, }: TimelineProps): react_jsx_runtime.JSX.Element;
28
30
 
29
31
  declare function TimelineIllustratedScreen({ ...props }: {
30
32
  [x: string]: any;
package/es/index.js CHANGED
@@ -1,14 +1,10 @@
1
1
  import { FormattedMessage, defineMessage } from 'react-intl';
2
- import _defineProperty from '@babel/runtime/helpers/defineProperty';
3
- import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
4
- import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import _objectSpread from '@babel/runtime/helpers/objectSpread2';
6
2
  import classNames from 'classnames';
7
3
  import { useMemo, useState, useEffect, useCallback } from 'react';
8
4
  import { ScreenElement } from '@micromag/core/components';
9
- import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
10
- import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
11
- import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps } from '@micromag/core/utils';
5
+ import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
6
+ import { useTrackScreenEvent, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
7
+ import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
12
8
  import Audio from '@micromag/element-audio';
13
9
  import Background from '@micromag/element-background';
14
10
  import Container from '@micromag/element-container';
@@ -20,152 +16,122 @@ import Scroll from '@micromag/element-scroll';
20
16
  import Text from '@micromag/element-text';
21
17
  import Visual from '@micromag/element-visual';
22
18
  import { jsx, jsxs } from 'react/jsx-runtime';
23
- import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
24
- import _extends from '@babel/runtime/helpers/extends';
19
+ import { c } from 'react/compiler-runtime';
25
20
 
26
21
  var styles = {"container":"micromag-screen-timeline-container","background":"micromag-screen-timeline-background","content":"micromag-screen-timeline-content","empty":"micromag-screen-timeline-empty","emptyTitle":"micromag-screen-timeline-emptyTitle","item":"micromag-screen-timeline-item","element":"micromag-screen-timeline-element","hidden":"micromag-screen-timeline-hidden","body":"micromag-screen-timeline-body","timeline":"micromag-screen-timeline-timeline","line":"micromag-screen-timeline-line","bullet":"micromag-screen-timeline-bullet","title":"micromag-screen-timeline-title","description":"micromag-screen-timeline-description","imageContainer":"micromag-screen-timeline-imageContainer","image":"micromag-screen-timeline-image","video":"micromag-screen-timeline-video","callToAction":"micromag-screen-timeline-callToAction","disabled":"micromag-screen-timeline-disabled","isPlaceholder":"micromag-screen-timeline-isPlaceholder","scroll":"micromag-screen-timeline-scroll","circleBulletShape":"micromag-screen-timeline-circleBulletShape","withoutLines":"micromag-screen-timeline-withoutLines"};
27
22
 
28
- var emptyItems = [null];
29
- function Timeline(_ref) {
30
- var _ref$layout = _ref.layout,
31
- layout = _ref$layout === void 0 ? 'normal' : _ref$layout,
32
- _ref$title = _ref.title,
33
- title = _ref$title === void 0 ? null : _ref$title,
34
- _ref$items = _ref.items,
35
- items = _ref$items === void 0 ? emptyItems : _ref$items,
36
- _ref$itemTitleStyle = _ref.itemTitleStyle,
37
- itemTitleStyle = _ref$itemTitleStyle === void 0 ? null : _ref$itemTitleStyle,
38
- _ref$itemDescriptionS = _ref.itemDescriptionStyle,
39
- itemDescriptionStyle = _ref$itemDescriptionS === void 0 ? null : _ref$itemDescriptionS,
40
- _ref$withoutLine = _ref.withoutLine,
41
- withoutLine = _ref$withoutLine === void 0 ? false : _ref$withoutLine,
42
- _ref$bulletColor = _ref.bulletColor,
43
- bulletColor = _ref$bulletColor === void 0 ? null : _ref$bulletColor,
44
- _ref$lineColor = _ref.lineColor,
45
- lineColor = _ref$lineColor === void 0 ? null : _ref$lineColor,
46
- _ref$bulletShape = _ref.bulletShape,
47
- bulletShape = _ref$bulletShape === void 0 ? 'circle' : _ref$bulletShape,
48
- _ref$bulletFilled = _ref.bulletFilled,
49
- bulletFilled = _ref$bulletFilled === void 0 ? true : _ref$bulletFilled,
50
- _ref$illustrated = _ref.illustrated,
51
- illustrated = _ref$illustrated === void 0 ? false : _ref$illustrated,
52
- _ref$spacing = _ref.spacing,
53
- initialSpacing = _ref$spacing === void 0 ? null : _ref$spacing,
54
- _ref$itemBottomSpacin = _ref.itemBottomSpacing,
55
- initialItemBottomSpacing = _ref$itemBottomSpacin === void 0 ? null : _ref$itemBottomSpacin,
56
- _ref$header = _ref.header,
57
- header = _ref$header === void 0 ? null : _ref$header,
58
- _ref$footer = _ref.footer,
59
- footer = _ref$footer === void 0 ? null : _ref$footer,
60
- _ref$background = _ref.background,
61
- background = _ref$background === void 0 ? null : _ref$background,
62
- _ref$alternatives = _ref.alternatives,
63
- alternatives = _ref$alternatives === void 0 ? null : _ref$alternatives,
64
- _ref$current = _ref.current,
65
- current = _ref$current === void 0 ? true : _ref$current,
66
- _ref$active = _ref.active,
67
- active = _ref$active === void 0 ? true : _ref$active,
68
- _ref$preload = _ref.preload,
69
- preload = _ref$preload === void 0 ? true : _ref$preload,
70
- _ref$type = _ref.type,
71
- type = _ref$type === void 0 ? null : _ref$type,
72
- _ref$className = _ref.className,
73
- className = _ref$className === void 0 ? null : _ref$className;
74
- var trackScreenEvent = useTrackScreenEvent(type);
75
- var _useScreenSize = useScreenSize(),
76
- width = _useScreenSize.width,
77
- height = _useScreenSize.height,
78
- imageResolution = _useScreenSize.imageResolution,
79
- resolution = _useScreenSize.resolution;
80
- var _useViewerContext = useViewerContext(),
81
- viewerTopHeight = _useViewerContext.topHeight,
82
- viewerBottomHeight = _useViewerContext.bottomHeight,
83
- viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
84
- var _useViewerWebView = useViewerWebView(),
85
- openWebView = _useViewerWebView.open;
86
- var _useScreenRenderConte = useScreenRenderContext(),
87
- isView = _useScreenRenderConte.isView,
88
- isPreview = _useScreenRenderConte.isPreview,
89
- isPlaceholder = _useScreenRenderConte.isPlaceholder,
90
- isEdit = _useScreenRenderConte.isEdit,
91
- isStatic = _useScreenRenderConte.isStatic,
92
- isCapture = _useScreenRenderConte.isCapture;
93
- var _usePlaybackContext = usePlaybackContext(),
94
- muted = _usePlaybackContext.muted,
95
- playing = _usePlaybackContext.playing,
96
- setControls = _usePlaybackContext.setControls;
97
- _usePlaybackContext.setControlsSuggestPlay;
98
- var setControlsTheme = _usePlaybackContext.setControlsTheme,
99
- setPlaying = _usePlaybackContext.setPlaying;
100
- _usePlaybackContext.controlsVisible;
101
- var showControls = _usePlaybackContext.showControls,
102
- hideControls = _usePlaybackContext.hideControls;
103
- var _usePlaybackMediaRef = usePlaybackMediaRef(current),
104
- mediaRef = _usePlaybackMediaRef.ref,
105
- _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
106
- isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
107
- var _ref2 = alternatives || {},
108
- _ref2$audio = _ref2.audio,
109
- audioAlternative = _ref2$audio === void 0 ? null : _ref2$audio;
110
- var _ref3 = audioAlternative || {},
111
- _ref3$autoPlay = _ref3.autoPlay,
112
- autoPlay = _ref3$autoPlay === void 0 ? false : _ref3$autoPlay,
113
- _ref3$loop = _ref3.loop,
114
- loop = _ref3$loop === void 0 ? false : _ref3$loop,
115
- _ref3$media = _ref3.media,
116
- audioAlternativeMedia = _ref3$media === void 0 ? null : _ref3$media,
117
- _ref3$withSeekBar = _ref3.withSeekBar,
118
- withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
119
- _ref3$withControls = _ref3.withControls,
120
- withControls = _ref3$withControls === void 0 ? false : _ref3$withControls,
121
- _ref3$color = _ref3.color,
122
- color = _ref3$color === void 0 ? null : _ref3$color,
123
- _ref3$progressColor = _ref3.progressColor,
124
- progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
125
- var finalAudioAlternative = useMemo(function () {
126
- return audioAlternative !== null ? _objectSpread(_objectSpread({}, audioAlternative), {}, {
127
- autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
128
- }) : null;
129
- }, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
130
- var _useState = useState(false),
131
- _useState2 = _slicedToArray(_useState, 2),
132
- hasPlayed = _useState2[0],
133
- setHasPlayed = _useState2[1];
134
- var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
135
- var audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
136
- useEffect(function () {
23
+ const emptyItems = [null];
24
+ function Timeline({
25
+ layout = 'normal',
26
+ title = null,
27
+ items = emptyItems,
28
+ itemTitleStyle = null,
29
+ itemDescriptionStyle = null,
30
+ withoutLine = false,
31
+ bulletColor = null,
32
+ lineColor = null,
33
+ bulletShape = 'circle',
34
+ bulletFilled = true,
35
+ illustrated = false,
36
+ spacing: initialSpacing = null,
37
+ itemBottomSpacing: initialItemBottomSpacing = null,
38
+ header = null,
39
+ footer = null,
40
+ background = null,
41
+ alternatives = null,
42
+ current = true,
43
+ active = true,
44
+ preload = true,
45
+ // transitions,
46
+ // transitionStagger,
47
+ type = null,
48
+ mediaRef: customMediaRef = null,
49
+ className = null
50
+ }) {
51
+ const trackScreenEvent = useTrackScreenEvent(type);
52
+ const {
53
+ width,
54
+ height,
55
+ imageResolution,
56
+ resolution
57
+ } = useScreenSize();
58
+ const {
59
+ topHeight: viewerTopHeight,
60
+ bottomHeight: viewerBottomHeight,
61
+ bottomSidesWidth: viewerBottomSidesWidth
62
+ } = useViewerContext();
63
+ const {
64
+ open: openWebView
65
+ } = useViewerWebView();
66
+ const {
67
+ isView,
68
+ isPreview,
69
+ isPlaceholder,
70
+ isEdit,
71
+ isStatic,
72
+ isCapture
73
+ } = useScreenRenderContext();
74
+ const {
75
+ muted,
76
+ playing,
77
+ setControls,
78
+ setControlsSuggestPlay: _setControlsSuggestPlay,
79
+ setControlsTheme,
80
+ setPlaying,
81
+ controlsVisible: _controlsVisible,
82
+ showControls,
83
+ hideControls
84
+ } = usePlaybackContext();
85
+ const {
86
+ ref: mediaRef,
87
+ isCurrent: isCurrentMedia = false
88
+ } = usePlaybackMediaRef(current);
89
+ const {
90
+ audio: audioAlternative = null
91
+ } = alternatives || {};
92
+ const {
93
+ autoPlay = false,
94
+ loop = false,
95
+ media: audioAlternativeMedia = null,
96
+ withSeekBar = false,
97
+ withControls = false,
98
+ color = null,
99
+ progressColor = null
100
+ } = audioAlternative || {};
101
+ const finalAudioAlternative = useMemo(() => audioAlternative !== null ? {
102
+ ...audioAlternative,
103
+ autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
104
+ } : null, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
105
+ const [hasPlayed, setHasPlayed] = useState(false);
106
+ const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
107
+ const audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
108
+ useEffect(() => {
137
109
  if (!current) {
138
- return function () {};
110
+ return () => {};
139
111
  }
140
112
  setControlsTheme({
141
113
  seekBarOnly: withSeekBar && !withControls,
142
- color: color,
143
- progressColor: progressColor
114
+ color,
115
+ progressColor
144
116
  });
145
117
  if (withControls || withSeekBar) {
146
118
  setControls(true);
147
119
  } else {
148
120
  setControls(false);
149
121
  }
150
- return function () {
122
+ return () => {
151
123
  if (withControls || withSeekBar) {
152
124
  setControls(false);
153
125
  }
154
126
  };
155
127
  }, [current, withControls, setControls, withSeekBar, color, progressColor]);
156
- useEffect(function () {
128
+ useEffect(() => {
157
129
  if (current && autoPlay) {
158
130
  setPlaying(true);
159
131
  }
160
132
  }, [current, autoPlay]);
161
- var viewerContainer = useViewerContainer();
162
- var _useActivityDetector = useActivityDetector({
163
- element: viewerContainer,
164
- disabled: !isView,
165
- timeout: 2000
166
- }),
167
- activityDetected = _useActivityDetector.detected;
168
- var toggleControlsVisibility = useCallback(function () {
133
+ const activityDetected = useViewerActivityDetected();
134
+ const toggleControlsVisibility = useCallback(() => {
169
135
  if (activityDetected) {
170
136
  showControls();
171
137
  } else {
@@ -173,95 +139,74 @@ function Timeline(_ref) {
173
139
  }
174
140
  }, [activityDetected, showControls, hideControls]);
175
141
  useDebounce(toggleControlsVisibility, activityDetected, 1000);
176
- var trackScreenMedia = useTrackScreenMedia('video');
177
- var _useState3 = useState(null),
178
- _useState4 = _slicedToArray(_useState3, 2);
179
- _useState4[0];
180
- var setCurrentTime = _useState4[1];
181
- var _useState5 = useState(null),
182
- _useState6 = _slicedToArray(_useState5, 2),
183
- duration = _useState6[0],
184
- setDuration = _useState6[1];
185
- var _useState7 = useState(audioAlternativeMedia === null),
186
- _useState8 = _slicedToArray(_useState7, 2),
187
- audioReady = _useState8[0],
188
- setAudioReady = _useState8[1];
189
- var onAudioReady = useCallback(function () {
142
+ const trackScreenMedia = useTrackScreenMedia('video');
143
+ const [_currentTime, setCurrentTime] = useState(null);
144
+ const [duration, setDuration] = useState(null);
145
+ const [audioReady, setAudioReady] = useState(audioAlternativeMedia === null);
146
+ const onAudioReady = useCallback(() => {
190
147
  setAudioReady(true);
191
148
  }, [setAudioReady]);
192
- var onAudioTimeUpdate = useCallback(function () {
193
- var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
149
+ const onAudioTimeUpdate = useCallback((time = null) => {
194
150
  if (time !== null && typeof time.currentTarget !== 'undefined') {
195
- var _ref4 = time.currentTarget || {},
196
- _ref4$currentTime = _ref4.currentTime,
197
- targetTime = _ref4$currentTime === void 0 ? 0 : _ref4$currentTime;
151
+ const {
152
+ currentTime: targetTime = 0
153
+ } = time.currentTarget || {};
198
154
  setCurrentTime(targetTime);
199
155
  } else {
200
156
  setCurrentTime(0);
201
157
  }
202
158
  }, [duration, setCurrentTime]);
203
- var onAudioProgressStep = useCallback(function (step, meta) {
204
- trackScreenMedia(audioAlternativeMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
159
+ const onAudioProgressStep = useCallback((step, meta) => {
160
+ trackScreenMedia(audioAlternativeMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
205
161
  }, [trackScreenMedia, audioAlternativeMedia]);
206
- var onAudioDurationChange = useCallback(function (dur) {
162
+ const onAudioDurationChange = useCallback(dur => {
207
163
  setDuration(dur);
208
164
  }, [setDuration]);
209
- var onAudioPlay = useCallback(function (_ref5) {
210
- var initial = _ref5.initial;
165
+ const onAudioPlay = useCallback(({
166
+ initial
167
+ }) => {
211
168
  if (!hasPlayed) {
212
169
  setHasPlayed(true);
213
170
  }
214
171
  trackScreenMedia(audioAlternativeMedia, initial ? 'play' : 'resume');
215
172
  }, [trackScreenMedia, audioAlternativeMedia]);
216
- var onAudioPause = useCallback(function (_ref6) {
217
- var midway = _ref6.midway;
173
+ const onAudioPause = useCallback(({
174
+ midway
175
+ }) => {
218
176
  trackScreenMedia(audioAlternativeMedia, midway ? 'pause' : 'ended');
219
177
  }, [trackScreenMedia, audioAlternativeMedia]);
220
- var onAudioSeeked = useCallback(function (time) {
221
- if (time > 0) {
178
+ const onAudioSeeked = useCallback(time_0 => {
179
+ if (time_0 > 0) {
222
180
  trackScreenMedia(audioAlternativeMedia, 'seek', {
223
- currentTime: time
181
+ currentTime: time_0
224
182
  });
225
183
  }
226
184
  }, [trackScreenMedia, audioAlternativeMedia]);
227
- var onAudioEnded = useCallback(function () {
185
+ const onAudioEnded = useCallback(() => {
228
186
  if (current && !loop) {
229
187
  setPlaying(false);
230
188
  }
231
189
  }, [loop, current]);
232
- var finalItems = useMemo(function () {
233
- return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
234
- return {};
235
- }) : items || [null];
236
- }, [isPlaceholder, items]);
237
- var hasTitle = isTextFilled(title);
238
- var spacing = useMemo(function () {
239
- return initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
240
- }, [initialSpacing]);
241
- var itemBottomSpacing = useMemo(function () {
242
- return isPlaceholder ? 4 : initialItemBottomSpacing !== null ? Math.max(0, initialItemBottomSpacing || 0) : 20;
243
- }, [isPlaceholder, initialItemBottomSpacing]);
244
- var itemsCount = finalItems !== null ? finalItems.length : 0;
245
- var hasItems = finalItems !== null && itemsCount;
246
- var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
247
- var _ref7 = curr || {},
248
- _ref7$image = _ref7.image,
249
- image = _ref7$image === void 0 ? null : _ref7$image;
190
+ const finalItems = useMemo(() => isPlaceholder ? [...new Array(5)].map(() => ({})) : items || [null], [isPlaceholder, items]);
191
+ const hasTitle = isTextFilled(title);
192
+ const spacing = useMemo(() => initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20, [initialSpacing]);
193
+ const itemBottomSpacing = useMemo(() => isPlaceholder ? 4 : initialItemBottomSpacing !== null ? Math.max(0, initialItemBottomSpacing || 0) : 20, [isPlaceholder, initialItemBottomSpacing]);
194
+ const itemsCount = finalItems !== null ? finalItems.length : 0;
195
+ const hasItems = finalItems !== null && itemsCount;
196
+ const imagesCount = hasItems ? finalItems.reduce((acc, curr) => {
197
+ const {
198
+ image = null
199
+ } = curr || {};
250
200
  return acc + (image !== null ? 1 : 0);
251
201
  }, 0) : 0;
252
- var _useState9 = useState(0),
253
- _useState0 = _slicedToArray(_useState9, 2),
254
- imagesLoaded = _useState0[0],
255
- setImagesLoaded = _useState0[1];
256
- var ready = imagesLoaded >= imagesCount && audioReady;
202
+ const [imagesLoaded, setImagesLoaded] = useState(0);
203
+ const ready = imagesLoaded >= imagesCount && audioReady;
257
204
  // const transitionsPlaying = current && ready;
258
- var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
259
- var scrollingDisabled = !isEdit && transitionDisabled || !current;
260
- var mediaShouldLoad = current || preload;
261
- var onImageLoaded = useCallback(function () {
262
- setImagesLoaded(function (count) {
263
- return count + 1;
264
- });
205
+ const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
206
+ const scrollingDisabled = !isEdit && transitionDisabled || !current;
207
+ const mediaShouldLoad = current || preload;
208
+ const onImageLoaded = useCallback(() => {
209
+ setImagesLoaded(count => count + 1);
265
210
  }, [setImagesLoaded]);
266
211
 
267
212
  // const {
@@ -275,15 +220,15 @@ function Timeline(_ref) {
275
220
  // const { width: firstLineWidth = null } = firstLineContentRect || {};
276
221
  // const { width: firstContentWidth = null } = firstContentRect || {};
277
222
 
278
- var _useDimensionObserver = useDimensionObserver(),
279
- firstLineRef = _useDimensionObserver.ref,
280
- _useDimensionObserver2 = _useDimensionObserver.width,
281
- firstLineWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
282
- var _useDimensionObserver3 = useDimensionObserver(),
283
- firstContentRef = _useDimensionObserver3.ref,
284
- _useDimensionObserver4 = _useDimensionObserver3.width,
285
- firstContentWidth = _useDimensionObserver4 === void 0 ? null : _useDimensionObserver4;
286
- var imageWidth = (firstContentWidth !== null && firstContentWidth !== void 0 ? firstContentWidth : 0) - (firstLineWidth !== null && firstLineWidth !== void 0 ? firstLineWidth : 0);
223
+ const {
224
+ ref: firstLineRef,
225
+ width: firstLineWidth = null
226
+ } = useDimensionObserver();
227
+ const {
228
+ ref: firstContentRef,
229
+ width: firstContentWidth = null
230
+ } = useDimensionObserver();
231
+ const imageWidth = (firstContentWidth ?? 0) - (firstLineWidth ?? 0);
287
232
 
288
233
  // const firstLineRef = useRef(null);
289
234
  // const firstContentRef = useRef(null);
@@ -305,33 +250,33 @@ function Timeline(_ref) {
305
250
  // console.log('legacyImageWidth', legacyImageWidth);
306
251
  // console.log('imageWidth', imageWidth);
307
252
 
308
- var timelineElements = (finalItems || []).map(function (item, itemI) {
309
- var _ref8 = item || {},
310
- _ref8$title = _ref8.title,
311
- itemTitle = _ref8$title === void 0 ? null : _ref8$title,
312
- _ref8$description = _ref8.description,
313
- description = _ref8$description === void 0 ? null : _ref8$description,
314
- _ref8$image = _ref8.image,
315
- image = _ref8$image === void 0 ? null : _ref8$image;
316
- var hasItemTitle = isTextFilled(itemTitle);
317
- var hasDescription = isTextFilled(description);
318
- var hasImage = image !== null;
319
- var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
320
- var titleIndex = elementsTypes.indexOf('title');
321
- var imageIndex = elementsTypes.indexOf('image');
253
+ const timelineElements = (finalItems || []).map((item, itemI) => {
254
+ const {
255
+ title: itemTitle = null,
256
+ description = null,
257
+ image: image_0 = null
258
+ } = item || {};
259
+ const hasItemTitle = isTextFilled(itemTitle);
260
+ const hasDescription = isTextFilled(description);
261
+ const hasImage = image_0 !== null;
262
+ const elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
263
+ const titleIndex = elementsTypes.indexOf('title');
264
+ const imageIndex = elementsTypes.indexOf('image');
322
265
  if (!illustrated) {
323
266
  elementsTypes.splice(imageIndex, 1);
324
267
  }
325
- var typesCount = elementsTypes.length;
326
- var _ref9 = itemTitle || {},
327
- titleTextStyle = _ref9.textStyle;
328
- var _ref0 = description || {},
329
- descriptionTextStyle = _ref0.textStyle;
268
+ const typesCount = elementsTypes.length;
269
+ const {
270
+ textStyle: titleTextStyle
271
+ } = itemTitle || {};
272
+ const {
273
+ textStyle: descriptionTextStyle
274
+ } = description || {};
330
275
  return /*#__PURE__*/jsx("div", {
331
276
  className: styles.item,
332
- children: elementsTypes.map(function (elementType, typeI) {
333
- var elementContent = null;
334
- var hasElement = false;
277
+ children: elementsTypes.map((elementType, typeI) => {
278
+ let elementContent = null;
279
+ let hasElement = false;
335
280
  switch (elementType) {
336
281
  case 'title':
337
282
  hasElement = hasItemTitle;
@@ -341,16 +286,17 @@ function Timeline(_ref) {
341
286
  placeholder: "title",
342
287
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
343
288
  id: "bmO4Ss",
344
- defaultMessage: [{
345
- "type": 0,
346
- "value": "Entry Title"
347
- }]
289
+ defaultMessage: "Entry Title"
348
290
  }),
349
291
  emptyClassName: styles.empty,
350
292
  isEmpty: !hasItemTitle,
351
- children: hasItemTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, itemTitle), {}, {
352
- textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
353
- })) : null
293
+ children: hasItemTitle ? /*#__PURE__*/jsx(Heading, {
294
+ ...itemTitle,
295
+ textStyle: {
296
+ ...(itemTitleStyle || null),
297
+ ...titleTextStyle
298
+ }
299
+ }) : null
354
300
  })
355
301
  });
356
302
  break;
@@ -362,10 +308,7 @@ function Timeline(_ref) {
362
308
  placeholder: "image",
363
309
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
364
310
  id: "ebsPd4",
365
- defaultMessage: [{
366
- "type": 0,
367
- "value": "Image"
368
- }]
311
+ defaultMessage: "Image"
369
312
  }),
370
313
  emptyClassName: styles.empty,
371
314
  isEmpty: !hasImage,
@@ -373,7 +316,7 @@ function Timeline(_ref) {
373
316
  className: styles.image,
374
317
  videoClassName: styles.video,
375
318
  loadingMode: "lazy",
376
- media: image,
319
+ media: image_0,
377
320
  width: imageWidth,
378
321
  resolution: resolution,
379
322
  playing: backgroundPlaying,
@@ -393,16 +336,17 @@ function Timeline(_ref) {
393
336
  placeholder: "text",
394
337
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
395
338
  id: "507VAi",
396
- defaultMessage: [{
397
- "type": 0,
398
- "value": "Description"
399
- }]
339
+ defaultMessage: "Description"
400
340
  }),
401
341
  emptyClassName: styles.empty,
402
342
  isEmpty: !hasDescription,
403
- children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
404
- textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
405
- })) : null
343
+ children: hasDescription ? /*#__PURE__*/jsx(Text, {
344
+ ...description,
345
+ textStyle: {
346
+ ...(itemDescriptionStyle || null),
347
+ ...descriptionTextStyle
348
+ }
349
+ }) : null
406
350
  })
407
351
  });
408
352
  break;
@@ -410,26 +354,39 @@ function Timeline(_ref) {
410
354
  elementContent = null;
411
355
  hasElement = false;
412
356
  }
413
- var firstItem = itemI === 0;
414
- var lastItem = itemI === itemsCount - 1;
415
- var lastType = typeI === typesCount - 1;
416
- var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
417
- var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
357
+ const firstItem = itemI === 0;
358
+ const lastItem = itemI === itemsCount - 1;
359
+ const lastType = typeI === typesCount - 1;
360
+ const topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
361
+ const bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
418
362
  return /*#__PURE__*/jsxs("div", {
419
- className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
363
+ className: classNames([styles.element, styles[`element-${elementType}`], {
364
+ [styles.hidden]: (isView || isStatic) && !hasElement
365
+ }]),
420
366
  ref: itemI === 0 ? firstContentRef : null,
421
367
  children: [!withoutLine ? /*#__PURE__*/jsxs("div", {
422
368
  className: styles.timeline,
423
369
  ref: itemI === 0 ? firstLineRef : null,
424
370
  children: [/*#__PURE__*/jsx("div", {
425
- className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
426
- style: _objectSpread({}, !topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
371
+ className: classNames([styles.line, {
372
+ [styles.hidden]: topLineHidden
373
+ }]),
374
+ style: {
375
+ ...(!topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
376
+ }
427
377
  }), elementType === 'title' ? /*#__PURE__*/jsx("div", {
428
378
  className: styles.bullet,
429
- style: _objectSpread(_objectSpread({}, getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
379
+ style: {
380
+ ...getStyleFromColor(bulletColor, 'borderColor'),
381
+ ...(bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
382
+ }
430
383
  }) : null, /*#__PURE__*/jsx("div", {
431
- className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
432
- style: _objectSpread({}, !bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
384
+ className: classNames([styles.line, {
385
+ [styles.hidden]: bottomLineHidden
386
+ }]),
387
+ style: {
388
+ ...(!bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
389
+ }
433
390
  })]
434
391
  }) : null, /*#__PURE__*/jsx("div", {
435
392
  className: styles.body,
@@ -438,49 +395,50 @@ function Timeline(_ref) {
438
395
  },
439
396
  children: elementContent
440
397
  })]
441
- }, "element-".concat(elementType));
398
+ }, `element-${elementType}`);
442
399
  })
443
- }, "item-".concat(itemI));
400
+ }, `item-${itemI}`);
444
401
  });
445
402
 
446
403
  // Call to Action
447
- var hasHeader = isHeaderFilled(header);
448
- var hasFooter = isFooterFilled(footer);
449
- var footerProps = getFooterProps(footer, {
450
- isView: isView,
451
- current: current,
452
- openWebView: openWebView,
453
- isPreview: isPreview
404
+ const hasHeader = isHeaderFilled(header);
405
+ const hasFooter = isFooterFilled(footer);
406
+ const footerProps = getFooterProps(footer, {
407
+ isView,
408
+ current,
409
+ openWebView,
410
+ isPreview
454
411
  });
455
- var _useState1 = useState(false),
456
- _useState10 = _slicedToArray(_useState1, 2),
457
- scrolledBottom = _useState10[0],
458
- setScrolledBottom = _useState10[1];
459
- var _useDimensionObserver5 = useDimensionObserver(),
460
- footerRef = _useDimensionObserver5.ref,
461
- _useDimensionObserver6 = _useDimensionObserver5.height,
462
- footerHeight = _useDimensionObserver6 === void 0 ? 0 : _useDimensionObserver6;
463
- var onScrolledBottom = useCallback(function (_ref12) {
464
- var initial = _ref12.initial;
465
- if (initial) {
412
+ const [scrolledBottom, setScrolledBottom] = useState(false);
413
+ const {
414
+ ref: footerRef,
415
+ height: footerHeight = 0
416
+ } = useDimensionObserver();
417
+ const onScrolledBottom = useCallback(({
418
+ initial: initial_0
419
+ }) => {
420
+ if (initial_0) {
466
421
  trackScreenEvent('scroll', 'Screen');
467
422
  }
468
423
  setScrolledBottom(true);
469
424
  }, [trackScreenEvent]);
470
- var onScrolledNotBottom = useCallback(function () {
425
+ const onScrolledNotBottom = useCallback(() => {
471
426
  setScrolledBottom(false);
472
427
  }, [setScrolledBottom]);
473
- var onScrolledTrigger = useCallback(function () {
474
- var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
428
+ const onScrolledTrigger = useCallback((trigger = null) => {
475
429
  if (trigger !== null) {
476
- var scrollPercent = Math.round(trigger * 100);
430
+ const scrollPercent = Math.round(trigger * 100);
477
431
  trackScreenEvent('scroll', scrollPercent, {
478
- scrollPercent: scrollPercent
432
+ scrollPercent
479
433
  });
480
434
  }
481
435
  }, [trackScreenEvent]);
482
436
  return /*#__PURE__*/jsxs("div", {
483
- className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
437
+ className: classNames([styles.container, className, {
438
+ [styles.isPlaceholder]: isPlaceholder,
439
+ [styles[`${bulletShape}BulletShape`]]: bulletShape !== null,
440
+ [styles.withoutLines]: itemsCount < 2
441
+ }]),
484
442
  "data-screen-ready": ready,
485
443
  children: [/*#__PURE__*/jsxs(Container, {
486
444
  width: width,
@@ -505,38 +463,43 @@ function Timeline(_ref) {
505
463
  style: {
506
464
  paddingBottom: spacing
507
465
  },
508
- children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
466
+ children: /*#__PURE__*/jsx(Header, {
467
+ ...header
468
+ })
509
469
  }) : null, /*#__PURE__*/jsx(ScreenElement, {
510
470
  placeholder: "Title",
511
471
  emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
512
472
  id: "BSTWf8",
513
- defaultMessage: [{
514
- "type": 0,
515
- "value": "Title"
516
- }]
473
+ defaultMessage: "Title"
517
474
  }),
518
475
  emptyClassName: classNames([styles.empty, styles.emptyTitle]),
519
476
  isEmpty: !hasTitle,
520
- children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
521
- className: styles.title
522
- }, title)) : null
477
+ children: hasTitle ? /*#__PURE__*/jsx(Heading, {
478
+ className: styles.title,
479
+ ...title
480
+ }) : null
523
481
  }), timelineElements]
524
482
  })
525
483
  }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
526
484
  ref: footerRef,
527
- className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
485
+ className: classNames([styles.callToAction, {
486
+ [styles.disabled]: !scrolledBottom
487
+ }]),
528
488
  style: {
529
- transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
489
+ transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
530
490
  paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
531
491
  paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
532
492
  paddingTop: spacing / 2,
533
493
  paddingBottom: spacing / 2
534
494
  },
535
- children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
495
+ children: /*#__PURE__*/jsx(Footer, {
496
+ ...footerProps
497
+ })
536
498
  }) : null]
537
- }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, _objectSpread(_objectSpread({}, finalAudioAlternative), {}, {
499
+ }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, {
500
+ ...finalAudioAlternative,
538
501
  paused: !audioPlaying,
539
- mediaRef: mediaRef,
502
+ mediaRef: mergeRefs(mediaRef, customMediaRef),
540
503
  muted: muted,
541
504
  className: styles.audio,
542
505
  shouldLoad: mediaShouldLoad,
@@ -548,7 +511,7 @@ function Timeline(_ref) {
548
511
  onDurationChange: onAudioDurationChange,
549
512
  onSeeked: onAudioSeeked,
550
513
  onEnded: onAudioEnded
551
- })) : null, !isPlaceholder ? /*#__PURE__*/jsx(Background, {
514
+ }) : null, !isPlaceholder ? /*#__PURE__*/jsx(Background, {
552
515
  background: background,
553
516
  width: width,
554
517
  height: height,
@@ -556,18 +519,37 @@ function Timeline(_ref) {
556
519
  playing: backgroundPlaying,
557
520
  muted: muted,
558
521
  shouldLoad: mediaShouldLoad,
559
- mediaRef: audioAlternativeMedia === null ? mediaRef : null,
522
+ mediaRef: audioAlternativeMedia === null ? mergeRefs(mediaRef, customMediaRef) : null,
560
523
  withoutVideo: isPreview,
561
524
  className: styles.background
562
525
  }) : null]
563
526
  });
564
527
  }
565
528
 
566
- function TimelineIllustratedScreen(_ref) {
567
- var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
568
- return /*#__PURE__*/jsx(Timeline, _objectSpread(_objectSpread({}, props), {}, {
569
- illustrated: true
570
- }));
529
+ function TimelineIllustratedScreen(t0) {
530
+ const $ = c(4);
531
+ let props;
532
+ if ($[0] !== t0) {
533
+ ({
534
+ ...props
535
+ } = t0);
536
+ $[0] = t0;
537
+ $[1] = props;
538
+ } else {
539
+ props = $[1];
540
+ }
541
+ let t1;
542
+ if ($[2] !== props) {
543
+ t1 = /*#__PURE__*/jsx(Timeline, {
544
+ ...props,
545
+ illustrated: true
546
+ });
547
+ $[2] = props;
548
+ $[3] = t1;
549
+ } else {
550
+ t1 = $[3];
551
+ }
552
+ return t1;
571
553
  }
572
554
 
573
555
  var definition = [{
@@ -576,19 +558,13 @@ var definition = [{
576
558
  group: {
577
559
  label: defineMessage({
578
560
  id: "cGItoy",
579
- defaultMessage: [{
580
- "type": 0,
581
- "value": "List"
582
- }]
561
+ defaultMessage: "List"
583
562
  }),
584
563
  order: 8
585
564
  },
586
565
  title: defineMessage({
587
566
  id: "GzoKNb",
588
- defaultMessage: [{
589
- "type": 0,
590
- "value": "Timeline"
591
- }]
567
+ defaultMessage: "Timeline"
592
568
  }),
593
569
  component: Timeline,
594
570
  layouts: ['normal'],
@@ -602,10 +578,7 @@ var definition = [{
602
578
  },
603
579
  label: defineMessage({
604
580
  id: "N25iDO",
605
- defaultMessage: [{
606
- "type": 0,
607
- "value": "Title"
608
- }]
581
+ defaultMessage: "Title"
609
582
  })
610
583
  }, {
611
584
  name: 'items',
@@ -620,10 +593,7 @@ var definition = [{
620
593
  },
621
594
  label: defineMessage({
622
595
  id: "3ifj0j",
623
- defaultMessage: [{
624
- "type": 0,
625
- "value": "Entries"
626
- }]
596
+ defaultMessage: "Entries"
627
597
  })
628
598
  }, {
629
599
  name: 'spacing',
@@ -632,19 +602,13 @@ var definition = [{
632
602
  isHorizontal: true,
633
603
  label: defineMessage({
634
604
  id: "Zpl5bJ",
635
- defaultMessage: [{
636
- "type": 0,
637
- "value": "Spacing"
638
- }]
605
+ defaultMessage: "Spacing"
639
606
  })
640
607
  }, {
641
608
  type: 'fields',
642
609
  label: defineMessage({
643
610
  id: "xac4z/",
644
- defaultMessage: [{
645
- "type": 0,
646
- "value": "Entry styles"
647
- }]
611
+ defaultMessage: "Entry styles"
648
612
  }),
649
613
  isList: true,
650
614
  fields: [{
@@ -652,20 +616,14 @@ var definition = [{
652
616
  type: 'text-style-form',
653
617
  label: defineMessage({
654
618
  id: "+AEVbJ",
655
- defaultMessage: [{
656
- "type": 0,
657
- "value": "Title"
658
- }]
619
+ defaultMessage: "Title"
659
620
  })
660
621
  }, {
661
622
  name: 'itemDescriptionStyle',
662
623
  type: 'text-style-form',
663
624
  label: defineMessage({
664
625
  id: "ZCe0r4",
665
- defaultMessage: [{
666
- "type": 0,
667
- "value": "Description"
668
- }]
626
+ defaultMessage: "Description"
669
627
  })
670
628
  }, {
671
629
  name: 'itemBottomSpacing',
@@ -674,10 +632,7 @@ var definition = [{
674
632
  isHorizontal: true,
675
633
  label: defineMessage({
676
634
  id: "Lp0bG4",
677
- defaultMessage: [{
678
- "type": 0,
679
- "value": "Bottom spacing"
680
- }]
635
+ defaultMessage: "Bottom spacing"
681
636
  })
682
637
  }]
683
638
  }, {
@@ -688,27 +643,18 @@ var definition = [{
688
643
  value: 'circle',
689
644
  label: defineMessage({
690
645
  id: "+uInZz",
691
- defaultMessage: [{
692
- "type": 0,
693
- "value": "Circle"
694
- }]
646
+ defaultMessage: "Circle"
695
647
  })
696
648
  }, {
697
649
  value: 'square',
698
650
  label: defineMessage({
699
651
  id: "fusnxf",
700
- defaultMessage: [{
701
- "type": 0,
702
- "value": "Square"
703
- }]
652
+ defaultMessage: "Square"
704
653
  })
705
654
  }],
706
655
  label: defineMessage({
707
656
  id: "twTaAZ",
708
- defaultMessage: [{
709
- "type": 0,
710
- "value": "Bullet shape"
711
- }]
657
+ defaultMessage: "Bullet shape"
712
658
  })
713
659
  }, {
714
660
  name: 'withoutLine',
@@ -716,10 +662,7 @@ var definition = [{
716
662
  defaultValue: false,
717
663
  label: defineMessage({
718
664
  id: "N4lZhy",
719
- defaultMessage: [{
720
- "type": 0,
721
- "value": "Without line"
722
- }]
665
+ defaultMessage: "Without line"
723
666
  })
724
667
  }, {
725
668
  name: 'bulletFilled',
@@ -727,10 +670,7 @@ var definition = [{
727
670
  defaultValue: false,
728
671
  label: defineMessage({
729
672
  id: "YWcp4v",
730
- defaultMessage: [{
731
- "type": 0,
732
- "value": "Bullet filled"
733
- }]
673
+ defaultMessage: "Bullet filled"
734
674
  })
735
675
  }, {
736
676
  name: 'bulletColor',
@@ -741,10 +681,7 @@ var definition = [{
741
681
  },
742
682
  label: defineMessage({
743
683
  id: "uNpHnA",
744
- defaultMessage: [{
745
- "type": 0,
746
- "value": "Bullet color"
747
- }]
684
+ defaultMessage: "Bullet color"
748
685
  })
749
686
  }, {
750
687
  name: 'lineColor',
@@ -755,40 +692,28 @@ var definition = [{
755
692
  },
756
693
  label: defineMessage({
757
694
  id: "RHMS2f",
758
- defaultMessage: [{
759
- "type": 0,
760
- "value": "Line color"
761
- }]
695
+ defaultMessage: "Line color"
762
696
  })
763
697
  }, {
764
698
  name: 'alternatives',
765
699
  type: 'alternatives',
766
700
  label: defineMessage({
767
701
  id: "68NE9W",
768
- defaultMessage: [{
769
- "type": 0,
770
- "value": "Alternatives"
771
- }]
702
+ defaultMessage: "Alternatives"
772
703
  })
773
704
  }, {
774
705
  name: 'background',
775
706
  type: 'background',
776
707
  label: defineMessage({
777
708
  id: "+MPZRu",
778
- defaultMessage: [{
779
- "type": 0,
780
- "value": "Background"
781
- }]
709
+ defaultMessage: "Background"
782
710
  })
783
711
  }, {
784
712
  name: 'header',
785
713
  type: 'header',
786
714
  label: defineMessage({
787
715
  id: "rhuDxI",
788
- defaultMessage: [{
789
- "type": 0,
790
- "value": "Header"
791
- }]
716
+ defaultMessage: "Header"
792
717
  }),
793
718
  theme: {
794
719
  badge: {
@@ -803,10 +728,7 @@ var definition = [{
803
728
  type: 'footer',
804
729
  label: defineMessage({
805
730
  id: "g4nybp",
806
- defaultMessage: [{
807
- "type": 0,
808
- "value": "Footer"
809
- }]
731
+ defaultMessage: "Footer"
810
732
  }),
811
733
  theme: {
812
734
  callToAction: {
@@ -823,19 +745,13 @@ var definition = [{
823
745
  group: {
824
746
  label: defineMessage({
825
747
  id: "cGItoy",
826
- defaultMessage: [{
827
- "type": 0,
828
- "value": "List"
829
- }]
748
+ defaultMessage: "List"
830
749
  }),
831
750
  order: 8
832
751
  },
833
752
  title: defineMessage({
834
753
  id: "33UbSd",
835
- defaultMessage: [{
836
- "type": 0,
837
- "value": "Timeline with images"
838
- }]
754
+ defaultMessage: "Timeline with images"
839
755
  }),
840
756
  component: TimelineIllustratedScreen,
841
757
  layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
@@ -848,10 +764,7 @@ var definition = [{
848
764
  },
849
765
  label: defineMessage({
850
766
  id: "N25iDO",
851
- defaultMessage: [{
852
- "type": 0,
853
- "value": "Title"
854
- }]
767
+ defaultMessage: "Title"
855
768
  })
856
769
  }, {
857
770
  name: 'layout',
@@ -859,10 +772,7 @@ var definition = [{
859
772
  defaultValue: 'title-image-description',
860
773
  label: defineMessage({
861
774
  id: "4iBXj2",
862
- defaultMessage: [{
863
- "type": 0,
864
- "value": "Layout"
865
- }]
775
+ defaultMessage: "Layout"
866
776
  })
867
777
  }, {
868
778
  name: 'items',
@@ -877,10 +787,7 @@ var definition = [{
877
787
  },
878
788
  label: defineMessage({
879
789
  id: "3ifj0j",
880
- defaultMessage: [{
881
- "type": 0,
882
- "value": "Entries"
883
- }]
790
+ defaultMessage: "Entries"
884
791
  })
885
792
  }, {
886
793
  name: 'spacing',
@@ -889,19 +796,13 @@ var definition = [{
889
796
  isHorizontal: true,
890
797
  label: defineMessage({
891
798
  id: "Zpl5bJ",
892
- defaultMessage: [{
893
- "type": 0,
894
- "value": "Spacing"
895
- }]
799
+ defaultMessage: "Spacing"
896
800
  })
897
801
  }, {
898
802
  type: 'fields',
899
803
  label: defineMessage({
900
804
  id: "xac4z/",
901
- defaultMessage: [{
902
- "type": 0,
903
- "value": "Entry styles"
904
- }]
805
+ defaultMessage: "Entry styles"
905
806
  }),
906
807
  isList: true,
907
808
  fields: [{
@@ -909,20 +810,14 @@ var definition = [{
909
810
  type: 'text-style-form',
910
811
  label: defineMessage({
911
812
  id: "+AEVbJ",
912
- defaultMessage: [{
913
- "type": 0,
914
- "value": "Title"
915
- }]
813
+ defaultMessage: "Title"
916
814
  })
917
815
  }, {
918
816
  name: 'itemDescriptionStyle',
919
817
  type: 'text-style-form',
920
818
  label: defineMessage({
921
819
  id: "ZCe0r4",
922
- defaultMessage: [{
923
- "type": 0,
924
- "value": "Description"
925
- }]
820
+ defaultMessage: "Description"
926
821
  })
927
822
  }, {
928
823
  name: 'itemBottomSpacing',
@@ -931,10 +826,7 @@ var definition = [{
931
826
  isHorizontal: true,
932
827
  label: defineMessage({
933
828
  id: "Lp0bG4",
934
- defaultMessage: [{
935
- "type": 0,
936
- "value": "Bottom spacing"
937
- }]
829
+ defaultMessage: "Bottom spacing"
938
830
  })
939
831
  }]
940
832
  }, {
@@ -943,10 +835,7 @@ var definition = [{
943
835
  defaultValue: false,
944
836
  label: defineMessage({
945
837
  id: "N4lZhy",
946
- defaultMessage: [{
947
- "type": 0,
948
- "value": "Without line"
949
- }]
838
+ defaultMessage: "Without line"
950
839
  })
951
840
  }, {
952
841
  name: 'bulletShape',
@@ -956,27 +845,18 @@ var definition = [{
956
845
  value: 'circle',
957
846
  label: defineMessage({
958
847
  id: "+uInZz",
959
- defaultMessage: [{
960
- "type": 0,
961
- "value": "Circle"
962
- }]
848
+ defaultMessage: "Circle"
963
849
  })
964
850
  }, {
965
851
  value: 'square',
966
852
  label: defineMessage({
967
853
  id: "fusnxf",
968
- defaultMessage: [{
969
- "type": 0,
970
- "value": "Square"
971
- }]
854
+ defaultMessage: "Square"
972
855
  })
973
856
  }],
974
857
  label: defineMessage({
975
858
  id: "twTaAZ",
976
- defaultMessage: [{
977
- "type": 0,
978
- "value": "Bullet shape"
979
- }]
859
+ defaultMessage: "Bullet shape"
980
860
  })
981
861
  }, {
982
862
  name: 'bulletFilled',
@@ -984,10 +864,7 @@ var definition = [{
984
864
  defaultValue: false,
985
865
  label: defineMessage({
986
866
  id: "YWcp4v",
987
- defaultMessage: [{
988
- "type": 0,
989
- "value": "Bullet filled"
990
- }]
867
+ defaultMessage: "Bullet filled"
991
868
  })
992
869
  }, {
993
870
  name: 'bulletColor',
@@ -998,10 +875,7 @@ var definition = [{
998
875
  },
999
876
  label: defineMessage({
1000
877
  id: "uNpHnA",
1001
- defaultMessage: [{
1002
- "type": 0,
1003
- "value": "Bullet color"
1004
- }]
878
+ defaultMessage: "Bullet color"
1005
879
  })
1006
880
  }, {
1007
881
  name: 'lineColor',
@@ -1012,40 +886,28 @@ var definition = [{
1012
886
  },
1013
887
  label: defineMessage({
1014
888
  id: "RHMS2f",
1015
- defaultMessage: [{
1016
- "type": 0,
1017
- "value": "Line color"
1018
- }]
889
+ defaultMessage: "Line color"
1019
890
  })
1020
891
  }, {
1021
892
  name: 'alternatives',
1022
893
  type: 'alternatives',
1023
894
  label: defineMessage({
1024
895
  id: "68NE9W",
1025
- defaultMessage: [{
1026
- "type": 0,
1027
- "value": "Alternatives"
1028
- }]
896
+ defaultMessage: "Alternatives"
1029
897
  })
1030
898
  }, {
1031
899
  name: 'background',
1032
900
  type: 'background',
1033
901
  label: defineMessage({
1034
902
  id: "+MPZRu",
1035
- defaultMessage: [{
1036
- "type": 0,
1037
- "value": "Background"
1038
- }]
903
+ defaultMessage: "Background"
1039
904
  })
1040
905
  }, {
1041
906
  name: 'header',
1042
907
  type: 'header',
1043
908
  label: defineMessage({
1044
909
  id: "rhuDxI",
1045
- defaultMessage: [{
1046
- "type": 0,
1047
- "value": "Header"
1048
- }]
910
+ defaultMessage: "Header"
1049
911
  }),
1050
912
  theme: {
1051
913
  badge: {
@@ -1060,10 +922,7 @@ var definition = [{
1060
922
  type: 'footer',
1061
923
  label: defineMessage({
1062
924
  id: "g4nybp",
1063
- defaultMessage: [{
1064
- "type": 0,
1065
- "value": "Footer"
1066
- }]
925
+ defaultMessage: "Footer"
1067
926
  }),
1068
927
  theme: {
1069
928
  callToAction: {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-timeline",
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,26 +53,26 @@
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-scroll": "^0.4.69",
72
- "@micromag/element-text": "^0.4.69",
73
- "@micromag/element-visual": "^0.4.70",
74
- "@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-scroll": "^0.4.74",
73
+ "@micromag/element-text": "^0.4.74",
74
+ "@micromag/element-visual": "^0.4.74",
75
+ "@micromag/transforms": "^0.4.74",
75
76
  "classnames": "^2.2.6",
76
77
  "lodash": "^4.17.23",
77
78
  "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
81
82
  "access": "public",
82
83
  "registry": "https://registry.npmjs.org/"
83
84
  },
84
- "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
85
+ "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
85
86
  "types": "es/index.d.ts"
86
87
  }