@micromag/screen-article 0.3.426 → 0.3.430

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-main.micromag-screen-article-hasText{margin-bottom:30px}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-ms-flex-pack:justify;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}
+.micromag-screen-article-container .micromag-screen-article-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-article-container{position:relative}.micromag-screen-article-container .micromag-screen-article-background{z-index:0}.micromag-screen-article-container .micromag-screen-article-content{z-index:1}.micromag-screen-article-container .micromag-screen-article-layout{position:relative}.micromag-screen-article-container .micromag-screen-article-emptyAuthor,.micromag-screen-article-container .micromag-screen-article-emptyText,.micromag-screen-article-container .micromag-screen-article-emptyTitle{margin:10px auto;padding:12px 0 10px;width:100%}.micromag-screen-article-container .micromag-screen-article-emptyDate,.micromag-screen-article-container .micromag-screen-article-emptySurtitle{-ms-flex-negative:0;flex-shrink:0;padding:4px 0;width:50%}.micromag-screen-article-container .micromag-screen-article-main.micromag-screen-article-hasText{margin-bottom:30px}.micromag-screen-article-container .micromag-screen-article-visualContainer{height:auto;left:0;position:absolute;top:0;width:100%;z-index:-1}.micromag-screen-article-container .micromag-screen-article-surtitle{font-size:12px;width:100%}.micromag-screen-article-container .micromag-screen-article-date{font-size:12px;text-align:right;width:100%}.micromag-screen-article-container .micromag-screen-article-title{margin:10px 0}.micromag-screen-article-container .micromag-screen-article-text blockquote,.micromag-screen-article-container .micromag-screen-article-text h2,.micromag-screen-article-container .micromag-screen-article-text h3,.micromag-screen-article-container .micromag-screen-article-text img,.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text p,.micromag-screen-article-container .micromag-screen-article-text ul{margin-bottom:1rem}.micromag-screen-article-container .micromag-screen-article-text blockquote:last-child,.micromag-screen-article-container .micromag-screen-article-text h2:last-child,.micromag-screen-article-container .micromag-screen-article-text h3:last-child,.micromag-screen-article-container .micromag-screen-article-text img:last-child,.micromag-screen-article-container .micromag-screen-article-text ol:last-child,.micromag-screen-article-container .micromag-screen-article-text p:last-child,.micromag-screen-article-container .micromag-screen-article-text ul:last-child{margin-bottom:0}.micromag-screen-article-container .micromag-screen-article-text h2{font-size:2em}.micromag-screen-article-container .micromag-screen-article-text h3{font-size:1.5em}.micromag-screen-article-container .micromag-screen-article-text ol,.micromag-screen-article-container .micromag-screen-article-text ul{list-style-position:inside}.micromag-screen-article-container .micromag-screen-article-text blockquote{border-left:1px solid;padding-left:.5em}.micromag-screen-article-container .micromag-screen-article-topContent{-webkit-box-pack:justify;-ms-flex-pack:justify;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:space-between}.micromag-screen-article-container .micromag-screen-article-footer{-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out}.micromag-screen-article-container .micromag-screen-article-footer a{padding:0}.micromag-screen-article-container .micromag-screen-article-footer.micromag-screen-article-disabled{opacity:0;pointer-events:none}.micromag-screen-article-container.micromag-screen-article-isPlaceholder .micromag-screen-article-layout{padding:10px}

package/es/index.js

@@ -62,7 +62,6 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref6;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -266,7 +265,7 @@ var ArticleScreen = function ArticleScreen(_ref) {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles.container, (_ref6 = {}, _defineProperty(_ref6, className, className !== null), _defineProperty(_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": ready
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,

package/lib/index.js

@@ -28,31 +28,10 @@ var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var appleNews = require('@micromag/transforms/apple-news');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
-var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
-var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Author__default = /*#__PURE__*/_interopDefaultLegacy(Author);
-var Background__default = /*#__PURE__*/_interopDefaultLegacy(Background);
-var Container__default = /*#__PURE__*/_interopDefaultLegacy(Container);
-var Footer__default = /*#__PURE__*/_interopDefaultLegacy(Footer);
-var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
-var Heading__default = /*#__PURE__*/_interopDefaultLegacy(Heading);
-var Layout__default = /*#__PURE__*/_interopDefaultLegacy(Layout);
-var Scroll__default = /*#__PURE__*/_interopDefaultLegacy(Scroll);
-var Text__default = /*#__PURE__*/_interopDefaultLegacy(Text);
-var Visual__default = /*#__PURE__*/_interopDefaultLegacy(Visual);
-var _objectSpread__default = /*#__PURE__*/_interopDefaultLegacy(_objectSpread);
-var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
-
 var styles = {"container":"micromag-screen-article-container","background":"micromag-screen-article-background","emptySurtitle":"micromag-screen-article-emptySurtitle","emptyDate":"micromag-screen-article-emptyDate","emptyTitle":"micromag-screen-article-emptyTitle","emptyAuthor":"micromag-screen-article-emptyAuthor","emptyText":"micromag-screen-article-emptyText","content":"micromag-screen-article-content","layout":"micromag-screen-article-layout","main":"micromag-screen-article-main","hasText":"micromag-screen-article-hasText","visualContainer":"micromag-screen-article-visualContainer","surtitle":"micromag-screen-article-surtitle","date":"micromag-screen-article-date","title":"micromag-screen-article-title","text":"micromag-screen-article-text","topContent":"micromag-screen-article-topContent","footer":"micromag-screen-article-footer","disabled":"micromag-screen-article-disabled","isPlaceholder":"micromag-screen-article-isPlaceholder"};
 
 var propTypes = {
-  layout: PropTypes__default["default"].oneOf(['normal']),
+  layout: PropTypes.oneOf(['normal']),
   image: core.PropTypes.visual,
   title: core.PropTypes.title,
   surtitle: core.PropTypes.text,
@@ -60,14 +39,14 @@ var propTypes = {
   author: core.PropTypes.author,
   // author: MicromagPropTypes.text,
   text: core.PropTypes.text,
-  spacing: PropTypes__default["default"].number,
+  spacing: PropTypes.number,
   background: core.PropTypes.backgroundElement,
   header: core.PropTypes.header,
   footer: core.PropTypes.footer,
-  current: PropTypes__default["default"].bool,
-  active: PropTypes__default["default"].bool,
-  type: PropTypes__default["default"].string,
-  className: PropTypes__default["default"].string
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  type: PropTypes.string,
+  className: PropTypes.string
 };
 var defaultProps = {
   layout: 'normal',
@@ -87,7 +66,6 @@ var defaultProps = {
   className: null
 };
 var ArticleScreen = function ArticleScreen(_ref) {
-  var _ref6;
   var image = _ref.image,
     title = _ref.title,
     surtitle = _ref.surtitle,
@@ -169,15 +147,15 @@ var ArticleScreen = function ArticleScreen(_ref) {
   }, [image]);
   var partialDate = hasDate ? date.body || null : null;
   var finalDate = React.useMemo(function () {
-    return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs__default["default"](partialDate).toDate(), {
+    return partialDate !== null ? "<p>".concat(intl.formatDate(dayjs(partialDate).toDate(), {
       year: 'numeric',
       month: 'long',
       day: '2-digit'
     }), "</p>") : null;
   }, [partialDate]);
-  var imageElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var imageElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     placeholder: "image",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "ebsPd4",
       defaultMessage: [{
         "type": 0,
@@ -186,10 +164,10 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptyText,
     isEmpty: !hasImage
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     ref: imageCntRef,
     className: styles.visualContainer
-  }, hasImage ? /*#__PURE__*/React__default["default"].createElement(Visual__default["default"], {
+  }, hasImage ? /*#__PURE__*/React.createElement(Visual, {
     media: image
     // width={width - spacing * 2} // in layout flow
     ,
@@ -198,10 +176,10 @@ var ArticleScreen = function ArticleScreen(_ref) {
     resolution: resolution,
     className: styles.visual
   }) : null));
-  var titleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var titleElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     key: "title",
     placeholder: "title",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "2ZOPe+",
       defaultMessage: [{
         "type": 0,
@@ -210,13 +188,13 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptyTitle,
     isEmpty: !hasTitle
-  }, hasTitle ? /*#__PURE__*/React__default["default"].createElement(Heading__default["default"], Object.assign({
+  }, hasTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({
     className: styles.title
   }, title)) : null);
-  var surtitleElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var surtitleElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     key: "surtitle",
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "vdWMTA",
       defaultMessage: [{
         "type": 0,
@@ -225,13 +203,13 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptySurtitle,
     isEmpty: !hasSurtitle
-  }, hasSurtitle ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+  }, hasSurtitle ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.surtitle
   }, surtitle)) : null);
-  var dateElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var dateElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     key: "date",
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "/MsgWe",
       defaultMessage: [{
         "type": 0,
@@ -240,15 +218,15 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptyDate,
     isEmpty: !hasDate
-  }, hasDate ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+  }, hasDate ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.date
   }, date, {
     body: finalDate
   })) : null);
-  var authorElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var authorElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     key: "author",
     placeholder: "line",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "xYqGzM",
       defaultMessage: [{
         "type": 0,
@@ -257,14 +235,14 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptyAuthor,
     isEmpty: !hasAuthor && !hasSimpleAuthor
-  }, hasSimpleAuthor ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+  }, hasSimpleAuthor ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.author
-  }, author)) : null, hasAuthor ? /*#__PURE__*/React__default["default"].createElement(Author__default["default"], {
+  }, author)) : null, hasAuthor ? /*#__PURE__*/React.createElement(Author, {
     author: author
   }) : null);
-  var contentElement = /*#__PURE__*/React__default["default"].createElement(components.ScreenElement, {
+  var contentElement = /*#__PURE__*/React.createElement(components.ScreenElement, {
     placeholder: "text",
-    emptyLabel: /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
+    emptyLabel: /*#__PURE__*/React.createElement(reactIntl.FormattedMessage, {
       id: "z4CiV1",
       defaultMessage: [{
         "type": 0,
@@ -273,11 +251,11 @@ var ArticleScreen = function ArticleScreen(_ref) {
     }),
     emptyClassName: styles.emptyText,
     isEmpty: !hasText
-  }, hasText ? /*#__PURE__*/React__default["default"].createElement(Text__default["default"], Object.assign({
+  }, hasText ? /*#__PURE__*/React.createElement(Text, Object.assign({
     className: styles.text
   }, text)) : null);
   var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     scrolledBottom = _useState2[0],
     setScrolledBottom = _useState2[1];
   var onScrolledBottom = React.useCallback(function (_ref5) {
@@ -290,42 +268,42 @@ var ArticleScreen = function ArticleScreen(_ref) {
   var onScrolledNotBottom = React.useCallback(function () {
     setScrolledBottom(false);
   }, [setScrolledBottom]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.container, (_ref6 = {}, _defineProperty__default["default"](_ref6, className, className !== null), _defineProperty__default["default"](_ref6, styles.isPlaceholder, isPlaceholder), _ref6)]),
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.isPlaceholder, isPlaceholder)]),
     "data-screen-ready": ready
-  }, /*#__PURE__*/React__default["default"].createElement(Container__default["default"], {
+  }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
     className: styles.content
-  }, /*#__PURE__*/React__default["default"].createElement(Scroll__default["default"], {
+  }, /*#__PURE__*/React.createElement(Scroll, {
     disabled: scrollingDisabled,
     onScrolledBottom: onScrolledBottom,
     onScrolledNotBottom: onScrolledNotBottom
-  }, /*#__PURE__*/React__default["default"].createElement(Layout__default["default"], {
+  }, /*#__PURE__*/React.createElement(Layout, {
     className: styles.layout,
     style: !isPlaceholder ? {
       padding: spacing,
       paddingTop: hasHeader ? spacing / 2 + (!isPreview ? viewerTopHeight : 0) : spacing / 2 + imageHeight,
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + spacing / 2
     } : null
-  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
     key: "header",
     style: {
       height: hasImage && imageHeight > 0 ? 0 : 'auto',
       paddingBottom: imageHeight > 0 ? imageHeight - viewerTopHeight : spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Header__default["default"], header)) : null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.main, _defineProperty__default["default"]({}, styles.hasText, hasText)])
-  }, imageElement, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.main, _defineProperty({}, styles.hasText, hasText)])
+  }, imageElement, /*#__PURE__*/React.createElement("div", {
     className: styles.topContent
-  }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles.footer, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
+  }, surtitleElement, dateElement), titleElement, authorElement), contentElement, !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.footer, _defineProperty({}, styles.disabled, !scrolledBottom)]),
     style: {
       paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
       paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0),
       paddingTop: spacing
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Footer__default["default"], footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React__default["default"].createElement(Background__default["default"], {
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null))), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
     background: background,
     width: width,
     height: height,
@@ -340,16 +318,16 @@ var ArticleScreen = function ArticleScreen(_ref) {
 };
 ArticleScreen.propTypes = propTypes;
 ArticleScreen.defaultProps = defaultProps;
-var ArticleScreen$1 = /*#__PURE__*/React__default["default"].memo(ArticleScreen);
+var ArticleScreen$1 = /*#__PURE__*/React.memo(ArticleScreen);
 
 var transform = function transform(newStory, _ref) {
   var body = _ref.body;
   var bodyComponent = body;
-  var _Container = appleNews.Container(null, _toConsumableArray__default["default"](bodyComponent ? [bodyComponent] : [])),
+  var _Container = appleNews.Container(null, _toConsumableArray(bodyComponent ? [bodyComponent] : [])),
     containerStory = _Container.story,
     containerComponent = _Container.component;
-  return _objectSpread__default["default"](_objectSpread__default["default"]({}, containerStory), {}, {
-    components: [].concat(_toConsumableArray__default["default"](newStory.components || []), _toConsumableArray__default["default"](containerComponent ? [containerComponent] : []))
+  return _objectSpread(_objectSpread({}, containerStory), {}, {
+    components: [].concat(_toConsumableArray(newStory.components || []), _toConsumableArray(containerComponent ? [containerComponent] : []))
   });
 };
 
@@ -507,4 +485,4 @@ var definition = [{
 }];
 
 exports.ArticleScreen = ArticleScreen$1;
-exports["default"] = definition;
+exports.default = definition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-article",
-    "version": "0.3.426",
+    "version": "0.3.430",
     "private": false,
     "description": "",
     "keywords": [
@@ -28,6 +28,14 @@
     "license": "ISC",
     "main": "lib/index.js",
     "module": "es/index.js",
+    "style": "assets/css/styles.css",
+    "exports": {
+        ".": {
+            "require": "./lib/index.js",
+            "import": "./es/index.js"
+        },
+        "./assets/css/*.css": "./assets/css/*.css"
+    },
     "files": [
         "lib",
         "es",
@@ -46,19 +54,19 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.423",
-        "@micromag/element-author": "^0.3.423",
-        "@micromag/element-background": "^0.3.423",
-        "@micromag/element-container": "^0.3.423",
-        "@micromag/element-footer": "^0.3.423",
-        "@micromag/element-header": "^0.3.423",
-        "@micromag/element-heading": "^0.3.423",
-        "@micromag/element-layout": "^0.3.423",
-        "@micromag/element-scroll": "^0.3.426",
-        "@micromag/element-stack": "^0.3.423",
-        "@micromag/element-text": "^0.3.423",
-        "@micromag/element-visual": "^0.3.423",
-        "@micromag/transforms": "^0.3.423",
+        "@micromag/core": "^0.3.430",
+        "@micromag/element-author": "^0.3.430",
+        "@micromag/element-background": "^0.3.430",
+        "@micromag/element-container": "^0.3.430",
+        "@micromag/element-footer": "^0.3.430",
+        "@micromag/element-header": "^0.3.430",
+        "@micromag/element-heading": "^0.3.430",
+        "@micromag/element-layout": "^0.3.430",
+        "@micromag/element-scroll": "^0.3.430",
+        "@micromag/element-stack": "^0.3.430",
+        "@micromag/element-text": "^0.3.430",
+        "@micromag/element-visual": "^0.3.430",
+        "@micromag/transforms": "^0.3.430",
         "classnames": "^2.2.6",
         "dayjs": "^1.11.10",
         "lodash": "^4.17.21",
@@ -70,5 +78,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "ba8ca7eef7a09a9cc258b944b353a955f85e75d3"
+    "gitHead": "da790d76dba9d8e308d9f9c4e51d93a4a0e012a9"
 }