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

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.
 
+# [9.0.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@9.0.0-rc.1...@twreporter/react-components@9.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))
+
+
+
+
+
+# [9.0.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@9.0.0-rc.0...@twreporter/react-components@9.0.0-rc.1) (2024-05-10)
+
+
+### Bug Fixes
+
+* fix defects and add comments ([fda83e3](https://github.com/twreporter/twreporter-npm-packages/commit/fda83e3daafab2b61a9323074abc21f5d5be4b11))
+
+
+
+
+
 # [9.0.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.28.0-rc.1...@twreporter/react-components@9.0.0-rc.0) (2024-05-08)
 
 

package/lib/badge/index.js

@@ -27,14 +27,14 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "badge__Container",
   componentId: "sc-1mnvxli-0"
 })(["background:", ";padding:2px 4px;width:fit-content;border-radius:2px;"], function (props) {
-  return props.backgroundColor;
+  return props.$backgroundColor;
 });
 
 var ColorP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).withConfig({
   displayName: "badge__ColorP2",
   componentId: "sc-1mnvxli-1"
 })(["color:", ";"], function (props) {
-  return props.color;
+  return props.$color;
 });
 
 var Badge = function Badge(_ref) {
@@ -47,10 +47,10 @@ var Badge = function Badge(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
-    backgroundColor: backgroundColor
+    $backgroundColor: backgroundColor
   }, props), /*#__PURE__*/_react["default"].createElement(ColorP2, {
     text: text,
-    color: textColor
+    $color: textColor
   }));
 };
 

package/lib/bookmark-list/bookmarks.js

@@ -84,10 +84,13 @@ var BookmarksContainer = /*#__PURE__*/_styledComponents["default"].ul.withConfig
 })(["margin:0;width:100%;padding:0;"]);
 
 function Bookmarks(_ref) {
-  var total = _ref.total,
-      bookmarks = _ref.bookmarks,
+  var _ref$total = _ref.total,
+      total = _ref$total === void 0 ? 0 : _ref$total,
+      _ref$bookmarks = _ref.bookmarks,
+      bookmarks = _ref$bookmarks === void 0 ? [] : _ref$bookmarks,
       handleDelete = _ref.handleDelete,
-      releaseBranch = _ref.releaseBranch;
+      _ref$releaseBranch = _ref.releaseBranch,
+      releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch["default"].master : _ref$releaseBranch;
 
   var buildBookmark = function buildBookmark(bookmark) {
     return /*#__PURE__*/_react["default"].createElement(_bookmark["default"], {
@@ -124,11 +127,6 @@ function Bookmarks(_ref) {
   })), counterJSX, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), contentJSX));
 }
 
-Bookmarks.defaultProps = {
-  bookmarks: [],
-  total: 0,
-  releaseBranch: _releaseBranch["default"].master
-};
 Bookmarks.propTypes = {
   bookmarks: _propTypes["default"].arrayOf(_propTypes2["default"].bookmark).isRequired,
   handleDelete: _propTypes["default"].func.isRequired,

package/lib/bookmark-list/index.js

@@ -94,7 +94,7 @@ var MoreContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "bookmark-list__MoreContainer",
   componentId: "w84xlj-0"
 })(["display:", ";"], function (props) {
-  return props.hasMore ? 'inline' : 'none';
+  return props.$hasMore ? 'inline' : 'none';
 });
 
 var reactTransitionCSS = /*#__PURE__*/(0, _styledComponents.css)([".", "{opacity:0.01;}.", "{opacity:1;transition:opacity ", "ms ease;}.", "{opacity:1;}.", "{opacity:0.01;transition:opacity ", "ms ease;}"], transitionName.enter, transitionName.enterActive, transitionDuration.enter, transitionName.leave, transitionName.leaveActive, transitionDuration.leave);
@@ -209,7 +209,7 @@ var BookmarkList = function BookmarkList(_ref) {
     total: total,
     releaseBranch: releaseBranch
   }), /*#__PURE__*/_react["default"].createElement(MoreContainer, {
-    hasMore: numberToShow < total
+    $hasMore: numberToShow < total
   }, /*#__PURE__*/_react["default"].createElement(_more["default"], {
     loadMore: loadMoreBookmarks
   }, /*#__PURE__*/_react["default"].createElement("span", null, text.loadMore))), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {

package/lib/bookmark-list/stories/bookmark.stories.js

@@ -19,11 +19,10 @@ var _default = {
 exports["default"] = _default;
 var emptyList = {
   render: function render() {
-    return /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], null);
-  },
-  args: {
-    bookmarks: [],
-    total: 0
+    return /*#__PURE__*/_react["default"].createElement(_bookmarks["default"], {
+      bookmarks: [],
+      handleDelete: function handleDelete() {}
+    });
   }
 };
 exports.emptyList = emptyList;

package/lib/button/components/iconButton.js

@@ -37,15 +37,15 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "iconButton__ButtonContainer",
   componentId: "sc-1v7s35n-0"
 })(["cursor:", ";display:flex;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
-  return props.disabled ? 'default' : 'pointer';
+  return props.$disabled ? 'default' : 'pointer';
 }, 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      svg {\n        background-color: ", ";\n      }\n  "])), function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }));
 
 var IconButton = function IconButton(_ref) {
@@ -67,9 +67,9 @@ var IconButton = function IconButton(_ref) {
       hoverColor = _themeFunc.hoverColor;
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
-    color: color,
-    hoverColor: hoverColor,
-    disabled: disabled
+    $color: color,
+    $hoverColor: hoverColor,
+    $disabled: disabled
   }, props), iconComponent);
 };
 

package/lib/button/components/iconWithTextButton.js

@@ -29,24 +29,24 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "iconWithTextButton__ButtonContainer",
   componentId: "sc-1f9d1q4-0"
 })(["cursor:", ";display:flex;flex-direction:column;align-items:center;color:", ";svg{width:24px;height:24px;background-color:", ";}", ""], function (props) {
-  return props.disabled ? 'default' : 'pointer';
+  return props.$disabled ? 'default' : 'pointer';
 }, 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      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }));
 
 var StyledP4 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P4).withConfig({
   displayName: "iconWithTextButton__StyledP4",
   componentId: "sc-1f9d1q4-1"
 })(["margin-top:2px;max-height:", ";opacity:", ";transition:opacity 100ms;"], function (props) {
-  return props.hideText ? '0px' : 'none';
+  return props.$hideText ? '0px' : 'none';
 }, function (props) {
-  return props.hideText ? '0' : '1';
+  return props.$hideText ? '0' : '1';
 });
 
 var IconWithTextButton = function IconWithTextButton(_ref) {
@@ -67,13 +67,13 @@ var IconWithTextButton = function IconWithTextButton(_ref) {
       hoverColor = _getIconWithTextButto.hoverColor;
 
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-    color: color,
-    hoverColor: hoverColor,
-    disabled: disabled
+    $color: color,
+    $hoverColor: hoverColor,
+    $disabled: disabled
   }, iconComponent, /*#__PURE__*/_react["default"].createElement(StyledP4, {
     text: text,
     weight: _paragraph.P4.Weight.NORMAL,
-    hideText: hideText
+    $hideText: hideText
   }));
 };
 

package/lib/button/components/link.js

@@ -42,15 +42,15 @@ var BaseContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLi
   displayName: "link__BaseContainer",
   componentId: "g5z7t5-0"
 })(["text-underline-offset:4px;text-decoration-line:", "!important;color:", ";&:hover{text-decoration-line:underline;}"], function (props) {
-  return style.decoration[props.type];
+  return style.decoration[props.$type];
 }, function (props) {
-  return style.color[props.type];
+  return style.color[props.$type];
 });
 var LinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
   displayName: "link__LinkContainer",
   componentId: "g5z7t5-1"
 })(["display:flex;align-items:center;", ""], function (props) {
-  return props.disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n  ";
+  return props.$disabled ? "\n    opacity: 0.5;\n    cursor: auto;\n    -webkit-tap-highlight-color: transparent;\n  " : "\n  ";
 });
 var InheritLinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(BaseContainer).withConfig({
   displayName: "link__InheritLinkContainer",
@@ -80,8 +80,8 @@ var LinkButton = function LinkButton(_ref) {
     weight: weight
   });
   return /*#__PURE__*/_react["default"].createElement(LinkContainer, _extends({
-    type: type,
-    disabled: disabled
+    $type: type,
+    $disabled: disabled
   }, link, props), textJSX);
 };
 

package/lib/button/components/menuButton.js

@@ -42,17 +42,17 @@ var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "menuButton__ItemContainer",
   componentId: "sc-1g6dn3b-1"
 })(["", "{padding-top:8px;padding-bottom:8px;padding-left:", "px;padding-right:", "px;}cursor:pointer;color:", ";a,a:visited,a:link{text-decoration:none;color:", ";}", " &:active{background-color:", ";}"], StyledP1, function (props) {
-  return props.paddingLeft;
+  return props.$paddingLeft;
 }, function (props) {
-  return props.paddingRight;
+  return props.$paddingRight;
 }, 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 MenuButton = function MenuButton(_ref) {
@@ -75,11 +75,11 @@ var MenuButton = function MenuButton(_ref) {
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/_react["default"].createElement(ItemContainer, _extends({
-    color: color,
-    hoverBgColor: hoverBgColor,
-    activeBgColor: activeBgColor,
-    paddingLeft: paddingLeft,
-    paddingRight: paddingRight
+    $color: color,
+    $hoverBgColor: hoverBgColor,
+    $activeBgColor: activeBgColor,
+    $paddingLeft: paddingLeft,
+    $paddingRight: paddingRight
   }, props), /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(StyledP1, {
     text: text,
     weight: fontWeight

package/lib/button/components/pillButton.js

@@ -45,29 +45,29 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__ButtonContainer",
   componentId: "xa7tsy-0"
 })(["width:fit-content;display:flex;align-items:center;border-radius:40px;background-color:", ";border-color:", ";border-style:solid;border-width:1.5px;color:", ";padding:", ";cursor:", ";svg{height:", ";width:", ";background-color:", ";}&:hover{color:", ";background-color:", ";border-color:", ";svg{background-color:", ";}}"], function (props) {
-  return props.type === _enums.Type.PRIMARY ? props.bgColor : 'transparent';
+  return props.$type === _enums.Type.PRIMARY ? props.$bgColor : 'transparent';
 }, function (props) {
-  return props.bgColor;
+  return props.$bgColor;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.padding;
+  return props.$padding;
 }, function (props) {
-  return props.disabled ? 'default' : 'pointer';
+  return props.$disabled ? 'default' : 'pointer';
 }, function (props) {
-  return props.iconSize;
+  return props.$iconSize;
 }, function (props) {
-  return props.iconSize;
+  return props.$iconSize;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }, function (props) {
-  return props.type === _enums.Type.PRIMARY ? props.hoverBgColor : 'transparent';
+  return props.$type === _enums.Type.PRIMARY ? props.$hoverBgColor : 'transparent';
 }, function (props) {
-  return props.hoverBgColor;
+  return props.$hoverBgColor;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 });
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -79,7 +79,7 @@ var HideOnLoading = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "pillButton__HideOnLoading",
   componentId: "xa7tsy-2"
 })(["opacity:", ";display:flex;align-items:center;justify-content:center;"], function (props) {
-  return props.show ? 1 : 0;
+  return props.$show ? 1 : 0;
 });
 
 var RelativeParent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -93,11 +93,11 @@ var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "pillButton__Loader",
   componentId: "xa7tsy-4"
 })(["position:absolute;opacity:", ";width:", "px;height:", "px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], function (props) {
-  return props.show ? 1 : 0;
+  return props.$show ? 1 : 0;
 }, function (props) {
-  return props.size;
+  return props.$size;
 }, function (props) {
-  return props.size;
+  return props.$size;
 }, _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
 
 var PillButton = function PillButton(_ref) {
@@ -143,19 +143,19 @@ var PillButton = function PillButton(_ref) {
   var leftIconJSX = leftIconComponent ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, leftIconComponent) : null;
   var rightIconJSX = rightIconComponent ? /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent) : null;
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
-    type: type,
-    padding: padding,
-    color: color,
-    bgColor: bgColor,
-    iconSize: iconSize,
-    hoverColor: hoverColor,
-    hoverBgColor: hoverBgColor,
-    disabled: disabled
+    $type: type,
+    $padding: padding,
+    $color: color,
+    $bgColor: bgColor,
+    $iconSize: iconSize,
+    $hoverColor: hoverColor,
+    $hoverBgColor: hoverBgColor,
+    $disabled: disabled
   }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
-    show: !loading
+    $show: !loading
   }, leftIconJSX, textJSX, rightIconJSX), /*#__PURE__*/_react["default"].createElement(Loader, {
-    show: loading,
-    size: size === _sharedEnum.Size.S ? 18 : 24
+    $show: loading,
+    $size: size === _sharedEnum.Size.S ? 18 : 24
   })));
 };
 

package/lib/button/components/textButton.js

@@ -51,33 +51,33 @@ var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "textButton__ButtonContainer",
   componentId: "sc-1lwyrq5-0"
 })(["cursor:", ";display:flex;align-items:center;color:", ";svg{height:", ";width:", ";background-color:", ";}", ""], function (props) {
-  return props.disabled ? 'default' : 'pointer';
+  return props.$disabled ? 'default' : 'pointer';
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, function (props) {
-  return props.iconSize;
+  return props.$iconSize;
 }, function (props) {
-  return props.iconSize;
+  return props.$iconSize;
 }, function (props) {
-  return props.color;
+  return props.$color;
 }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }, function (props) {
-  return props.hoverColor;
+  return props.$hoverColor;
 }));
 
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "textButton__IconContainer",
   componentId: "sc-1lwyrq5-1"
 })(["display:flex;align-items:center;margin:", ";"], function (props) {
-  return props.isLeft ? '0 4px 0 0' : '0 0 0 4px';
+  return props.$isLeft ? '0 4px 0 0' : '0 0 0 4px';
 });
 
 var HideOnLoading = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "textButton__HideOnLoading",
   componentId: "sc-1lwyrq5-2"
 })(["opacity:", ";display:flex;align-items:center;justify-content:center;"], function (props) {
-  return props.show ? 1 : 0;
+  return props.$show ? 1 : 0;
 });
 
 var RelativeParent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -91,11 +91,11 @@ var Loader = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   displayName: "textButton__Loader",
   componentId: "sc-1lwyrq5-4"
 })(["position:absolute;opacity:", ";width:", "px;height:", "px;border:2px solid ", ";border-top-color:", ";border-radius:50%;display:inline-block;box-sizing:border-box;animation:", " 1s linear infinite;"], function (props) {
-  return props.show ? 1 : 0;
+  return props.$show ? 1 : 0;
 }, function (props) {
-  return props.size;
+  return props.$size;
 }, function (props) {
-  return props.size;
+  return props.$size;
 }, _color.colorGrayscale.gray400, _color.colorGrayscale.gray600, spin);
 
 var TextButton = function TextButton(_ref) {
@@ -144,17 +144,17 @@ var TextButton = function TextButton(_ref) {
     weight: "bold"
   });
   return /*#__PURE__*/_react["default"].createElement(ButtonContainer, _extends({
-    color: color,
-    hoverColor: hoverColor,
-    iconSize: iconSize,
-    disabled: disabled
+    $color: color,
+    $hoverColor: hoverColor,
+    $iconSize: iconSize,
+    $disabled: disabled
   }, props), /*#__PURE__*/_react["default"].createElement(RelativeParent, null, /*#__PURE__*/_react["default"].createElement(HideOnLoading, {
-    show: !loading
+    $show: !loading
   }, /*#__PURE__*/_react["default"].createElement(IconContainer, {
-    isLeft: true
+    $isLeft: true
   }, leftIconComponent), textJSX, /*#__PURE__*/_react["default"].createElement(IconContainer, null, rightIconComponent)), /*#__PURE__*/_react["default"].createElement(Loader, {
-    show: loading,
-    size: size === _sharedEnum.Size.S ? 18 : 24
+    $show: loading,
+    $size: size === _sharedEnum.Size.S ? 18 : 24
   })));
 };
 

package/lib/button/components/toggleButton.js

@@ -39,14 +39,14 @@ var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
   displayName: "toggleButton__Label",
   componentId: "sc-183g3tk-2"
 })(["display:flex;align-items:center;gap:10px;cursor:", ";"], function (props) {
-  return props.disabled ? 'default' : 'pointer';
+  return props.$disabled ? 'default' : 'pointer';
 });
 
 var Switch = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "toggleButton__Switch",
   componentId: "sc-183g3tk-3"
 })(["position:relative;width:40px;height:20px;background:", ";border-radius:20px;padding:0px;transition:100ms ease-in-out;&:before{transition:100ms ease-in-out;content:'';position:absolute;width:16px;height:16px;border-radius:20px;top:50%;left:2px;background:white;transform:translate(0,-50%);}"], function (props) {
-  return props.disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray600;
+  return props.$disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray600;
 });
 
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
@@ -76,14 +76,14 @@ var ToggleButton = function ToggleButton(_ref) {
   return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ColorP2, {
     text: value ? labelOn : labelOff
   }), /*#__PURE__*/_react["default"].createElement(Label, _extends({
-    disabled: disabled
+    $disabled: disabled
   }, props), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     disabled: disabled,
     checked: value,
     onChange: handleChange
   }), /*#__PURE__*/_react["default"].createElement(Switch, {
-    disabled: disabled
+    $disabled: disabled
   })));
 };
 

package/lib/button/stories/iconButton.stories.js

@@ -31,7 +31,7 @@ exports["default"] = _default;
 var iconButton = {
   args: {
     iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "down"
+      direction: _icon.Arrow.Direction.DOWN
     }),
     theme: _iconButton["default"].THEME.normal,
     type: _iconButton["default"].Type.PRIMARY,

package/lib/button/stories/iconWithTextButton.stories.js

@@ -27,7 +27,7 @@ var iconWithTextButton = {
   args: {
     text: '文字',
     iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "down"
+      direction: _icon.Arrow.Direction.DOWN
     }),
     theme: _iconWithTextButton["default"].THEME.normal,
     disabled: false,

package/lib/button/stories/textButton.stories.js

@@ -53,10 +53,10 @@ var textButton = {
     disabled: false,
     loading: false,
     leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "left"
+      direction: _icon.Arrow.Direction.LEFT
     }),
     rightIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "right"
+      direction: _icon.Arrow.Direction.RIGHT
     })
   },
   parameters: {
@@ -69,10 +69,10 @@ exports.textButton = textButton;
 var toggleIconDisplay = {
   render: function render(args) {
     args.leftIconComponent = args.showLeft ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "left"
+      direction: _icon.Arrow.Direction.LEFT
     }) : null;
     args.rightIconComponent = args.showRight ? /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
-      direction: "right"
+      direction: _icon.Arrow.Direction.RIGHT
     }) : null;
     return /*#__PURE__*/_react["default"].createElement(_textButton["default"], args);
   },

package/lib/card/components/article-card.js

@@ -73,9 +73,9 @@ var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig(
   displayName: "article-card__Meta",
   componentId: "sc-9196c7-4"
 })(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > p{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
-  return metaStyle.marginBottom[props.size];
+  return metaStyle.marginBottom[props.$size];
 }, function (props) {
-  return props.hide ? "display: none;" : '';
+  return props.$hide ? "display: none;" : '';
 });
 
 var DescContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -87,17 +87,17 @@ var BookmarkContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup
   displayName: "article-card__BookmarkContainer",
   componentId: "sc-9196c7-6"
 })(["align-self:flex-end;margin-top:", ";"], function (props) {
-  return bookmarkStyle.marginTop[props.size];
+  return bookmarkStyle.marginTop[props.$size];
 });
 var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "article-card__ImageContainer",
   componentId: "sc-9196c7-7"
 })(["flex:0 0 auto;align-self:center;width:", ";height:", ";margin-left:", ";"], function (props) {
-  return imageStyle.width[props.size];
+  return imageStyle.width[props.$size];
 }, function (props) {
-  return imageStyle.height[props.size];
+  return imageStyle.height[props.$size];
 }, function (props) {
-  return imageStyle.marginLeft[props.size];
+  return imageStyle.marginLeft[props.$size];
 });
 var LeftColumn = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroupColumn).withConfig({
   displayName: "article-card__LeftColumn",
@@ -178,17 +178,17 @@ var ArticleCard = function ArticleCard(_ref) {
 
   var bookmarkJSX = showIsBookmarked ? /*#__PURE__*/_react["default"].createElement(BookmarkContainer, {
     onClick: onBookmarkClick,
-    size: size
+    $size: size
   }, bookmarkButton) : null;
 
   var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
-    hide: hideMeta,
-    size: size,
+    $hide: hideMeta,
+    $size: size,
     className: "hover"
   }, categoryJSX, dateJSX);
 
   var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
-    size: size,
+    $size: size,
     className: "hover"
   }, /*#__PURE__*/_react["default"].createElement(_imageWithFallback["default"], {
     src: image.src,
@@ -210,7 +210,7 @@ ArticleCard.propTypes = {
   date: _propTypes["default"].string,
   image: _propTypes["default"].shape({
     alt: _propTypes["default"].string,
-    src: _propTypes["default"].string.isRequired,
+    src: _propTypes["default"].string,
     srcSet: _propTypes["default"].string
   }),
   category: _propTypes["default"].string,

package/lib/card/components/short-story.js

@@ -66,19 +66,19 @@ var Meta = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig(
   displayName: "short-story__Meta",
   componentId: "sc-119yx1u-4"
 })(["color:", ";flex-direction:row;align-items:center;margin-bottom:", ";& > p{margin-right:8px;}&:last-child{margin-right:0;}", ""], _color.colorGrayscale.gray600, function (props) {
-  return metaStyle.marginBottom[props.size];
+  return metaStyle.marginBottom[props.$size];
 }, function (props) {
-  return props.hide ? "display: none;" : '';
+  return props.$hide ? "display: none;" : '';
 });
 var ImageContainer = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroup).withConfig({
   displayName: "short-story__ImageContainer",
   componentId: "sc-119yx1u-5"
 })(["flex:0 0 auto;align-self:center;width:", ";height:", ";margin-left:", ";"], function (props) {
-  return imageStyle.width[props.size];
+  return imageStyle.width[props.$size];
 }, function (props) {
-  return imageStyle.height[props.size];
+  return imageStyle.height[props.$size];
 }, function (props) {
-  return imageStyle.marginLeft[props.size];
+  return imageStyle.marginLeft[props.$size];
 });
 var LeftColumn = /*#__PURE__*/(0, _styledComponents["default"])(FlexGroupColumn).withConfig({
   displayName: "short-story__LeftColumn",
@@ -124,12 +124,12 @@ var ShortStory = function ShortStory(_ref) {
   };
 
   var metaJSX = /*#__PURE__*/_react["default"].createElement(Meta, {
-    hide: hideMeta,
-    size: size
+    $hide: hideMeta,
+    $size: size
   }, categoryJSX, dateJSX);
 
   var imageJSX = /*#__PURE__*/_react["default"].createElement(ImageContainer, {
-    size: size
+    $size: size
   }, /*#__PURE__*/_react["default"].createElement(_imageWithFallback["default"], {
     src: image.src,
     alt: image.alt,