@micromag/screen-timeline 0.4.71 → 0.4.74

package/es/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ForwardedRef } from 'react';
-import { HeadingElement, TextElement, TextStyle, Color, Header, Footer, BackgroundElement, Alternatives } from '@micromag/core';
+import { HeadingElement, TextElement, TextStyle, Color, Header, Footer, BackgroundElement, Alternatives, MediaElement } from '@micromag/core';
 
 interface TimelineProps {
     layout?: 'normal' | 'title-description-image' | 'title-image-description' | 'image-title-description';
@@ -23,7 +23,7 @@ interface TimelineProps {
     active?: boolean;
     preload?: boolean;
     type?: string | null;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 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;

package/es/index.js

@@ -1,13 +1,9 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import classNames from 'classnames';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { ScreenElement } from '@micromag/core/components';
-import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerContainer } from '@micromag/core/contexts';
-import { useTrackScreenEvent, useActivityDetector, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
+import { useScreenSize, useViewerContext, useViewerWebView, useScreenRenderContext, usePlaybackContext, usePlaybackMediaRef, useViewerActivityDetected } from '@micromag/core/contexts';
+import { useTrackScreenEvent, useDebounce, useTrackScreenMedia, useDimensionObserver } from '@micromag/core/hooks';
 import { isTextFilled, getStyleFromColor, isHeaderFilled, isFooterFilled, getFooterProps, mergeRefs } from '@micromag/core/utils';
 import Audio from '@micromag/element-audio';
 import Background from '@micromag/element-background';
@@ -20,154 +16,122 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
+import { c } from 'react/compiler-runtime';
 
 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"};
 
-var emptyItems = [null];
-function Timeline(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'normal' : _ref$layout,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$items = _ref.items,
-    items = _ref$items === void 0 ? emptyItems : _ref$items,
-    _ref$itemTitleStyle = _ref.itemTitleStyle,
-    itemTitleStyle = _ref$itemTitleStyle === void 0 ? null : _ref$itemTitleStyle,
-    _ref$itemDescriptionS = _ref.itemDescriptionStyle,
-    itemDescriptionStyle = _ref$itemDescriptionS === void 0 ? null : _ref$itemDescriptionS,
-    _ref$withoutLine = _ref.withoutLine,
-    withoutLine = _ref$withoutLine === void 0 ? false : _ref$withoutLine,
-    _ref$bulletColor = _ref.bulletColor,
-    bulletColor = _ref$bulletColor === void 0 ? null : _ref$bulletColor,
-    _ref$lineColor = _ref.lineColor,
-    lineColor = _ref$lineColor === void 0 ? null : _ref$lineColor,
-    _ref$bulletShape = _ref.bulletShape,
-    bulletShape = _ref$bulletShape === void 0 ? 'circle' : _ref$bulletShape,
-    _ref$bulletFilled = _ref.bulletFilled,
-    bulletFilled = _ref$bulletFilled === void 0 ? true : _ref$bulletFilled,
-    _ref$illustrated = _ref.illustrated,
-    illustrated = _ref$illustrated === void 0 ? false : _ref$illustrated,
-    _ref$spacing = _ref.spacing,
-    initialSpacing = _ref$spacing === void 0 ? null : _ref$spacing,
-    _ref$itemBottomSpacin = _ref.itemBottomSpacing,
-    initialItemBottomSpacing = _ref$itemBottomSpacin === void 0 ? null : _ref$itemBottomSpacin,
-    _ref$header = _ref.header,
-    header = _ref$header === void 0 ? null : _ref$header,
-    _ref$footer = _ref.footer,
-    footer = _ref$footer === void 0 ? null : _ref$footer,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$alternatives = _ref.alternatives,
-    alternatives = _ref$alternatives === void 0 ? null : _ref$alternatives,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? true : _ref$active,
-    _ref$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var trackScreenEvent = useTrackScreenEvent(type);
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    imageResolution = _useScreenSize.imageResolution,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted,
-    playing = _usePlaybackContext.playing,
-    setControls = _usePlaybackContext.setControls;
-    _usePlaybackContext.setControlsSuggestPlay;
-    var setControlsTheme = _usePlaybackContext.setControlsTheme,
-    setPlaying = _usePlaybackContext.setPlaying;
-    _usePlaybackContext.controlsVisible;
-    var showControls = _usePlaybackContext.showControls,
-    hideControls = _usePlaybackContext.hideControls;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var _ref2 = alternatives || {},
-    _ref2$audio = _ref2.audio,
-    audioAlternative = _ref2$audio === void 0 ? null : _ref2$audio;
-  var _ref3 = audioAlternative || {},
-    _ref3$autoPlay = _ref3.autoPlay,
-    autoPlay = _ref3$autoPlay === void 0 ? false : _ref3$autoPlay,
-    _ref3$loop = _ref3.loop,
-    loop = _ref3$loop === void 0 ? false : _ref3$loop,
-    _ref3$media = _ref3.media,
-    audioAlternativeMedia = _ref3$media === void 0 ? null : _ref3$media,
-    _ref3$withSeekBar = _ref3.withSeekBar,
-    withSeekBar = _ref3$withSeekBar === void 0 ? false : _ref3$withSeekBar,
-    _ref3$withControls = _ref3.withControls,
-    withControls = _ref3$withControls === void 0 ? false : _ref3$withControls,
-    _ref3$color = _ref3.color,
-    color = _ref3$color === void 0 ? null : _ref3$color,
-    _ref3$progressColor = _ref3.progressColor,
-    progressColor = _ref3$progressColor === void 0 ? null : _ref3$progressColor;
-  var finalAudioAlternative = useMemo(function () {
-    return audioAlternative !== null ? _objectSpread(_objectSpread({}, audioAlternative), {}, {
-      autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
-    }) : null;
-  }, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasPlayed = _useState2[0],
-    setHasPlayed = _useState2[1];
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
-  useEffect(function () {
+const emptyItems = [null];
+function Timeline({
+  layout = 'normal',
+  title = null,
+  items = emptyItems,
+  itemTitleStyle = null,
+  itemDescriptionStyle = null,
+  withoutLine = false,
+  bulletColor = null,
+  lineColor = null,
+  bulletShape = 'circle',
+  bulletFilled = true,
+  illustrated = false,
+  spacing: initialSpacing = null,
+  itemBottomSpacing: initialItemBottomSpacing = null,
+  header = null,
+  footer = null,
+  background = null,
+  alternatives = null,
+  current = true,
+  active = true,
+  preload = true,
+  // transitions,
+  // transitionStagger,
+  type = null,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const {
+    width,
+    height,
+    imageResolution,
+    resolution
+  } = useScreenSize();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    muted,
+    playing,
+    setControls,
+    setControlsSuggestPlay: _setControlsSuggestPlay,
+    setControlsTheme,
+    setPlaying,
+    controlsVisible: _controlsVisible,
+    showControls,
+    hideControls
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current);
+  const {
+    audio: audioAlternative = null
+  } = alternatives || {};
+  const {
+    autoPlay = false,
+    loop = false,
+    media: audioAlternativeMedia = null,
+    withSeekBar = false,
+    withControls = false,
+    color = null,
+    progressColor = null
+  } = audioAlternative || {};
+  const finalAudioAlternative = useMemo(() => audioAlternative !== null ? {
+    ...audioAlternative,
+    autoPlay: !isPreview && !isStatic && !isCapture && autoPlay && current
+  } : null, [audioAlternative, isPreview, isStatic, isCapture, autoPlay, current]);
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const audioPlaying = current && (isView || isEdit) && playing && (isCurrentMedia || !isView);
+  useEffect(() => {
     if (!current) {
-      return function () {};
+      return () => {};
     }
     setControlsTheme({
       seekBarOnly: withSeekBar && !withControls,
-      color: color,
-      progressColor: progressColor
+      color,
+      progressColor
     });
     if (withControls || withSeekBar) {
       setControls(true);
     } else {
       setControls(false);
     }
-    return function () {
+    return () => {
       if (withControls || withSeekBar) {
         setControls(false);
       }
     };
   }, [current, withControls, setControls, withSeekBar, color, progressColor]);
-  useEffect(function () {
+  useEffect(() => {
     if (current && autoPlay) {
       setPlaying(true);
     }
   }, [current, autoPlay]);
-  var viewerContainer = useViewerContainer();
-  var _useActivityDetector = useActivityDetector({
-      element: viewerContainer,
-      disabled: !isView,
-      timeout: 2000
-    }),
-    activityDetected = _useActivityDetector.detected;
-  var toggleControlsVisibility = useCallback(function () {
+  const activityDetected = useViewerActivityDetected();
+  const toggleControlsVisibility = useCallback(() => {
     if (activityDetected) {
       showControls();
     } else {
@@ -175,95 +139,74 @@ function Timeline(_ref) {
     }
   }, [activityDetected, showControls, hideControls]);
   useDebounce(toggleControlsVisibility, activityDetected, 1000);
-  var trackScreenMedia = useTrackScreenMedia('video');
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2);
-    _useState4[0];
-    var setCurrentTime = _useState4[1];
-  var _useState5 = useState(null),
-    _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
-  var _useState7 = useState(audioAlternativeMedia === null),
-    _useState8 = _slicedToArray(_useState7, 2),
-    audioReady = _useState8[0],
-    setAudioReady = _useState8[1];
-  var onAudioReady = useCallback(function () {
+  const trackScreenMedia = useTrackScreenMedia('video');
+  const [_currentTime, setCurrentTime] = useState(null);
+  const [duration, setDuration] = useState(null);
+  const [audioReady, setAudioReady] = useState(audioAlternativeMedia === null);
+  const onAudioReady = useCallback(() => {
     setAudioReady(true);
   }, [setAudioReady]);
-  var onAudioTimeUpdate = useCallback(function () {
-    var time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const onAudioTimeUpdate = useCallback((time = null) => {
     if (time !== null && typeof time.currentTarget !== 'undefined') {
-      var _ref4 = time.currentTarget || {},
-        _ref4$currentTime = _ref4.currentTime,
-        targetTime = _ref4$currentTime === void 0 ? 0 : _ref4$currentTime;
+      const {
+        currentTime: targetTime = 0
+      } = time.currentTarget || {};
       setCurrentTime(targetTime);
     } else {
       setCurrentTime(0);
     }
   }, [duration, setCurrentTime]);
-  var onAudioProgressStep = useCallback(function (step, meta) {
-    trackScreenMedia(audioAlternativeMedia, "progress_".concat(Math.round(step * 100, 10), "%"), meta);
+  const onAudioProgressStep = useCallback((step, meta) => {
+    trackScreenMedia(audioAlternativeMedia, `progress_${Math.round(step * 100, 10)}%`, meta);
   }, [trackScreenMedia, audioAlternativeMedia]);
-  var onAudioDurationChange = useCallback(function (dur) {
+  const onAudioDurationChange = useCallback(dur => {
     setDuration(dur);
   }, [setDuration]);
-  var onAudioPlay = useCallback(function (_ref5) {
-    var initial = _ref5.initial;
+  const onAudioPlay = useCallback(({
+    initial
+  }) => {
     if (!hasPlayed) {
       setHasPlayed(true);
     }
     trackScreenMedia(audioAlternativeMedia, initial ? 'play' : 'resume');
   }, [trackScreenMedia, audioAlternativeMedia]);
-  var onAudioPause = useCallback(function (_ref6) {
-    var midway = _ref6.midway;
+  const onAudioPause = useCallback(({
+    midway
+  }) => {
     trackScreenMedia(audioAlternativeMedia, midway ? 'pause' : 'ended');
   }, [trackScreenMedia, audioAlternativeMedia]);
-  var onAudioSeeked = useCallback(function (time) {
-    if (time > 0) {
+  const onAudioSeeked = useCallback(time_0 => {
+    if (time_0 > 0) {
       trackScreenMedia(audioAlternativeMedia, 'seek', {
-        currentTime: time
+        currentTime: time_0
       });
     }
   }, [trackScreenMedia, audioAlternativeMedia]);
-  var onAudioEnded = useCallback(function () {
+  const onAudioEnded = useCallback(() => {
     if (current && !loop) {
       setPlaying(false);
     }
   }, [loop, current]);
-  var finalItems = useMemo(function () {
-    return isPlaceholder ? _toConsumableArray(new Array(5)).map(function () {
-      return {};
-    }) : items || [null];
-  }, [isPlaceholder, items]);
-  var hasTitle = isTextFilled(title);
-  var spacing = useMemo(function () {
-    return initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
-  }, [initialSpacing]);
-  var itemBottomSpacing = useMemo(function () {
-    return isPlaceholder ? 4 : initialItemBottomSpacing !== null ? Math.max(0, initialItemBottomSpacing || 0) : 20;
-  }, [isPlaceholder, initialItemBottomSpacing]);
-  var itemsCount = finalItems !== null ? finalItems.length : 0;
-  var hasItems = finalItems !== null && itemsCount;
-  var imagesCount = hasItems ? finalItems.reduce(function (acc, curr) {
-    var _ref7 = curr || {},
-      _ref7$image = _ref7.image,
-      image = _ref7$image === void 0 ? null : _ref7$image;
+  const finalItems = useMemo(() => isPlaceholder ? [...new Array(5)].map(() => ({})) : items || [null], [isPlaceholder, items]);
+  const hasTitle = isTextFilled(title);
+  const spacing = useMemo(() => initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20, [initialSpacing]);
+  const itemBottomSpacing = useMemo(() => isPlaceholder ? 4 : initialItemBottomSpacing !== null ? Math.max(0, initialItemBottomSpacing || 0) : 20, [isPlaceholder, initialItemBottomSpacing]);
+  const itemsCount = finalItems !== null ? finalItems.length : 0;
+  const hasItems = finalItems !== null && itemsCount;
+  const imagesCount = hasItems ? finalItems.reduce((acc, curr) => {
+    const {
+      image = null
+    } = curr || {};
     return acc + (image !== null ? 1 : 0);
   }, 0) : 0;
-  var _useState9 = useState(0),
-    _useState0 = _slicedToArray(_useState9, 2),
-    imagesLoaded = _useState0[0],
-    setImagesLoaded = _useState0[1];
-  var ready = imagesLoaded >= imagesCount && audioReady;
+  const [imagesLoaded, setImagesLoaded] = useState(0);
+  const ready = imagesLoaded >= imagesCount && audioReady;
   // const transitionsPlaying = current && ready;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var mediaShouldLoad = current || preload;
-  var onImageLoaded = useCallback(function () {
-    setImagesLoaded(function (count) {
-      return count + 1;
-    });
+  const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  const scrollingDisabled = !isEdit && transitionDisabled || !current;
+  const mediaShouldLoad = current || preload;
+  const onImageLoaded = useCallback(() => {
+    setImagesLoaded(count => count + 1);
   }, [setImagesLoaded]);
 
   // const {
@@ -277,15 +220,15 @@ function Timeline(_ref) {
   // const { width: firstLineWidth = null } = firstLineContentRect || {};
   // const { width: firstContentWidth = null } = firstContentRect || {};
 
-  var _useDimensionObserver = useDimensionObserver(),
-    firstLineRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    firstLineWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2;
-  var _useDimensionObserver3 = useDimensionObserver(),
-    firstContentRef = _useDimensionObserver3.ref,
-    _useDimensionObserver4 = _useDimensionObserver3.width,
-    firstContentWidth = _useDimensionObserver4 === void 0 ? null : _useDimensionObserver4;
-  var imageWidth = (firstContentWidth !== null && firstContentWidth !== void 0 ? firstContentWidth : 0) - (firstLineWidth !== null && firstLineWidth !== void 0 ? firstLineWidth : 0);
+  const {
+    ref: firstLineRef,
+    width: firstLineWidth = null
+  } = useDimensionObserver();
+  const {
+    ref: firstContentRef,
+    width: firstContentWidth = null
+  } = useDimensionObserver();
+  const imageWidth = (firstContentWidth ?? 0) - (firstLineWidth ?? 0);
 
   // const firstLineRef = useRef(null);
   // const firstContentRef = useRef(null);
@@ -307,33 +250,33 @@ function Timeline(_ref) {
   // console.log('legacyImageWidth', legacyImageWidth);
   // console.log('imageWidth', imageWidth);
 
-  var timelineElements = (finalItems || []).map(function (item, itemI) {
-    var _ref8 = item || {},
-      _ref8$title = _ref8.title,
-      itemTitle = _ref8$title === void 0 ? null : _ref8$title,
-      _ref8$description = _ref8.description,
-      description = _ref8$description === void 0 ? null : _ref8$description,
-      _ref8$image = _ref8.image,
-      image = _ref8$image === void 0 ? null : _ref8$image;
-    var hasItemTitle = isTextFilled(itemTitle);
-    var hasDescription = isTextFilled(description);
-    var hasImage = image !== null;
-    var elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
-    var titleIndex = elementsTypes.indexOf('title');
-    var imageIndex = elementsTypes.indexOf('image');
+  const timelineElements = (finalItems || []).map((item, itemI) => {
+    const {
+      title: itemTitle = null,
+      description = null,
+      image: image_0 = null
+    } = item || {};
+    const hasItemTitle = isTextFilled(itemTitle);
+    const hasDescription = isTextFilled(description);
+    const hasImage = image_0 !== null;
+    const elementsTypes = (layout === 'normal' ? 'title-description-image' : layout).split('-');
+    const titleIndex = elementsTypes.indexOf('title');
+    const imageIndex = elementsTypes.indexOf('image');
     if (!illustrated) {
       elementsTypes.splice(imageIndex, 1);
     }
-    var typesCount = elementsTypes.length;
-    var _ref9 = itemTitle || {},
-      titleTextStyle = _ref9.textStyle;
-    var _ref0 = description || {},
-      descriptionTextStyle = _ref0.textStyle;
+    const typesCount = elementsTypes.length;
+    const {
+      textStyle: titleTextStyle
+    } = itemTitle || {};
+    const {
+      textStyle: descriptionTextStyle
+    } = description || {};
     return /*#__PURE__*/jsx("div", {
       className: styles.item,
-      children: elementsTypes.map(function (elementType, typeI) {
-        var elementContent = null;
-        var hasElement = false;
+      children: elementsTypes.map((elementType, typeI) => {
+        let elementContent = null;
+        let hasElement = false;
         switch (elementType) {
           case 'title':
             hasElement = hasItemTitle;
@@ -343,16 +286,17 @@ function Timeline(_ref) {
                 placeholder: "title",
                 emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
                   id: "bmO4Ss",
-                  defaultMessage: [{
-                    "type": 0,
-                    "value": "Entry Title"
-                  }]
+                  defaultMessage: "Entry Title"
                 }),
                 emptyClassName: styles.empty,
                 isEmpty: !hasItemTitle,
-                children: hasItemTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, itemTitle), {}, {
-                  textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
-                })) : null
+                children: hasItemTitle ? /*#__PURE__*/jsx(Heading, {
+                  ...itemTitle,
+                  textStyle: {
+                    ...(itemTitleStyle || null),
+                    ...titleTextStyle
+                  }
+                }) : null
               })
             });
             break;
@@ -364,10 +308,7 @@ function Timeline(_ref) {
                 placeholder: "image",
                 emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
                   id: "ebsPd4",
-                  defaultMessage: [{
-                    "type": 0,
-                    "value": "Image"
-                  }]
+                  defaultMessage: "Image"
                 }),
                 emptyClassName: styles.empty,
                 isEmpty: !hasImage,
@@ -375,7 +316,7 @@ function Timeline(_ref) {
                   className: styles.image,
                   videoClassName: styles.video,
                   loadingMode: "lazy",
-                  media: image,
+                  media: image_0,
                   width: imageWidth,
                   resolution: resolution,
                   playing: backgroundPlaying,
@@ -395,16 +336,17 @@ function Timeline(_ref) {
                 placeholder: "text",
                 emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
                   id: "507VAi",
-                  defaultMessage: [{
-                    "type": 0,
-                    "value": "Description"
-                  }]
+                  defaultMessage: "Description"
                 }),
                 emptyClassName: styles.empty,
                 isEmpty: !hasDescription,
-                children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, description), {}, {
-                  textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
-                })) : null
+                children: hasDescription ? /*#__PURE__*/jsx(Text, {
+                  ...description,
+                  textStyle: {
+                    ...(itemDescriptionStyle || null),
+                    ...descriptionTextStyle
+                  }
+                }) : null
               })
             });
             break;
@@ -412,26 +354,39 @@ function Timeline(_ref) {
             elementContent = null;
             hasElement = false;
         }
-        var firstItem = itemI === 0;
-        var lastItem = itemI === itemsCount - 1;
-        var lastType = typeI === typesCount - 1;
-        var topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
-        var bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
+        const firstItem = itemI === 0;
+        const lastItem = itemI === itemsCount - 1;
+        const lastType = typeI === typesCount - 1;
+        const topLineHidden = firstItem && typeI <= titleIndex || lastItem && typeI > titleIndex;
+        const bottomLineHidden = firstItem && typeI < titleIndex || lastItem && typeI >= titleIndex;
         return /*#__PURE__*/jsxs("div", {
-          className: classNames([styles.element, styles["element-".concat(elementType)], _defineProperty({}, styles.hidden, (isView || isStatic) && !hasElement)]),
+          className: classNames([styles.element, styles[`element-${elementType}`], {
+            [styles.hidden]: (isView || isStatic) && !hasElement
+          }]),
           ref: itemI === 0 ? firstContentRef : null,
           children: [!withoutLine ? /*#__PURE__*/jsxs("div", {
             className: styles.timeline,
             ref: itemI === 0 ? firstLineRef : null,
             children: [/*#__PURE__*/jsx("div", {
-              className: classNames([styles.line, _defineProperty({}, styles.hidden, topLineHidden)]),
-              style: _objectSpread({}, !topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+              className: classNames([styles.line, {
+                [styles.hidden]: topLineHidden
+              }]),
+              style: {
+                ...(!topLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+              }
             }), elementType === 'title' ? /*#__PURE__*/jsx("div", {
               className: styles.bullet,
-              style: _objectSpread(_objectSpread({}, getStyleFromColor(bulletColor, 'borderColor')), bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
+              style: {
+                ...getStyleFromColor(bulletColor, 'borderColor'),
+                ...(bulletFilled ? getStyleFromColor(bulletColor, 'backgroundColor') : null)
+              }
             }) : null, /*#__PURE__*/jsx("div", {
-              className: classNames([styles.line, _defineProperty({}, styles.hidden, bottomLineHidden)]),
-              style: _objectSpread({}, !bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+              className: classNames([styles.line, {
+                [styles.hidden]: bottomLineHidden
+              }]),
+              style: {
+                ...(!bottomLineHidden ? getStyleFromColor(lineColor, 'backgroundColor') : null)
+              }
             })]
           }) : null, /*#__PURE__*/jsx("div", {
             className: styles.body,
@@ -440,49 +395,50 @@ function Timeline(_ref) {
             },
             children: elementContent
           })]
-        }, "element-".concat(elementType));
+        }, `element-${elementType}`);
       })
-    }, "item-".concat(itemI));
+    }, `item-${itemI}`);
   });
 
   // Call to Action
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+  const hasHeader = isHeaderFilled(header);
+  const hasFooter = isFooterFilled(footer);
+  const footerProps = getFooterProps(footer, {
+    isView,
+    current,
+    openWebView,
+    isPreview
   });
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    scrolledBottom = _useState10[0],
-    setScrolledBottom = _useState10[1];
-  var _useDimensionObserver5 = useDimensionObserver(),
-    footerRef = _useDimensionObserver5.ref,
-    _useDimensionObserver6 = _useDimensionObserver5.height,
-    footerHeight = _useDimensionObserver6 === void 0 ? 0 : _useDimensionObserver6;
-  var onScrolledBottom = useCallback(function (_ref12) {
-    var initial = _ref12.initial;
-    if (initial) {
+  const [scrolledBottom, setScrolledBottom] = useState(false);
+  const {
+    ref: footerRef,
+    height: footerHeight = 0
+  } = useDimensionObserver();
+  const onScrolledBottom = useCallback(({
+    initial: initial_0
+  }) => {
+    if (initial_0) {
       trackScreenEvent('scroll', 'Screen');
     }
     setScrolledBottom(true);
   }, [trackScreenEvent]);
-  var onScrolledNotBottom = useCallback(function () {
+  const onScrolledNotBottom = useCallback(() => {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  var onScrolledTrigger = useCallback(function () {
-    var trigger = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  const onScrolledTrigger = useCallback((trigger = null) => {
     if (trigger !== null) {
-      var scrollPercent = Math.round(trigger * 100);
+      const scrollPercent = Math.round(trigger * 100);
       trackScreenEvent('scroll', scrollPercent, {
-        scrollPercent: scrollPercent
+        scrollPercent
       });
     }
   }, [trackScreenEvent]);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles["".concat(bulletShape, "BulletShape")], bulletShape !== null), styles.withoutLines, itemsCount < 2)]),
+    className: classNames([styles.container, className, {
+      [styles.isPlaceholder]: isPlaceholder,
+      [styles[`${bulletShape}BulletShape`]]: bulletShape !== null,
+      [styles.withoutLines]: itemsCount < 2
+    }]),
     "data-screen-ready": ready,
     children: [/*#__PURE__*/jsxs(Container, {
       width: width,
@@ -507,36 +463,41 @@ function Timeline(_ref) {
             style: {
               paddingBottom: spacing
             },
-            children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+            children: /*#__PURE__*/jsx(Header, {
+              ...header
+            })
           }) : null, /*#__PURE__*/jsx(ScreenElement, {
             placeholder: "Title",
             emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
               id: "BSTWf8",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Title"
-              }]
+              defaultMessage: "Title"
             }),
             emptyClassName: classNames([styles.empty, styles.emptyTitle]),
             isEmpty: !hasTitle,
-            children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
-              className: styles.title
-            }, title)) : null
+            children: hasTitle ? /*#__PURE__*/jsx(Heading, {
+              className: styles.title,
+              ...title
+            }) : null
           }), timelineElements]
         })
       }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
         ref: footerRef,
-        className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
+        className: classNames([styles.callToAction, {
+          [styles.disabled]: !scrolledBottom
+        }]),
         style: {
-          transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
+          transform: current && !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null,
           paddingLeft: Math.max(spacing / 2, viewerBottomSidesWidth),
           paddingRight: Math.max(spacing / 2, viewerBottomSidesWidth),
           paddingTop: spacing / 2,
           paddingBottom: spacing / 2
         },
-        children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+        children: /*#__PURE__*/jsx(Footer, {
+          ...footerProps
+        })
       }) : null]
-    }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, _objectSpread(_objectSpread({}, finalAudioAlternative), {}, {
+    }), audioAlternativeMedia !== null ? /*#__PURE__*/jsx(Audio, {
+      ...finalAudioAlternative,
       paused: !audioPlaying,
       mediaRef: mergeRefs(mediaRef, customMediaRef),
       muted: muted,
@@ -550,7 +511,7 @@ function Timeline(_ref) {
       onDurationChange: onAudioDurationChange,
       onSeeked: onAudioSeeked,
       onEnded: onAudioEnded
-    })) : null, !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+    }) : null, !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -565,11 +526,30 @@ function Timeline(_ref) {
   });
 }
 
-function TimelineIllustratedScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsx(Timeline, _objectSpread(_objectSpread({}, props), {}, {
-    illustrated: true
-  }));
+function TimelineIllustratedScreen(t0) {
+  const $ = c(4);
+  let props;
+  if ($[0] !== t0) {
+    ({
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+  } else {
+    props = $[1];
+  }
+  let t1;
+  if ($[2] !== props) {
+    t1 = /*#__PURE__*/jsx(Timeline, {
+      ...props,
+      illustrated: true
+    });
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 }
 
 var definition = [{
@@ -578,19 +558,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
+      defaultMessage: "List"
     }),
     order: 8
   },
   title: defineMessage({
     id: "GzoKNb",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Timeline"
-    }]
+    defaultMessage: "Timeline"
   }),
   component: Timeline,
   layouts: ['normal'],
@@ -604,10 +578,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'items',
@@ -622,10 +593,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "3ifj0j",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entries"
-      }]
+      defaultMessage: "Entries"
     })
   }, {
     name: 'spacing',
@@ -634,19 +602,13 @@ var definition = [{
     isHorizontal: true,
     label: defineMessage({
       id: "Zpl5bJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Spacing"
-      }]
+      defaultMessage: "Spacing"
     })
   }, {
     type: 'fields',
     label: defineMessage({
       id: "xac4z/",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entry styles"
-      }]
+      defaultMessage: "Entry styles"
     }),
     isList: true,
     fields: [{
@@ -654,20 +616,14 @@ var definition = [{
       type: 'text-style-form',
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'itemDescriptionStyle',
       type: 'text-style-form',
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'itemBottomSpacing',
@@ -676,10 +632,7 @@ var definition = [{
       isHorizontal: true,
       label: defineMessage({
         id: "Lp0bG4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Bottom spacing"
-        }]
+        defaultMessage: "Bottom spacing"
       })
     }]
   }, {
@@ -690,27 +643,18 @@ var definition = [{
       value: 'circle',
       label: defineMessage({
         id: "+uInZz",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Circle"
-        }]
+        defaultMessage: "Circle"
       })
     }, {
       value: 'square',
       label: defineMessage({
         id: "fusnxf",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Square"
-        }]
+        defaultMessage: "Square"
       })
     }],
     label: defineMessage({
       id: "twTaAZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet shape"
-      }]
+      defaultMessage: "Bullet shape"
     })
   }, {
     name: 'withoutLine',
@@ -718,10 +662,7 @@ var definition = [{
     defaultValue: false,
     label: defineMessage({
       id: "N4lZhy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Without line"
-      }]
+      defaultMessage: "Without line"
     })
   }, {
     name: 'bulletFilled',
@@ -729,10 +670,7 @@ var definition = [{
     defaultValue: false,
     label: defineMessage({
       id: "YWcp4v",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet filled"
-      }]
+      defaultMessage: "Bullet filled"
     })
   }, {
     name: 'bulletColor',
@@ -743,10 +681,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "uNpHnA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet color"
-      }]
+      defaultMessage: "Bullet color"
     })
   }, {
     name: 'lineColor',
@@ -757,40 +692,28 @@ var definition = [{
     },
     label: defineMessage({
       id: "RHMS2f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Line color"
-      }]
+      defaultMessage: "Line color"
     })
   }, {
     name: 'alternatives',
     type: 'alternatives',
     label: defineMessage({
       id: "68NE9W",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Alternatives"
-      }]
+      defaultMessage: "Alternatives"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -805,10 +728,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -825,19 +745,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "cGItoy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "List"
-      }]
+      defaultMessage: "List"
     }),
     order: 8
   },
   title: defineMessage({
     id: "33UbSd",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Timeline with images"
-    }]
+    defaultMessage: "Timeline with images"
   }),
   component: TimelineIllustratedScreen,
   layouts: ['title-image-description', 'title-description-image', 'image-title-description'],
@@ -850,10 +764,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'layout',
@@ -861,10 +772,7 @@ var definition = [{
     defaultValue: 'title-image-description',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'items',
@@ -879,10 +787,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "3ifj0j",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entries"
-      }]
+      defaultMessage: "Entries"
     })
   }, {
     name: 'spacing',
@@ -891,19 +796,13 @@ var definition = [{
     isHorizontal: true,
     label: defineMessage({
       id: "Zpl5bJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Spacing"
-      }]
+      defaultMessage: "Spacing"
     })
   }, {
     type: 'fields',
     label: defineMessage({
       id: "xac4z/",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Entry styles"
-      }]
+      defaultMessage: "Entry styles"
     }),
     isList: true,
     fields: [{
@@ -911,20 +810,14 @@ var definition = [{
       type: 'text-style-form',
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'itemDescriptionStyle',
       type: 'text-style-form',
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'itemBottomSpacing',
@@ -933,10 +826,7 @@ var definition = [{
       isHorizontal: true,
       label: defineMessage({
         id: "Lp0bG4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Bottom spacing"
-        }]
+        defaultMessage: "Bottom spacing"
       })
     }]
   }, {
@@ -945,10 +835,7 @@ var definition = [{
     defaultValue: false,
     label: defineMessage({
       id: "N4lZhy",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Without line"
-      }]
+      defaultMessage: "Without line"
     })
   }, {
     name: 'bulletShape',
@@ -958,27 +845,18 @@ var definition = [{
       value: 'circle',
       label: defineMessage({
         id: "+uInZz",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Circle"
-        }]
+        defaultMessage: "Circle"
       })
     }, {
       value: 'square',
       label: defineMessage({
         id: "fusnxf",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Square"
-        }]
+        defaultMessage: "Square"
       })
     }],
     label: defineMessage({
       id: "twTaAZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet shape"
-      }]
+      defaultMessage: "Bullet shape"
     })
   }, {
     name: 'bulletFilled',
@@ -986,10 +864,7 @@ var definition = [{
     defaultValue: false,
     label: defineMessage({
       id: "YWcp4v",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet filled"
-      }]
+      defaultMessage: "Bullet filled"
     })
   }, {
     name: 'bulletColor',
@@ -1000,10 +875,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "uNpHnA",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Bullet color"
-      }]
+      defaultMessage: "Bullet color"
     })
   }, {
     name: 'lineColor',
@@ -1014,40 +886,28 @@ var definition = [{
     },
     label: defineMessage({
       id: "RHMS2f",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Line color"
-      }]
+      defaultMessage: "Line color"
     })
   }, {
     name: 'alternatives',
     type: 'alternatives',
     label: defineMessage({
       id: "68NE9W",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Alternatives"
-      }]
+      defaultMessage: "Alternatives"
     })
   }, {
     name: 'background',
     type: 'background',
     label: defineMessage({
       id: "+MPZRu",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -1062,10 +922,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-timeline",
-    "version": "0.4.71",
+    "version": "0.4.74",
     "private": false,
     "description": "",
     "keywords": [
@@ -36,6 +36,7 @@
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -52,26 +53,26 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-footer": "^0.4.71",
-        "@micromag/element-header": "^0.4.71",
-        "@micromag/element-heading": "^0.4.71",
-        "@micromag/element-layout": "^0.4.71",
-        "@micromag/element-scroll": "^0.4.71",
-        "@micromag/element-text": "^0.4.71",
-        "@micromag/element-visual": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-background": "^0.4.74",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-footer": "^0.4.74",
+        "@micromag/element-header": "^0.4.74",
+        "@micromag/element-heading": "^0.4.74",
+        "@micromag/element-layout": "^0.4.74",
+        "@micromag/element-scroll": "^0.4.74",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/element-visual": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -81,6 +82,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }