@twreporter/index-page 2.0.0-rc.0 → 2.0.0-rc.2

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 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.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@2.0.0-rc.1...@twreporter/index-page@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/index-page@2.0.0-rc.0...@twreporter/index-page@2.0.0-rc.1) (2024-05-10)
+
+**Note:** Version bump only for package @twreporter/index-page
+
+
+
+
+
 # [2.0.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/index-page@1.5.13-rc.4...@twreporter/index-page@2.0.0-rc.0) (2024-05-08)
 
 

package/lib/components/common-utils/bottom-link.js

@@ -74,11 +74,11 @@ var Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bottom-link__Wrapper",
   componentId: "r5njx2-2"
 })(["font-size:14px;color:", ";cursor:pointer;display:inline-block;> span{padding-right:7px;}svg{width:7px;margin-bottom:-1px;margin-left:7px;transition:0.3s all ease-out;}&:hover{> svg{transform:translateX(5px);}}", "{color:", ";}", "{&:visited{color:", ";}}"], function (props) {
-  return props.isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
+  return props.$isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
 }, TextSpan, function (props) {
-  return props.isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
+  return props.$isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
 }, StyledA, function (props) {
-  return props.isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
+  return props.$isDarkBg ? _color.colorSupportive.main : _color.colorSupportive.heavy;
 });
 
 exports.Wrapper = Wrapper;
@@ -90,7 +90,7 @@ var BottomLink = function BottomLink(props) {
       target = props.target,
       redirect = props.redirect;
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
-    isDarkBg: isDarkBg
+    $isDarkBg: isDarkBg
   }, redirect ? /*#__PURE__*/_react["default"].createElement(StyledA, {
     href: path,
     target: target,

package/lib/components/editor-picks.js

@@ -142,11 +142,11 @@ var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__FlexItem",
   componentId: "sc-1bdfw2o-2"
 })(["flex:0 0 20%;margin-right:20%;position:relative;transform:", ";transition:500ms transform ease-in,500ms margin-top ease-in;cursor:pointer;margin-top:", ";", " z-index:2;"], function (props) {
-  return props.selected !== 0 ? "translateX(-".concat((props.selected - 1) * 200, "%)") : 'translateX(200%)';
+  return props.$selected !== 0 ? "translateX(-".concat((props.$selected - 1) * 200, "%)") : 'translateX(200%)';
 }, function (props) {
-  return props.middle ? '-770px' : '16px';
+  return props.$middle ? '-770px' : '16px';
 }, _mediaQuery["default"].desktopAndBelow(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: ", ";\n  "])), function (props) {
-  return props.middle ? '-540px' : '16px';
+  return props.$middle ? '-540px' : '16px';
 }));
 
 var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -164,71 +164,71 @@ var LeftArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig
   displayName: "editor-picks__LeftArrow",
   componentId: "sc-1bdfw2o-5"
 })(["left:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
-  return props.selected === 0 ? 'none' : 'inline';
+  return props.$selected === 0 ? 'none' : 'inline';
 }, _mediaQuery["default"].desktopAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
 var RightArrow = /*#__PURE__*/(0, _styledComponents["default"])(Arrow).withConfig({
   displayName: "editor-picks__RightArrow",
   componentId: "sc-1bdfw2o-6"
 })(["right:17%;display:", ";", " transition:0.2s display linear;"], function (props) {
-  return props.selected === props.dataLength - 1 ? 'none' : 'inline';
+  return props.$selected === props.$dataLength - 1 ? 'none' : 'inline';
 }, _mediaQuery["default"].desktopAndBelow(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    top: 365px;\n  "]))));
 var SideCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
   displayName: "editor-picks__SideCategory",
   componentId: "sc-1bdfw2o-7"
 })(["text-align:center;height:16px;line-height:1.33;position:absolute;width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;top:453px;left:", ";", ""], function (props) {
-  return props.left ? props.left : '0';
+  return props.$left ? props.$left : '0';
 }, _mediaQuery["default"].desktopAndBelow(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    top: 338px;\n  "]))));
 var MiddleCategory = /*#__PURE__*/(0, _styledComponents["default"])(_categoryName["default"]).withConfig({
   displayName: "editor-picks__MiddleCategory",
   componentId: "sc-1bdfw2o-8"
 })(["text-align:center;height:16px;line-height:1.33;position:absolute;top:", ";left:", ";width:auto;transform:translateX(-50%);text-align:center;width:161px;height:16px;"], function (props) {
-  return props.top ? props.top : '0';
+  return props.$top ? props.$top : '0';
 }, function (props) {
-  return props.left ? props.left : '0';
+  return props.$left ? props.$left : '0';
 });
 
 var Title = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Title",
   componentId: "sc-1bdfw2o-9"
 })(["font-size:", ";font-weight:", ";font-family:", ";color:", ";width:", ";position:absolute;text-align:center;line-height:", ";max-height:", ";top:0;left:50%;transform:translateX(-50%);overflow:hidden;line-break:anywhere;", " ", ""], function (props) {
-  return props.middle ? "32px" : "16px";
+  return props.$middle ? "32px" : "16px";
 }, _font.fontWeight.bold, _font.fontFamily.title, _color.colorGrayscale.gray800, function (props) {
-  return props.middle ? '450px' : '150px';
+  return props.$middle ? '450px' : '150px';
 }, function (props) {
-  return props.middle ? '1.25' : '1.25';
+  return props.$middle ? '1.25' : '1.25';
 }, function (props) {
-  return props.middle ? '2.5' : '7.5';
+  return props.$middle ? '2.5' : '7.5';
 }, _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
-  return props.middle ? '450px' : '120px';
+  return props.$middle ? '450px' : '120px';
 }), _mediaQuery["default"].tabletAndBelow(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), function (props) {
-  return props.middle ? '450px' : '90px';
+  return props.$middle ? '450px' : '90px';
 }));
 
 var Description = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__Description",
   componentId: "sc-1bdfw2o-10"
 })(["position:absolute;font-size:16px;width:450px;top:", ";left:", ";color:", ";transform:translateX(-50%);", ";", " z-index:2;"], function (props) {
-  return props.top ? props.top : '0';
+  return props.$top ? props.$top : '0';
 }, function (props) {
-  return props.left ? props.left : '0';
+  return props.$left ? props.$left : '0';
 }, _color.colorGrayscale.gray800, (0, _styleUtils.truncate)('absolute', 1.43, 2, 'white'), _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
-  return props.ifHover ? 'opacity: 0.7;' : '';
+  return props.$ifHover ? 'opacity: 0.7;' : '';
 }));
 
 var HoverEffect = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__HoverEffect",
   componentId: "sc-1bdfw2o-11"
 })(["cursor:pointer;text-decoration:none;color:", ";", ""], _color.colorGrayscale.gray800, _mediaQuery["default"].tabletAndAbove(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", "\n    transition: .2s opacity linear;\n  "])), function (props) {
-  return props.ifHover ? 'opacity: 0.7;' : 'opacity: 1;';
+  return props.$ifHover ? 'opacity: 0.7;' : 'opacity: 1;';
 }));
 
 var FadeInFadeOut = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "editor-picks__FadeInFadeOut",
   componentId: "sc-1bdfw2o-12"
 })(["opacity:", ";z-index:", ";transition:150ms opacity ease-in-out;"], function (props) {
-  return props.isSelected ? '1' : '0';
+  return props.$isSelected ? '1' : '0';
 }, function (props) {
-  return props.isSelected ? '1' : '0';
+  return props.$isSelected ? '1' : '0';
 }); // this is a container
 
 
@@ -324,8 +324,8 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
 
           return /*#__PURE__*/_react["default"].createElement(FlexItem, {
             key: "key_".concat(obj.title),
-            middle: propsMap.middle,
-            selected: _this2.state.selected,
+            $middle: propsMap.middle,
+            $selected: _this2.state.selected,
             onClick: function onClick() {
               propsMap.onClick("a/".concat(_.get(obj, 'slug', 'error')));
             }
@@ -334,13 +334,13 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             redirect: isExternal,
             plain: true
           }, /*#__PURE__*/_react["default"].createElement(HoverEffect, {
-            ifHover: _this2.state.ifHover
+            $ifHover: _this2.state.ifHover
           }, /*#__PURE__*/_react["default"].createElement(Title, {
-            middle: propsMap.middle,
+            $middle: propsMap.middle,
             onMouseOver: _this2.handleOnMouseEnter,
             onMouseLeave: _this2.handleOnMouseLeave
           }, /*#__PURE__*/_react["default"].createElement("div", null, propsMap.middle ? getTruncate(obj.title) : obj.title)))) : /*#__PURE__*/_react["default"].createElement(Title, {
-            middle: propsMap.middle
+            $middle: propsMap.middle
           }, /*#__PURE__*/_react["default"].createElement("div", null, propsMap.middle ? getTruncate(obj.title) : obj.title)));
         });
       }();
@@ -401,22 +401,22 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
             };
             return /*#__PURE__*/_react["default"].createElement(FadeInFadeOut, {
               key: _.get(post, 'id'),
-              isSelected: index === selectDataToShow[theProp.position]
+              $isSelected: index === selectDataToShow[theProp.position]
             }, theProp.dataPath === 'og_description' ? /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
               href: href,
               redirect: isExternal,
               plain: true
             }, /*#__PURE__*/_react["default"].createElement(theProp.component, {
-              ifHover: _this2.state.ifHover,
-              top: theProp.propsForComponent.top,
-              left: theProp.propsForComponent.left,
+              $ifHover: _this2.state.ifHover,
+              $top: theProp.propsForComponent.top,
+              $left: theProp.propsForComponent.left,
               onMouseEnter: _this2.handleOnMouseEnter,
               onMouseLeave: _this2.handleOnMouseLeave // Adds fade-in fade-out inline style for IE and Edge
               ,
               style: fadingStyle
             }, currentData)) : /*#__PURE__*/_react["default"].createElement(theProp.component, {
-              top: theProp.propsForComponent.top,
-              left: theProp.propsForComponent.left // Adds fade-in fade-out inline style for IE and Edge
+              $top: theProp.propsForComponent.top,
+              $left: theProp.propsForComponent.left // Adds fade-in fade-out inline style for IE and Edge
               ,
               style: fadingStyle
             }, currentData));
@@ -437,7 +437,7 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
         };
         return /*#__PURE__*/_react["default"].createElement(FadeInFadeOut, {
           key: _.get(imgObj, 'id'),
-          isSelected: index === _this2.state.selected
+          $isSelected: index === _this2.state.selected
         }, /*#__PURE__*/_react["default"].createElement(_twreporterLink["default"], {
           href: href,
           redirect: isExternal,
@@ -460,11 +460,11 @@ var EditorPicks = /*#__PURE__*/function (_React$Component) {
       var Arrows = function () {
         return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(LeftArrow, {
           onClick: _this2.onShiftToRight,
-          selected: _this2.state.selected
+          $selected: _this2.state.selected
         }, /*#__PURE__*/_react["default"].createElement(LeftArrowIcon, null)), /*#__PURE__*/_react["default"].createElement(RightArrow, {
           onClick: _this2.onShiftToLeft,
-          selected: _this2.state.selected,
-          dataLength: _this2.props.data.length
+          $selected: _this2.state.selected,
+          $dataLength: _this2.props.data.length
         }, /*#__PURE__*/_react["default"].createElement(RightArrowIcon, null)));
       }();
 

package/lib/components/infographic-section.js

@@ -123,11 +123,11 @@ var ImgFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "infographic-section__ImgFrame",
   componentId: "sc-2fohll-7"
 })(["position:relative;width:430px;height:", ";", " ", " ", ""], function (props) {
-  return props.isPortrait ? '596px' : '282px';
+  return props.$isPortrait ? '596px' : '282px';
 }, _mediaQuery["default"].desktopOnly(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    max-width: 290px;\n    height: ", ";\n  "])), function (props) {
-  return props.isPortrait ? '390px' : '190px';
+  return props.$isPortrait ? '390px' : '190px';
 }), _mediaQuery["default"].tabletOnly(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    margin: 0 auto;\n    width: 220px;\n    height: ", ";\n  "])), function (props) {
-  return props.isPortrait ? '290px' : '145px';
+  return props.$isPortrait ? '290px' : '145px';
 }), _mediaQuery["default"].mobileOnly(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n    width: 100%;\n    height: 186px;\n  "]))));
 
 var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -160,7 +160,7 @@ var Infographic = /*#__PURE__*/function (_React$PureComponent) {
         href: href,
         redirect: isExternal
       }, /*#__PURE__*/_react["default"].createElement(ImgFrame, {
-        isPortrait: isPortrait
+        $isPortrait: isPortrait
       }, /*#__PURE__*/_react["default"].createElement(_imgWrapper["default"], {
         alt: imgObj.alt,
         src: imgObj.src,

package/lib/components/junior-box-section.js

@@ -88,13 +88,13 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "junior-box-section__Container",
   componentId: "sc-1yjyxv7-0"
 })(["background-image:", ";background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/KidsReporter_Desktop.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/KidsReporter_Desktop.jpg)");
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: ", ";\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/KidsReporter_Mobile.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/KidsReporter_Mobile.jpg)");
 }), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: ", ";\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/KidsReporter_Tablet.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/KidsReporter_Tablet.jpg)");
 }), _mediaQuery["default"].hdOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: ", ";\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/KidsReporter_DesktopHD.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/KidsReporter_DesktopHD.jpg)");
 }));
 
 var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -133,7 +133,7 @@ var JuniorBoxSection = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var releaseBranch = this.props.releaseBranch;
       return /*#__PURE__*/_react["default"].createElement(Container, {
-        releaseBranch: releaseBranch
+        $releaseBranch: releaseBranch
       }, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(TextColumn, null, /*#__PURE__*/_react["default"].createElement("h3", null, "\u770B\u5152\u5C11\u65B0\u805E\uFF0C\u8207\u5B69\u5B50\u5C0D\u8A71"), /*#__PURE__*/_react["default"].createElement("p", null, "\u5411\u5B69\u5B50\u89E3\u91CB\u91CD\u8981\u7684\u4E8B\u4EF6\u3001\u56B4\u8085\u7684\u8B70\u984C\uFF0C\u662F\u6C11\u4E3B\u793E\u6703\u5F88\u91CD\u8981\u7684\u4E8B\uFF0C\u4E5F\u662F\u300A\u5831\u5C0E\u8005\u300B\u8EAB\u70BA\u975E\u71DF\u5229\u5A92\u9AD4\u7684\u91CD\u8981\u8CAC\u4EFB\uFF0C\u8B93\u6211\u5011\u548C\u4F60\u4E00\u8D77\u5C0B\u627E\u5C0D\u8A71\u7684\u5951\u6A5F\u3002")), /*#__PURE__*/_react["default"].createElement(CTAButton, null, /*#__PURE__*/_react["default"].createElement(_juniorLink["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, "\u524D\u5F80\u95B1\u8B80", /*#__PURE__*/_react["default"].createElement(Icon, null, /*#__PURE__*/_react["default"].createElement(ArrowIcon, null)))))));
     }
   }]);

package/lib/components/latest-section.js

@@ -101,9 +101,7 @@ var ItemFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var ImageFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__ImageFrame",
   componentId: "hzxpx3-3"
-})(["width:100%;height:128px;background:", ";background-size:cover;background-position:center;display:block;", " ", " ", " @media (max-width:", "){height:93px;}@media (max-width:", "){height:88px;}"], function (props) {
-  return props.background ? "url(".concat(props.background, ")") : 'backgroun-image';
-}, _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 90px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    height: 110px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: 100px;\n  "]))), mobileSemiMidWidth, mobileMinWidth);
+})(["width:100%;height:128px;background-size:cover;background-position:center;display:block;", " ", " ", " @media (max-width:", "){height:93px;}@media (max-width:", "){height:88px;}"], _mediaQuery["default"].desktopOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    height: 90px;\n  "]))), _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    height: 110px;\n  "]))), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    height: 100px;\n  "]))), mobileSemiMidWidth, mobileMinWidth);
 
 var ContentFrame = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "latest-section__ContentFrame",

package/lib/components/photography-section.js

@@ -91,9 +91,9 @@ var Section = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "photography-section__Section",
   componentId: "sc-42isjh-0"
 })(["position:relative;background-color:", ";padding-bottom:", ";padding-top:100px;", ""], function (props) {
-  return props.isAutoHover ? _color.colorGrayscale.white : _color.colorPhoto.dark;
+  return props.$isAutoHover ? _color.colorGrayscale.white : _color.colorPhoto.dark;
 }, function (props) {
-  return props.isAutoHover ? '40px' : '80px';
+  return props.$isAutoHover ? '40px' : '80px';
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding-top: 0px;\n  "]))));
 
 var Listing = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
@@ -120,7 +120,7 @@ var Overlay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "photography-section__Overlay",
   componentId: "sc-42isjh-5"
 })(["position:absolute;top:0;bottom:0;left:0;right:0;height:100%;width:100%;opacity:", ";transition:0.5s ease;background-color:", "b3;", ""], function (props) {
-  return props.isHover ? 1 : 0;
+  return props.$isHover ? 1 : 0;
 }, _color.colorPhoto.heavy, _mediaQuery["default"].tabletAndAbove(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    &:hover {\n      opacity: 1;\n    }\n  "]))));
 
 var More = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -158,7 +158,7 @@ var Photography = /*#__PURE__*/function (_React$PureComponent) {
         srcSet: imgObj.srcSet,
         sizes: "(min-width: ".concat(_styleUtils.breakPoints.desktopMinWidth, ") ").concat(mockup.img.sizes.desktop, ", ") + "(min-width: ".concat(_styleUtils.breakPoints.tabletMinWidth, ") ").concat(mockup.img.sizes.tablet, ", ") + "".concat(mockup.img.sizes.mobile)
       }, /*#__PURE__*/_react["default"].createElement(Overlay, {
-        isHover: isHover
+        $isHover: isHover
       }, /*#__PURE__*/_react["default"].createElement(Title, null, /*#__PURE__*/_react["default"].createElement(_categoryName["default"], null, _categoryStrings["default"].photography), title))))));
     }
   }]);
@@ -303,7 +303,7 @@ var PhotographySection = /*#__PURE__*/function (_React$PureComponent2) {
         key: 'section_check_point',
         onLeave: this.onLeave
       }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Section, {
-        isAutoHover: isAutoHover
+        $isAutoHover: isAutoHover
       }, /*#__PURE__*/_react["default"].createElement(_sectionName["default"], null, /*#__PURE__*/_react["default"].createElement("span", null, _sectionStrings["default"].photography)), /*#__PURE__*/_react["default"].createElement(Listing, null, postComps), /*#__PURE__*/_react["default"].createElement(More, null, /*#__PURE__*/_react["default"].createElement(_bottomLink["default"], {
         text: "\u66F4\u591A\u5F71\u50CF\u65B0\u805E",
         isDarkBg: true,

package/lib/components/podcast-box-section.js

@@ -88,13 +88,13 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "podcast-box-section__Container",
   componentId: "sc-16lji0u-0"
 })(["background-image:", ";background-size:contain;padding-top:30px;padding-bottom:30px;", " ", " ", ""], function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/PodcastBox_Desktop.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/PodcastBox_Desktop.jpg)");
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-image: ", ";\n    padding-top: 40px;\n    padding-bottom: 60px;\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/PodcastBox_Mobile.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/PodcastBox_Mobile.jpg)");
 }), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: ", ";\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/PodcastBox_Tablet.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/PodcastBox_Tablet.jpg)");
 }), _mediaQuery["default"].hdOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: ", ";\n  "])), function (props) {
-  return "url(".concat(_app["default"].assetsPath, "/").concat(props.releaseBranch, "/PodcastBox_DesktopHD.jpg)");
+  return "url(".concat(_app["default"].assetsPath, "/").concat(props.$releaseBranch, "/PodcastBox_DesktopHD.jpg)");
 }));
 
 var ContentContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -135,7 +135,7 @@ var PodcastBoxSection = /*#__PURE__*/function (_React$PureComponent) {
     value: function render() {
       var releaseBranch = this.props.releaseBranch;
       return /*#__PURE__*/_react["default"].createElement(Container, {
-        releaseBranch: releaseBranch
+        $releaseBranch: releaseBranch
       }, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(TextColumn, null, /*#__PURE__*/_react["default"].createElement("h3", null, "\u807DPodcast\uFF0C\u611F\u53D7\u771F\u5BE6"), /*#__PURE__*/_react["default"].createElement("p", null, "\u5831\u5C0E\u8005Podcast\u7BC0\u76EE\uFF0C\u900F\u904E\u8A18\u8005\u3001\u4E8B\u4EF6\u7576\u4E8B\u4EBA\u7684\u7B2C\u4E00\u624B\u544A\u767D\uFF0C\u548C\u4F86\u81EA\u73FE\u5834\u7684\u6536\u97F3\u7D00\u9304\uFF0C\u5E36\u4F60\u8D70\u9032\u65B0\u805E\u5E55\u5F8C\u3001\u6545\u4E8B\u73FE\u5834\uFF0C\u611F\u53D7\u66F4\u5B8C\u6574\u7684\u771F\u5BE6\u3002")), /*#__PURE__*/_react["default"].createElement(ListenButton, null, /*#__PURE__*/_react["default"].createElement(_podcastLink["default"], null, listenNow))));
     }
   }]);

package/lib/components/topics-section.js

@@ -139,7 +139,7 @@ var Column = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topics-section__Column",
   componentId: "sc-17suvlo-7"
 })(["flex:0 0 ", "px;margin-bottom:12px;cursor:pointer;&:first-child{margin-right:30px;}opacity:", ";transition:0.2s opacity linear;", " ", ""], mockup.hd.width["default"], function (props) {
-  return props.ifHover ? 0.7 : 1;
+  return props.$ifHover ? 0.7 : 1;
 }, _mediaQuery["default"].desktopOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: 0 0 ", "px;\n  "])), mockup.desktop.width["default"]), _mediaQuery["default"].tabletOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    flex: 0 0 ", "px;\n    &:first-child {\n      margin-right: 20px;\n    }\n  "])), mockup.tablet.width["default"]));
 
 var TopicNameColumn = /*#__PURE__*/(0, _styledComponents["default"])(Column).withConfig({
@@ -314,7 +314,7 @@ var TopicsInARow = /*#__PURE__*/function (_React$PureComponent2) {
         }, topicName));
         titleColumns.push( /*#__PURE__*/_react["default"].createElement(TitleColumn, {
           key: id,
-          ifHover: indexHovered === index,
+          $ifHover: indexHovered === index,
           onMouseOver: function onMouseOver() {
             _this2.handleHover(index);
           },
@@ -327,7 +327,7 @@ var TopicsInARow = /*#__PURE__*/function (_React$PureComponent2) {
         }, /*#__PURE__*/_react["default"].createElement(Title, null, title))));
         imgColumns.push( /*#__PURE__*/_react["default"].createElement(ImgColumn, {
           key: id,
-          ifHover: indexHovered === index,
+          $ifHover: indexHovered === index,
           onMouseOver: function onMouseOver() {
             _this2.handleHover(index);
           },
@@ -345,7 +345,7 @@ var TopicsInARow = /*#__PURE__*/function (_React$PureComponent2) {
         }))));
         descColumns.push( /*#__PURE__*/_react["default"].createElement(DescColumn, {
           key: id,
-          ifHover: indexHovered === index,
+          $ifHover: indexHovered === index,
           onMouseOver: function onMouseOver() {
             _this2.handleHover(index);
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/index-page",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -12,8 +12,8 @@
     "prepublishOnly": "make build"
   },
   "dependencies": {
-    "@twreporter/core": "^1.21.0-rc.2",
-    "@twreporter/react-components": "^9.0.0-rc.0",
+    "@twreporter/core": "^1.21.0-rc.3",
+    "@twreporter/react-components": "^9.0.0-rc.2",
     "lodash": "^4.0.0",
     "prop-types": "^15.0.0",
     "react": "^18.2.0",
@@ -22,11 +22,12 @@
     "react-swipeable": "^4.0.1",
     "react-transition-group": "^4.4.5",
     "react-waypoint": "^9.0.2",
-    "styled-components": "^4.0.0",
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0",
     "swiper": "6.8.4"
   },
   "files": [
     "lib"
   ],
-  "gitHead": "b2608f57ee45ea3dd8d0e97329b8cd0cbb52c625"
+  "gitHead": "536cda99a9af7fe0d7404a8fcf8db55c762b8bb1"
 }