@twreporter/react-components 9.0.0-rc.0 → 9.0.0-rc.2

package/lib/card/stories/articleCard.stories.js

@@ -32,13 +32,13 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "articleCardstories__Container",
   componentId: "q36nxb-0"
 })(["width:", "px;"], function (props) {
-  return props.size === _articleCard["default"].Size.S ? '343' : '878';
+  return props.$size === _articleCard["default"].Size.S ? '343' : '878';
 });
 
 var article = {
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement(Container, {
-      size: args.size
+      $size: args.size
     }, /*#__PURE__*/_react["default"].createElement(_articleCard["default"], args));
   },
   args: {

package/lib/card/stories/shortStory.stories.js

@@ -40,13 +40,13 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "shortStorystories__Container",
   componentId: "luhojz-0"
 })(["width:", "px;"], function (props) {
-  return props.size === _shortStory["default"].Size.S ? '343' : '516';
+  return props.$size === _shortStory["default"].Size.S ? '343' : '516';
 });
 
 var shortStory = {
   render: function render(args) {
     return /*#__PURE__*/_react["default"].createElement(Container, {
-      size: args.size
+      $size: args.size
     }, /*#__PURE__*/_react["default"].createElement(_shortStory["default"], args));
   },
   args: {

package/lib/checkbox/index.js

@@ -45,18 +45,18 @@ var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "checkbox__Indicator",
   componentId: "vzoxib-3"
 })(["width:16px;height:16px;background:", ";position:absolute;top:0px;left:0px;border-color:", ";border-radius:2px;box-shadow:0 0 0 1px ", ";margin:3px 8px 0px 0px;&::after{content:'';position:absolute;display:none;}", ":checked + &::after{display:block;left:5px;top:0px;width:4px;height:10px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], function (props) {
-  return props.value ? props.disabled ? disableColor : activeColor : 'rgba(0, 0, 0, 0)';
+  return props.value ? props.$disabled ? disableColor : activeColor : 'rgba(0, 0, 0, 0)';
 }, function (props) {
-  return props.disabled ? disableColor : activeColor;
+  return props.$disabled ? disableColor : activeColor;
 }, function (props) {
-  return props.disabled ? disableColor : activeColor;
+  return props.$disabled ? disableColor : activeColor;
 }, Input);
 
 var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "checkbox__ColorP1",
   componentId: "vzoxib-4"
 })(["color:", ";"], function (props) {
-  return props.disabled ? disableColor : activeColor;
+  return props.$disabled ? disableColor : activeColor;
 });
 
 var Checkbox = function Checkbox(_ref) {
@@ -76,7 +76,7 @@ var Checkbox = function Checkbox(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Label, null, label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
     text: label,
-    disabled: disabled
+    $disabled: disabled
   }), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     checked: value,
@@ -84,7 +84,7 @@ var Checkbox = function Checkbox(_ref) {
     onChange: handleChange
   }), /*#__PURE__*/_react["default"].createElement(Indicator, {
     value: value,
-    disabled: disabled
+    $disabled: disabled
   })));
 };
 

package/lib/color.stories.js

@@ -31,7 +31,7 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "colorstories__Container",
   componentId: "sc-1icwolq-0"
 })(["display:flex;width:100vw;height:100vh;background-color:", ";"], function (props) {
-  return props.background;
+  return props.$background;
 });
 
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -43,11 +43,11 @@ var Color = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "colorstories__Color",
   componentId: "sc-1icwolq-2"
 })(["height:", ";width:", ";background-color:", ";"], function (props) {
-  return props.height;
+  return props.$height;
 }, function (props) {
-  return props.width;
+  return props.$width;
 }, function (props) {
-  return props.color;
+  return props.$color;
 });
 
 var P2Gray600 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
@@ -58,7 +58,7 @@ var ColorText = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).wi
   displayName: "colorstories__ColorText",
   componentId: "sc-1icwolq-4"
 })(["", " color:", ";"], function (props) {
-  return props.show ? '' : 'display: none;';
+  return props.$show ? '' : 'display: none;';
 }, _color.colorGrayscale.gray500);
 var ColorSetEnum = {
   BRAND: 'brand',
@@ -113,17 +113,17 @@ var ColorSet = function ColorSet(_ref) {
     }, /*#__PURE__*/_react["default"].createElement(P2Gray600, {
       text: key
     }), /*#__PURE__*/_react["default"].createElement(Color, {
-      height: height,
-      width: width,
-      color: color
+      $height: height,
+      $width: width,
+      $color: color
     }), /*#__PURE__*/_react["default"].createElement(ColorText, {
       text: color,
-      show: showColorText
+      $show: showColorText
     }));
   });
 
   return /*#__PURE__*/_react["default"].createElement(Container, {
-    background: background
+    $background: background
   }, colorBoxes);
 };
 

package/lib/confirmation/index.js

@@ -53,7 +53,7 @@ var Dialog = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "confirmation__Dialog",
   componentId: "ypuqpw-1"
 })(["width:", ";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:75px 60px 58px 60px;background-color:", ";text-align:center;", ""], function (props) {
-  return props.width;
+  return props.$width;
 }, _color.colorGrayscale.white, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 100%;\n    padding: 47px 17px 37px 17px;\n  "]))));
 
 var Content = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -100,7 +100,7 @@ var Confirmation = function Confirmation(props) {
       toShowWarningIcon = props.toShowWarningIcon;
   var iconJSX = toShowWarningIcon ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(WarningSign, null)) : null;
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Dialog, {
-    width: width
+    $width: width
   }, /*#__PURE__*/_react["default"].createElement(Content, null, iconJSX, /*#__PURE__*/_react["default"].createElement(TextContainer, null, content)), /*#__PURE__*/_react["default"].createElement(FuncitonArea, null, /*#__PURE__*/_react["default"].createElement(Cancel, {
     onClick: onCancel
   }, cancel), /*#__PURE__*/_react["default"].createElement(Confirm, {

package/lib/divider.js

@@ -47,11 +47,11 @@ var DividerBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "divider__DividerBox",
   componentId: "nohqp6-0"
 })(["border-width:", ";border-style:solid;border-color:", ";height:", ";width:", ";"], function (props) {
-  return (0, _css.arrayToCssShorthand)(borderWidth[props.direction]);
+  return (0, _css.arrayToCssShorthand)(borderWidth[props.$direction]);
 }, _color.colorGrayscale.gray300, function (props) {
-  return height[props.direction];
+  return height[props.$direction];
 }, function (props) {
-  return width[props.direction];
+  return width[props.$direction];
 });
 
 var Divider = function Divider(_ref) {
@@ -60,7 +60,7 @@ var Divider = function Divider(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(DividerBox, _extends({
-    direction: direction
+    $direction: direction
   }, props));
 };
 

package/lib/footer/constants/links.js

@@ -13,9 +13,16 @@ var gtmId = {
   support: 'footer-support',
   newsletter: 'footer-newsletter'
 };
+/*
+  display for links group
+  | first column | second column | third column |
+  | XXXX         | XXXX          | XXX          |
+  | XXXXX        | XXXXXX        | XX           |
+*/
 
 var getLinksGroups = function getLinksGroups(mainOrigin) {
-  return [[{
+  return [// first column
+  [{
     slug: 'about',
     text: '關於我們',
     to: "".concat(mainOrigin).concat(_entityPath["default"].aboutus),
@@ -40,7 +47,8 @@ var getLinksGroups = function getLinksGroups(mainOrigin) {
     text: '常見問題',
     to: "".concat(mainOrigin).concat(_entityPath["default"].article, "about-us-questions"),
     target: '_blank'
-  }], [{
+  }], // second column
+  [{
     slug: 'donate',
     text: '捐款徵信',
     to: "".concat(mainOrigin).concat(_entityPath["default"].article, "credit-donate"),
@@ -60,7 +68,8 @@ var getLinksGroups = function getLinksGroups(mainOrigin) {
     text: '出版品與周邊',
     to: 'https://twreporter.backme.tw/shops/3619?locale=zh-TW',
     target: '_blank'
-  }], [{
+  }], // third column
+  [{
     slug: 'subcribe-email',
     text: '訂閱電子報',
     to: 'http://eepurl.com/djVwF9',

package/lib/footer/index.js

@@ -49,7 +49,7 @@ var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var FooterSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "footer__FooterSection",
   componentId: "d1uef9-1"
-})(["display:flex;flex-direction:column;margin:auto;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 1200px;\n    padding: 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: center;\n    max-width: 400px;\n    padding: 48px 16px;\n  "]))));
+})(["display:flex;flex-direction:column;margin:auto;", " ", ""], _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: 1200px;\n    padding: 48px;\n  "]))), _mediaQuery["default"].tabletAndBelow(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex-direction: column;\n    justify-content: center;\n    max-width: 400px;\n    padding: 48px 24px 96px;\n  "]))));
 
 var UpperContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "footer__UpperContainer",
@@ -153,11 +153,12 @@ var Footer = function Footer(_ref2) {
   }), /*#__PURE__*/_react["default"].createElement(P2Gray600, {
     text: "\u53F0\u7063\u7B2C\u4E00\u500B\u7531\u516C\u76CA\u57FA\u91D1\u6703\u6210\u7ACB\u7684\u7DB2\u8DEF\u5A92\u9AD4\uFF0C\u81F4\u529B\u65BC\u516C\u5171\u9818\u57DF\u8ABF\u67E5\u5831\u5C0E\uFF0C\u6253\u9020\u591A\u5143\u9032\u6B65\u7684\u5A92\u9AD4\u74B0\u5883\u3002"
   })), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], {
-    to: _requestOrigins["default"].forClientSideRendering[releaseBranch].accounts,
+    to: _requestOrigins["default"].forClientSideRendering[releaseBranch].support,
     target: "_blank"
   }, /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
     className: "button",
     type: _button.PillButton.Type.SECONDARY,
+    size: _button.PillButton.Size.L,
     text: '贊助我們'
   }))), /*#__PURE__*/_react["default"].createElement(LinksContainer, null, /*#__PURE__*/_react["default"].createElement(_link.FooterLinkButtonGroups, {
     releaseBranch: releaseBranch

package/lib/footer/link.js

@@ -48,7 +48,7 @@ var _ = {
 var LinkColumn = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "link__LinkColumn",
   componentId: "sc-7lr0di-0"
-})(["display:flex;flex-direction:column;gap:16px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    flex-basis: 33%;\n    word-wrap: break-word;\n    max-width: 33%;\n    gap: 8px;\n  "]))));
+})(["display:flex;flex-direction:column;gap:16px;width:120px;", ""], _mediaQuery["default"].tabletAndBelow(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    flex-grow: 1;\n    flex-basis: 33%;\n    word-wrap: break-word;\n    max-width: 33%;\n    gap: 8px;\n  "]))));
 
 var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
   displayName: "link__LinkContainer",

package/lib/icon/index.js

@@ -34,7 +34,7 @@ var IconContainer = /*#__PURE__*/_styledComponents["default"].svg.withConfig({
   displayName: "icon__IconContainer",
   componentId: "sc-4fv57p-0"
 })(["height:24px;width:24px;background-color:black;mask-image:url(", ");mask-size:cover;"], function (props) {
-  return props.src;
+  return props.$src;
 });
 
 var RawIconContainer = /*#__PURE__*/_styledComponents["default"].img.withConfig({
@@ -55,7 +55,7 @@ var Icon = function Icon(_ref) {
   var IconComponent = type === _enum.IconType.RAW ? RawIconContainer : IconContainer;
   return /*#__PURE__*/_react["default"].createElement(IconComponent, _extends({
     alt: filename,
-    src: src
+    $src: src
   }, restProps));
 };
 

package/lib/icon/stories/changeIconColor.stories.js

@@ -19,13 +19,13 @@ var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "changeIconColorstories__IconContainer",
   componentId: "qv69ol-0"
 })(["svg{background-color:", ";}"], function (props) {
-  return props.color;
+  return props.$color;
 });
 
 var ChangeIconColor = function ChangeIconColor(_ref) {
   var color = _ref.color;
   return /*#__PURE__*/_react["default"].createElement(IconContainer, {
-    color: color
+    $color: color
   }, /*#__PURE__*/_react["default"].createElement(_index.Article, null));
 };
 

package/lib/image-with-fallback.js

@@ -52,7 +52,7 @@ var ImgObjectFit = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).
   displayName: "image-with-fallback__ImgObjectFit",
   componentId: "qk0kiz-1"
 })(["opacity:", ";transition:opacity 1s ease;> img{width:100%;height:100%;object-fit:cover;}"], function (props) {
-  return props.opacity;
+  return props.$opacity;
 });
 var ImgFallback = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
   displayName: "image-with-fallback__ImgFallback",
@@ -64,7 +64,7 @@ var LogoCenteringBlock = /*#__PURE__*/(0, _styledComponents["default"])(ImgConta
   displayName: "image-with-fallback__LogoCenteringBlock",
   componentId: "qk0kiz-3"
 })(["position:absolute;justify-content:center;align-items:center;background-color:white;display:", ";> img{width:65%;height:65%;}"], function (props) {
-  return props.display;
+  return props.$display;
 });
 
 var Image = function Image(_ref) {
@@ -114,7 +114,7 @@ var Image = function Image(_ref) {
   }
 
   var ImgJSX = isObjectFit ? /*#__PURE__*/_react["default"].createElement(ImgObjectFit, {
-    opacity: isImgOnLoad ? 1 : 0
+    $opacity: isImgOnLoad ? 1 : 0
   }, /*#__PURE__*/_react["default"].createElement("img", {
     ref: imgNode,
     alt: alt,
@@ -125,7 +125,7 @@ var Image = function Image(_ref) {
     url: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src)
   });
   return /*#__PURE__*/_react["default"].createElement(ImgContainer, null, /*#__PURE__*/_react["default"].createElement(LogoCenteringBlock, {
-    display: logoDisplay
+    $display: logoDisplay
   }, /*#__PURE__*/_react["default"].createElement(_logo.LogoFallback, {
     releaseBranch: releaseBranch
   })), ImgJSX);

package/lib/input/components/search-bar.js

@@ -67,31 +67,31 @@ var InputContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "search-bar__InputContainer",
   componentId: "sc-1mjh7mz-0"
 })(["display:flex;align-items:center;padding:8px 16px;border:none;border-radius:40px;background-color:", ";"], function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 });
 
 var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
   displayName: "search-bar__Container",
   componentId: "sc-1mjh7mz-1"
 })(["display:flex;align-items:center;", " ", "{", " &,& > input{", "}", "}"], function (props) {
-  return props.widthType === 'stretch' ? 'width: 100%;' : '';
+  return props.$widthType === 'stretch' ? 'width: 100%;' : '';
 }, InputContainer, function (props) {
-  return props.focus ? "\n      background-color: ".concat(props.focusBgColor, ";\n      border: 1px solid ").concat(props.borderColor, ";\n    ") : 'border: 1px solid transparent;';
+  return props.$focus ? "\n      background-color: ".concat(props.$focusBgColor, ";\n      border: 1px solid ").concat(props.$borderColor, ";\n    ") : 'border: 1px solid transparent;';
 }, function (props) {
-  return props.widthType === 'stretch' ? 'width: 100%;' : '';
+  return props.$widthType === 'stretch' ? 'width: 100%;' : '';
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      ", "\n    "])), function (props) {
-  return props.focus ? "\n        background-color: ".concat(props.desktopBgColor, ";\n      ") : '';
+  return props.$focus ? "\n        background-color: ".concat(props.$desktopBgColor, ";\n      ") : '';
 }));
 
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "search-bar__Input",
   componentId: "sc-1mjh7mz-2"
 })(["color:", ";margin-right:8px;height:24px;font-size:14px;&,&:focus,&:focus-visible{border:none;background-color:transparent;outline:none;}&:focus,&:focus-visible{&::placeholder{color:", ";}}&::placeholder{color:", ";}&::-webkit-search-cancel-button{display:none;}"], function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.focusColor;
+  return props.$focusColor;
 }, function (props) {
-  return props.placeholderColor;
+  return props.$placeholderColor;
 });
 
 var DesktopOnlyIconButton = /*#__PURE__*/(0, _styledComponents["default"])(_button.IconButton).withConfig({
@@ -179,19 +179,19 @@ var SearchBar = function SearchBar(_ref) {
     onSubmit: onSubmit,
     onReset: onReset,
     onFocus: onFocus,
-    focus: focus,
-    focusBgColor: focusBgColor,
-    desktopBgColor: desktopBgColor,
-    borderColor: borderColor,
-    widthType: widthType
+    $focus: focus,
+    $focusBgColor: focusBgColor,
+    $desktopBgColor: desktopBgColor,
+    $borderColor: borderColor,
+    $widthType: widthType
   }, props), /*#__PURE__*/_react["default"].createElement(InputContainer, {
-    bgColor: bgColor
+    $bgColor: bgColor
   }, /*#__PURE__*/_react["default"].createElement(Input, {
     type: "search",
     placeholder: placeholder,
-    color: color,
-    focusColor: focusColor,
-    placeholderColor: placeholderColor,
+    $color: color,
+    $focusColor: focusColor,
+    $placeholderColor: placeholderColor,
     value: keywords,
     onChange: onChange,
     onBlur: onBlur,

package/lib/input/components/text-field.js

@@ -39,25 +39,25 @@ var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "text-field__Input",
   componentId: "ld9aag-0"
 })(["height:40px;font-size:16px;border-width:0 0 1px 0;background-color:inherit;padding:0;border-radius:0;color:", ";border-color:", ";border-style:solid;&:focus,&:focus-visible{outline-width:0;outline-style:none;}&::placeholder{color:", ";}"], function (props) {
-  return textColor[props.state];
+  return textColor[props.$state];
 }, function (props) {
-  return borderColor[props.state];
+  return borderColor[props.$state];
 }, _color.colorGrayscale.gray400);
 
 var Message = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConfig({
   displayName: "text-field__Message",
   componentId: "ld9aag-1"
 })(["color:", ";margin-top:8px;"], function (props) {
-  return messageColor[props.state];
+  return messageColor[props.$state];
 });
 
 var Container = /*#__PURE__*/_styledComponents["default"].form.withConfig({
   displayName: "text-field__Container",
   componentId: "ld9aag-2"
 })(["", ",", "{width:100%;text-align:", ";justify-content:", ";}"], Input, Message, function (props) {
-  return props.align;
+  return props.$align;
 }, function (props) {
-  return props.align;
+  return props.$align;
 });
 
 var defaultFunc = function defaultFunc() {};
@@ -91,17 +91,17 @@ var TextField = function TextField(_ref) {
 
   return /*#__PURE__*/_react["default"].createElement(Container, {
     onSubmit: handleSubmit,
-    align: align,
+    $align: align,
     className: className
   }, /*#__PURE__*/_react["default"].createElement(Input, _extends({
     name: "input",
     placeholder: placeholder,
-    state: state,
+    $state: state,
     disabled: state === _enums.TextState.DISABLED,
     onChange: handleChange
   }, props)), message && /*#__PURE__*/_react["default"].createElement(Message, {
     text: message,
-    state: state
+    $state: state
   }));
 };
 

package/lib/is-fetching-wrapper.js

@@ -55,16 +55,16 @@ var FetchingBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "is-fetching-wrapper__FetchingBlock",
   componentId: "sc-1oo61h6-0"
 })(["position:relative;display:", ";min-height:100vh;width:100%;", ""], function (props) {
-  return props.isFetching ? 'block' : 'none';
+  return props.$isFetching ? 'block' : 'none';
 }, function (props) {
-  return props.showSpinner ? "\n      background-image: url(".concat((0, _storageUrlProcessor.replaceGCSUrlOrigin)(spinnerLogoUrl), ");\n      background-position: center;\n      background-repeat: no-repeat;\n    ") : '';
+  return props.$showSpinner ? "\n      background-image: url(".concat((0, _storageUrlProcessor.replaceGCSUrlOrigin)(spinnerLogoUrl), ");\n      background-position: center;\n      background-repeat: no-repeat;\n    ") : '';
 });
 
 var TransitionBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "is-fetching-wrapper__TransitionBlock",
   componentId: "sc-1oo61h6-1"
 })(["transition:opacity 1s ease-in-out;opacity:", ";"], function (props) {
-  return props.isFetching ? 0 : 1;
+  return props.$isFetching ? 0 : 1;
 });
 
 var FetchingWrapper = function FetchingWrapper(WrappedComponent) {
@@ -90,18 +90,18 @@ var FetchingWrapper = function FetchingWrapper(WrappedComponent) {
 
         if ( /*#__PURE__*/_react["default"].isValidElement(WrappedComponent)) {
           return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FetchingBlock, {
-            isFetching: isFetching,
-            showSpinner: showSpinner
+            $isFetching: isFetching,
+            $showSpinner: showSpinner
           }), /*#__PURE__*/_react["default"].createElement(TransitionBlock, {
-            isFetching: isFetching
+            $isFetching: isFetching
           }, WrappedComponent));
         }
 
         return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(FetchingBlock, {
-          isFetching: isFetching,
-          showSpinner: showSpinner
+          $isFetching: isFetching,
+          $showSpinner: showSpinner
         }), /*#__PURE__*/_react["default"].createElement(TransitionBlock, {
-          isFetching: isFetching
+          $isFetching: isFetching
         }, /*#__PURE__*/_react["default"].createElement(WrappedComponent, rest)));
       }
     }]);

package/lib/listing-page/components/card-list.js

@@ -70,11 +70,11 @@ var FlexItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "card-list__FlexItem",
   componentId: "yvf001-4"
 })(["width:", "px;margin:0 auto;display:flex;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;", " ", " ", ""], function (props) {
-  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].hd.maxWidth;
+  return props.$width !== 0 ? "".concat(props.$width, "%") : _mockupSpec["default"].hd.maxWidth;
 }, _mediaQuery["default"].desktopOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), function (props) {
-  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].desktop.maxWidth;
+  return props.$width !== 0 ? "".concat(props.$width, "%") : _mockupSpec["default"].desktop.maxWidth;
 }), _mediaQuery["default"].tabletOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", "px;\n  "])), function (props) {
-  return props.width !== 0 ? "".concat(props.width, "%") : _mockupSpec["default"].tablet.maxWidth;
+  return props.$width !== 0 ? "".concat(props.$width, "%") : _mockupSpec["default"].tablet.maxWidth;
 }), _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    width: 100%;\n    justify-content: center;\n  "]))));
 
 var Content = (0, _isFetchingWrapper["default"])(FlexItem);
@@ -147,7 +147,7 @@ var CardList = function CardList(_ref) {
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Content, {
     isFetching: isFetching,
     showSpinner: showSpinner,
-    width: width
+    $width: width
   }, listJSX));
 };
 

package/lib/listing-page/components/image.js

@@ -71,7 +71,7 @@ var ImgObjectFit = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).
   displayName: "image__ImgObjectFit",
   componentId: "iof1ou-1"
 })(["opacity:", ";transition:opacity 1s ease;> img{width:100%;height:100%;object-fit:cover;}"], function (props) {
-  return props.opacity;
+  return props.$opacity;
 });
 var ImgFallback = /*#__PURE__*/(0, _styledComponents["default"])(ImgContainer).withConfig({
   displayName: "image__ImgFallback",
@@ -84,7 +84,7 @@ var LogoCenteringBlock = /*#__PURE__*/(0, _styledComponents["default"])(ImgConta
   displayName: "image__LogoCenteringBlock",
   componentId: "iof1ou-3"
 })(["position:absolute;justify-content:center;align-items:center;background-color:", ";display:", ";"], _color.colorGrayscale.white, function (props) {
-  return props.display;
+  return props.$display;
 });
 
 var Image = /*#__PURE__*/function (_React$PureComponent) {
@@ -155,7 +155,7 @@ var Image = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var ImgJSX = isObjectFit ? /*#__PURE__*/_react["default"].createElement(ImgObjectFit, {
-        opacity: isImgOnLoad ? 1 : 0
+        $opacity: isImgOnLoad ? 1 : 0
       }, /*#__PURE__*/_react["default"].createElement("img", {
         ref: function ref(node) {
           _this2.imgNode = node;
@@ -168,7 +168,7 @@ var Image = /*#__PURE__*/function (_React$PureComponent) {
         url: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(src)
       });
       return /*#__PURE__*/_react["default"].createElement(ImgContainer, null, /*#__PURE__*/_react["default"].createElement(LogoCenteringBlock, {
-        display: logoDisplay
+        $display: logoDisplay
       }, /*#__PURE__*/_react["default"].createElement(LogoIcon, null)), ImgJSX);
     }
   }]);

package/lib/listing-page/components/list-item.js

@@ -117,9 +117,9 @@ var Tag = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P3).withConf
   displayName: "list-item__Tag",
   componentId: "sc-1dx5lew-9"
 })(["background-color:", ";border:1px solid ", ";border-radius:68px;color:", ";display:inline-block;text-decoration:none;line-height:1.45;font-size:12px;font-weight:", ";padding:2px 10px;margin-right:8px;margin-bottom:10px;"], function (props) {
-  return props.selected ? _color.colorBrand.heavy : _color.colorGrayscale.gray100;
+  return props.$selected ? _color.colorBrand.heavy : _color.colorGrayscale.gray100;
 }, _color.colorBrand.heavy, function (props) {
-  return props.selected ? _color.colorGrayscale.white : _color.colorBrand.heavy;
+  return props.$selected ? _color.colorGrayscale.white : _color.colorBrand.heavy;
 }, _font.fontWeight.bold);
 
 var ListItem = /*#__PURE__*/function (_PureComponent) {
@@ -156,7 +156,7 @@ var ListItem = /*#__PURE__*/function (_PureComponent) {
             key: id,
             to: _entityPath["default"].tag + id
           }, /*#__PURE__*/_react["default"].createElement(Tag, {
-            selected: _.get(tag, 'selected')
+            $selected: _.get(tag, 'selected')
           }, name)));
         }
       });

package/lib/listing-page/components/topics/topic-item.js

@@ -115,11 +115,11 @@ var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topic-item__ItemContainer",
   componentId: "sc-1tffa4f-2"
 })(["margin-bottom:", ";", " ", " width:100%;", ""], function (props) {
-  return !props.isTop ? "".concat(styles.topicBox.mobile.marginBottom, "px") : "".concat(styles.topicBox.mobile.marginBottom - 10, "px");
+  return !props.$isTop ? "".concat(styles.topicBox.mobile.marginBottom, "px") : "".concat(styles.topicBox.mobile.marginBottom - 10, "px");
 }, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-bottom: ", ";\n  "])), function (props) {
-  return !props.isTop ? "".concat(styles.topicBox.tablet.marginBottom, "px") : "".concat(styles.topicBox.tablet.marginBottom - 10, "px");
+  return !props.$isTop ? "".concat(styles.topicBox.tablet.marginBottom, "px") : "".concat(styles.topicBox.tablet.marginBottom - 10, "px");
 }), _mediaQuery["default"].desktopAndAbove(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: ", ";\n  "])), function (props) {
-  return !props.isTop ? "".concat(styles.topicBox.desktop.marginBottom, "px") : "".concat(styles.topicBox.desktop.marginBottom - 10, "px");
+  return !props.$isTop ? "".concat(styles.topicBox.desktop.marginBottom, "px") : "".concat(styles.topicBox.desktop.marginBottom - 10, "px");
 }), _predefinedCss.linkHoverFadeOut);
 
 var ImageBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -135,7 +135,7 @@ var TextBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var TopicTitle = /*#__PURE__*/_styledComponents["default"].h2.withConfig({
   displayName: "topic-item__TopicTitle",
   componentId: "sc-1tffa4f-5"
-})(["margin:0;", " font-size:", "px;font-weight:", ";font-family:", ";letter-spacing:.2px;line-height:1.43;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n  "])), styles.textBlock.mobile.titleMarginBottom), styles.fontSize.title.mobile, _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.desktop));
+})(["margin:0;", " font-size:", "px;font-weight:", ";font-family:", ";letter-spacing:0.2px;line-height:1.43;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-bottom: ", "px;\n  "])), styles.textBlock.mobile.titleMarginBottom), styles.fontSize.title.mobile, _font.fontWeight.bold, _font.fontFamily.title, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.tablet), _mediaQuery["default"].desktopAndAbove(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    font-size: ", "px;\n  "])), styles.fontSize.title.desktop));
 
 var TopicDate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "topic-item__TopicDate",
@@ -181,7 +181,7 @@ var TopicItem = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(StyledLink, {
         to: linkTo
       }, /*#__PURE__*/_react["default"].createElement(ItemContainer, {
-        isTop: isTop
+        $isTop: isTop
       }, /*#__PURE__*/_react["default"].createElement(TopicBox, null, /*#__PURE__*/_react["default"].createElement(ImageBlock, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_image["default"], {
         src: imgUrl,
         alt: imgAlt