@twreporter/react-article-components 2.0.0-rc.1 → 2.0.0-rc.3

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.0.0-rc.2...@twreporter/react-article-components@2.0.0-rc.3) (2024-05-14)
+
+
+### Bug Fixes
+
+* upgrade `react-waypoint` version ([c30a267](https://github.com/twreporter/twreporter-npm-packages/commit/c30a2671c563f466f2cd67ca7710797cc37aa9cc))
+
+
+
+
+
+# [2.0.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.0.0-rc.1...@twreporter/react-article-components@2.0.0-rc.2) (2024-05-14)
+
+
+### Bug Fixes
+
+* upgrade `styled-component` version to v6 ([df93639](https://github.com/twreporter/twreporter-npm-packages/commit/df93639b1b1591d1506cf4cab13f6cda8d6c8aba))
+
+
+
+
+
 # [2.0.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.0.0-rc.0...@twreporter/react-article-components@2.0.0-rc.1) (2024-05-10)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -105,7 +105,7 @@ var SeprationLine = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "article-page__SeprationLine",
   componentId: "sc-1wuywdb-2"
 })(["", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
-  return props.visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px ", ";padding-bottom:60px;"], _color.colorGrayscale.gray200) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
+  return props.$visible ? (0, _styledComponents.css)(["width:100%;border-bottom:solid 1px ", ";padding-bottom:60px;"], _color.colorGrayscale.gray200) : (0, _styledComponents.css)(["padding-bottom:30px;"]);
 }));
 
 var BodyBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -404,7 +404,7 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           Link: LinkComponent
         }
       }, /*#__PURE__*/_react["default"].createElement(BackgroundBlock, null, /*#__PURE__*/_react["default"].createElement(LeadingBlock, null, /*#__PURE__*/_react["default"].createElement(LeadingComponent, leadingProps), /*#__PURE__*/_react["default"].createElement(SeprationLine, {
-        visible: uiManager.toRenderSeparationLineBetweenLeadingAndBody()
+        $visible: uiManager.toRenderSeparationLineBetweenLeadingAndBody()
       })), /*#__PURE__*/_react["default"].createElement(BodyBackground, null, /*#__PURE__*/_react["default"].createElement(BodyBlock, null, /*#__PURE__*/_react["default"].createElement(MobileToolBar, {
         className: 'hidden-print',
         backToTopic: backToTopic,

package/lib/components/aside/desktop-aside.js

@@ -67,7 +67,7 @@ var ToolsPositioningBlock = /*#__PURE__*/_styledComponents["default"].div.withCo
   displayName: "desktop-aside__ToolsPositioningBlock",
   componentId: "physaw-2"
 })(["display:inline-block;position:", ";top:", ";bottom:", ";transform:", ";"], function (props) {
-  return props.toolPosition === _toolPosition.fixed ? 'fixed' : 'absolute';
+  return props.$toolPosition === _toolPosition.fixed ? 'fixed' : 'absolute';
 }, function (props) {
   switch (props.toolPosition) {
     case _toolPosition.fixed:
@@ -81,7 +81,7 @@ var ToolsPositioningBlock = /*#__PURE__*/_styledComponents["default"].div.withCo
       return 'auto';
   }
 }, function (props) {
-  switch (props.toolPosition) {
+  switch (props.$toolPosition) {
     case _toolPosition.bottom:
       return '0';
 
@@ -91,14 +91,14 @@ var ToolsPositioningBlock = /*#__PURE__*/_styledComponents["default"].div.withCo
       return 'auto';
   }
 }, function (props) {
-  return props.toolPosition === _toolPosition.fixed ? 'translateY(-50%)' : 'none';
+  return props.$toolPosition === _toolPosition.fixed ? 'translateY(-50%)' : 'none';
 });
 
 var TriggerFixBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "desktop-aside__TriggerFixBlock",
   componentId: "physaw-3"
 })(["position:absolute;height:", "px;"], function (props) {
-  return props.height;
+  return props.$height;
 });
 
 var TriggerFixTopBlock = /*#__PURE__*/(0, _styledComponents["default"])(TriggerFixBlock).withConfig({
@@ -184,9 +184,9 @@ var Aside = /*#__PURE__*/function (_React$PureComponent) {
         onLeave: this.setToolsFixed,
         topOffset: "50%"
       }, /*#__PURE__*/_react["default"].createElement(TriggerFixTopBlock, {
-        height: toolsHeight / 2
+        $height: toolsHeight / 2
       })), /*#__PURE__*/_react["default"].createElement(ToolsPositioningBlock, {
-        toolPosition: this.state.toolPosition
+        $toolPosition: this.state.toolPosition
       }, /*#__PURE__*/_react["default"].createElement(_desktopTools["default"], {
         backToTopic: backToTopic,
         height: "".concat(toolsHeight, "px"),

package/lib/components/aside/desktop-tools.js

@@ -80,7 +80,7 @@ var BookmarkIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig
   displayName: "desktop-tools__BookmarkIconBlock",
   componentId: "eihdd4-3"
 })(["", " &::after{content:'", "';}"], iconBlockCSS, function (props) {
-  return props.isBookmarked ? '取消收藏' : '收藏';
+  return props.$isBookmarked ? '取消收藏' : '收藏';
 });
 
 var ShareIconBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -92,7 +92,7 @@ var ToolsBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "desktop-tools__ToolsBlock",
   componentId: "eihdd4-5"
 })(["display:flex;", " ", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: calc(300/375*100%);\n    margin-left: auto;\n    margin-right: auto;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: calc(453/768*100%);\n    max-width: 453px;\n    margin-left: auto;\n    margin-right: auto;\n    > svg, > div, > a {\n      margin-right: 30px;\n    }\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    justify-content: space-between;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 36px;\n    height: ", ";\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: center;\n  "])), function (props) {
-  return props.height || 'auto';
+  return props.$height || 'auto';
 }), function (props) {
   switch (props.theme.name) {
     case _theme["default"].article.v2.photo:
@@ -171,7 +171,7 @@ var BookmarkBlock = function BookmarkBlock(_ref) {
     var id = isBookmarked ? 'remove-bookmark' : 'add-bookmark';
     return /*#__PURE__*/_react["default"].createElement(BookmarkIconBlock, {
       onClick: isBookmarked ? removeAction : addAction,
-      isBookmarked: isBookmarked,
+      $isBookmarked: isBookmarked,
       id: id
     }, /*#__PURE__*/_react["default"].createElement(_icon.Bookmark, {
       type: iconType,
@@ -226,7 +226,7 @@ var Tools = function Tools(_ref3) {
   };
 
   return /*#__PURE__*/_react["default"].createElement(ToolsBlock, {
-    height: height
+    $height: height
   }, backToTopicJSX, /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
     articleMeta: articleMetaForBookmark
   }), /*#__PURE__*/_react["default"].createElement(TextIconBlock, null, /*#__PURE__*/_react["default"].createElement(_icon.Text, {

package/lib/components/aside/metadata.js

@@ -97,9 +97,9 @@ var CategorySetFlex = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "metadata__CategorySetFlex",
   componentId: "sc-1c3910m-2"
 })(["", " ", " ", ""], function (props) {
-  return props.isTop && createLine('top', props.theme.name);
+  return props.$isTop && createLine('top', props.theme.name);
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-right: 10px;\n    padding-left: 10px;\n  "]))), function (props) {
-  return props.isCategory ? (0, _styledComponents.css)(["min-width:100px;flex-basis:100px;padding-left:10px;padding-right:10px;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-left: 0px;\n      padding-right: 5px;\n    "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      min-width: 80px;\n      flex-basis: 80px;\n    "])))) : (0, _styledComponents.css)(["flex-basis:calc(100% - 100px);", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-basis: calc(100% - 80px);\n    "]))), _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n      padding-right: 0px;\n    "]))));
+  return props.$isCategory ? (0, _styledComponents.css)(["min-width:100px;flex-basis:100px;padding-left:10px;padding-right:10px;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-left: 0px;\n      padding-right: 5px;\n    "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      min-width: 80px;\n      flex-basis: 80px;\n    "])))) : (0, _styledComponents.css)(["flex-basis:calc(100% - 100px);", " ", ""], _mediaQuery["default"].desktopOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex-basis: calc(100% - 80px);\n    "]))), _mediaQuery["default"].desktopAndAbove(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding-left: 10px;\n      padding-right: 0px;\n    "]))));
 });
 
 var CategoryText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -202,8 +202,8 @@ var CategorySet = function CategorySet(_ref) {
       };
       var weight = isCategory ? _button.LinkButton.Weight.BOLD : _button.LinkButton.Weight.NORMAL;
       return /*#__PURE__*/_react["default"].createElement(CategorySetFlex, {
-        isCategory: isCategory,
-        isTop: index === 0
+        $isCategory: isCategory,
+        $isTop: index === 0
       }, /*#__PURE__*/_react["default"].createElement(TextLink, {
         link: link,
         text: name,

package/lib/components/aside/mobile-tool-bar.js

@@ -85,33 +85,33 @@ var OptionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__OptionContainer",
   componentId: "do65sv-2"
 })(["z-index:6;opacity:", ";transition:opacity 100ms;position:absolute;top:-55px;left:50%;transform:translateX(-50%);display:flex;"], function (props) {
-  return props.isShow ? '1' : '0';
+  return props.$isShow ? '1' : '0';
 });
 
 var SnackBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__SnackBarContainer",
   componentId: "do65sv-3"
 })(["z-index:5;position:absolute;left:50%;transform:translateX(-50%);transition:opacity 100ms;opacity:", ";"], function (props) {
-  return props.showSnackBar ? 1 : 0;
+  return props.$showSnackBar ? 1 : 0;
 });
 
 var ToolBarWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "mobile-tool-bar__ToolBarWrapper",
   componentId: "do65sv-4"
 })(["display:flex;width:100%;justify-content:center;padding:8px;position:fixed;left:0px;bottom:env(safe-area-inset-bottom,0);height:", ";transform:", ";transition:height 200ms,transform 200ms ease-in-out;background-color:", ";border-top:1px solid ", ";z-index:", ";", "{background-color:", ";box-shadow:", ";}", "{bottom:", ";}"], function (props) {
-  return props.hideText ? '40px' : '55px';
+  return props.$hideText ? '40px' : '55px';
 }, function (props) {
-  return props.isHidden ? 'translateY(200%)' : 'tanslateY(0%)';
+  return props.$isHidden ? 'translateY(200%)' : 'tanslateY(0%)';
 }, function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 }, function (props) {
-  return props.borderColor;
+  return props.$borderColor;
 }, _zIndex["default"].mobileToolBar, ShareContainer, function (props) {
-  return props.shareByBgColor;
+  return props.$shareByBgColor;
 }, function (props) {
-  return props.shadow;
+  return props.$shadow;
 }, SnackBarContainer, function (props) {
-  return props.hideText ? '48px' : '62px';
+  return props.$hideText ? '48px' : '62px';
 });
 
 var ToolBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -295,7 +295,7 @@ var ShareBy = function ShareBy(_ref4) {
     theme: theme,
     hideText: hideText
   }), /*#__PURE__*/_react["default"].createElement(OptionContainer, {
-    isShow: showOption
+    $isShow: showOption
   }, /*#__PURE__*/_react["default"].createElement(FbShare, {
     appID: fbAppID
   }), /*#__PURE__*/_react["default"].createElement(LineShare, null), /*#__PURE__*/_react["default"].createElement(TwitterShare, null), /*#__PURE__*/_react["default"].createElement(CopyUrl, {
@@ -501,12 +501,12 @@ var ToolBar = function ToolBar(_ref9) {
   return /*#__PURE__*/_react["default"].createElement(ToolBarContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react["default"].createElement(ToolBarWrapper, {
-    bgColor: bgColor,
-    shareByBgColor: shareByBgColor,
-    borderColor: borderColor,
-    hideText: hideText,
+    $bgColor: bgColor,
+    $shareByBgColor: shareByBgColor,
+    $borderColor: borderColor,
+    $hideText: hideText,
     className: className,
-    isHidden: hideToolBar,
+    $isHidden: hideToolBar,
     id: "mobile-tool-bar"
   }, /*#__PURE__*/_react["default"].createElement(ToolBarContainer, null, /*#__PURE__*/_react["default"].createElement(FontLevel, {
     changeFontLevel: onFontLevelChange
@@ -515,7 +515,7 @@ var ToolBar = function ToolBar(_ref9) {
   }), /*#__PURE__*/_react["default"].createElement(BookmarkBlock, {
     articleMeta: articleMetaForBookmark
   }), /*#__PURE__*/_react["default"].createElement(RelatedPost, null), backToTopicJSX), /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
-    showSnackBar: showSnackBar
+    $showSnackBar: showSnackBar
   }, /*#__PURE__*/_react["default"].createElement(_snackBar.SnackBar, {
     text: snackBarText,
     theme: theme

package/lib/components/body/annotation.js

@@ -74,16 +74,16 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "annotation__Indicator",
   componentId: "sc-5e8oaw-2"
 })(["margin-left:3px;display:inline-block;vertical-align:middle;width:18px;height:18px;border-radius:50%;border-width:1px;border-style:solid;position:relative;top:-1px;&::after{content:'';width:2px;height:6.5px;top:5px;left:5px;transform:rotate(", ");display:block;position:absolute;transition:transform 200ms ease;}&::before{content:'';width:2px;height:6.5px;top:5px;right:5px;transform:rotate(", ");display:block;position:absolute;transition:transform 200ms ease;}"], function (props) {
-  return props.isExpanded ? '45deg' : '-45deg';
+  return props.$isExpanded ? '45deg' : '-45deg';
 }, function (props) {
-  return props.isExpanded ? '-45deg' : '45deg';
+  return props.$isExpanded ? '-45deg' : '45deg';
 });
 
 var AnnotationContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "annotation__AnnotationContent",
   componentId: "sc-5e8oaw-3"
 })(["display:", ";background:", ";font-size:", "px;line-height:2.11;letter-spacing:0.5px;color:", ";font-weight:", ";border-width:2px 0 0 0;border-style:solid;padding:25px 11px;margin-bottom:10px;animation:", " 300ms ease;"], function (props) {
-  return props.isExpanded ? 'block' : 'none';
+  return props.$isExpanded ? 'block' : 'none';
 }, _color.colorGrayscale.white, function (props) {
   return props.theme.fontSizeOffset + 16;
 }, _color.colorGrayscale.gray700, _typography["default"].font.weight.normal, slideDownAndFadeIn);
@@ -148,12 +148,12 @@ var Annotation = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(AnnotatedText, {
         onClick: this.toggleExpend
       }, text, /*#__PURE__*/_react["default"].createElement(Indicator, {
-        isExpanded: isExpanded
+        $isExpanded: isExpanded
       })), /*#__PURE__*/_react["default"].createElement(AnnotationContent, {
         dangerouslySetInnerHTML: {
           __html: annotation
         },
-        isExpanded: isExpanded
+        $isExpanded: isExpanded
       }));
     }
   }]);

package/lib/components/body/audio/control-button.js

@@ -97,9 +97,9 @@ var IconWrapper = /*#__PURE__*/_styledComponents["default"].button.withConfig({
 })(["", " ", " ", " border-radius:50%;position:relative;cursor:pointer;user-select:none;outline:none;> svg{width:100%;height:100%;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);path{stroke:", ";fill:", ";}}"], function (props) {
   return getIconWrapperStyles(props.theme.name);
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 48px;\n    height: 48px;\n  "]))), _mediaQuery["default"].tabletAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: 65px;\n    height: 65px;\n  "]))), function (props) {
-  return props.isPlaying ? getIconColor(props.theme.name) : 'none';
+  return props.$isPlaying ? getIconColor(props.theme.name) : 'none';
 }, function (props) {
-  return props.isPlaying ? 'none' : getIconColor(props.theme.name);
+  return props.$isPlaying ? 'none' : getIconColor(props.theme.name);
 });
 
 function ControlButton() {
@@ -109,7 +109,7 @@ function ControlButton() {
     return /*#__PURE__*/_react["default"].createElement(_audioContexts.StatusContext.Consumer, null, function (_ref2) {
       var isPlaying = _ref2.isPlaying;
       return /*#__PURE__*/_react["default"].createElement(IconWrapper, {
-        isPlaying: isPlaying,
+        $isPlaying: isPlaying,
         onClick: isPlaying ? pause : play
       }, isPlaying ? /*#__PURE__*/_react["default"].createElement(PauseIcon, null) : /*#__PURE__*/_react["default"].createElement(PlayIcon, null));
     });

package/lib/components/body/embedded-code.js

@@ -85,7 +85,7 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "embedded-code__Block",
   componentId: "tkafgt-0"
 })(["position:relative;z-index:", ";img.img-responsive{margin:0 auto;max-width:100%;height:auto;display:block;}"], function (props) {
-  return props.shouldEscalateZIndex ? _zIndex["default"].embedUp : _zIndex["default"].embedDown;
+  return props.$shouldEscalateZIndex ? _zIndex["default"].embedUp : _zIndex["default"].embedDown;
 });
 
 exports.Block = Block;
@@ -243,7 +243,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
         className: className
       }, /*#__PURE__*/_react["default"].createElement(Block, {
         ref: this._embedded,
-        shouldEscalateZIndex: shouldEscalateZIndex,
+        $shouldEscalateZIndex: shouldEscalateZIndex,
         dangerouslySetInnerHTML: {
           __html: this._embeddedCodeWithoutScript
         }

package/lib/components/body/image-diff.js

@@ -110,7 +110,7 @@ var ImageContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "image-diff__ImageContainer",
   componentId: "sc-1y1eq1w-0"
 })(["overflow:hidden;position:relative;width:100%;padding-bottom:", ";>div{position:absolute;top:0;left:0;width:100%;height:100%;}", ",", "{background-repeat:no-repeat;background-size:auto 100%;background-position:left center;}", "{", "}", "{", "}", "{width:3px;background:", ";&::after{content:\"", "\";", " left:0;transform:translateX(-100%);border-radius:0 0 0 100%;text-align:right;padding-right:3px;}&::before{content:\"", "\";", " right:0;transform:translateX(100%);border-radius:0 0 100% 0;text-align:left;padding-left:3px;}}"], function (props) {
-  return "".concat(100 * props.heightWidthRatio, "%");
+  return "".concat(100 * props.$heightWidthRatio, "%");
 }, _slider.Progress, _slider.Rail, _slider.Progress, getResponsiveBackground('leftImageSet'), _slider.Rail, getResponsiveBackground('rightImageSet'), _slider.Indicator, _color.colorGrayscale.white, unicodeToString('25C4'), sharedStyleOfIndicatorPointer, unicodeToString('25BA'), sharedStyleOfIndicatorPointer);
 
 var ImageDiff = /*#__PURE__*/function (_PureComponent) {
@@ -149,7 +149,7 @@ var ImageDiff = /*#__PURE__*/function (_PureComponent) {
 
       return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, {
         className: "avoid-break",
-        heightWidthRatio: renderedHeightWidthRation,
+        $heightWidthRatio: renderedHeightWidthRation,
         leftImageSet: leftImageSet,
         rightImageSet: rightImageSet
       }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_slider["default"], {

package/lib/components/body/image.js

@@ -84,7 +84,7 @@ var Image = /*#__PURE__*/function (_PureComponent) {
       var appendedClassName = className + ' avoid-break';
       return /*#__PURE__*/_react["default"].createElement(Container, {
         className: appendedClassName,
-        small: small
+        $small: small
       }, /*#__PURE__*/_react["default"].createElement("figure", {
         itemScope: true,
         itemType: "http://schema.org/ImageObject"

package/lib/components/body/multimedia.js

@@ -103,19 +103,19 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "multimedia__Block",
   componentId: "e3dyai-1"
 })(["position:relative;& > figure,& > iframe{padding:0;border:0;margin:0;}", " ", " ", " ", " ", "{", "}"], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), mockup.mobile.figure.width), _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), mockup.tablet.figure.width), _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    float: ", ";\n    margin: ", ";\n    width: ", ";\n  "])), function (props) {
-  return props.small ? 'right' : 'none';
+  return props.$small ? 'right' : 'none';
 }, function (props) {
-  return props.small ? '0 0 20px 25px' : '0';
+  return props.$small ? '0 0 20px 25px' : '0';
 }, function (props) {
-  return props.small ? "".concat(mockup.desktop.figure.width.small, "px") : "".concat(mockup.desktop.figure.width.normal, "%");
+  return props.$small ? "".concat(mockup.desktop.figure.width.small, "px") : "".concat(mockup.desktop.figure.width.normal, "%");
 }), _mediaQuery["default"].hdOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    float: ", ";\n    margin: ", ";\n    width: ", ";\n  "])), function (props) {
-  return props.small ? 'right' : 'none';
+  return props.$small ? 'right' : 'none';
 }, function (props) {
-  return props.small ? '0 0 20px 25px' : 0;
+  return props.$small ? '0 0 20px 25px' : 0;
 }, function (props) {
-  return props.small ? "".concat(mockup.hd.figure.width.small, "px") : "".concat(mockup.hd.figure.width.normal, "%");
+  return props.$small ? "".concat(mockup.hd.figure.width.small, "px") : "".concat(mockup.hd.figure.width.normal, "%");
 }), Caption, _mediaQuery["default"].desktopAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
-  return props.small ? "\n        /* overwrite Caption styles */\n        float: none;\n        margin-bottom:0;\n        position: absolute;\n\n        /* give new styles */\n        right: 0;\n        bottom: 0;\n        transform: translateY(100%);\n      " : '';
+  return props.$small ? "\n        /* overwrite Caption styles */\n        float: none;\n        margin-bottom:0;\n        position: absolute;\n\n        /* give new styles */\n        right: 0;\n        bottom: 0;\n        transform: translateY(100%);\n      " : '';
 }));
 
 var _default = {

package/lib/components/body/slider/index.js

@@ -43,7 +43,7 @@ var Rail = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slider__Rail",
   componentId: "sc-1pt06t8-0"
 })(["width:100%;height:100%;background:", ";position:relative;cursor:", ";"], _color.colorGrayscale.gray400, function (props) {
-  return props.isHeld ? 'grabbing' : 'pointer';
+  return props.$isHeld ? 'grabbing' : 'pointer';
 });
 
 exports.Rail = Rail;
@@ -73,7 +73,7 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].div.attrs(function (_r
   displayName: "slider__Indicator",
   componentId: "sc-1pt06t8-2"
 })(["width:10px;height:100%;background:", ";position:absolute;top:0;cursor:", ";"], _color.colorGrayscale.black, function (props) {
-  return props.isHeld ? 'grabbing' : 'grab';
+  return props.$isHeld ? 'grabbing' : 'grab';
 });
 
 exports.Indicator = Indicator;
@@ -470,14 +470,14 @@ var Slider = /*#__PURE__*/function (_React$Component) {
         ref: this._rail,
         onMouseDown: this.handleMouseDown,
         onTouchStart: this.handleTouchStart,
-        isHeld: this.state.isIndicatorHeld,
+        $isHeld: this.state.isIndicatorHeld,
         onDragStart: this.preventNativeDragging
       }, /*#__PURE__*/_react["default"].createElement(Progress, {
         w: this._indicator.current ? indicatorX + getElementOutBoundWidth(this._indicator.current) / 2 : 0
       }), /*#__PURE__*/_react["default"].createElement(Indicator, {
         ref: this._indicator,
         x: indicatorX,
-        isHeld: this.state.isIndicatorHeld
+        $isHeld: this.state.isIndicatorHeld
       }));
     }
   }]);

package/lib/components/body/slideshow/index.js

@@ -232,17 +232,17 @@ var SlidesFlexBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slideshow__SlidesFlexBox",
   componentId: "sc-1skir21-9"
 })(["position:absolute;top:0;left:0;display:flex;flex-wrap:nowrap;width:100%;height:100%;", " ", " ", " ", " ", ""], function (props) {
-  if (props.isSliding) {
-    return "transition: transform ".concat(props.duration, "ms ease-in-out;");
+  if (props.$isSliding) {
+    return "transition: transform ".concat(props.$duration, "ms ease-in-out;");
   }
 }, _mediaQuery["default"].mobileOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
-  return getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100;
+  return getTranslateX(mockup.mobile, props.$translateXUint) / getContainerWidth(mockup.mobile) * 100;
 }), _mediaQuery["default"].tabletOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "])), function (props) {
-  return getTranslateX(mockup.tablet, props.translateXUint) / getContainerWidth(mockup.tablet) * 100;
+  return getTranslateX(mockup.tablet, props.$translateXUint) / getContainerWidth(mockup.tablet) * 100;
 }), _mediaQuery["default"].desktopOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
-  return getTranslateX(mockup.desktop, props.translateXUint);
+  return getTranslateX(mockup.desktop, props.$translateXUint);
 }), _mediaQuery["default"].hdOnly(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "])), function (props) {
-  return getTranslateX(mockup.hd, props.translateXUint);
+  return getTranslateX(mockup.hd, props.$translateXUint);
 }));
 
 var SlideFlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -462,9 +462,9 @@ var Slideshow = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(SlideshowFlexBox, {
         className: appendedClassName
       }, /*#__PURE__*/_react["default"].createElement(SlidesSection, null, /*#__PURE__*/_react["default"].createElement(SlidesFlexBox, {
-        translateXUint: translateXUint,
-        duration: duration,
-        isSliding: isSliding
+        $translateXUint: translateXUint,
+        $duration: duration,
+        $isSliding: isSliding
       }, slides)), /*#__PURE__*/_react["default"].createElement(PrevNextSection, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
         onClick: isSliding ? undefined : this.slideToPrev
       }, /*#__PURE__*/_react["default"].createElement(PreArrowSvg, null)), /*#__PURE__*/_react["default"].createElement(NextButton, {

package/lib/components/img-with-placeholder/index.js

@@ -76,34 +76,34 @@ var ImgContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgContainer",
   componentId: "c6mvsc-0"
 })(["position:relative;overflow:hidden;width:100%;", ""], function (props) {
-  return props.heightString;
+  return props.$heightString;
 });
 
 var ImgPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgPlaceholder",
   componentId: "c6mvsc-1"
 })(["display:", ";", ";background-image:url(", ");background-repeat:no-repeat;background-size:cover;position:absolute;top:0;left:0;width:100%;height:100%;"], function (props) {
-  return props.toShow ? 'block' : 'none';
+  return props.$toShow ? 'block' : 'none';
 }, function (props) {
-  return props.noBlur ? '' : 'filter: blur(5px)';
+  return props.$noBlur ? '' : 'filter: blur(5px)';
 }, function (props) {
-  return props.src;
+  return props.$src;
 });
 
 var Placeholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__Placeholder",
   componentId: "c6mvsc-2"
 })(["width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:", ";svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}"], function (props) {
-  return props.toShow ? 'block' : 'none';
+  return props.$toShow ? 'block' : 'none';
 });
 
 var ImgWithObjectFit = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "img-with-placeholder__ImgWithObjectFit",
   componentId: "c6mvsc-3"
 })(["display:block;height:100%;object-fit:", ";object-position:", ";opacity:", ";"], function (props) {
-  return props.objectFit || 'none';
+  return props.$objectFit || 'none';
 }, function (props) {
-  return props.objectPosition || '50% 50%';
+  return props.$objectPosition || '50% 50%';
 }, function (props) {
   return props.toShowFallback ? '0' : '1';
 });
@@ -112,18 +112,18 @@ var FallbackObjectFitImg = /*#__PURE__*/_styledComponents["default"].div.withCon
   displayName: "img-with-placeholder__FallbackObjectFitImg",
   componentId: "c6mvsc-4"
 })(["position:absolute;top:0;left:0;width:100%;height:100%;background-size:", ";background-repeat:no-repeat;background-position:", ";background-image:url(", ");"], function (props) {
-  return props.objectFit;
+  return props.$objectFit;
 }, function (props) {
-  return props.objectPosition || '50% 50%';
+  return props.$objectPosition || '50% 50%';
 }, function (props) {
-  return props.url;
+  return props.$url;
 });
 
 var ImgBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgBox",
   componentId: "c6mvsc-5"
 })(["position:absolute;top:0;left:0;width:100%;height:100%;opacity:", ";transition:opacity 0.5s;& > img{width:100%;}"], function (props) {
-  return props.toShow ? '1' : '0';
+  return props.$toShow ? '1' : '0';
 });
 /**
  * An image element with placeholder.
@@ -215,15 +215,15 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
 
       if (imgPlaceholderSrc) {
         return /*#__PURE__*/_react["default"].createElement(ImgPlaceholder, {
-          src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(imgPlaceholderSrc),
-          toShow: toShowPlaceholder,
-          noBlur: placeholderNoBlur
+          $src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(imgPlaceholderSrc),
+          $toShow: toShowPlaceholder,
+          $noBlur: placeholderNoBlur
         });
       } // render default placeholder
 
 
       return /*#__PURE__*/_react["default"].createElement(Placeholder, {
-        toShow: toShowPlaceholder
+        $toShow: toShowPlaceholder
       }, /*#__PURE__*/_react["default"].createElement(PlaceholderIcon, null));
     }
   }, {
@@ -248,7 +248,7 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       if (!defaultImageOriginalUrl && (!imageSet || imageSet.length === 0)) {
         return /*#__PURE__*/_react["default"].createElement(ImgContainer, {
           className: appendedClassName,
-          heightString: "height: 100%;"
+          $heightString: "height: 100%;"
         }, this._renderImagePlaceholder());
       }
 
@@ -264,13 +264,13 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       var defaultImageSrc = (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(defaultImage, 'url'));
       return /*#__PURE__*/_react["default"].createElement(ImgContainer, {
         className: appendedClassName,
-        heightString: isObjectFit ? "height: 100%;" : "padding-top: ".concat(heightWidthRatio * 100, "%;")
+        $heightString: isObjectFit ? "height: 100%;" : "padding-top: ".concat(heightWidthRatio * 100, "%;")
       }, this._renderImagePlaceholder(), /*#__PURE__*/_react["default"].createElement(ImgBox, {
-        toShow: isLoaded
+        $toShow: isLoaded
       }, isObjectFit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgWithObjectFit, _extends({
         alt: alt,
-        objectFit: objectFit,
-        objectPosition: objectPosition,
+        $objectFit: objectFit,
+        $objectPosition: objectPosition,
         onLoad: this.handleImageLoaded,
         ref: this._img,
         sizes: this._supportObjectFit ? sizes : '',
@@ -278,9 +278,9 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
         srcSet: this._supportObjectFit ? srcset : '',
         hide: !this._supportObjectFit
       }, imgProps)), this._supportObjectFit ? null : /*#__PURE__*/_react["default"].createElement(FallbackObjectFitImg, {
-        url: _.get(defaultImage, 'url'),
-        objectFit: objectFit,
-        objectPosition: objectPosition
+        $url: _.get(defaultImage, 'url'),
+        $objectFit: objectFit,
+        $objectPosition: objectPosition
       })) : /*#__PURE__*/_react["default"].createElement("img", _extends({
         alt: alt,
         onLoad: this.handleImageLoaded,

package/lib/components/leading/normal.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
 var _imgWithPlaceholder = _interopRequireDefault(require("../img-with-placeholder"));
 
 var _leading = _interopRequireDefault(require("../../constants/prop-types/leading"));
@@ -29,14 +29,14 @@ var _headline = require("@twreporter/react-components/lib/text/headline");
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -94,7 +94,7 @@ var Figure = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
   displayName: "normal__Figure",
   componentId: "qpgeb2-5"
 })(["margin:0;", ""], function (props) {
-  return props.css;
+  return props.$css;
 });
 
 var FigCaption = /*#__PURE__*/_styledComponents["default"].figcaption.withConfig({
@@ -162,8 +162,8 @@ var NormalLeading = /*#__PURE__*/function (_React$PureComponent) {
       }) : null, subtitle ? /*#__PURE__*/_react["default"].createElement(Subtitle, null, subtitle) : null, /*#__PURE__*/_react["default"].createElement(Title, {
         type: _headline.H1.Type.ARTICLE,
         text: title
-      })), /*#__PURE__*/_react["default"].createElement(_StyledFigure, {
-        _css: this.getFigureCSS()
+      })), /*#__PURE__*/_react["default"].createElement(Figure, {
+        $css: this.getFigureCSS()
       }, /*#__PURE__*/_react["default"].createElement(_imgWithPlaceholder["default"], {
         imgPlaceholderSrc: _.get(poster, 'tiny.url', ''),
         imageSet: [poster.mobile, poster.tablet, poster.desktop],
@@ -187,8 +187,4 @@ _defineProperty(NormalLeading, "defaultProps", {
   topicHref: '',
   shortTitle: '',
   isTopicPublished: false
-});
-
-var _StyledFigure = (0, _styledComponents["default"])(Figure)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["", ""])), function (p) {
-  return p._css;
 });

package/lib/components/leading/pink.js

@@ -81,7 +81,7 @@ var BackgroundBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["background-color:", ";width:100%;", ""], function (props) {
   return props.theme.colors.primary.background;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 0 10px 18px 10px;\n\n    height: ", ";\n  "])), function (props) {
-  return "calc(100vh - ".concat(props.paddingTop || '108px', ")");
+  return "calc(100vh - ".concat(props.$paddingTop || '108px', ")");
 }));
 
 var ContentBlock = /*#__PURE__*/_styledComponents["default"].header.withConfig({
@@ -145,7 +145,7 @@ var LeadingBlock = /*#__PURE__*/function (_PureComponent) {
           shortTitle = _this$props.shortTitle,
           isTopicPublished = _this$props.isTopicPublished;
       return /*#__PURE__*/_react["default"].createElement(BackgroundBlock, {
-        paddingTop: paddingTop
+        $paddingTop: paddingTop
       }, /*#__PURE__*/_react["default"].createElement(ContentBlock, null, /*#__PURE__*/_react["default"].createElement(TextBlock, null, isTopicPublished && shortTitle ? /*#__PURE__*/_react["default"].createElement(_dynamicComponentsContext["default"].Consumer, null, function (components) {
         return /*#__PURE__*/_react["default"].createElement(components.Link, {
           to: topicHref

package/lib/components/related/card.js

@@ -77,11 +77,11 @@ var Desc = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "card__Desc",
   componentId: "uveoih-2"
 })(["opacity:", ";visibility:", ";position:", ";margin:0px;width:100%;display:block;font-size:14px;line-height:1.43;color:", ";padding:15px 0 15px 0;transition:opacity 200ms ease 100ms;"], function (props) {
-  return props.isHovered ? '1' : '0';
+  return props.$isHovered ? '1' : '0';
 }, function (props) {
-  return props.isHovered ? 'visible' : 'hidden';
+  return props.$isHovered ? 'visible' : 'hidden';
 }, function (props) {
-  return props.isHovered ? 'static' : 'absolute';
+  return props.$isHovered ? 'static' : 'absolute';
 }, _color.colorGrayscale.gray600);
 
 var Thumbnail = /*#__PURE__*/_styledComponents["default"].figure.withConfig({
@@ -120,7 +120,7 @@ var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["", " position:relative;height:", ";transition:height 0.2s ease-in-out;", " ", " ", ""], function (props) {
   return getBlockStyles(props.theme.name);
 }, function (props) {
-  return props._height;
+  return props.$height;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    height: auto;\n    width: 100%;\n    min-height: 152px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  "]))), _mediaQuery["default"].desktopOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockup["default"].desktop.thumbnail.width), _mediaQuery["default"].hdOnly(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), _mockup["default"].hd.thumbnail.width));
 
 function getBlockStyles(themeName) {
@@ -216,7 +216,7 @@ var Card = /*#__PURE__*/function (_React$PureComponent) {
       var dateJSX = dateStr ? /*#__PURE__*/_react["default"].createElement(PublishedDate, null, dateStr) : null;
       return /*#__PURE__*/_react["default"].createElement(Block, {
         ref: this._blockRef,
-        _height: isHovered ? heightAfterHovering : heightBeforeHovering
+        $height: isHovered ? heightAfterHovering : heightBeforeHovering
       }, /*#__PURE__*/_react["default"].createElement(Thumbnail, null, /*#__PURE__*/_react["default"].createElement(StyledImg, {
         defaultImage: thumbnail,
         objectFit: "cover",
@@ -227,7 +227,7 @@ var Card = /*#__PURE__*/function (_React$PureComponent) {
         onMouseLeave: this.handleMouseLeaveTextBlock
       }, categoryJSX, titleJSX, /*#__PURE__*/_react["default"].createElement(DescBlock, null, /*#__PURE__*/_react["default"].createElement(Desc, {
         ref: this._descRef,
-        isHovered: isHovered
+        $isHovered: isHovered
       }, desc)), dateJSX), /*#__PURE__*/_react["default"].createElement(MobileTextBlock, null, categoryJSX, titleJSX, dateJSX));
     }
   }]);

package/lib/components/related/list.js

@@ -96,7 +96,7 @@ var ListBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "list__ListBlock",
   componentId: "uykdc6-1"
 })(["display:flex;flex-wrap:wrap;align-items:", ";"], function (props) {
-  return props.alignItems;
+  return props.$alignItems;
 });
 
 var Item = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -184,7 +184,7 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
 
 
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(ListBlock, {
-        alignItems: alignItems
+        $alignItems: alignItems
       }, cards), hasMore ? /*#__PURE__*/_react["default"].createElement(LoadMoreButton, {
         total: data.length,
         onClick: this.loadMore

package/lib/components/table-of-contents/index.js

@@ -135,22 +135,22 @@ var TableOfContents = function TableOfContents(_ref) {
             });
           }
         }, /*#__PURE__*/_react["default"].createElement(Styled.TOCIndicator, {
-          toHighlight: toHighlight,
-          isExpanded: isExpanded
+          $toHighlight: toHighlight,
+          $isExpanded: isExpanded
         }), /*#__PURE__*/_react["default"].createElement(Styled.TOCText, {
-          toHighlight: toHighlight
+          $toHighlight: toHighlight
         }, anchor.anchorLable));
       });
 
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Styled.TOCTabWrapper, {
-        isHidden: hideTOC
+        $isHidden: hideTOC
       }, /*#__PURE__*/_react["default"].createElement(Styled.TOCTab, {
         onClick: handleTabClick,
-        isExpanded: isExpanded
+        $isExpanded: isExpanded
       }, /*#__PURE__*/_react["default"].createElement("div", null, "\u7D22\u5F15"), /*#__PURE__*/_react["default"].createElement(Tab, null))), /*#__PURE__*/_react["default"].createElement(Styled.TOCBackground, {
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        isExpanded: isExpanded
+        $isExpanded: isExpanded
       }, /*#__PURE__*/_react["default"].createElement(Styled.TOCBlock, null, anchorsJSX)));
     }
   }));

package/lib/components/table-of-contents/styled.js

@@ -32,7 +32,7 @@ var TOCText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCText",
   componentId: "sc-1guo9zm-1"
 })(["font-size:14px;font-weight:", ";line-height:1.29;letter-spacing:0.1px;color:", ";&:hover{color:", ";}margin-left:5px;margin-right:auto;max-width:150px;"], _typography["default"].font.weight.normal, function (props) {
-  return props.toHighlight ? props.theme.colors.toc.accent : props.theme.colors.toc.text;
+  return props.$toHighlight ? props.theme.colors.toc.accent : props.theme.colors.toc.text;
 }, function (props) {
   return props.theme.colors.toc.accent;
 });
@@ -43,19 +43,19 @@ var TOCIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCIndicator",
   componentId: "sc-1guo9zm-2"
 })(["width:", ";border-top:", ";transition:width 0.3s ease-in-out,border-top 0.3s ease-in-out,transform 0.1s ease-in-out 0.1s;margin-top:7px;flex-shrink:0;", " ", ""], function (props) {
-  if (props.toHighlight && !props.isExpanded) {
+  if (props.$toHighlight && !props.$isExpanded) {
     return '30px';
-  } else if (props.toHighlight && props.isExpanded) {
+  } else if (props.$toHighlight && props.$isExpanded) {
     return '20px';
   }
 
   return '10px';
 }, function (props) {
-  return props.toHighlight ? "solid 2px ".concat(props.theme.colors.toc.accent) : "solid 2px ".concat(props.theme.colors.toc.text);
+  return props.$toHighlight ? "solid 2px ".concat(props.theme.colors.toc.accent) : "solid 2px ".concat(props.theme.colors.toc.text);
 }, _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    transform: ", ";\n  "])), function (props) {
-  return props.isExpanded ? 'translateX(0px)' : "translateX(".concat(tocWidth - 30, "px)");
+  return props.$isExpanded ? 'translateX(0px)' : "translateX(".concat(tocWidth - 30, "px)");
 }), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    transform: ", ";\n  "])), function (props) {
-  return props.isExpanded ? 'translateX(0px)' : "translateX(".concat(tocWidth - 10, "px)");
+  return props.$isExpanded ? 'translateX(0px)' : "translateX(".concat(tocWidth - 10, "px)");
 }));
 
 exports.TOCIndicator = TOCIndicator;
@@ -71,7 +71,7 @@ var TOCTabWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCTabWrapper",
   componentId: "sc-1guo9zm-4"
 })(["", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 30px;\n    position: fixed;\n    z-index: ", ";\n    top: 20%;\n    left: 0;\n    transition: transform 200ms;\n    transform: ", ";\n  "])), _zIndex["default"].toc, function (props) {
-  return props.isHidden || false ? 'translateX(-100%)' : 'translateX(0%)';
+  return props.$isHidden || false ? 'translateX(-100%)' : 'translateX(0%)';
 }), _mediaQuery["default"].desktopAndAbove(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 exports.TOCTabWrapper = TOCTabWrapper;
@@ -80,7 +80,7 @@ var TOCTab = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "styled__TOCTab",
   componentId: "sc-1guo9zm-5"
 })(["transition:transform 0.1s ease-in-out 0.1s;transform:", ";> div{opacity:0.6;color:", ";font-size:14px;width:14px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}"], function (props) {
-  return props.isExpanded ? "translateX(".concat(tocWidth, "px)") : 'translateX(0px)';
+  return props.$isExpanded ? "translateX(".concat(tocWidth, "px)") : 'translateX(0px)';
 }, function (props) {
   return props.theme.colors.base.lightText;
 });
@@ -93,9 +93,9 @@ var TOCBackground = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["position:fixed;z-index:", ";top:0;left:0;height:100%;width:", "px;background-color:", ";transition:transform 0.1s ease-in-out 0.1s;", " ", ""], _zIndex["default"].toc, tocWidth, function (props) {
   return props.theme.colors.toc.background;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    transform: ", ";\n  "])), function (props) {
-  return props.isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth, "px)");
+  return props.$isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth, "px)");
 }), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    transform: ", ";\n  "])), function (props) {
-  return props.isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth - 10, "px)");
+  return props.$isExpanded ? 'translateX(0px)' : "translateX(-".concat(tocWidth - 10, "px)");
 }));
 
 exports.TOCBackground = TOCBackground;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.3",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -24,21 +24,22 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.21.0-rc.2",
-    "@twreporter/react-components": "^9.0.0-rc.1",
-    "@twreporter/redux": "^8.0.0-rc.0",
-    "@twreporter/universal-header": "^3.0.0-rc.1",
+    "@twreporter/core": "^1.21.0-rc.3",
+    "@twreporter/react-components": "^9.0.0-rc.3",
+    "@twreporter/redux": "^8.0.0-rc.1",
+    "@twreporter/universal-header": "^3.0.0-rc.3",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.0.0",
     "react": "^18.2.0",
-    "react-waypoint": "^9.0.2",
+    "react-waypoint": "^10.3.0",
     "smooth-scroll": "16.1.3",
-    "styled-components": "^4.0.0"
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0"
   },
   "files": [
     "lib"
   ],
-  "gitHead": "526b8be1ee245d6fa21e811c0f659594b8599d98"
+  "gitHead": "45a8d41ab4734e83873a2a349911f1a3900b2e50"
 }