@twreporter/universal-header 3.0.0-rc.0 → 3.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.
 
+# [3.0.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.0-rc.1...@twreporter/universal-header@3.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))
+
+
+
+
+
+# [3.0.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@3.0.0-rc.0...@twreporter/universal-header@3.0.0-rc.1) (2024-05-10)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
 # [3.0.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.12.3-rc.4...@twreporter/universal-header@3.0.0-rc.0) (2024-05-08)
 
 

package/lib/components/action-button-item.js

@@ -63,23 +63,23 @@ var StyledPillButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.Pi
   displayName: "action-button-item__StyledPillButton",
   componentId: "z0zuf3-0"
 })(["justify-content:center;", ""], function (props) {
-  return props.buttonWidth === 'stretch' ? 'width: auto;' : '';
+  return props.$buttonWidth === 'stretch' ? 'width: auto;' : '';
 });
 
 var ActionItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button-item__ActionItem",
   componentId: "z0zuf3-1"
 })(["display:flex;align-items:center;justify-content:center;margin:", ";&:first-child{margin-top:0;margin-left:0;}a{text-decoration:none;}"], function (props) {
-  return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);
+  return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.$direction]);
 });
 
 var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button-item__ActionsContainer",
   componentId: "z0zuf3-2"
 })(["display:flex;align-items:center;flex-direction:", ";&,", ",a{", "}"], function (props) {
-  return props.direction;
+  return props.$direction;
 }, ActionItem, function (props) {
-  return props.buttonWidth === 'stretch' ? 'width: 100%;' : '';
+  return props.$buttonWidth === 'stretch' ? 'width: 100%;' : '';
 });
 
 var ActionButtonItem = function ActionButtonItem(_ref) {
@@ -122,7 +122,7 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
   var buttonType = _actions.ACTION_BUTTON_TYPE[actionKey];
   return /*#__PURE__*/_react["default"].createElement(ActionItem, {
     onClick: callback,
-    direction: direction
+    $direction: direction
   }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
     id: actionId
   }, actionLink), /*#__PURE__*/_react["default"].createElement(StyledPillButton, {
@@ -130,7 +130,7 @@ var ActionButtonItem = function ActionButtonItem(_ref) {
     theme: buttonTheme,
     type: buttonType,
     size: buttonSize,
-    buttonWidth: buttonWidth
+    $buttonWidth: buttonWidth
   })));
 };
 
@@ -164,8 +164,8 @@ var ActionButton = function ActionButton(_ref2) {
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(ActionsContainer, _extends({
-    direction: direction,
-    buttonWidth: buttonWidth
+    $direction: direction,
+    $buttonWidth: buttonWidth
   }, rest), _.map(actions, function (action) {
     return /*#__PURE__*/_react["default"].createElement(ActionButtonItem, {
       action: action,

package/lib/components/hamburger-footer.js

@@ -62,21 +62,21 @@ var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__LinkItem",
   componentId: "i02xyc-1"
 })(["padding:8px 32px;display:flex;align-items:center;color:", ";svg{height:18px;width:18px;margin-right:4px;background-color:", ";}", " &:active{color:", ";background-color:", ";svg{background-color:", ";}}"], function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }, function (props) {
-  return props.hoverBgColor;
+  return props.$hoverBgColor;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }), function (props) {
-  return props.activeColor;
+  return props.$activeColor;
 }, function (props) {
-  return props.activeBgColor;
+  return props.$activeBgColor;
 }, function (props) {
-  return props.activeColor;
+  return props.$activeColor;
 });
 
 var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -132,11 +132,11 @@ var Footer = function Footer(_ref) {
       key: key,
       onClick: closeHamburgerMenu
     }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
-      color: color,
-      hoverColor: hoverColor,
-      hoverBgColor: hoverBgColor,
-      activeColor: activeColor,
-      activeBgColor: activeBgColor
+      $color: color,
+      $hoverColor: hoverColor,
+      $hoverBgColor: hoverBgColor,
+      $activeColor: activeColor,
+      $activeBgColor: activeBgColor
     }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
       filename: _footer.FOOTER_ICON[key],
       releaseBranch: releaseBranch
@@ -157,11 +157,11 @@ var Footer = function Footer(_ref) {
       key: key,
       onClick: closeHamburgerMenu
     }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
-      color: color,
-      hoverColor: hoverColor,
-      hoverBgColor: hoverBgColor,
-      activeColor: activeColor,
-      activeBgColor: activeBgColor
+      $color: color,
+      $hoverColor: hoverColor,
+      $hoverBgColor: hoverBgColor,
+      $activeColor: activeColor,
+      $activeBgColor: activeBgColor
     }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
       text: label
     })));

package/lib/components/hamburger-footer.stories.js

@@ -35,7 +35,7 @@ var StyledFooter = /*#__PURE__*/(0, _styledComponents["default"])(_hamburgerFoot
   displayName: "hamburger-footerstories__StyledFooter",
   componentId: "sc-2581a8-0"
 })(["width:375px;background-color:", ";padding:16px 0;"], function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var getBgColor = function getBgColor(theme) {
@@ -66,7 +66,7 @@ var footer = {
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(StyledFooter, {
-      bgColor: bgColor
+      $bgColor: bgColor
     }));
   },
   parameters: {

package/lib/components/hamburger-menu-item.js

@@ -60,15 +60,15 @@ var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu-item__ItemContainer",
   componentId: "t1lhbb-2"
 })(["", "{padding:8px 32px;}cursor:pointer;color:", ";a,a:visited,a:link{text-decoration:none;color:", ";}svg{background-color:", ";}", " &:active{background-color:", ";}"], StyledP1, function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n    }\n  "])), function (props) {
-  return props.hoverBgColor;
+  return props.$hoverBgColor;
 }), function (props) {
-  return props.activeBgColor;
+  return props.$activeBgColor;
 });
 
 var SubItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemContainer).withConfig({
@@ -79,7 +79,7 @@ var DropdownItemContainer = /*#__PURE__*/(0, _styledComponents["default"])(ItemC
   displayName: "hamburger-menu-item__DropdownItemContainer",
   componentId: "t1lhbb-4"
 })(["padding:8px 32px;display:flex;align-items:center;justify-content:space-between;svg{transform:rotate(", ");transition:all 300ms;}"], function (props) {
-  return props.rotate;
+  return props.$rotate;
 });
 
 var MenuLinkItem = function MenuLinkItem(_ref) {
@@ -129,9 +129,9 @@ var MenuSubItem = function MenuSubItem(_ref2) {
       activeBgColor = _selectHamburgerItemT2.activeBgColor;
 
   return /*#__PURE__*/_react["default"].createElement(SubItemContainer, _extends({
-    color: color,
-    hoverBgColor: hoverBgColor,
-    activeBgColor: activeBgColor
+    $color: color,
+    $hoverBgColor: hoverBgColor,
+    $activeBgColor: activeBgColor
   }, props), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(StyledP2, {
     text: text,
     weight: "bold"
@@ -162,10 +162,10 @@ var MenuDropdownItem = function MenuDropdownItem(_ref3) {
 
   var iconRotateDeg = isActive ? '-180deg' : '0';
   return /*#__PURE__*/_react["default"].createElement(DropdownItemContainer, _extends({
-    color: color,
-    hoverBgColor: hoverBgColor,
-    activeBgColor: activeBgColor,
-    rotate: iconRotateDeg
+    $color: color,
+    $hoverBgColor: hoverBgColor,
+    $activeBgColor: activeBgColor,
+    $rotate: iconRotateDeg
   }, props), /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
     text: text,
     weight: "bold"

package/lib/components/hamburger-menu-item.stories.js

@@ -47,7 +47,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu-itemstories__Container",
   componentId: "xfb28s-0"
 })(["width:375px;background-color:", ";padding:16px 0;box-shadow:0px 0px 24px rgba(0,0,0,0.1);"], function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var getBgColor = function getBgColor(theme) {
@@ -78,7 +78,7 @@ var menuLinkItem = {
     return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
       value: context
     }, /*#__PURE__*/_react["default"].createElement(Container, {
-      bgColor: bgColor
+      $bgColor: bgColor
     }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenuItem.MenuLinkItem, props)));
   },
   args: {

package/lib/components/hamburger-menu.js

@@ -87,13 +87,13 @@ var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__MenuContainer",
   componentId: "sc-15rzowt-0"
 })(["width:", ";height:100vh;max-height:100vh;overflow-y:scroll;overscroll-behavior:contain;background-color:", ";-webkit-overflow-scrolling:touch;", " ", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 }, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    height: ", ";\n    max-height: ", ";\n    padding-bottom: ", "px;\n  "])), _hamburgerMenu.MENU_WIDTH.mobile, function (props) {
-  return props.mobileHeight;
+  return props.$mobileHeight;
 }, function (props) {
-  return props.mobileHeight;
+  return props.$mobileHeight;
 }, reserveHeightForIos15 + 48), function (props) {
-  return props.scrollBarColor;
+  return props.$scrollBarColor;
 });
 
 var CloseSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -140,7 +140,7 @@ var SubContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__SubContainer",
   componentId: "sc-15rzowt-9"
 })(["max-height:", ";overflow:hidden;transition:max-height 300ms ease-in-out;"], function (props) {
-  return props.isActive ? '300px' : '0';
+  return props.$isActive ? '300px' : '0';
 });
 
 var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -239,7 +239,7 @@ var DropdownContent = function DropdownContent(_ref) {
     onClick: handleClick,
     key: dropdownKey
   }), /*#__PURE__*/_react["default"].createElement(SubContainer, {
-    isActive: isActive,
+    $isActive: isActive,
     onClick: closeHamburgerMenu
   }, subItemJSX));
 };
@@ -351,9 +351,9 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
     setMobileHeight("".concat(window.innerHeight + reserveHeightForIos15, "px"));
   }, []);
   return /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
-    bgColor: bgColor,
-    scrollBarColor: scrollBarColor,
-    mobileHeight: mobileHeight
+    $bgColor: bgColor,
+    $scrollBarColor: scrollBarColor,
+    $mobileHeight: mobileHeight
   }, props), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: CloseIcon,
     theme: menuTheme,

package/lib/components/header.js

@@ -113,15 +113,15 @@ var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HeaderContainer",
   componentId: "sc-1krza7i-0"
 })(["position:", ";top:0;width:100%;background-color:", ";transform:translateY( ", " );transition:transform 300ms ", ";", ""], function (props) {
-  return props.theme === _theme2["default"].transparent ? 'fixed' : 'sticky';
+  return props.$theme === _theme2["default"].transparent ? 'fixed' : 'sticky';
 }, function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 }, function (props) {
-  return props.hideHeader ? "".concat(-narrowHeaderHeight, "px") : '0';
+  return props.$hideHeader ? "".concat(-narrowHeaderHeight, "px") : '0';
 }, function (props) {
-  return props.hideHeader ? 'ease-in' : 'ease-out';
+  return props.$hideHeader ? 'ease-in' : 'ease-out';
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
-  return props.forceShowOnMobile ? 'transform: translateY(0);' : '';
+  return props.$forceShowOnMobile ? 'transform: translateY(0);' : '';
 }));
 
 var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -153,36 +153,36 @@ var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TopRow",
   componentId: "sc-1krza7i-6"
 })(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;z-index:", ";background-color:", ";", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{margin-left:", ";transform:translateX(", ");transition:all ", ";transition-delay:", ";img,a{height:", ";transition:height ", ";transition-delay:", ";}}", ""], function (props) {
-  return props.toUseNarrow ? '16px' : '24px';
+  return props.$toUseNarrow ? '16px' : '24px';
 }, zIndex.topRow, function (props) {
-  return props.topRowBgColor;
+  return props.$topRowBgColor;
 }, ShowWhenNarrow, function (props) {
-  return props.toUseNarrow ? '1' : '0';
+  return props.$toUseNarrow ? '1' : '0';
 }, animation.step3Duration, function (props) {
-  return props.toUseNarrow ? '350ms' : 0;
+  return props.$toUseNarrow ? '350ms' : 0;
 }, HideWhenNarrow, function (props) {
-  return props.toUseNarrow ? '0' : '1';
+  return props.$toUseNarrow ? '0' : '1';
 }, animation.step3Duration, function (props) {
-  return props.toUseNarrow ? animation.step3Delay : 0;
+  return props.$toUseNarrow ? animation.step3Delay : 0;
 }, LogoContainer, function (props) {
-  return props.toUseNarrow ? '24px' : '0';
+  return props.$toUseNarrow ? '24px' : '0';
 }, function (props) {
-  return props.toUseNarrow ? '0' : '-24px';
+  return props.$toUseNarrow ? '0' : '-24px';
 }, animation.step3Duration, function (props) {
-  return props.toUseNarrow ? animation.step3Delay : 0;
+  return props.$toUseNarrow ? animation.step3Delay : 0;
 }, function (props) {
-  return props.toUseNarrow ? '24px' : '32px';
+  return props.$toUseNarrow ? '24px' : '32px';
 }, animation.step3Duration, function (props) {
-  return props.toUseNarrow ? animation.step3Delay : 0;
+  return props.$toUseNarrow ? animation.step3Delay : 0;
 }, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    padding: 16px 0;\n  "]))));
 
 var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
   displayName: "header__StyledDivider",
   componentId: "sc-1krza7i-7"
 })(["opacity:", ";transition:opacity ", ";transition-delay:", ";"], function (props) {
-  return props.toUseNarrow ? '0' : '1';
+  return props.$toUseNarrow ? '0' : '1';
 }, animation.step2Duration, function (props) {
-  return props.toUseNarrow ? animation.step2Delay : 0;
+  return props.$toUseNarrow ? animation.step2Delay : 0;
 });
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -204,11 +204,11 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
   displayName: "header__HamburgerContainer",
   componentId: "sc-1krza7i-11"
 })(["z-index:", ";position:absolute;top:0;left:-", ";transition:transform 300ms ease-in-out;transform:translateX( ", " );", " ", ""], zIndex.hamburger, _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
-  return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.desktop : 0;
+  return props.$showHamburger ? _hamburgerMenu.MENU_WIDTH.desktop : 0;
 }, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
   return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.tablet : 0;
 }), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    left: 0;\n    transform: none;\n    opacity: ", ";\n  "])), function (props) {
-  return props.showHamburger ? 1 : 0;
+  return props.$showHamburger ? 1 : 0;
 }));
 
 var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -220,14 +220,14 @@ var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideOnArticle",
   componentId: "sc-1krza7i-13"
 })(["", ""], function (props) {
-  return props.isOnArticlePage ? 'display: none;' : '';
+  return props.$isOnArticlePage ? 'display: none;' : '';
 });
 
 var PrevButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__PrevButton",
   componentId: "sc-1krza7i-14"
 })(["", " margin-right:8px;padding:4px;transform:translateX(-8px);"], function (props) {
-  return props.isShow ? '' : 'display: none;';
+  return props.$isShow ? '' : 'display: none;';
 });
 
 var Header = function Header(_ref) {
@@ -322,8 +322,8 @@ var Header = function Header(_ref) {
   };
 
   var DesktopHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
-    toUseNarrow: toUseNarrow,
-    topRowBgColor: topRowBgColor
+    $toUseNarrow: toUseNarrow,
+    $topRowBgColor: topRowBgColor
   }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: HamburgerIcon,
     theme: theme,
@@ -332,7 +332,7 @@ var Header = function Header(_ref) {
     type: logoType,
     releaseBranch: releaseBranch
   }))), /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHeaderAction, null)), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)))), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
-    toUseNarrow: toUseNarrow
+    $toUseNarrow: toUseNarrow
   }), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
     "in": !toUseNarrow,
     classNames: "channel-effect",
@@ -350,7 +350,7 @@ var Header = function Header(_ref) {
     toUseNarrow: toUseNarrow,
     topRowBgColor: topRowBgColor
   }, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
-    isShow: showPrevIcon,
+    $isShow: showPrevIcon,
     onClick: gotoPrev
   }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: BackToPrevIcon,
@@ -363,13 +363,13 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_headerContext.HamburgerContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
-    bgColor: bgColor,
-    hideHeader: hideHeader,
-    forceShowOnMobile: showHamburger,
-    theme: theme
+    $bgColor: bgColor,
+    $hideHeader: hideHeader,
+    $forceShowOnMobile: showHamburger,
+    $theme: theme
   }, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, DesktopHeaderJSX), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, MobileHeaderJSX)), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
     ref: ref,
-    showHamburger: showHamburger
+    $showHamburger: showHamburger
   }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
     "in": showHamburger,
     classNames: "hamburger-effect",
@@ -380,7 +380,7 @@ var Header = function Header(_ref) {
     },
     unmountOnExit: true
   }, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], null))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(HideOnArticle, {
-    isOnArticlePage: isOnArticlePage
+    $isOnArticlePage: isOnArticlePage
   }, /*#__PURE__*/_react["default"].createElement(TabBarContainer, null, /*#__PURE__*/_react["default"].createElement(_tabBar["default"], {
     toggleHamburger: toggleHamburger
   })))));

package/lib/components/icons.js

@@ -63,7 +63,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "icons__Container",
   componentId: "ay66zn-2"
 })(["opacity:", ";transition:opacity 300ms ease;"], function (props) {
-  return props.isSearchOpened ? '0' : '1';
+  return props.$isSearchOpened ? '0' : '1';
 });
 
 var LogContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -75,9 +75,9 @@ var SearchContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "icons__SearchContainer",
   componentId: "ay66zn-4"
 })(["opacity:", ";transition:opacity 300ms ease;position:absolute;right:0;top:-8px;z-index:", ";"], function (props) {
-  return props.isSearchOpened ? '1' : '0';
+  return props.$isSearchOpened ? '1' : '0';
 }, function (props) {
-  return props.isSearchOpened ? 999 : -1;
+  return props.$isSearchOpened ? 999 : -1;
 });
 
 var MemberButtonType = {
@@ -200,12 +200,12 @@ var SearchIcon = function SearchIcon() {
     key: "search"
   }, /*#__PURE__*/_react["default"].createElement(Container, {
     onClick: handleClickSearch,
-    isSearchOpened: isSearchOpened
+    $isSearchOpened: isSearchOpened
   }, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: Icon,
     theme: theme
   })), /*#__PURE__*/_react["default"].createElement(SearchContainer, {
-    isSearchOpened: isSearchOpened
+    $isSearchOpened: isSearchOpened
   }, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
     placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B",
     theme: theme,

package/lib/components/slogan.js

@@ -33,7 +33,7 @@ var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
 })(["color:", ";display:flex;align-items:center;cursor:default;font-family:", ";font-weight:", ";font-size:14px;"], function (props) {
-  return props.color;
+  return props.$color;
 }, _fonts["default"].family.serif, _font.fontWeight.normal);
 
 var Slogan = function Slogan(_ref) {
@@ -44,7 +44,7 @@ var Slogan = function Slogan(_ref) {
 
   var color = (0, _theme.selectSloganTheme)(theme);
   return /*#__PURE__*/_react["default"].createElement(SloganContainer, _extends({
-    color: color
+    $color: color
   }, props), _slogan["default"]);
 };
 

package/lib/components/tab-bar.js

@@ -37,7 +37,7 @@ var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab-bar__TabBarContainer",
   componentId: "bdt7uj-0"
 })(["display:flex;justify-content:space-between;padding:8px 16px;box-shadow:0px 0px 2px rgba(0,0,0,0.15);background-color:", ";padding-bottom:calc(8px + env(safe-area-inset-bottom,0));a{text-decoration:none;}a:visited,a:active{color:inherit;background-color:inherit;}"], function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var buttonContainerCss = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;justify-content:center;margin-right:8px;flex:1;&:last-child{margin-right:0;}"]);
@@ -116,8 +116,8 @@ var TabBar = function TabBar() {
   var isMyReadingActive = !isHamburgerMenuOpen && pathname === '/myreading';
   var hamburgerIconText = isHamburgerMenuOpen ? '關閉選單' : '選單';
   return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
-    bgColor: bgColor,
-    borderColor: borderColor
+    $bgColor: bgColor,
+    $borderColor: borderColor
   }, /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, home, {
     onClick: closeHamburgerMenu
   }), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.2",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -20,8 +20,8 @@
   ],
   "license": "MIT",
   "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.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -31,7 +31,8 @@
     "react-transition-group": "^4.4.5",
     "redux": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "styled-components": "^4.0.0"
+    "styled-components": "^6.0.0",
+    "stylis": "^4.0.0"
   },
   "files": [
     "lib"
@@ -51,5 +52,5 @@
     "babel-loader": "^8.2.5",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "b2608f57ee45ea3dd8d0e97329b8cd0cbb52c625"
+  "gitHead": "536cda99a9af7fe0d7404a8fcf8db55c762b8bb1"
 }