@micromag/screen-gallery 0.4.70 → 0.4.74

package/es/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ImageMedia, ImageElement, TextStyle, BackgroundElement, Header, Footer } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { ImageMedia, ImageElement, TextStyle, BackgroundElement, Header, Footer, MediaElement } from '@micromag/core';
 
 interface GalleryScreenProps {
     layout?: 'two-vertical-equal' | 'two-vertical-top' | 'two-vertical-bottom' | 'three-vertical' | 'one-two' | 'two-one' | 'two-by-two' | 'four-vertical' | 'one-two-one' | 'four-mosaic' | 'two-one-two' | 'one-two-two' | 'two-two-one' | 'two-by-three' | 'one-one-two-two' | 'two-two-one-one';
@@ -14,9 +15,10 @@ interface GalleryScreenProps {
     current?: boolean;
     active?: boolean;
     preload?: boolean;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
-declare function GalleryScreen({ layout, images, withCaptions, imageCaptionStyle, background, header, footer, current, active, preload, spacing: initialSpacing, captionMaxLines, className, }: GalleryScreenProps): react_jsx_runtime.JSX.Element;
+declare function GalleryScreen({ layout, images, withCaptions, imageCaptionStyle, background, header, footer, current, active, preload, spacing: initialSpacing, captionMaxLines, mediaRef: customMediaRef, className, }: GalleryScreenProps): react_jsx_runtime.JSX.Element;
 
 declare function GalleryCaptionsScreen({ ...props }: {
     [x: string]: any;

package/es/index.js

@@ -1,15 +1,12 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { c } from 'react/compiler-runtime';
 import classNames from 'classnames';
 import isPlainObject from 'lodash/isPlainObject';
-import { useState, useCallback, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef, useScreenRenderContext } from '@micromag/core/contexts';
 import { useDimensionObserver } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps, isImageFilled, isTextFilled } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isImageFilled, isTextFilled, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
@@ -18,8 +15,6 @@ import Header from '@micromag/element-header';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
 
 var layoutProps = {
   // 2
@@ -193,236 +188,391 @@ var layoutProps = {
 
 var styles = {"container":"micromag-screen-gallery-container","background":"micromag-screen-gallery-background","content":"micromag-screen-gallery-content","inner":"micromag-screen-gallery-inner","grid":"micromag-screen-gallery-grid","placeholder":"micromag-screen-gallery-placeholder","emptyImage":"micromag-screen-gallery-emptyImage","emptyCaption":"micromag-screen-gallery-emptyCaption","gridItem":"micromag-screen-gallery-gridItem","imageContainer":"micromag-screen-gallery-imageContainer","header":"micromag-screen-gallery-header","footer":"micromag-screen-gallery-footer","image":"micromag-screen-gallery-image","caption":"micromag-screen-gallery-caption"};
 
-var emptyArray = [];
-function GalleryScreen(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'four-mosaic' : _ref$layout,
-    _ref$images = _ref.images,
-    images = _ref$images === void 0 ? emptyArray : _ref$images,
-    _ref$withCaptions = _ref.withCaptions,
-    withCaptions = _ref$withCaptions === void 0 ? false : _ref$withCaptions,
-    _ref$imageCaptionStyl = _ref.imageCaptionStyle,
-    imageCaptionStyle = _ref$imageCaptionStyl === void 0 ? null : _ref$imageCaptionStyl,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _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$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$spacing = _ref.spacing,
-    initialSpacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$captionMaxLines = _ref.captionMaxLines,
-    captionMaxLines = _ref$captionMaxLines === void 0 ? 2 : _ref$captionMaxLines,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _useViewerContext = useViewerContext(),
-    viewerTopHeight = _useViewerContext.topHeight,
-    viewerBottomHeight = _useViewerContext.bottomHeight,
-    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
-  var _useViewerWebView = useViewerWebView(),
-    openWebView = _useViewerWebView.open;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var spacing = initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var mediaShouldLoad = current || preload;
-  var finalSpacing = isPlaceholder ? 5 : spacing;
-  var grid = isPlainObject(layoutProps[layout]) ? layoutProps[layout] : {};
-  var _grid$layout = grid.layout,
-    gridLayout = _grid$layout === void 0 ? [] : _grid$layout,
-    _grid$vertical = grid.vertical,
-    vertical = _grid$vertical === void 0 ? false : _grid$vertical;
-  var gridSpaces = gridLayout.reduce(function (acc, _ref2) {
-    var rows = _ref2.rows,
-      columns = _ref2.columns;
+const emptyArray = [];
+function GalleryScreen(t0) {
+  const $ = c(73);
+  const {
+    layout: t1,
+    images: t2,
+    withCaptions: t3,
+    imageCaptionStyle: t4,
+    background: t5,
+    header: t6,
+    footer: t7,
+    current: t8,
+    active: t9,
+    preload: t10,
+    spacing: t11,
+    captionMaxLines: t12,
+    mediaRef: t13,
+    className: t14
+  } = t0;
+  const layout = t1 === undefined ? "four-mosaic" : t1;
+  const images = t2 === undefined ? emptyArray : t2;
+  const withCaptions = t3 === undefined ? false : t3;
+  const imageCaptionStyle = t4 === undefined ? null : t4;
+  const background = t5 === undefined ? null : t5;
+  const header = t6 === undefined ? null : t6;
+  const footer = t7 === undefined ? null : t7;
+  const current = t8 === undefined ? true : t8;
+  const active = t9 === undefined ? true : t9;
+  const preload = t10 === undefined ? true : t10;
+  const initialSpacing = t11 === undefined ? 20 : t11;
+  const captionMaxLines = t12 === undefined ? 2 : t12;
+  const customMediaRef = t13 === undefined ? null : t13;
+  const className = t14 === undefined ? null : t14;
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: t15
+  } = usePlaybackMediaRef(current, true);
+  const isCurrentMedia = t15 === undefined ? false : t15;
+  const spacing = initialSpacing !== null ? Math.max(0, initialSpacing || 0) : 20;
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit
+  } = useScreenRenderContext();
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = current || preload;
+  const finalSpacing = isPlaceholder ? 5 : spacing;
+  const grid = isPlainObject(layoutProps[layout]) ? layoutProps[layout] : {};
+  const {
+    layout: t16,
+    vertical: t17
+  } = grid;
+  const gridLayout = t16 === undefined ? [] : t16;
+  const vertical = t17 === undefined ? false : t17;
+  const gridSpaces = gridLayout.reduce((acc, t18) => {
+    const {
+      rows,
+      columns
+    } = t18;
     return acc + (vertical ? rows : columns).length;
   }, 0);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    imagesLoaded = _useState2[0],
-    setImagesLoaded = _useState2[1];
-  var imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
-  var ready = imagesLoaded >= imagesCount;
-  var onImageLoaded = useCallback(function () {
-    setImagesLoaded(function (count) {
-      return count + 1;
+  const [imagesLoaded, setImagesLoaded] = useState(0);
+  const imagesCount = images !== null ? Math.min(gridSpaces, images.length) : 0;
+  const ready = imagesLoaded >= imagesCount;
+  let t19;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = () => {
+      setImagesLoaded(_temp);
+    };
+    $[0] = t19;
+  } else {
+    t19 = $[0];
+  }
+  const onImageLoaded = t19;
+  let t20;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = [];
+    $[1] = t20;
+  } else {
+    t20 = $[1];
+  }
+  const imagesEl = useRef(t20);
+  let t21;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = [];
+    $[2] = t21;
+  } else {
+    t21 = $[2];
+  }
+  const [imagesSizes, setImagesSizes] = useState(t21);
+  const {
+    ref: contentRef,
+    width: t22,
+    height: t23
+  } = useDimensionObserver();
+  const contentWidth = t22 === undefined ? null : t22;
+  const contentHeight = t23 === undefined ? null : t23;
+  let t24;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = () => {
+      if (imagesEl.current.length) {
+        setImagesSizes(imagesEl.current.map(_temp2));
+      }
+    };
+    $[3] = t24;
+  } else {
+    t24 = $[3];
+  }
+  let t25;
+  if ($[4] !== contentHeight || $[5] !== contentWidth || $[6] !== layout) {
+    t25 = [contentWidth, contentHeight, layout, setImagesSizes];
+    $[4] = contentHeight;
+    $[5] = contentWidth;
+    $[6] = layout;
+    $[7] = t25;
+  } else {
+    t25 = $[7];
+  }
+  useEffect(t24, t25);
+  let t26;
+  if ($[8] !== header) {
+    t26 = isHeaderFilled(header);
+    $[8] = header;
+    $[9] = t26;
+  } else {
+    t26 = $[9];
+  }
+  const hasHeader = t26;
+  let t27;
+  if ($[10] !== footer) {
+    t27 = isFooterFilled(footer);
+    $[10] = footer;
+    $[11] = t27;
+  } else {
+    t27 = $[11];
+  }
+  const hasFooter = t27;
+  let t28;
+  if ($[12] !== current || $[13] !== footer || $[14] !== isPreview || $[15] !== isView || $[16] !== openWebView) {
+    t28 = getFooterProps(footer, {
+      isView,
+      current,
+      openWebView,
+      isPreview
     });
-  }, [setImagesLoaded]);
-  var imagesEl = useRef([]);
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    imagesSizes = _useState4[0],
-    setImagesSizes = _useState4[1];
-  var _useDimensionObserver = useDimensionObserver(),
-    contentRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    contentWidth = _useDimensionObserver2 === void 0 ? null : _useDimensionObserver2,
-    _useDimensionObserver3 = _useDimensionObserver.height,
-    contentHeight = _useDimensionObserver3 === void 0 ? null : _useDimensionObserver3;
-  useEffect(function () {
-    if (imagesEl.current.length) {
-      setImagesSizes(imagesEl.current.map(function (imageEl) {
-        return imageEl !== null ? {
-          width: imageEl.offsetWidth,
-          height: imageEl.offsetHeight
-        } : {};
-      }));
-    }
-  }, [contentWidth, contentHeight, layout, setImagesSizes]);
-
-  // header + footer
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
-  });
-  var _useDimensionObserver4 = useDimensionObserver(),
-    headerRef = _useDimensionObserver4.ref,
-    _useDimensionObserver5 = _useDimensionObserver4.height,
-    headerHeight = _useDimensionObserver5 === void 0 ? 0 : _useDimensionObserver5;
-  var _useDimensionObserver6 = useDimensionObserver(),
-    footerRef = _useDimensionObserver6.ref,
-    _useDimensionObserver7 = _useDimensionObserver6.height,
-    footerHeight = _useDimensionObserver7 === void 0 ? 0 : _useDimensionObserver7;
-
-  // items
-  var items = _toConsumableArray(Array(gridSpaces)).map(function (item, itemI) {
-    var image = images !== null ? images[itemI] : null;
-    var imageSize = imagesSizes[itemI] || {};
-    var finalImage = withCaptions ? image : {
+    $[12] = current;
+    $[13] = footer;
+    $[14] = isPreview;
+    $[15] = isView;
+    $[16] = openWebView;
+    $[17] = t28;
+  } else {
+    t28 = $[17];
+  }
+  const footerProps = t28;
+  const {
+    ref: headerRef,
+    height: t29
+  } = useDimensionObserver();
+  const headerHeight = t29 === undefined ? 0 : t29;
+  const {
+    ref: footerRef,
+    height: t30
+  } = useDimensionObserver();
+  const footerHeight = t30 === undefined ? 0 : t30;
+  const items = [...Array(gridSpaces)].map((item, itemI) => {
+    const image = images !== null ? images[itemI] : null;
+    const imageSize = imagesSizes[itemI] || {};
+    const finalImage = withCaptions ? image : {
       media: image
     };
-    var _ref3 = finalImage || {},
-      _ref3$caption = _ref3.caption,
-      caption = _ref3$caption === void 0 ? null : _ref3$caption;
-    var hasImage = isImageFilled(finalImage);
-    var hasCaption = isTextFilled(caption);
-    var _ref4 = caption || {},
-      _ref4$textStyle = _ref4.textStyle,
-      textStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
+    const {
+      caption: t31
+    } = finalImage || {};
+    const caption = t31 === undefined ? null : t31;
+    const hasImage = isImageFilled(finalImage);
+    const hasCaption = isTextFilled(caption);
+    const {
+      textStyle: t32
+    } = caption || {};
+    const textStyle = t32 === undefined ? null : t32;
     return /*#__PURE__*/jsxs("div", {
       className: styles.gridItem,
       children: [/*#__PURE__*/jsx("div", {
         className: styles.imageContainer,
-        ref: function ref(el) {
+        ref: el => {
           imagesEl.current[itemI] = el;
         },
         children: /*#__PURE__*/jsx(ScreenElement, {
           placeholder: "image",
           placeholderProps: {
             className: styles.placeholder,
-            height: '100%'
+            height: "100%"
           },
           emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
             id: "ebsPd4",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Image"
-            }]
+            defaultMessage: "Image"
           }),
           emptyClassName: styles.emptyImage,
           isEmpty: !hasImage,
-          children: active || current ? /*#__PURE__*/jsx(Visual, _objectSpread(_objectSpread(_objectSpread({
-            className: styles.image
-          }, finalImage), imageSize), {}, {
+          children: active || current ? /*#__PURE__*/jsx(Visual, {
+            className: styles.image,
+            ...finalImage,
+            ...imageSize,
             loadingMode: "lazy",
             resolution: resolution,
             objectFit: {
-              fit: 'cover'
+              fit: "cover"
             },
             playing: backgroundPlaying,
             active: active,
             shouldLoad: mediaShouldLoad,
             withoutVideo: isPreview,
             onLoaded: onImageLoaded
-          })) : null
+          }) : null
         })
       }), withCaptions ? /*#__PURE__*/jsx(ScreenElement, {
         placeholder: "line",
         emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
           id: "6tIigB",
-          defaultMessage: [{
-            "type": 0,
-            "value": "Caption"
-          }]
+          defaultMessage: "Caption"
         }),
         emptyClassName: styles.emptyCaption,
         isEmpty: !hasCaption,
         children: /*#__PURE__*/jsx("div", {
           className: styles.caption,
-          children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, caption), {}, {
+          children: /*#__PURE__*/jsx(Text, {
+            ...caption,
             className: styles.captionText,
             lineClamp: captionMaxLines,
-            textStyle: _objectSpread(_objectSpread({}, imageCaptionStyle || null), textStyle)
-          }))
+            textStyle: {
+              ...(imageCaptionStyle || null),
+              ...textStyle
+            }
+          })
         })
       }) : null]
-    }, "item-".concat(itemI));
+    }, `item-${itemI}`);
   });
-  return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
-    "data-screen-ready": ready,
-    children: [/*#__PURE__*/jsx(Container, {
+  let t33;
+  if ($[18] !== className || $[19] !== isPlaceholder) {
+    t33 = classNames([styles.container, className, {
+      [styles.isPlaceholder]: isPlaceholder
+    }]);
+    $[18] = className;
+    $[19] = isPlaceholder;
+    $[20] = t33;
+  } else {
+    t33 = $[20];
+  }
+  const t34 = (hasHeader ? headerHeight : 0) + (!isPreview ? viewerTopHeight : 0);
+  const t35 = (hasFooter ? footerHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0);
+  let t36;
+  if ($[21] !== t34 || $[22] !== t35) {
+    t36 = {
+      paddingTop: t34,
+      paddingBottom: t35
+    };
+    $[21] = t34;
+    $[22] = t35;
+    $[23] = t36;
+  } else {
+    t36 = $[23];
+  }
+  let t37;
+  if ($[24] !== finalSpacing || $[25] !== hasHeader || $[26] !== header || $[27] !== headerRef || $[28] !== isPlaceholder || $[29] !== isPreview || $[30] !== spacing || $[31] !== viewerTopHeight) {
+    t37 = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+      className: styles.header,
+      ref: headerRef,
+      style: {
+        paddingTop: hasHeader ? finalSpacing / 2 : spacing,
+        paddingLeft: spacing,
+        paddingRight: spacing,
+        transform: !isPreview ? `translate(0, ${viewerTopHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Header, {
+        ...header
+      })
+    }) : null;
+    $[24] = finalSpacing;
+    $[25] = hasHeader;
+    $[26] = header;
+    $[27] = headerRef;
+    $[28] = isPlaceholder;
+    $[29] = isPreview;
+    $[30] = spacing;
+    $[31] = viewerTopHeight;
+    $[32] = t37;
+  } else {
+    t37 = $[32];
+  }
+  let t38;
+  if ($[33] !== finalSpacing || $[34] !== grid || $[35] !== items) {
+    t38 = /*#__PURE__*/jsx(Grid, {
+      className: styles.grid,
+      spacing: finalSpacing,
+      items: items,
+      ...grid
+    });
+    $[33] = finalSpacing;
+    $[34] = grid;
+    $[35] = items;
+    $[36] = t38;
+  } else {
+    t38 = $[36];
+  }
+  let t39;
+  if ($[37] !== finalSpacing || $[38] !== footerProps || $[39] !== footerRef || $[40] !== hasFooter || $[41] !== isPlaceholder || $[42] !== isPreview || $[43] !== viewerBottomHeight || $[44] !== viewerBottomSidesWidth) {
+    t39 = !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
+      className: styles.footer,
+      ref: footerRef,
+      style: {
+        paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+        paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
+        paddingBottom: finalSpacing / 2,
+        transform: !isPreview ? `translate(0, -${viewerBottomHeight}px)` : null
+      },
+      children: /*#__PURE__*/jsx(Footer, {
+        ...footerProps
+      })
+    }) : null;
+    $[37] = finalSpacing;
+    $[38] = footerProps;
+    $[39] = footerRef;
+    $[40] = hasFooter;
+    $[41] = isPlaceholder;
+    $[42] = isPreview;
+    $[43] = viewerBottomHeight;
+    $[44] = viewerBottomSidesWidth;
+    $[45] = t39;
+  } else {
+    t39 = $[45];
+  }
+  let t40;
+  if ($[46] !== contentRef || $[47] !== t36 || $[48] !== t37 || $[49] !== t38 || $[50] !== t39) {
+    t40 = /*#__PURE__*/jsxs("div", {
+      className: styles.inner,
+      style: t36,
+      ref: contentRef,
+      children: [t37, t38, t39]
+    });
+    $[46] = contentRef;
+    $[47] = t36;
+    $[48] = t37;
+    $[49] = t38;
+    $[50] = t39;
+    $[51] = t40;
+  } else {
+    t40 = $[51];
+  }
+  let t41;
+  if ($[52] !== height || $[53] !== t40 || $[54] !== width) {
+    t41 = /*#__PURE__*/jsx(Container, {
       width: width,
       height: height,
       className: styles.content,
-      children: /*#__PURE__*/jsxs("div", {
-        className: styles.inner,
-        style: {
-          paddingTop: (hasHeader ? headerHeight : 0) + (!isPreview ? viewerTopHeight : 0),
-          paddingBottom: (hasFooter ? footerHeight : 0) + (current && !isPreview ? viewerBottomHeight : 0)
-        },
-        ref: contentRef,
-        children: [!isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
-          className: styles.header,
-          ref: headerRef,
-          style: {
-            paddingTop: hasHeader ? finalSpacing / 2 : spacing,
-            paddingLeft: spacing,
-            paddingRight: spacing,
-            transform: !isPreview ? "translate(0, ".concat(viewerTopHeight, "px)") : null
-          },
-          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
-        }) : null, /*#__PURE__*/jsx(Grid, _objectSpread({
-          className: styles.grid,
-          spacing: finalSpacing,
-          items: items
-        }, grid)), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
-          className: styles.footer,
-          ref: footerRef,
-          style: {
-            paddingLeft: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
-            paddingRight: Math.max(finalSpacing / 2, viewerBottomSidesWidth),
-            // paddingTop: finalSpacing / 2,
-            paddingBottom: finalSpacing / 2,
-            transform: !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null
-          },
-          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
-        }) : null]
-      })
-    }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
+      children: t40
+    });
+    $[52] = height;
+    $[53] = t40;
+    $[54] = width;
+    $[55] = t41;
+  } else {
+    t41 = $[55];
+  }
+  let t42;
+  if ($[56] !== background || $[57] !== backgroundPlaying || $[58] !== customMediaRef || $[59] !== height || $[60] !== isPlaceholder || $[61] !== isPreview || $[62] !== mediaRef || $[63] !== mediaShouldLoad || $[64] !== muted || $[65] !== resolution || $[66] !== width) {
+    t42 = !isPlaceholder ? /*#__PURE__*/jsx(Background, {
       background: background,
       width: width,
       height: height,
@@ -430,18 +580,76 @@ function GalleryScreen(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       withoutVideo: isPreview,
       className: styles.background
-    }) : null]
-  });
+    }) : null;
+    $[56] = background;
+    $[57] = backgroundPlaying;
+    $[58] = customMediaRef;
+    $[59] = height;
+    $[60] = isPlaceholder;
+    $[61] = isPreview;
+    $[62] = mediaRef;
+    $[63] = mediaShouldLoad;
+    $[64] = muted;
+    $[65] = resolution;
+    $[66] = width;
+    $[67] = t42;
+  } else {
+    t42 = $[67];
+  }
+  let t43;
+  if ($[68] !== ready || $[69] !== t33 || $[70] !== t41 || $[71] !== t42) {
+    t43 = /*#__PURE__*/jsxs("div", {
+      className: t33,
+      "data-screen-ready": ready,
+      children: [t41, t42]
+    });
+    $[68] = ready;
+    $[69] = t33;
+    $[70] = t41;
+    $[71] = t42;
+    $[72] = t43;
+  } else {
+    t43 = $[72];
+  }
+  return t43;
+}
+function _temp2(imageEl) {
+  return imageEl !== null ? {
+    width: imageEl.offsetWidth,
+    height: imageEl.offsetHeight
+  } : {};
+}
+function _temp(count) {
+  return count + 1;
 }
 
-function GalleryCaptionsScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsx(GalleryScreen, _objectSpread(_objectSpread({}, props), {}, {
-    withCaptions: true
-  }));
+function GalleryCaptionsScreen(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(GalleryScreen, {
+      ...props,
+      withCaptions: true
+    });
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 }
 
 // import * as transforms from './transforms/index';
@@ -452,19 +660,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "6mX2ya",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
+      defaultMessage: "Images"
     }),
     order: 4
   },
   title: defineMessage({
     id: "jaFXki",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Gallery"
-    }]
+    defaultMessage: "Gallery"
   }),
   component: GalleryScreen,
   layouts: [
@@ -485,40 +687,28 @@ var definition = [{
     defaultValue: 'two-vertical-equal',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'images',
     type: 'visuals',
     label: defineMessage({
       id: "muYwrB",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
+      defaultMessage: "Images"
     })
   }, {
     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: {
@@ -533,10 +723,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -553,19 +740,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "6mX2ya",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
+      defaultMessage: "Images"
     }),
     order: 4
   },
   title: defineMessage({
     id: "MmJQ7o",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Gallery with captions"
-    }]
+    defaultMessage: "Gallery with captions"
   }),
   component: GalleryCaptionsScreen,
   layouts: [
@@ -586,10 +767,7 @@ var definition = [{
     defaultValue: 'two-vertical-equal',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'images',
@@ -601,40 +779,28 @@ var definition = [{
     },
     label: defineMessage({
       id: "59f2bg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Images"
-      }]
+      defaultMessage: "Images"
     })
   }, {
     name: 'imageCaptionStyle',
     type: 'text-style-form',
     label: defineMessage({
       id: "Qz7nUz",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Caption style"
-      }]
+      defaultMessage: "Caption style"
     })
   }, {
     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: {
@@ -649,10 +815,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-gallery",
-    "version": "0.4.70",
+    "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,25 +53,25 @@
         "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.69",
-        "@micromag/element-background": "^0.4.70",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.70",
-        "@micromag/element-grid": "^0.4.69",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-layout": "^0.4.69",
-        "@micromag/element-text": "^0.4.69",
-        "@micromag/element-visual": "^0.4.70",
-        "@micromag/transforms": "^0.4.69",
+        "@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-grid": "^0.4.74",
+        "@micromag/element-header": "^0.4.74",
+        "@micromag/element-layout": "^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",
@@ -80,6 +81,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }