@micromag/screen-title 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, TextElement, BoxStyle, Label, Header, Footer, BackgroundElement } from '@micromag/core';
+import { ForwardedRef } from 'react';
+import { HeadingElement, TextElement, BoxStyle, Label, Header, Footer, BackgroundElement, MediaElement } from '@micromag/core';
 
 interface TitleScreenProps {
     layout?: 'top' | 'middle' | 'bottom' | 'split' | 'split-top' | 'split-bottom';
@@ -18,9 +19,10 @@ interface TitleScreenProps {
     current?: boolean;
     active?: boolean;
     transitionStagger?: number;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
-declare function TitleScreen({ layout, title, subtitle, description, boxStyle, withSubtitle, withDescription, withBox, spacing, descriptionEmptyLabel, header, footer, background, current, active, className, }: TitleScreenProps): react_jsx_runtime.JSX.Element;
+declare function TitleScreen({ layout, title, subtitle, description, boxStyle, withSubtitle, withDescription, withBox, spacing, descriptionEmptyLabel, header, footer, background, current, active, mediaRef: customMediaRef, className, }: TitleScreenProps): react_jsx_runtime.JSX.Element;
 
 interface TitleSubtitleCreditsScreenProps {
     credits?: TextElement | null;

package/es/index.js

@@ -1,10 +1,8 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import { ScreenElement } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
-import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox } from '@micromag/core/utils';
+import { isTextFilled, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox, mergeRefs } from '@micromag/core/utils';
 import Background from '@micromag/element-background';
 import Container from '@micromag/element-container';
 import Footer from '@micromag/element-footer';
@@ -13,136 +11,124 @@ import Heading from '@micromag/element-heading';
 import Layout, { Spacer } from '@micromag/element-layout';
 import Text from '@micromag/element-text';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { c } from 'react/compiler-runtime';
 
 var styles = {"container":"micromag-screen-title-container","background":"micromag-screen-title-background","content":"micromag-screen-title-content","emptyTitle":"micromag-screen-title-emptyTitle","emptySubtitle":"micromag-screen-title-emptySubtitle","emptyDescription":"micromag-screen-title-emptyDescription","title":"micromag-screen-title-title","withMargin":"micromag-screen-title-withMargin","subtitle":"micromag-screen-title-subtitle","box":"micromag-screen-title-box","isPlaceholder":"micromag-screen-title-isPlaceholder","layout":"micromag-screen-title-layout"};
 
-function TitleScreen(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'top' : _ref$layout,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$subtitle = _ref.subtitle,
-    subtitle = _ref$subtitle === void 0 ? null : _ref$subtitle,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$boxStyle = _ref.boxStyle,
-    boxStyle = _ref$boxStyle === void 0 ? null : _ref$boxStyle,
-    _ref$withSubtitle = _ref.withSubtitle,
-    withSubtitle = _ref$withSubtitle === void 0 ? false : _ref$withSubtitle,
-    _ref$withDescription = _ref.withDescription,
-    withDescription = _ref$withDescription === void 0 ? false : _ref$withDescription,
-    _ref$withBox = _ref.withBox,
-    withBox = _ref$withBox === void 0 ? false : _ref$withBox,
-    _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 20 : _ref$spacing,
-    _ref$descriptionEmpty = _ref.descriptionEmptyLabel,
-    descriptionEmptyLabel = _ref$descriptionEmpty === void 0 ? /*#__PURE__*/jsx(FormattedMessage, {
-      id: "507VAi",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
-    }) : _ref$descriptionEmpty,
-    _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$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? true : _ref$active,
-    _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 _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit;
-  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 hasTitle = isTextFilled(title);
-  var hasSubtitle = isTextFilled(subtitle);
-  var hasDescription = isTextFilled(description);
-  var layoutParts = layout.split('-');
-  var isSplitted = layoutParts[0] === 'split';
-  var isTopLayout = layout === 'top';
-  var isMiddleLayout = layout === 'middle';
-  var isBottomLayout = layout === 'bottom';
-  var verticalAlign = isSplitted ? layoutParts[1] || null : layoutParts[0];
-  var titleWithMargin = hasTitle && (hasSubtitle || hasDescription) && (!isSplitted || verticalAlign === 'top');
-  var subtitleWithMargin = hasSubtitle && hasDescription && (!isSplitted || verticalAlign === 'bottom');
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
-  var backgroundShouldLoad = current || active;
-  var hasHeader = isHeaderFilled(header);
-  var hasFooter = isFooterFilled(footer);
-  var footerProps = getFooterProps(footer, {
-    isView: isView,
-    current: current,
-    openWebView: openWebView,
-    isPreview: isPreview
+function TitleScreen({
+  layout = 'top',
+  title = null,
+  subtitle = null,
+  description = null,
+  boxStyle = null,
+  withSubtitle = false,
+  withDescription = false,
+  withBox = false,
+  spacing = 20,
+  descriptionEmptyLabel = /*#__PURE__*/jsx(FormattedMessage, {
+    id: "507VAi",
+    defaultMessage: "Description"
+  }),
+  header = null,
+  footer = null,
+  background = null,
+  current = true,
+  active = true,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit
+  } = useScreenRenderContext();
+  const {
+    topHeight: viewerTopHeight,
+    bottomHeight: viewerBottomHeight,
+    bottomSidesWidth: viewerBottomSidesWidth
+  } = useViewerContext();
+  const {
+    open: openWebView
+  } = useViewerWebView();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current, true);
+  const hasTitle = isTextFilled(title);
+  const hasSubtitle = isTextFilled(subtitle);
+  const hasDescription = isTextFilled(description);
+  const layoutParts = layout.split('-');
+  const isSplitted = layoutParts[0] === 'split';
+  const isTopLayout = layout === 'top';
+  const isMiddleLayout = layout === 'middle';
+  const isBottomLayout = layout === 'bottom';
+  const verticalAlign = isSplitted ? layoutParts[1] || null : layoutParts[0];
+  const titleWithMargin = hasTitle && (hasSubtitle || hasDescription) && (!isSplitted || verticalAlign === 'top');
+  const subtitleWithMargin = hasSubtitle && hasDescription && (!isSplitted || verticalAlign === 'bottom');
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+  const backgroundShouldLoad = current || active;
+  const hasHeader = isHeaderFilled(header);
+  const hasFooter = isFooterFilled(footer);
+  const footerProps = getFooterProps(footer, {
+    isView,
+    current,
+    openWebView,
+    isPreview
   });
-  var titleElement = /*#__PURE__*/jsx(ScreenElement, {
+  const titleElement = /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "title",
     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({
-      className: classNames([styles.title, _defineProperty({}, styles.withMargin, titleWithMargin)])
-    }, title), {}, {
+    children: hasTitle ? /*#__PURE__*/jsx(Heading, {
+      className: classNames([styles.title, {
+        [styles.withMargin]: titleWithMargin
+      }]),
+      ...title,
       size: 1
-    })) : null
+    }) : null
   }, "title");
-  var subtitleElement = withSubtitle ? /*#__PURE__*/jsx(ScreenElement, {
+  const subtitleElement = withSubtitle ? /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "subtitle",
     emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
       id: "d60tSn",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
+      defaultMessage: "Subtitle"
     }),
     emptyClassName: styles.emptySubtitle,
     isEmpty: !hasSubtitle,
-    children: hasSubtitle ? /*#__PURE__*/jsx(Heading, _objectSpread(_objectSpread({
-      className: classNames([styles.subtitle, _defineProperty({}, styles.withMargin, subtitleWithMargin)])
-    }, subtitle), {}, {
+    children: hasSubtitle ? /*#__PURE__*/jsx(Heading, {
+      className: classNames([styles.subtitle, {
+        [styles.withMargin]: subtitleWithMargin
+      }]),
+      ...subtitle,
       size: 2
-    })) : null
+    }) : null
   }, "subtitle") : null;
-  var descriptionElement = withDescription ? /*#__PURE__*/jsx(ScreenElement, {
+  const descriptionElement = withDescription ? /*#__PURE__*/jsx(ScreenElement, {
     placeholder: "shortText",
     emptyLabel: descriptionEmptyLabel,
     emptyClassName: styles.emptyDescription,
     isEmpty: !hasDescription,
-    children: hasDescription ? /*#__PURE__*/jsx(Text, _objectSpread({}, description)) : null
+    children: hasDescription ? /*#__PURE__*/jsx(Text, {
+      ...description
+    }) : null
   }, "description") : null;
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty({}, styles.isPlaceholder, isPlaceholder)]),
+    className: classNames([styles.container, className, {
+      [styles.isPlaceholder]: isPlaceholder
+    }]),
     "data-screen-ready": true,
     children: [/*#__PURE__*/jsx(Container, {
       width: width,
@@ -162,7 +148,9 @@ function TitleScreen(_ref) {
           style: {
             paddingBottom: spacing
           },
-          children: /*#__PURE__*/jsx(Header, _objectSpread({}, header))
+          children: /*#__PURE__*/jsx(Header, {
+            ...header
+          })
         }) : null, !isPlaceholder && hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && isBottomLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, !isPlaceholder && hasHeader && !hasFooter && isMiddleLayout ? /*#__PURE__*/jsx(Spacer, {}, "spacer-cta-top") : null, withBox && !isSplitted ? /*#__PURE__*/jsx("div", {
           className: styles.box,
           style: isEdit || isPlaceholder || hasTitle || hasSubtitle || hasDescription ? getStyleFromBox(boxStyle) : null,
@@ -185,7 +173,9 @@ function TitleScreen(_ref) {
             paddingLeft: Math.max(0, viewerBottomSidesWidth - spacing),
             paddingRight: Math.max(0, viewerBottomSidesWidth - spacing)
           },
-          children: /*#__PURE__*/jsx(Footer, _objectSpread({}, footerProps))
+          children: /*#__PURE__*/jsx(Footer, {
+            ...footerProps
+          })
         }, "call-to-action") : null]
       })
     }), !isPlaceholder ? /*#__PURE__*/jsx(Background, {
@@ -196,45 +186,100 @@ function TitleScreen(_ref) {
       playing: backgroundPlaying,
       muted: muted,
       shouldLoad: backgroundShouldLoad,
-      mediaRef: mediaRef,
+      mediaRef: mergeRefs(mediaRef, customMediaRef),
       withoutVideo: isPreview,
       className: styles.background
     }) : null]
   });
 }
 
-function TitleSubtitleScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
-    withSubtitle: true
-  }));
+function TitleSubtitleScreen(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(TitleScreen, {
+      ...props,
+      withSubtitle: true
+    });
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 }
 
-var _excluded = ["credits"];
-function TitleSubtitleCreditsScreen(_ref) {
-  var _ref$credits = _ref.credits,
-    credits = _ref$credits === void 0 ? null : _ref$credits,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
-    description: credits,
-    withSubtitle: true,
-    withDescription: true,
-    descriptionEmptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
+function TitleSubtitleCreditsScreen(t0) {
+  const $ = c(7);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      credits: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const credits = t1 === undefined ? null : t1;
+  let t2;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /*#__PURE__*/jsx(FormattedMessage, {
       id: "/hupzO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Credits"
-      }]
-    })
-  }));
+      defaultMessage: "Credits"
+    });
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== credits || $[5] !== props) {
+    t3 = /*#__PURE__*/jsx(TitleScreen, {
+      ...props,
+      description: credits,
+      withSubtitle: true,
+      withDescription: true,
+      descriptionEmptyLabel: t2
+    });
+    $[4] = credits;
+    $[5] = props;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 
 function TitleWithBoxScreen(props) {
-  return /*#__PURE__*/jsx(TitleScreen, _objectSpread(_objectSpread({}, props), {}, {
-    withSubtitle: true,
-    withDescription: true,
-    withBox: true
-  }));
+  const $ = c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = /*#__PURE__*/jsx(TitleScreen, {
+      ...props,
+      withSubtitle: true,
+      withDescription: true,
+      withBox: true
+    });
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
 }
 
 var definition = [{
@@ -243,19 +288,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     }),
     order: 1
   },
   title: defineMessage({
     id: "dVcog7",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title"
-    }]
+    defaultMessage: "Title"
   }),
   component: TitleScreen,
   layouts: ['top', 'middle', 'bottom'],
@@ -266,10 +305,7 @@ var definition = [{
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'title',
@@ -279,30 +315,21 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     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: {
@@ -317,10 +344,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -337,19 +361,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     }),
     order: 1
   },
   title: defineMessage({
     id: "P1dwGU",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with subtitle"
-    }]
+    defaultMessage: "Title with subtitle"
   }),
   component: TitleSubtitleScreen,
   layouts: ['top', 'middle', 'bottom', 'split'],
@@ -360,10 +378,7 @@ var definition = [{
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'title',
@@ -373,10 +388,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'subtitle',
@@ -386,30 +398,21 @@ var definition = [{
     },
     label: defineMessage({
       id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
+      defaultMessage: "Subtitle"
     })
   }, {
     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: {
@@ -424,10 +427,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -444,19 +444,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     }),
     order: 1
   },
   title: defineMessage({
     id: "vZrFq6",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with subtitle and credits"
-    }]
+    defaultMessage: "Title with subtitle and credits"
   }),
   component: TitleSubtitleCreditsScreen,
   layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
@@ -467,10 +461,7 @@ var definition = [{
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'title',
@@ -480,10 +471,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'subtitle',
@@ -493,10 +481,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
+      defaultMessage: "Subtitle"
     })
   }, {
     name: 'credits',
@@ -506,30 +491,21 @@ var definition = [{
     },
     label: defineMessage({
       id: "upzOTm",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Credits"
-      }]
+      defaultMessage: "Credits"
     })
   }, {
     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: {
@@ -544,10 +520,7 @@ var definition = [{
     type: 'footer',
     label: defineMessage({
       id: "g4nybp",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Footer"
-      }]
+      defaultMessage: "Footer"
     }),
     theme: {
       callToAction: {
@@ -564,19 +537,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "uKJRh2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     }),
     order: 1
   },
   title: defineMessage({
     id: "9a5s+m",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Title with box"
-    }]
+    defaultMessage: "Title with box"
   }),
   component: TitleWithBoxScreen,
   layouts: ['top', 'middle', 'bottom', 'split-top', 'split-bottom'],
@@ -587,10 +554,7 @@ var definition = [{
     defaultValue: 'top',
     label: defineMessage({
       id: "4iBXj2",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Layout"
-      }]
+      defaultMessage: "Layout"
     })
   }, {
     name: 'title',
@@ -600,10 +564,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "N25iDO",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Title"
-      }]
+      defaultMessage: "Title"
     })
   }, {
     name: 'subtitle',
@@ -613,10 +574,7 @@ var definition = [{
     },
     label: defineMessage({
       id: "EcZYpr",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Subtitle"
-      }]
+      defaultMessage: "Subtitle"
     })
   }, {
     name: 'description',
@@ -626,30 +584,21 @@ var definition = [{
     },
     label: defineMessage({
       id: "ZCe0r4",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Description"
-      }]
+      defaultMessage: "Description"
     })
   }, {
     type: 'fields',
     isList: true,
     label: defineMessage({
       id: "LOknw0",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Styles"
-      }]
+      defaultMessage: "Styles"
     }),
     fields: [{
       name: 'boxStyle',
       type: 'box-style-form',
       label: defineMessage({
         id: "f5Yipd",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Box"
-        }]
+        defaultMessage: "Box"
       })
     }]
   }, {
@@ -657,20 +606,14 @@ var definition = [{
     type: 'background',
     label: defineMessage({
       id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }, {
     name: 'header',
     type: 'header',
     label: defineMessage({
       id: "rhuDxI",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Header"
-      }]
+      defaultMessage: "Header"
     }),
     theme: {
       badge: {
@@ -685,10 +628,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-title",
-    "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,24 +53,24 @@
         "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-header": "^0.4.69",
-        "@micromag/element-heading": "^0.4.69",
-        "@micromag/element-layout": "^0.4.69",
-        "@micromag/element-text": "^0.4.69",
-        "@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-header": "^0.4.74",
+        "@micromag/element-heading": "^0.4.74",
+        "@micromag/element-layout": "^0.4.74",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -79,6 +80,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4f76a8f1ad594be2aadb4a593da5455da8afc8b6",
+    "gitHead": "fe510ee87845280d0760cb292aef9d2eb69e67c1",
     "types": "es/index.d.ts"
 }