@kids-reporter/draft-renderer 1.0.12 → 1.0.14

package/lib/block-renderers/image-link.js

@@ -4,19 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageLinkInInfoBox = exports.ImageLinkInArticleBody = exports.ImageLinkBlock = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _draftJs = require("draft-js");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-var _imageBlock = require("./image-block");
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = _interopRequireDefault(require("../block-render-maps/index"));
 var _index2 = require("../entity-decorators/index");
-var _mediaQuery = require("../utils/media-query");
 var _constants = require("../utils/constants");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _mediaQuery = require("../utils/media-query");
+var _imageBlock = require("./image-block");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const fallbackImg = '/assets/images/image_placeholder.png';
 const Figure = _styledComponents.default.figure`
   width: 100%;
@@ -26,10 +26,10 @@ const Img = _styledComponents.default.img`
   object-fit: contain;
   ${props => props.$isDesktopAndAbove ? 'cursor: zoom-in;' : ''};
 `;
-const ImageLinkBlock = ({
+function ImageLinkBlockInner({
   className = '',
   data
-}) => {
+}) {
   const theme = (0, _styledComponents.useTheme)();
   const {
     url,
@@ -52,23 +52,35 @@ const ImageLinkBlock = ({
   const commonImgProps = {
     src: url ?? fallbackImg
   };
-  const imgBlock = /*#__PURE__*/_react.default.createElement(Figure, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(Img, _extends({}, commonImgProps, {
-    $isDesktopAndAbove: isDesktopAndAbove,
-    onClick: () => {
-      var _theme$handleImgModal;
-      return isDesktopAndAbove && (theme === null || theme === void 0 || (_theme$handleImgModal = theme.handleImgModalOpen) === null || _theme$handleImgModal === void 0 ? void 0 : _theme$handleImgModal.call(theme, commonImgProps));
-    }
-  })), /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-    blockRenderMap: blockRenderMap,
-    editorState: editorState,
-    readOnly: true
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    ,
-    onChange: () => {}
-  }));
+  const imgBlock = /*#__PURE__*/(0, _jsxRuntime.jsxs)(Figure, {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+      ...commonImgProps,
+      $isDesktopAndAbove: isDesktopAndAbove,
+      onClick: () => {
+        var _handleImgModalOpen, _ref;
+        return isDesktopAndAbove && (theme === null || theme === void 0 || (_handleImgModalOpen = (_ref = theme).handleImgModalOpen) === null || _handleImgModalOpen === void 0 ? void 0 : _handleImgModalOpen.call(_ref, commonImgProps));
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
+      blockRenderMap: blockRenderMap,
+      editorState: editorState,
+      readOnly: true,
+      onChange: () => {}
+    })]
+  });
   return imgBlock;
+}
+const ImageLinkBlock = ({
+  className = '',
+  data
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.ThemeProvider, {
+    theme: {},
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlockInner, {
+      className: className,
+      data: data
+    })
+  });
 };
 exports.ImageLinkBlock = ImageLinkBlock;
 const ArticleBodyContainer = _styledComponents.default.div`
@@ -112,6 +124,8 @@ const ArticleBodyContainer = _styledComponents.default.div`
             margin: 5px 27px 5px 0px;
           }
         `;
+    default:
+      return '';
   }
 }}
 `;
@@ -119,23 +133,25 @@ const ImageLinkInArticleBody = ({
   className = '',
   data
 }) => {
-  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
     $alignment: data.alignment,
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
-    data: data
-  }));
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
+      data: data
+    })
+  });
 };
 exports.ImageLinkInArticleBody = ImageLinkInArticleBody;
 const ImageLinkInInfoBox = ({
   className = '',
   data
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_imageBlock.InfoBoxContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_imageBlock.InfoBoxContainer, {
     $alignment: data.alignment,
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(ImageLinkBlock, {
-    data: data
-  }));
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageLinkBlock, {
+      data: data
+    })
+  });
 };
 exports.ImageLinkInInfoBox = ImageLinkInInfoBox;

package/lib/block-renderers/index.js

@@ -10,8 +10,8 @@ var _embeddedCodeBlock = require("./embedded-code-block");
 var _imageBlock = require("./image-block");
 var _imageLink = require("./image-link");
 var _infoBoxBlock = require("./info-box-block");
-var _slideshowBlock = require("./slideshow-block");
 var _newsReading = require("./news-reading");
+var _slideshowBlock = require("./slideshow-block");
 const blockRenderers = exports.blockRenderers = {
   BlockquoteInArticleBody: _blockquote.BlockquoteInArticleBody,
   Divider: _divider.Divider,

package/lib/block-renderers/info-box-block.js

@@ -10,9 +10,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = _interopRequireDefault(require("../block-render-maps/index"));
 var _imageBlock = require("../block-renderers/image-block");
 var _imageLink = require("../block-renderers/image-link");
-var _index2 = require("../utils/index");
-var _index3 = require("../entity-decorators/index");
+var _index2 = require("../entity-decorators/index");
+var _index3 = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
+var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -58,7 +59,9 @@ const ClearFloat = _styledComponents.default.div`
 function NewsChargeStation({
   children
 }) {
-  return /*#__PURE__*/_react.default.createElement(NewsChargeStationContainer, null, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(NewsChargeStationContainer, {
+    children: children
+  });
 }
 const HeaderBorderContainer = _styledComponents.default.div`
   ${({
@@ -67,19 +70,19 @@ const HeaderBorderContainer = _styledComponents.default.div`
   let logoColor;
   let bgColor;
   switch (theme === null || theme === void 0 ? void 0 : theme.themeColor) {
-    case _index2.ThemeColorEnum.YELLOW:
+    case _index3.ThemeColorEnum.YELLOW:
       {
         logoColor = 'red';
         bgColor = '#fff0d2';
         break;
       }
-    case _index2.ThemeColorEnum.RED:
+    case _index3.ThemeColorEnum.RED:
       {
         logoColor = 'blue';
         bgColor = '#ffd2d2';
         break;
       }
-    case _index2.ThemeColorEnum.BLUE:
+    case _index3.ThemeColorEnum.BLUE:
     default:
       {
         logoColor = 'yellow';
@@ -110,7 +113,9 @@ const HeaderBorderContainer = _styledComponents.default.div`
 function HeaderBorder({
   children
 }) {
-  return /*#__PURE__*/_react.default.createElement(HeaderBorderContainer, null, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderBorderContainer, {
+    children: children
+  });
 }
 const BoxBorderContainer = _styledComponents.default.div`
   ${containerStyles}
@@ -122,7 +127,7 @@ const BoxBorderContainer = _styledComponents.default.div`
   theme
 }) => `
     &::before {
-      background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-2-${(theme === null || theme === void 0 ? void 0 : theme.themeColor) || _index2.ThemeColorEnum.BLUE}.png);
+      background-image: url(https://www.unpkg.com/@kids-reporter/draft-renderer/public/images/info-box-blocksy-child-2-${(theme === null || theme === void 0 ? void 0 : theme.themeColor) || _index3.ThemeColorEnum.BLUE}.png);
     }`}
 
   &::before {
@@ -138,7 +143,9 @@ const BoxBorderContainer = _styledComponents.default.div`
 function BoxBorder({
   children
 }) {
-  return /*#__PURE__*/_react.default.createElement(BoxBorderContainer, null, children);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BoxBorderContainer, {
+    children: children
+  });
 }
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 700px;
@@ -160,7 +167,7 @@ function InfoBoxInArticleBody({
     rawContentState
   } = data;
   const contentState = (0, _draftJs.convertFromRaw)(rawContentState);
-  const editorState = _draftJs.EditorState.createWithContent(contentState, _index3.decorator);
+  const editorState = _draftJs.EditorState.createWithContent(contentState, _index2.decorator);
   let Component;
   let blockRenderMap = _index.default.infoBox.default;
   switch (type) {
@@ -182,17 +189,20 @@ function InfoBoxInArticleBody({
         break;
       }
   }
-  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(Component, null, /*#__PURE__*/_react.default.createElement(EditorContainer, null, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, {
-    blockRenderMap: blockRenderMap,
-    blockRendererFn: blockRendererFn,
-    editorState: editorState,
-    readOnly: true
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    ,
-    onChange: () => {}
-  }), /*#__PURE__*/_react.default.createElement(ClearFloat, null))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(EditorContainer, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_draftJs.Editor, {
+          blockRenderMap: blockRenderMap,
+          blockRendererFn: blockRendererFn,
+          editorState: editorState,
+          readOnly: true,
+          onChange: () => {}
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearFloat, {})]
+      })
+    })
+  });
 }
 function AtomicBlock(props) {
   const entity = props.contentState.getEntity(props.block.getEntityAt(0));

package/lib/block-renderers/multimedia.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _mediaQuery = require("../utils/media-query");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
+var _mediaQuery = require("../utils/media-query");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const mockup = {
   mobile: {

package/lib/block-renderers/news-reading.js

@@ -4,12 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NewsReading = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _dropdown = require("./dropdown");
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ArticleBodyContainer = _styledComponents.default.div`
   max-width: 600px;
   width: calc(280 / 320 * 100%);
@@ -43,16 +42,19 @@ const NewsReading = function ({
   if (readings.length === 0) {
     return null;
   }
-  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_dropdown.Dropdown, {
-    options: options,
-    onChange: option => setSelectedOption(option),
-    labelForMore: "\u66F4\u591A\u8A9E\u8A00"
-  }), /*#__PURE__*/_react.default.createElement(Divider, null), (selectedReading === null || selectedReading === void 0 ? void 0 : selectedReading.embedCode) && /*#__PURE__*/_react.default.createElement(IframeContainer, null, /*#__PURE__*/_react.default.createElement("div", {
-    dangerouslySetInnerHTML: {
-      __html: selectedReading.embedCode
-    }
-  })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleBodyContainer, {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdown.Dropdown, {
+      options: options,
+      onChange: option => setSelectedOption(option),
+      labelForMore: "\u66F4\u591A\u8A9E\u8A00"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), (selectedReading === null || selectedReading === void 0 ? void 0 : selectedReading.embedCode) && /*#__PURE__*/(0, _jsxRuntime.jsx)(IframeContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        dangerouslySetInnerHTML: {
+          __html: selectedReading.embedCode
+        }
+      })
+    })]
+  });
 };
 exports.NewsReading = NewsReading;

package/lib/block-renderers/slideshow-block.js

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SlideshowBlock = SlideshowBlock;
 exports.SlideshowInArticleBody = SlideshowInArticleBody;
-var _multimedia = _interopRequireDefault(require("./multimedia"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _index = require("../utils/index");
 var _mediaQuery = require("../utils/media-query");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _multimedia = _interopRequireDefault(require("./multimedia"));
+var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const mockup = {
   mobile: {
@@ -264,42 +263,38 @@ const SlidesFlexBox = _styledComponents.default.div`
   flex-wrap: nowrap;
   width: 100%;
   height: 100%;
-  ${props => {
-  if (props.isSliding) {
-    return `transition: transform ${props.duration}ms ease-in-out;`;
-  }
-}}
-
-  ${_mediaQuery.mediaQuery.smallOnly} {
-    transform: translateX(
-      ${props => getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100}%
-    );
-  }
-
-  ${_mediaQuery.mediaQuery.mediumOnly} {
-    transform: translateX(
-      ${props => getTranslateX(mockup.desktop, props.translateXUint)}px
-    );
-  }
-
-  ${_mediaQuery.mediaQuery.largeOnly} {
-    transform: translateX(
-      ${props => getTranslateX(mockup.hd, props.translateXUint)}px
-    );
-  }
+  ${({
+  isSliding,
+  duration
+}) => isSliding ? `transition: transform ${duration}ms ease-in-out;` : ''}
+
+  ${({
+  translateXUint
+}) => `
+    ${_mediaQuery.mediaQuery.smallOnly} {
+      transform: translateX(
+          ${getTranslateX(mockup.mobile, translateXUint) / getContainerWidth(mockup.mobile)} * 100%
+        );
+    }
+    ${_mediaQuery.mediaQuery.mediumOnly} {
+      transform: translateX(
+          ${getTranslateX(mockup.desktop, translateXUint) / getContainerWidth(mockup.desktop)} * 100%
+        );
+    }
+    ${_mediaQuery.mediaQuery.largeOnly} {
+      transform: translateX(
+          ${getTranslateX(mockup.hd, translateXUint) / getContainerWidth(mockup.hd)} * 100%
+        );
+    }
+  `}
 `;
 const SlideFlexItem = _styledComponents.default.div`
   height: 100%;
   flex-shrink: 0;
 
   ${_mediaQuery.mediaQuery.smallOnly} {
-    flex-basis: calc(
-      ${getSlideWidth(mockup.mobile)} / ${getContainerWidth(mockup.mobile)}*100%
-    );
-    padding-right: calc(
-      ${mockup.mobile.slide.paddingRight} /
-        ${getContainerWidth(mockup.mobile)}*100%
-    );
+    flex-basis: ${() => `calc(${getSlideWidth(mockup.mobile)} / ${getContainerWidth(mockup.mobile)}*100%)`};
+    padding-right: ${() => `calc(${mockup.mobile.slide.paddingRight} / ${getContainerWidth(mockup.mobile)}*100%)`};
   }
 
   ${_mediaQuery.mediaQuery.mediumOnly} {
@@ -419,20 +414,21 @@ function SlideshowBlock({
         /*#__PURE__*/
         // since the items of _images would have the same id,
         // hence, we append `index` on the key
-        _react.default.createElement(SlideFlexItem, {
-          key: `slide_${img.id}_${index}`
-        }, /*#__PURE__*/_react.default.createElement("div", {
-          className: "w-full h-full relative overflow-hidden"
-        }, /*#__PURE__*/_react.default.createElement("img", {
-          srcSet: imgSrcSetArr.join(','),
-          src: imgSrc,
-          style: {
-            display: 'block',
-            objectFit,
-            height: '100%'
-          },
-          sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
-        })))
+        (0, _jsxRuntime.jsx)(SlideFlexItem, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: "w-full h-full relative overflow-hidden",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+              srcSet: imgSrcSetArr.join(','),
+              src: imgSrc,
+              style: {
+                display: 'block',
+                objectFit,
+                height: '100%'
+              },
+              sizes: "(max-width: 768px) 100vw, (min-width: 1400px) 1000px, 500px"
+            })
+          })
+        }, `slide_${img.id}_${index}`)
       );
     });
   }, [images]);
@@ -467,40 +463,58 @@ function SlideshowBlock({
     }, duration * 2);
   }, [slideTo, curSlideIndex, translateXUnit]);
   const isSliding = slideTo !== '';
-  return /*#__PURE__*/_react.default.createElement(SlideshowFlexBox, {
-    className: appendedClassName
-  }, /*#__PURE__*/_react.default.createElement(SlidesSection, null, /*#__PURE__*/_react.default.createElement(SlidesFlexBox, {
-    translateXUint: translateXUnit,
-    duration: duration,
-    isSliding: isSliding
-  }, slides)), /*#__PURE__*/_react.default.createElement(PrevNextSection, null, /*#__PURE__*/_react.default.createElement(PrevButton, {
-    onClick: isSliding ? undefined : slideToPrev
-  }, /*#__PURE__*/_react.default.createElement(PreArrowSvg, null)), /*#__PURE__*/_react.default.createElement(NextButton, {
-    onClick: isSliding ? undefined : slideToNext
-  }, /*#__PURE__*/_react.default.createElement(NextArrowSvg, null))), /*#__PURE__*/_react.default.createElement(ImageNumberCircle, null, /*#__PURE__*/_react.default.createElement(ImageNumber, null, curSlideIndex + 1), /*#__PURE__*/_react.default.createElement(ImageTotal, null, total)), desc ? /*#__PURE__*/_react.default.createElement(Desc, null, desc) : /*#__PURE__*/_react.default.createElement(EmptyDesc, null));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SlideshowFlexBox, {
+    className: appendedClassName,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SlidesSection, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SlidesFlexBox, {
+        translateXUint: translateXUnit,
+        duration: duration,
+        isSliding: isSliding,
+        children: slides
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(PrevNextSection, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PrevButton, {
+        onClick: isSliding ? undefined : slideToPrev,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PreArrowSvg, {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NextButton, {
+        onClick: isSliding ? undefined : slideToNext,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(NextArrowSvg, {})
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ImageNumberCircle, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageNumber, {
+        children: curSlideIndex + 1
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageTotal, {
+        children: total
+      })]
+    }), desc ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Desc, {
+      children: desc
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyDesc, {})]
+  });
 }
 function NextArrowSvg() {
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     viewBox: "0 0 31 17",
     width: "31",
     height: "17",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M29.33 7.854H0v1h29.256l-7.11 7.148.708.705 8-8.042-.001-.707-8-7.958-.706.709 7.183 7.145z",
-    fill: "gray",
-    fillRule: "nonzero"
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M29.33 7.854H0v1h29.256l-7.11 7.148.708.705 8-8.042-.001-.707-8-7.958-.706.709 7.183 7.145z",
+      fill: "gray",
+      fillRule: "nonzero"
+    })
+  });
 }
 function PreArrowSvg() {
-  return /*#__PURE__*/_react.default.createElement("svg", {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
     viewBox: "0 0 31 17",
     width: "31",
     height: "17",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/_react.default.createElement("path", {
-    d: "M2.17 8.5H31.5v1H2.244l7.11 7.147-.708.706-8-8.042.001-.707 8-7.958.706.708L2.17 8.5z",
-    fill: "gray"
-  }));
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M2.17 8.5H31.5v1H2.244l7.11 7.147-.708.706-8-8.042.001-.707 8-7.958.706.708L2.17 8.5z",
+      fill: "gray"
+    })
+  });
 }
 const ArticleBodyContainer = _styledComponents.default.div`
   margin: 0 auto 27px auto;
@@ -509,9 +523,10 @@ function SlideshowInArticleBody({
   className = '',
   data
 }) {
-  return /*#__PURE__*/_react.default.createElement(ArticleBodyContainer, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(SlideshowBlock, {
-    data: data
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleBodyContainer, {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SlideshowBlock, {
+      data: data
+    })
+  });
 }