@micromag/screen-contribution 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 { HeadingElement, InputElement, TextElement, TextStyle, ButtonElement, BackgroundElement, Header, Footer, Transitions } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { HeadingElement, InputElement, TextElement, TextStyle, ButtonElement, BackgroundElement, Header, Footer, Transitions, MediaElement } from '@micromag/core';
 
 interface ContributionScreenProps {
     id?: string | null;
@@ -25,9 +26,10 @@ interface ContributionScreenProps {
     transitionStagger?: number;
     resizeTransitionDuration?: number;
     type?: string | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
-declare function ContributionScreen({ id, layout, title, name, message, submit, nameStyle, messageStyle, settings, spacing, background, header, footer, current, preload, transitions, transitionStagger, resizeTransitionDuration, type, className, }: ContributionScreenProps): react_jsx_runtime.JSX.Element;
+declare function ContributionScreen({ id, layout, title, name, message, submit, nameStyle, messageStyle, settings, spacing, background, header, footer, current, preload, transitions, transitionStagger, resizeTransitionDuration, type, mediaRef: customMediaRef, className, }: ContributionScreenProps): react_jsx_runtime.JSX.Element;
 
 declare const _default: {
     id: string;

package/es/index.js

@@ -1,8 +1,4 @@
 import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons/faSpinner';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -12,7 +8,7 @@ import { useRef, useState, useCallback, useEffect } from 'react';
 import { ScreenElement, Transitions } from '@micromag/core/components';
 import { useScreenSize, useViewerContext, useScreenRenderContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
-import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, isLabelFilled, getStyleFromColor } from '@micromag/core/utils';
+import { isHeaderFilled, isFooterFilled, getFooterProps, isTextFilled, isLabelFilled, getStyleFromColor, mergeRefs } from '@micromag/core/utils';
 import { useContributionCreate, useContributions } from '@micromag/data';
 import Background from '@micromag/element-background';
 import Button from '@micromag/element-button';
@@ -28,219 +24,183 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-screen-contribution-container","background":"micromag-screen-contribution-background","content":"micromag-screen-contribution-content","inner":"micromag-screen-contribution-inner","layout":"micromag-screen-contribution-layout","header":"micromag-screen-contribution-header","emptyTitle":"micromag-screen-contribution-emptyTitle","emptyInputName":"micromag-screen-contribution-emptyInputName","emptyInputMessage":"micromag-screen-contribution-emptyInputMessage","emptySubmit":"micromag-screen-contribution-emptySubmit","emptySkip":"micromag-screen-contribution-emptySkip","title":"micromag-screen-contribution-title","interactiveContainer":"micromag-screen-contribution-interactiveContainer","form":"micromag-screen-contribution-form","inputName":"micromag-screen-contribution-inputName","inputMessage":"micromag-screen-contribution-inputMessage","buttonSubmit":"micromag-screen-contribution-buttonSubmit","buttonSkip":"micromag-screen-contribution-buttonSkip","showBack":"micromag-screen-contribution-showBack","formContent":"micromag-screen-contribution-formContent","formLoading":"micromag-screen-contribution-formLoading","loadingIcon":"micromag-screen-contribution-loadingIcon","contributionsContainer":"micromag-screen-contribution-contributionsContainer","contributionsContent":"micromag-screen-contribution-contributionsContent","contributions":"micromag-screen-contribution-contributions","contribution":"micromag-screen-contribution-contribution","footer":"micromag-screen-contribution-footer","disabled":"micromag-screen-contribution-disabled","submitting":"micromag-screen-contribution-submitting","submitted":"micromag-screen-contribution-submitted","showContributions":"micromag-screen-contribution-showContributions","isPlaceholder":"micromag-screen-contribution-isPlaceholder","reset":"micromag-screen-contribution-reset"};
 
-function ContributionScreen(_ref) {
-  var _ref$id = _ref.id,
-    id = _ref$id === void 0 ? null : _ref$id,
-    _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'middle' : _ref$layout,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$name = _ref.name,
-    name = _ref$name === void 0 ? null : _ref$name,
-    _ref$message = _ref.message,
-    message = _ref$message === void 0 ? null : _ref$message,
-    _ref$submit = _ref.submit,
-    submit = _ref$submit === void 0 ? null : _ref$submit,
-    _ref$nameStyle = _ref.nameStyle,
-    nameStyle = _ref$nameStyle === void 0 ? null : _ref$nameStyle,
-    _ref$messageStyle = _ref.messageStyle,
-    messageStyle = _ref$messageStyle === void 0 ? null : _ref$messageStyle,
-    _ref$settings = _ref.settings,
-    settings = _ref$settings === void 0 ? null : _ref$settings,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _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$preload = _ref.preload,
-    preload = _ref$preload === void 0 ? true : _ref$preload,
-    _ref$transitions = _ref.transitions,
-    transitions = _ref$transitions === void 0 ? null : _ref$transitions,
-    _ref$transitionStagge = _ref.transitionStagger,
-    transitionStagger = _ref$transitionStagge === void 0 ? 100 : _ref$transitionStagge,
-    _ref$resizeTransition = _ref.resizeTransitionDuration,
-    resizeTransitionDuration = _ref$resizeTransition === void 0 ? 750 : _ref$resizeTransition,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var intl = useIntl();
-  var screenId = id || 'screen-id';
-  var trackScreenEvent = useTrackScreenEvent(type);
-  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 _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  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 backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var mediaShouldLoad = current || preload;
-  var transitionPlaying = current;
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+function ContributionScreen({
+  id = null,
+  layout = 'middle',
+  title = null,
+  name = null,
+  message = null,
+  submit = null,
+  nameStyle = null,
+  messageStyle = null,
+  settings = null,
+  spacing = 20,
+  background = null,
+  header = null,
+  footer = null,
+  current = true,
+  preload = true,
+  transitions = null,
+  transitionStagger = 100,
+  resizeTransitionDuration = 750,
+  type = null,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const intl = useIntl();
+  const screenId = id || 'screen-id';
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current, true);
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const mediaShouldLoad = current || preload;
+  const transitionPlaying = current;
+  const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  const scrollingDisabled = !isEdit && transitionDisabled || !current;
+  const hasHeader = isHeaderFilled(header);
+  const hasFooter = isFooterFilled(footer);
+  const footerProps = getFooterProps(footer, {
+    isView,
+    current,
+    openWebView,
+    isPreview
   });
-  var hasTitle = isTextFilled(title);
-  var hasNameLabel = isLabelFilled(name);
-  var hasMessageLabel = isLabelFilled(message);
-  var hasSubmit = isTextFilled(submit);
-  var contributionsRef = useRef(null);
-  var formRef = useRef(null);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    interactiveContainerHeight = _useState2[0],
-    setInteractiveContainerHeight = _useState2[1];
-  var _useState3 = useState(''),
-    _useState4 = _slicedToArray(_useState3, 2),
-    userName = _useState4[0],
-    setUserName = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    userMessage = _useState6[0],
-    setUserMessage = _useState6[1];
+  const hasTitle = isTextFilled(title);
+  const hasNameLabel = isLabelFilled(name);
+  const hasMessageLabel = isLabelFilled(message);
+  const hasSubmit = isTextFilled(submit);
+  const contributionsRef = useRef(null);
+  const formRef = useRef(null);
+  const [interactiveContainerHeight, setInteractiveContainerHeight] = useState(null);
+  const [userName, setUserName] = useState('');
+  const [userMessage, setUserMessage] = useState('');
 
   // 0 = default, 1 = submitting, 2 = submitted, 3 = resizing, 4 = done
-  var _useState7 = useState(isStatic || isCapture ? 4 : 0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    submitState = _useState8[0],
-    setSubmitState = _useState8[1];
-  var _useState9 = useState(false),
-    _useState0 = _slicedToArray(_useState9, 2),
-    hasSubmitted = _useState0[0],
-    setHasSubmitted = _useState0[1];
-  var _ref2 = settings || {},
-    _ref2$canViewAnswers = _ref2.canViewAnswers,
-    canViewAnswers = _ref2$canViewAnswers === void 0 ? false : _ref2$canViewAnswers,
-    _ref2$skipButton = _ref2.skipButton,
-    skipButton = _ref2$skipButton === void 0 ? null : _ref2$skipButton,
-    _ref2$backButton = _ref2.backButton,
-    backButton = _ref2$backButton === void 0 ? null : _ref2$backButton;
-  var answersButton = submitState === 4 ? backButton : skipButton;
-  var finalAnswersButton = isTextFilled(answersButton) ? answersButton : _objectSpread(_objectSpread({}, answersButton), {}, {
+  const [submitState, setSubmitState] = useState(isStatic || isCapture ? 4 : 0);
+  const [hasSubmitted, setHasSubmitted] = useState(false);
+  const {
+    canViewAnswers = false,
+    skipButton = null,
+    backButton = null
+  } = settings || {};
+  const answersButton = submitState === 4 ? backButton : skipButton;
+  const finalAnswersButton = isTextFilled(answersButton) ? answersButton : {
+    ...answersButton,
     body: submitState === 4 ? intl.formatMessage({
       id: "8NyYTH",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Back"
-      }]
+      defaultMessage: "Back"
     }) : intl.formatMessage({
       id: "HpkW4J",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Skip"
-      }]
+      defaultMessage: "Skip"
     })
-  });
-  var onContributionSubmitted = useCallback(function () {
+  };
+  const onContributionSubmitted = useCallback(() => {
     setSubmitState(2);
-    trackScreenEvent('submit_success', "".concat(userName, ": ").concat(userMessage));
+    trackScreenEvent('submit_success', `${userName}: ${userMessage}`);
     setHasSubmitted(true);
   }, [setSubmitState, setHasSubmitted, trackScreenEvent, userName, userMessage]);
-  var _useContributionCreat = useContributionCreate({
-      screenId: screenId
-    }),
-    submitContribution = _useContributionCreat.create;
-  var _useContributions = useContributions({
-      screenId: screenId,
-      opts: {
-        autoload: !isPlaceholder
-      }
-    }),
-    contributions = _useContributions.contributions;
-  var onNameChange = useCallback(function (e) {
-    var value = DOMPurify.sanitize(e.currentTarget.value || '');
+  const {
+    create: submitContribution
+  } = useContributionCreate({
+    screenId
+  });
+  const {
+    contributions
+  } = useContributions({
+    screenId,
+    opts: {
+      autoload: !isPlaceholder
+    }
+  });
+  const onNameChange = useCallback(e => {
+    const value = DOMPurify.sanitize(e.currentTarget.value || '');
     setUserName(value);
   }, [setUserName]);
-  var onMessageChange = useCallback(function (e) {
-    var value = DOMPurify.sanitize(e.currentTarget.value || '');
-    setUserMessage(value);
+  const onMessageChange = useCallback(e_0 => {
+    const value_0 = DOMPurify.sanitize(e_0.currentTarget.value || '');
+    setUserMessage(value_0);
   }, [setUserMessage]);
-  var onContributionReset = useCallback(function () {
+  const onContributionReset = useCallback(() => {
     setUserName('');
     setUserMessage('');
     setSubmitState(0);
     setHasSubmitted(false);
   }, [setUserName, setUserMessage, setSubmitState, setHasSubmitted]);
-  var nameFilled = useRef(false);
-  var onNameBlur = useCallback(function (e) {
-    if (!nameFilled.current && e.currentTarget.value.length > 0) {
+  const nameFilled = useRef(false);
+  const onNameBlur = useCallback(e_1 => {
+    if (!nameFilled.current && e_1.currentTarget.value.length > 0) {
       nameFilled.current = true;
       trackScreenEvent('input_filled', 'Name', {
-        userName: e.currentTarget.value,
-        userMessage: userMessage
+        userName: e_1.currentTarget.value,
+        userMessage
       });
     }
   }, [trackScreenEvent, userMessage]);
-  var messageFilled = useRef(false);
-  var onMessageBlur = useCallback(function (e) {
-    if (!messageFilled.current && e.currentTarget.value.length > 0) {
+  const messageFilled = useRef(false);
+  const onMessageBlur = useCallback(e_2 => {
+    if (!messageFilled.current && e_2.currentTarget.value.length > 0) {
       messageFilled.current = true;
       trackScreenEvent('input_filled', 'Message', {
-        userName: userName,
-        userMessage: e.currentTarget.value
+        userName,
+        userMessage: e_2.currentTarget.value
       });
     }
   }, [trackScreenEvent, userName]);
 
   // Call to Action
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    scrolledBottom = _useState10[0],
-    setScrolledBottom = _useState10[1];
-  var swipeUpLinkActive = scrolledBottom && submitState === 4;
-  var _useDimensionObserver = useDimensionObserver(),
-    footerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.height,
-    callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  const [scrolledBottom, setScrolledBottom] = useState(false);
+  const swipeUpLinkActive = scrolledBottom && submitState === 4;
+  const {
+    ref: footerRef,
+    height: callToActionHeight = 0
+  } = useDimensionObserver();
+  const onScrolledBottom = useCallback(({
+    initial
+  }) => {
     if (initial) {
       trackScreenEvent('scroll', 'Contributions list');
     }
     setScrolledBottom(true);
   }, [trackScreenEvent, setScrolledBottom]);
-  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]);
-  var onSubmit = useCallback(function (e) {
-    e.preventDefault();
+  const onSubmit = useCallback(e_3 => {
+    e_3.preventDefault();
     if (submitState === 0) {
       setInteractiveContainerHeight(formRef.current.offsetHeight);
       setSubmitState(1);
@@ -249,13 +209,13 @@ function ContributionScreen(_ref) {
         message: userMessage
       });
       onContributionSubmitted();
-      trackScreenEvent('click_submit', "".concat(userName, ": ").concat(userMessage), {
-        userName: userName,
-        userMessage: userMessage
+      trackScreenEvent('click_submit', `${userName}: ${userMessage}`, {
+        userName,
+        userMessage
       });
     }
   }, [submitState, setSubmitState, userName, userMessage, trackScreenEvent, onContributionSubmitted]);
-  var onClickSkip = useCallback(function () {
+  const onClickSkip = useCallback(() => {
     if (submitState === 4) {
       setSubmitState(0);
       trackScreenEvent('click_skip', 'Skip button');
@@ -264,14 +224,14 @@ function ContributionScreen(_ref) {
       trackScreenEvent('click_back', 'Back button');
     }
   }, [submitState, setSubmitState, trackScreenEvent]);
-  useEffect(function () {
-    var timeout = null;
+  useEffect(() => {
+    let timeout = null;
     if (submitState === 2) {
       timeout = setTimeout(setSubmitState, resizeTransitionDuration, 4);
       setInteractiveContainerHeight(contributionsRef.current.offsetHeight);
       setSubmitState(3);
     }
-    return function () {
+    return () => {
       if (submitState === 3 && timeout !== null) {
         clearTimeout(timeout);
       }
@@ -280,28 +240,26 @@ function ContributionScreen(_ref) {
 
   // Title
 
-  var items = [/*#__PURE__*/jsx(ScreenElement, {
+  const items = [/*#__PURE__*/jsx(ScreenElement, {
     placeholder: "title",
     placeholderProps: {
       height: '0.75em'
     },
     emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "2ZOPe+",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     }),
     emptyClassName: styles.emptyTitle,
     isEmpty: !hasTitle,
-    children: hasTitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({}, title), {}, {
+    children: hasTitle ? /*#__PURE__*/jsx(Heading, {
+      ...title,
       className: styles.title
-    })) : null
+    }) : null
   }, "title")];
-  var allContributions = [].concat(_toConsumableArray(userName !== null && userName !== '' && userMessage !== null && userMessage !== '' ? [{
+  const allContributions = [...(userName !== null && userName !== '' && userMessage !== null && userMessage !== '' ? [{
     name: userName,
     message: userMessage
-  }] : []), _toConsumableArray(contributions || []));
+  }] : []), ...(contributions || [])];
 
   // Form
 
@@ -309,7 +267,7 @@ function ContributionScreen(_ref) {
     className: styles.interactiveContainer,
     style: {
       height: submitState < 4 ? interactiveContainerHeight : null,
-      transitionDuration: "".concat(resizeTransitionDuration, "ms")
+      transitionDuration: `${resizeTransitionDuration}ms`
     },
     children: [/*#__PURE__*/jsxs("form", {
       className: styles.form,
@@ -324,10 +282,7 @@ function ContributionScreen(_ref) {
           },
           emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
             id: "G/ITGY",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Your name"
-            }]
+            defaultMessage: "Your name"
           }),
           emptyClassName: styles.emptyInputName,
           isEmpty: !hasNameLabel,
@@ -336,20 +291,16 @@ function ContributionScreen(_ref) {
             playing: transitionPlaying,
             delay: transitionStagger,
             disabled: transitionDisabled,
-            children: /*#__PURE__*/jsx(TextInput, _objectSpread(_objectSpread({
-              className: styles.inputName
-            }, name), {}, {
+            children: /*#__PURE__*/jsx(TextInput, {
+              className: styles.inputName,
+              ...name,
               value: userName,
-              onChange: function onChange(e) {
-                return onNameChange(e);
-              },
-              onBlur: function onBlur(e) {
-                return onNameBlur(e);
-              },
+              onChange: e_4 => onNameChange(e_4),
+              onBlur: e_5 => onNameBlur(e_5),
               focusable: current && isView,
               disabled: isPreview,
               required: true
-            }))
+            })
           })
         }), /*#__PURE__*/jsx(ScreenElement, {
           placeholder: "inputText",
@@ -358,10 +309,7 @@ function ContributionScreen(_ref) {
           },
           emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
             id: "JAguka",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Your message"
-            }]
+            defaultMessage: "Your message"
           }),
           emptyClassName: styles.emptyInputMessage,
           isEmpty: !hasMessageLabel,
@@ -370,30 +318,23 @@ function ContributionScreen(_ref) {
             playing: transitionPlaying,
             delay: transitionStagger * 2,
             disabled: transitionDisabled,
-            children: /*#__PURE__*/jsx(TextInput, _objectSpread(_objectSpread({
-              className: styles.inputMessage
-            }, message), {}, {
+            children: /*#__PURE__*/jsx(TextInput, {
+              className: styles.inputMessage,
+              ...message,
               value: userMessage,
-              onChange: function onChange(e) {
-                return onMessageChange(e);
-              },
-              onBlur: function onBlur(e) {
-                return onMessageBlur(e);
-              },
+              onChange: e_6 => onMessageChange(e_6),
+              onBlur: e_7 => onMessageBlur(e_7),
               disabled: isPreview,
               focusable: current && isView,
               multiline: true,
               required: true
-            }))
+            })
           })
         }), /*#__PURE__*/jsx(ScreenElement, {
           placeholder: "button",
           emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
             id: "5uH4x7",
-            defaultMessage: [{
-              "type": 0,
-              "value": "Submit"
-            }]
+            defaultMessage: "Submit"
           }),
           emptyClassName: styles.emptySubmit,
           isEmpty: !hasSubmit,
@@ -408,9 +349,10 @@ function ContributionScreen(_ref) {
               disabled: isPreview,
               buttonStyle: submit !== null ? submit.buttonStyle : null,
               focusable: current && isView,
-              children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, submit), {}, {
+              children: /*#__PURE__*/jsx(Text, {
+                ...submit,
                 inline: true
-              }))
+              })
             })
           })
         })]
@@ -425,16 +367,10 @@ function ContributionScreen(_ref) {
       placeholder: "button",
       emptyLabel: submitState !== 4 ? /*#__PURE__*/jsx(FormattedMessage, {
         id: "U2RZp5",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Skip"
-        }]
+        defaultMessage: "Skip"
       }) : /*#__PURE__*/jsx(FormattedMessage, {
         id: "AzN1aW",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Back"
-        }]
+        defaultMessage: "Back"
       }),
       emptyClassName: styles.emptySkip,
       children: /*#__PURE__*/jsx(Transitions, {
@@ -444,14 +380,17 @@ function ContributionScreen(_ref) {
         disabled: transitionDisabled,
         children: /*#__PURE__*/jsx(Button, {
           type: "button",
-          className: classNames([styles.buttonSkip, _defineProperty({}, styles.showBack, submitState === 4)]),
+          className: classNames([styles.buttonSkip, {
+            [styles.showBack]: submitState === 4
+          }]),
           disabled: isPreview,
           onClick: onClickSkip,
           buttonStyle: finalAnswersButton !== null ? finalAnswersButton.buttonStyle : null,
           focusable: current && isView,
-          children: /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, finalAnswersButton), {}, {
+          children: /*#__PURE__*/jsx(Text, {
+            ...finalAnswersButton,
             inline: true
-          }))
+          })
         })
       })
     }) : null, /*#__PURE__*/jsx("div", {
@@ -462,9 +401,9 @@ function ContributionScreen(_ref) {
         children: /*#__PURE__*/jsx("div", {
           className: styles.contributions,
           ref: contributionsRef,
-          children: allContributions.map(function (contribution, contributionIndex) {
-            var nameInnerStyle = nameStyle !== null ? nameStyle.style || null : null;
-            var messageInnerStyle = messageStyle !== null ? messageStyle.style || null : null;
+          children: allContributions.map((contribution, contributionIndex) => {
+            const nameInnerStyle = nameStyle !== null ? nameStyle.style || null : null;
+            const messageInnerStyle = messageStyle !== null ? messageStyle.style || null : null;
             return /*#__PURE__*/jsxs("div", {
               className: styles.contribution,
               style: nameInnerStyle !== null ? getStyleFromColor(nameInnerStyle.color, 'borderColor') : null,
@@ -478,7 +417,7 @@ function ContributionScreen(_ref) {
                 body: contribution.message,
                 textStyle: messageInnerStyle
               })]
-            }, "contribution-".concat(contributionIndex));
+            }, `contribution-${contributionIndex}`);
           })
         })
       })
@@ -488,16 +427,23 @@ function ContributionScreen(_ref) {
       }
     }) : null]
   }, "form"));
-  var headerElement = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
+  const headerElement = !isPlaceholder && hasHeader ? /*#__PURE__*/jsx("div", {
     className: styles.header,
     style: {
       paddingBottom: spacing
     },
-    children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+    children: /*#__PURE__*/jsx(Header, {
+      ...header
+    })
   }) : null;
-  var showReset = isEdit && submitState === 4;
+  const showReset = isEdit && submitState === 4;
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.isPlaceholder, isPlaceholder), styles.submitting, submitState === 1), styles.submitted, submitState > 1), styles.showContributions, submitState === 4)]),
+    className: classNames([styles.container, className, {
+      [styles.isPlaceholder]: isPlaceholder,
+      [styles.submitting]: submitState === 1,
+      [styles.submitted]: submitState > 1,
+      [styles.showContributions]: submitState === 4
+    }]),
     "data-screen-ready": true,
     children: [/*#__PURE__*/jsxs(Container, {
       width: width,
@@ -532,14 +478,18 @@ function ContributionScreen(_ref) {
           })
         }), !isPlaceholder && hasFooter ? /*#__PURE__*/jsx("div", {
           ref: footerRef,
-          className: classNames([styles.footer, _defineProperty({}, styles.disabled, !swipeUpLinkActive)]),
+          className: classNames([styles.footer, {
+            [styles.disabled]: !swipeUpLinkActive
+          }]),
           style: {
             paddingLeft: Math.max(viewerBottomSidesWidth, spacing / 2),
             paddingRight: Math.max(viewerBottomSidesWidth, spacing / 2),
             paddingTop: 0,
             paddingBottom: (!isPreview ? viewerBottomHeight : 0) + spacing / 2
           },
-          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+          children: /*#__PURE__*/jsx(Footer, {
+            ...footerProps
+          })
         }) : null]
       })]
     }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
@@ -550,7 +500,7 @@ function ContributionScreen(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: mediaShouldLoad,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       withoutVideo: isPreview,
       className: styles.background
     }) : null]
@@ -563,19 +513,13 @@ var definition = {
   group: {
     label: defineMessage({
       id: "ZiWlL6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Questions"
-      }]
+      defaultMessage: "Questions"
     }),
     order: 7
   },
   title: defineMessage({
     id: "g6b9Lg",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Contribution"
-    }]
+    defaultMessage: "Contribution"
   }),
   component: ContributionScreen,
   layouts: ['top', 'middle', 'bottom'],
@@ -585,10 +529,7 @@ var definition = {
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'title',
@@ -598,10 +539,7 @@ var definition = {
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'name',
@@ -611,10 +549,7 @@ var definition = {
     },
     label: defineMessage({
       id: "nXVNeg",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Name"
-      }]
+      defaultMessage: "Name"
     })
   }, {
     name: 'message',
@@ -624,10 +559,7 @@ var definition = {
     },
     label: defineMessage({
       id: "RcLsua",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Message"
-      }]
+      defaultMessage: "Message"
     })
   }, {
     name: 'submit',
@@ -637,10 +569,7 @@ var definition = {
     },
     label: defineMessage({
       id: "uAKPQ9",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Submit"
-      }]
+      defaultMessage: "Submit"
     })
   }, {
     name: 'nameStyle',
@@ -652,10 +581,7 @@ var definition = {
     },
     label: defineMessage({
       id: "SyMSDa",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Published name style"
-      }]
+      defaultMessage: "Published name style"
     })
   }, {
     name: 'messageStyle',
@@ -667,10 +593,7 @@ var definition = {
     },
     label: defineMessage({
       id: "+SlKOi",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Published message style"
-      }]
+      defaultMessage: "Published message style"
     })
   }, {
     name: 'settings',
@@ -679,10 +602,7 @@ var definition = {
     isList: true,
     label: defineMessage({
       id: "9omJnT",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Answer settings"
-      }]
+      defaultMessage: "Answer settings"
     }),
     fields: [{
       name: 'canViewAnswers',
@@ -690,10 +610,7 @@ var definition = {
       isHorizontal: true,
       label: defineMessage({
         id: "xcHW4o",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Can view answers"
-        }]
+        defaultMessage: "Can view answers"
       })
     }, {
       name: 'skipButton',
@@ -703,10 +620,7 @@ var definition = {
       },
       label: defineMessage({
         id: "CpCykm",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Skip button"
-        }]
+        defaultMessage: "Skip button"
       })
     }, {
       name: 'backButton',
@@ -716,10 +630,7 @@ var definition = {
       },
       label: defineMessage({
         id: "KIXg9M",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Back button"
-        }]
+        defaultMessage: "Back button"
       })
     }]
   }, {
@@ -727,20 +638,14 @@ var definition = {
     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: {
@@ -755,10 +660,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-contribution",
-    "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,32 +53,32 @@
         "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",
         "@fortawesome/fontawesome-svg-core": "^7.2.0",
         "@fortawesome/free-solid-svg-icons": "^7.2.0",
         "@fortawesome/react-fontawesome": "^3.2.0",
-        "@micromag/core": "^0.4.69",
-        "@micromag/data": "^0.4.69",
-        "@micromag/element-background": "^0.4.70",
-        "@micromag/element-button": "^0.4.70",
-        "@micromag/element-container": "^0.4.69",
-        "@micromag/element-footer": "^0.4.70",
-        "@micromag/element-header": "^0.4.69",
-        "@micromag/element-heading": "^0.4.69",
-        "@micromag/element-layout": "^0.4.69",
-        "@micromag/element-scroll": "^0.4.69",
-        "@micromag/element-share-incentive": "^0.4.69",
-        "@micromag/element-text": "^0.4.69",
-        "@micromag/element-text-input": "^0.4.69",
-        "@micromag/transforms": "^0.4.69",
+        "@micromag/core": "^0.4.74",
+        "@micromag/data": "^0.4.74",
+        "@micromag/element-background": "^0.4.74",
+        "@micromag/element-button": "^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-share-incentive": "^0.4.74",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/element-text-input": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "dompurify": "^3.2.6",
         "lodash": "^4.17.23",
@@ -88,6 +89,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }