@twreporter/react-components 8.18.0-rc.2 → 8.18.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.18.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.3...@twreporter/react-components@8.18.0-rc.4) (2023-06-13)
+
+
+### Bug Fixes
+
+* add `style` props for TextButton & deprecate TEXT_BUTTON_THEME ([0d697b8](https://github.com/twreporter/twreporter-npm-packages/commit/0d697b804cb4c0d5b0b505614008a939e7bd0212))
+* address review comments ([f346356](https://github.com/twreporter/twreporter-npm-packages/commit/f34635625eb9d638bc0ca03768ecc14c9b5944d2))
+* deprecate TEXT_BUTTON_THEME_PROP_TYPES ([9a661de](https://github.com/twreporter/twreporter-npm-packages/commit/9a661de3ce68953c083e8677e39c0b87887e1749))
+* migrate TextButton usage in other place ([1f812f3](https://github.com/twreporter/twreporter-npm-packages/commit/1f812f36d77ff9c32800ff41ca73298537c5dce1))
+
+
+### Features
+
+* add TextField component ([40eb6b1](https://github.com/twreporter/twreporter-npm-packages/commit/40eb6b1358e45c89b5d531599db5b1361e1fbad5))
+
+
+
+
+
+# [8.18.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.2...@twreporter/react-components@8.18.0-rc.3) (2023-06-12)
+
+
+### Features
+
+* use P3 for mobile and P2 for rest ([e4ecb29](https://github.com/twreporter/twreporter-npm-packages/commit/e4ecb29f3c8fac1f2a75c8b3be70b84bcbbb275a))
+
+
+
+
+
 # [8.18.0-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.18.0-rc.1...@twreporter/react-components@8.18.0-rc.2) (2023-05-29)
 
 

package/lib/button/components/textButton.js

@@ -25,7 +25,7 @@ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/med
 
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
-var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "active", "disabled"];
+var _excluded = ["text", "leftIconComponent", "rightIconComponent", "size", "theme", "type", "style", "active", "disabled"];
 
 var _templateObject;
 
@@ -73,9 +73,11 @@ var TextButton = function TextButton(_ref) {
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _sharedEnum.Size.S : _ref$size,
       _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? _theme2.TEXT_BUTTON_THEME.normal : _ref$theme,
+      theme = _ref$theme === void 0 ? _theme2.THEME.normal : _ref$theme,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? _enums.Type.PRIMARY : _ref$type,
+      _ref$style = _ref.style,
+      style = _ref$style === void 0 ? _enums.Style.DARK : _ref$style,
       _ref$active = _ref.active,
       active = _ref$active === void 0 ? false : _ref$active,
       _ref$disabled = _ref.disabled,
@@ -92,7 +94,7 @@ var TextButton = function TextButton(_ref) {
     themeFunc = type === _enums.Type.PRIMARY ? _theme.getPrimaryTextButtonTheme : _theme.getSecondaryTextButtonTheme;
   }
 
-  var _themeFunc = themeFunc(theme, active),
+  var _themeFunc = themeFunc(theme, style),
       color = _themeFunc.color,
       hoverColor = _themeFunc.hoverColor;
 
@@ -120,13 +122,15 @@ TextButton.propTypes = {
   rightIconComponent: _propTypes["default"].element,
   text: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(Object.values(_sharedEnum.Size)),
-  theme: _propTypes["default"].oneOf(Object.values(_theme2.TEXT_BUTTON_THEME)),
+  theme: _propTypes["default"].oneOf(Object.values(_theme2.THEME)),
   type: _propTypes["default"].oneOf(Object.values(_enums.Type)),
+  style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
   active: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool
 };
-TextButton.THEME = _theme2.TEXT_BUTTON_THEME;
+TextButton.THEME = _theme2.THEME;
 TextButton.Size = _sharedEnum.Size;
 TextButton.Type = _enums.Type;
+TextButton.Style = _enums.Style;
 var _default = TextButton;
 exports["default"] = _default;

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

@@ -25,6 +25,7 @@ var _default = {
   argTypes: {
     theme: _constants.THEME_STORYBOOK_ARG_TYPE,
     type: (0, _getEnumArg.getRadioArg)(_enums.Type, _enums.Type.PRIMARY),
+    style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DARK),
     size: _constants.SIZE_STORYBOOK_ARG_TYPE,
     // showLeft & showRight args are only for storybook check
     showLeft: {
@@ -54,6 +55,7 @@ textButton.args = {
   size: _textButton["default"].Size.S,
   theme: _textButton["default"].THEME.normal,
   type: _textButton["default"].Type.PRIMARY,
+  style: _textButton["default"].Style.DARK,
   active: false,
   disabled: false,
   leftIconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
@@ -87,6 +89,7 @@ toggleIconDisplay.args = {
   size: _textButton["default"].Size.S,
   theme: _textButton["default"].THEME.normal,
   type: _textButton["default"].Type.PRIMARY,
+  style: _textButton["default"].Style.DARK,
   active: false,
   disabled: false
 };

package/lib/button/utils/theme.js

@@ -322,87 +322,85 @@ var getIconWithTextButtonTheme = function getIconWithTextButtonTheme(theme, isAc
 
 exports.getIconWithTextButtonTheme = getIconWithTextButtonTheme;
 
-var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme) {
+var getPrimaryTextButtonTheme = function getPrimaryTextButtonTheme(theme, style) {
   switch (theme) {
-    case _theme.TEXT_BUTTON_THEME.photography:
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _theme.TEXT_BUTTON_THEME.transparent:
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _theme.TEXT_BUTTON_THEME.brand:
-      return {
-        color: _color.colorBrand.heavy,
-        hoverColor: _color.colorBrand.dark
-      };
+    case _theme.THEME.normal:
+    default:
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorBrand.heavy
+          };
 
-    case _theme.TEXT_BUTTON_THEME.dark:
-      return {
-        color: _color.colorGrayscale.gray800,
-        hoverColor: _color.colorBrand.heavy
-      };
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray600,
+            hoverColor: _color.colorGrayscale.gray800
+          };
 
-    case _theme.TEXT_BUTTON_THEME.light:
-      return {
-        color: _color.colorGrayscale.gray600,
-        hoverColor: _color.colorGrayscale.gray800
-      };
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorBrand.heavy,
+            hoverColor: _color.colorBrand.dark
+          };
+      }
 
-    case _theme.TEXT_BUTTON_THEME.normal:
-    default:
-      return {
-        color: _color.colorGrayscale.gray800,
-        hoverColor: _color.colorBrand.heavy
-      };
   }
 };
 
 exports.getPrimaryTextButtonTheme = getPrimaryTextButtonTheme;
 
-var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme) {
+var getSecondaryTextButtonTheme = function getSecondaryTextButtonTheme(theme, style) {
   switch (theme) {
-    case _theme.TEXT_BUTTON_THEME.photography:
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray400,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _theme.TEXT_BUTTON_THEME.transparent:
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray800
       };
 
-    case _theme.TEXT_BUTTON_THEME.brand:
-      return {
-        color: _color.colorBrand.heavy,
-        hoverColor: _color.colorBrand.dark
-      };
+    case _theme.THEME.normal:
+    default:
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorBrand.heavy
+          };
 
-    case _theme.TEXT_BUTTON_THEME.dark:
-      return {
-        color: _color.colorGrayscale.gray800,
-        hoverColor: _color.colorBrand.heavy
-      };
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray600,
+            hoverColor: _color.colorGrayscale.gray800
+          };
 
-    case _theme.TEXT_BUTTON_THEME.light:
-      return {
-        color: _color.colorGrayscale.gray600,
-        hoverColor: _color.colorGrayscale.gray800
-      };
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorBrand.heavy,
+            hoverColor: _color.colorBrand.dark
+          };
+      }
 
-    case _theme.TEXT_BUTTON_THEME.normal:
-    default:
-      return {
-        color: _color.colorGrayscale.gray600,
-        hoverColor: _color.colorBrand.heavy
-      };
   }
 };
 
@@ -410,22 +408,19 @@ exports.getSecondaryTextButtonTheme = getSecondaryTextButtonTheme;
 
 var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
   switch (theme) {
-    case _theme.TEXT_BUTTON_THEME.photography:
+    case _theme.THEME.photography:
       return {
         color: _color.colorGrayscale.gray600,
         hoverColor: _color.colorGrayscale.gray600
       };
 
-    case _theme.TEXT_BUTTON_THEME.transparent:
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.gray200,
         hoverColor: _color.colorGrayscale.gray200
       };
 
-    case _theme.TEXT_BUTTON_THEME.brand:
-    case _theme.TEXT_BUTTON_THEME.dark:
-    case _theme.TEXT_BUTTON_THEME.light:
-    case _theme.TEXT_BUTTON_THEME.normal:
+    case _theme.THEME.normal:
     default:
       return {
         color: _color.colorGrayscale.gray400,
@@ -436,44 +431,43 @@ var getDisabledTextButtonTheme = function getDisabledTextButtonTheme(theme) {
 
 exports.getDisabledTextButtonTheme = getDisabledTextButtonTheme;
 
-var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme) {
+var getActiveTextButtonTheme = function getActiveTextButtonTheme(theme, style) {
   switch (theme) {
-    case _theme.TEXT_BUTTON_THEME.photography:
+    case _theme.THEME.photography:
       return {
         color: _color.colorSupportive.main,
         hoverColor: _color.colorSupportive.main
       };
 
-    case _theme.TEXT_BUTTON_THEME.transparent:
+    case _theme.THEME.transparent:
       return {
         color: _color.colorGrayscale.white,
         hoverColor: _color.colorGrayscale.white
       };
 
-    case _theme.TEXT_BUTTON_THEME.brand:
-      return {
-        color: _color.colorBrand.dark,
-        hoverColor: _color.colorBrand.dark
-      };
+    case _theme.THEME.normal:
+    default:
+      switch (style) {
+        case _enums.Style.DARK:
+          return {
+            color: _color.colorBrand.heavy,
+            hoverColor: _color.colorBrand.heavy
+          };
 
-    case _theme.TEXT_BUTTON_THEME.dark:
-      return {
-        color: _color.colorBrand.heavy,
-        hoverColor: _color.colorBrand.heavy
-      };
+        case _enums.Style.LIGHT:
+          return {
+            color: _color.colorGrayscale.gray800,
+            hoverColor: _color.colorGrayscale.gray800
+          };
 
-    case _theme.TEXT_BUTTON_THEME.light:
-      return {
-        color: _color.colorGrayscale.gray800,
-        hoverColor: _color.colorGrayscale.gray800
-      };
+        case _enums.Style.BRAND:
+        default:
+          return {
+            color: _color.colorBrand.dark,
+            hoverColor: _color.colorBrand.dark
+          };
+      }
 
-    case _theme.TEXT_BUTTON_THEME.normal:
-    default:
-      return {
-        color: _color.colorBrand.heavy,
-        hoverColor: _color.colorBrand.heavy
-      };
   }
 };
 

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

@@ -139,7 +139,8 @@ var ArticleCard = function ArticleCard(_ref) {
   });
 
   var bookmarkButton = size === _sharedEnum.Size.S ? /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
-    theme: _button.TextButton.THEME.light,
+    theme: _button.TextButton.THEME.normal,
+    style: _button.TextButton.Style.LIGHT,
     leftIconComponent: bookmarkIcon,
     text: "\u53D6\u6D88\u6536\u85CF"
   }) : /*#__PURE__*/_react["default"].createElement(_button.IconButton, {

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

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _enums = require("../enums");
+
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _paragraph = require("../../text/paragraph");
+
+var _excluded = ["placeholder", "align", "state", "message", "onSubmit", "onChange"];
+
+var _textColor, _messageColor;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var textColor = (_textColor = {}, _defineProperty(_textColor, _enums.TextState.DEFAULT, _color.colorGrayscale.gray800), _defineProperty(_textColor, _enums.TextState.ERROR, _color.colorGrayscale.gray800), _defineProperty(_textColor, _enums.TextState.DISABLED, _color.colorGrayscale.gray500), _textColor);
+var messageColor = (_messageColor = {}, _defineProperty(_messageColor, _enums.TextState.DEFAULT, _color.colorGrayscale.gray800), _defineProperty(_messageColor, _enums.TextState.ERROR, _color.COLOR_SEMANTIC.danger), _defineProperty(_messageColor, _enums.TextState.DISABLED, _color.colorGrayscale.gray500), _messageColor);
+var borderColor = messageColor;
+
+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;color:", ";border-color:", ";&:focus,&:focus-visible{outline-width:0;}&::placeholder{color:", ";}"], function (props) {
+  return textColor[props.state];
+}, function (props) {
+  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:8px 0 0 4px;"], function (props) {
+  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;
+}, function (props) {
+  return props.align;
+});
+
+var defaultFunc = function defaultFunc() {};
+
+var TextField = function TextField(_ref) {
+  var _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? _enums.TextAlign.LEFT : _ref$align,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? _enums.TextState.DEFAULT : _ref$state,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? '' : _ref$message,
+      _ref$onSubmit = _ref.onSubmit,
+      onSubmit = _ref$onSubmit === void 0 ? defaultFunc : _ref$onSubmit,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? defaultFunc : _ref$onChange,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var handleSubmit = function handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    onSubmit(e.target.input.value);
+  };
+
+  var handleChange = function handleChange(e) {
+    onChange(e.target.value);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(Container, _extends({
+    onSubmit: handleSubmit,
+    align: align
+  }, props), /*#__PURE__*/_react["default"].createElement(Input, {
+    name: "input",
+    type: "text",
+    placeholder: placeholder,
+    state: state,
+    disabled: state === _enums.TextState.DISABLED,
+    onChange: handleChange
+  }), message && /*#__PURE__*/_react["default"].createElement(Message, {
+    text: message,
+    state: state
+  }));
+};
+
+TextField.propTypes = {
+  placeholder: _propTypes["default"].string,
+  align: _propTypes["default"].oneOf(Object.values(_enums.TextAlign)),
+  state: _propTypes["default"].oneOf(Object.values(_enums.TextState)),
+  message: _propTypes["default"].string,
+  onSubmit: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
+};
+TextField.Align = _enums.TextAlign;
+TextField.State = _enums.TextState;
+var _default = TextField;
+exports["default"] = _default;

package/lib/input/enums/index.js

@@ -3,9 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WidthType = void 0;
+exports.TextState = exports.TextAlign = exports.WidthType = void 0;
+// enums for search-bar
 var WidthType = Object.freeze({
   FIT: 'fit',
   STRETCH: 'stretch'
+}); // enums for text-field
+
+exports.WidthType = WidthType;
+var TextAlign = Object.freeze({
+  LEFT: 'left',
+  CENTER: 'center'
+});
+exports.TextAlign = TextAlign;
+var TextState = Object.freeze({
+  DEFAULT: 'default',
+  ERROR: 'error',
+  DISABLED: 'disabled'
 });
-exports.WidthType = WidthType;
+exports.TextState = TextState;

package/lib/input/index.js

@@ -9,13 +9,22 @@ Object.defineProperty(exports, "SearchBar", {
     return _searchBar["default"];
   }
 });
+Object.defineProperty(exports, "TextField", {
+  enumerable: true,
+  get: function get() {
+    return _textField["default"];
+  }
+});
 exports["default"] = void 0;
 
 var _searchBar = _interopRequireDefault(require("./components/search-bar"));
 
+var _textField = _interopRequireDefault(require("./components/text-field"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
-  SearchBar: _searchBar["default"]
+  SearchBar: _searchBar["default"],
+  TextField: _textField["default"]
 };
 exports["default"] = _default;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textField = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _getEnumArg = require("../../storybook/utils/get-enum-arg");
+
+var _textField = _interopRequireDefault(require("../components/text-field"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var _default = {
+  title: 'Input/Text Field',
+  component: _textField["default"],
+  argTypes: {
+    align: (0, _getEnumArg.getRadioArg)(_textField["default"].Align, _textField["default"].Align.LEFT),
+    state: (0, _getEnumArg.getRadioArg)(_textField["default"].State, _textField["default"].State.DEFAULT)
+  }
+};
+exports["default"] = _default;
+var Form = /*#__PURE__*/(0, _styledComponents["default"])(_textField["default"]).withConfig({
+  displayName: "text-fieldstories__Form",
+  componentId: "sc-1rwuni4-0"
+})(["width:200px;"]);
+
+var textField = function textField(args) {
+  return /*#__PURE__*/_react["default"].createElement(Form, args);
+};
+
+exports.textField = textField;
+
+var onSubmit = function onSubmit(value) {
+  console.log('submit', value);
+};
+
+var onChange = function onChange(value) {
+  console.log('change', value);
+};
+
+textField.args = {
+  onSubmit: onSubmit,
+  onChange: onChange,
+  placeholder: 'test',
+  align: _textField["default"].Align.LEFT,
+  state: _textField["default"].State.DEFAULT,
+  message: '系統文字'
+};

package/lib/snack-bar/components/snack-bar.js

@@ -15,6 +15,8 @@ var _theme = require("../utils/theme");
 
 var _paragraph = require("../../text/paragraph");
 
+var _rwd = require("../../rwd");
+
 var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -44,9 +46,11 @@ var SnackBar = function SnackBar(_ref) {
   return /*#__PURE__*/_react["default"].createElement(SnackBarContainer, {
     color: color,
     bgColor: bgColor
-  }, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+  }, /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P3, {
+    text: text
+  })), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
     text: text
-  }));
+  })));
 };
 
 SnackBar.propTypes = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.18.0-rc.2",
+  "version": "8.18.0-rc.4",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -15,8 +15,8 @@
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "dependencies": {
-    "@twreporter/core": "^1.10.0-rc.1",
-    "@twreporter/redux": "^7.5.2-rc.1",
+    "@twreporter/core": "^1.10.0-rc.3",
+    "@twreporter/redux": "^7.6.0-rc.1",
     "fontfaceobserver-es": "^3.3.3",
     "hoist-non-react-statics": "^2.3.1",
     "lodash": "^4.0.0",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "4aee97e500d4cd1fa149bb0b151be5d114b491a8"
+  "gitHead": "a4737bc4c6aa045b90d1e879a950c156a4f6cbd1"
 }

package/lib/button/constants/index.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TEXT_BUTTON_THEME_PROP_TYPES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _theme = require("@twreporter/core/lib/constants/theme");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var TEXT_BUTTON_THEME_PROP_TYPES = _propTypes["default"].oneOf(Object.values(_theme.TEXT_BUTTON_THEME));
-
-exports.TEXT_BUTTON_THEME_PROP_TYPES = TEXT_BUTTON_THEME_PROP_TYPES;