bright-components 9.32.0 → 10.1.0

package/dist/components/Switch/index.js

@@ -19,96 +19,69 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _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 _templateObject5() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: none;\n\n\t&:checked + ", " {\n\t\tbackground: ", ";\n\t}\n\n\t&:checked + ", " > ", " {\n\t\tbackground: white;\n\t\ttransform: translateX(24px);\n\t}\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tvertical-align: middle;\n\tmargin-right: ", ";\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tborder-radius: 100px;\n\twidth: 56px;\n\theight: 32px;\n\tdisplay: inline-block;\n\tpadding: 0;\n\tvertical-align: middle;\n\tbox-shadow: ", ";\n\tcursor: ", ";\n\tbackground: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+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; }
 
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: block;\n\theight: 32px;\n\twidth: 32px;\n\tborder-radius: 100%;\n\tbackground: white;\n\ttransition: transform 0.2s ease;\n\tbox-shadow: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Marker = _styledComponents.default.span(_templateObject(), _vars.default.boxShadow);
+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; }
 
+const Marker = _styledComponents.default.span`
+	display: block;
+	height: 32px;
+	width: 32px;
+	border-radius: 100%;
+	background: white;
+	transition: transform 0.2s ease;
+	box-shadow: ${_vars.default.boxShadow};
+`;
 Marker.displayName = 'Marker';
-
-var Track = _styledComponents.default.span(_templateObject2(), _vars.default.insetboxShadow, function (props) {
-  return props._disabled ? 'not-allowed' : 'pointer';
-}, function (props) {
-  return props._disabled ? _colors.default.disabledBackground : 'white';
-});
-
+const Track = _styledComponents.default.span`
+	border-radius: 100px;
+	width: 56px;
+	height: 32px;
+	display: inline-block;
+	padding: 0;
+	vertical-align: middle;
+	box-shadow: ${_vars.default.insetboxShadow};
+	cursor: ${props => props._disabled ? 'not-allowed' : 'pointer'};
+	background: ${props => props._disabled ? _colors.default.disabledBackground : 'white'};
+`;
 Track.displayName = 'Track';
-
-var PromptText = _styledComponents.default.span(_templateObject3(), _spacing.default.s2);
-
+const PromptText = _styledComponents.default.span`
+	vertical-align: middle;
+	margin-right: ${_spacing.default.s2};
+`;
 PromptText.displayName = 'PromptText';
-
-var Container = _styledComponents.default.label(_templateObject4());
-
+const Container = _styledComponents.default.label`
+	display: block;
+`;
 Container.displayName = 'Container';
-
-var Input = _styledComponents.default.input(_templateObject5(), Track, _colors.default.success, Track, Marker);
-
+const Input = _styledComponents.default.input`
+	display: none;
+
+	&:checked + ${Track} {
+		background: ${_colors.default.success};
+	}
+
+	&:checked + ${Track} > ${Marker} {
+		background: white;
+		transform: translateX(24px);
+	}
+`;
 Input.displayName = 'Input';
 
-var Switch = function Switch(_ref) {
-  var id = _ref.id,
-      name = _ref.name,
-      disabled = _ref.disabled,
-      checked = _ref.checked,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      gaAction = _ref.gaAction,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "name", "disabled", "checked", "onChange", "label", "gaAction"]);
-
-  var checkedProp = onChange ? {
-    checked: checked
+const Switch = _ref => {
+  let {
+    id,
+    name,
+    disabled,
+    checked,
+    onChange,
+    label,
+    gaAction
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["id", "name", "disabled", "checked", "onChange", "label", "gaAction"]);
+
+  const checkedProp = onChange ? {
+    checked
   } : {
     defaultChecked: checked
   };

package/dist/components/Table/Cell/index.js

@@ -11,27 +11,24 @@ var _setBreakPoint = _interopRequireDefault(require("../../../utils/setBreakPoin
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: ", ";\n\t", ";\n\t", ";\n\tborder: 0;\n\n\t", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Cell = _styledComponents.default.td(_templateObject(), _spacing.default.s2, function (props) {
-  return props.center && 'text-align: center';
-}, function (props) {
-  return props.onClick && 'cursor: pointer';
-}, function (props) {
-  var showFrom = (0, _setBreakPoint.default)(props.showFrom);
-  return "\n\t\t\t@media screen and (max-width: " + showFrom + ") {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t@media screen and (min-width: " + showFrom + ") {\n\t\t\t\tdisplay: " + (showFrom ? 'table-cell' : 'none') + ";\n\t\t\t}\n\t\t";
-});
-
+const Cell = _styledComponents.default.td`
+	padding: ${_spacing.default.s2};
+	${props => props.center && 'text-align: center'};
+	${props => props.onClick && 'cursor: pointer'};
+	border: 0;
+
+	${props => {
+  const showFrom = (0, _setBreakPoint.default)(props.showFrom);
+  return `
+			@media screen and (max-width: ${showFrom}) {
+				display: none;
+			}
+			@media screen and (min-width: ${showFrom}) {
+				display: ${showFrom ? 'table-cell' : 'none'};
+			}
+		`;
+}};
+`;
 Cell.displayName = 'Cell';
 /* @component */
 

package/dist/components/Table/HeaderCell/index.js

@@ -9,19 +9,10 @@ var _Cell = _interopRequireDefault(require("../Cell"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\ttext-align: left;\n\tfont-family: 'galano-bold', sans-serif;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var HeaderCell = (0, _styledComponents.default)(_Cell.default.withComponent('th'))(_templateObject());
+const HeaderCell = (0, _styledComponents.default)(_Cell.default.withComponent('th'))`
+	text-align: left;
+	font-family: 'galano-bold', sans-serif;
+`;
 HeaderCell.displayName = 'HeaderCell';
 /* @component */
 

package/dist/components/Table/Row/index.js

@@ -9,20 +9,13 @@ var _colors = _interopRequireDefault(require("../../../constants/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tborder-bottom: 1px solid ", ";\n\n\t&:last-child:not(:only-child) {\n\t\tborder: 0;\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Row = _styledComponents.default.tr(_templateObject(), _colors.default.greyPale);
+const Row = _styledComponents.default.tr`
+	border-bottom: 1px solid ${_colors.default.greyPale};
 
+	&:last-child:not(:only-child) {
+		border: 0;
+	}
+`;
 Row.displayName = 'Row';
 /* @component */
 

package/dist/components/Table/TableBody/index.js

@@ -9,11 +9,15 @@ var _propTypes = require("prop-types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-var TableBody = function TableBody(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+const TableBody = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children"]);
 
   return _react.default.createElement("tbody", props, children);
 };

package/dist/components/Table/TableFooter/index.js

@@ -9,11 +9,15 @@ var _propTypes = require("prop-types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-var TableFooter = function TableFooter(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+const TableFooter = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children"]);
 
   return _react.default.createElement("tfoot", props, children);
 };

package/dist/components/Table/TableHeader/index.js

@@ -9,11 +9,15 @@ var _propTypes = require("prop-types");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
 
-var TableHeader = function TableHeader(_ref) {
-  var children = _ref.children,
-      props = _objectWithoutPropertiesLoose(_ref, ["children"]);
+const TableHeader = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["children"]);
 
   return _react.default.createElement("thead", props, children);
 };

package/dist/components/Table/index.js

@@ -9,20 +9,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tborder-collapse: collapse;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Table = _styledComponents.default.table(_templateObject());
-
+const Table = _styledComponents.default.table`
+	border-collapse: collapse;
+`;
 Table.displayName = 'Table';
 Table.propTypes = {
   children: _propTypes.node.isRequired

package/dist/components/Tabs/Tab/index.js

@@ -13,19 +13,29 @@ var _vars = _interopRequireDefault(require("../../../constants/vars"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tpadding: 0.5rem 1rem;\n\tmargin: 0;\n\tcolor: ", ";\n\tcursor: pointer;\n\tborder-bottom: 3px solid transparent;\n\n\t&.react-tabs__tab--selected {\n\t\tborder-bottom: 3px solid ", ";\n\t\toutline: none;\n\t\tcursor: default;\n\t\tfont-family: ", ";\n\t}\n\n\t&[aria-disabled='true'] {\n\t\tcursor: not-allowed;\n\t\topacity: 0.6;\n\t}\n\n\t&:hover {\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var StyledTab = (0, _styledComponents.default)(_reactTabs.Tab)(_templateObject(), _colors.default.primaryDarker, _colors.default.primaryDarker, _vars.default.fontStackBold, _colors.default.linkHover);
+const StyledTab = (0, _styledComponents.default)(_reactTabs.Tab)`
+	padding: 0.5rem 1rem;
+	margin: 0;
+	color: ${_colors.default.primaryDarker};
+	cursor: pointer;
+	border-bottom: 3px solid transparent;
+
+	&.react-tabs__tab--selected {
+		border-bottom: 3px solid ${_colors.default.primaryDarker};
+		outline: none;
+		cursor: default;
+		font-family: ${_vars.default.fontStackBold};
+	}
+
+	&[aria-disabled='true'] {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	&:hover {
+		color: ${_colors.default.linkHover};
+	}
+`;
 StyledTab.displayName = 'StyledTab';
 StyledTab.tabsRole = 'Tab';
 /** @component */

package/dist/components/Tabs/TabList/index.js

@@ -11,19 +11,14 @@ var _colors = _interopRequireDefault(require("../../../constants/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tlist-style: none;\n\tmargin: 0;\n\tpadding: 1rem 0 0 0;\n\tborder-bottom: 1px solid ", "\n\tdisplay: flex;\n\tflex-wrap: wrap;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var StyledTabList = (0, _styledComponents.default)(_reactTabs.TabList)(_templateObject(), _colors.default.greyLight);
+const StyledTabList = (0, _styledComponents.default)(_reactTabs.TabList)`
+	list-style: none;
+	margin: 0;
+	padding: 1rem 0 0 0;
+	border-bottom: 1px solid ${_colors.default.greyLight}
+	display: flex;
+	flex-wrap: wrap;
+`;
 StyledTabList.displayName = 'StyledTabList';
 StyledTabList.tabsRole = 'TabList';
 /** @component */

package/dist/components/Tabs/TabPanel/index.js

@@ -9,19 +9,13 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: none;\n\n\t&.react-tabs__tab-panel--selected {\n\t\tdisplay: block;\n\t}\n"]);
+const StyledTabPanel = (0, _styledComponents.default)(_reactTabs.TabPanel)`
+	display: none;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var StyledTabPanel = (0, _styledComponents.default)(_reactTabs.TabPanel)(_templateObject());
+	&.react-tabs__tab-panel--selected {
+		display: block;
+	}
+`;
 StyledTabPanel.displayName = 'StyledTabPanel';
 StyledTabPanel.tabsRole = 'TabPanel';
 /** @component */

package/dist/components/Tabs/index.js

@@ -9,19 +9,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tmargin: 0;\n\tpadding: 0;\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var StyledTabs = (0, _styledComponents.default)(_reactTabs.Tabs)(_templateObject());
+const StyledTabs = (0, _styledComponents.default)(_reactTabs.Tabs)`
+	margin: 0;
+	padding: 0;
+`;
 StyledTabs.tabsRole = 'Tabs';
 StyledTabs.displayName = 'StyledTabs';
 /** @component */

package/dist/components/Textarea/index.js

@@ -17,42 +17,65 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _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 _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-family: ", ";\n\tbackground: ", ";\n\tborder: ", " solid\n\t\t", ";\n\tborder-radius: ", ";\n\tpadding: 0.5rem 1rem;\n\tmargin: 0.5rem 0rem;\n\twidth: ", ";\n\tcolor: ", "\n\tcursor: ", "\n\n\t&:focus {\n\t\tborder-color: ", ";\n\t\tbox-shadow: ", ";\n\t\toutline: 0;\n\t}\n\n\t&::placeholder {\n\t\tfont-family: ", ";\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
+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; }
 
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+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; }
 
-var TextArea = _styledComponents.default.textarea(_templateObject(), _vars.default.fontStackBold, function (_ref) {
-  var disabled = _ref.disabled;
+const TextArea = _styledComponents.default.textarea`
+	font-family: ${_vars.default.fontStackBold};
+	background: ${_ref => {
+  let {
+    disabled
+  } = _ref;
   return disabled ? '#f6f7fa' : 'white';
-}, _vars.default.borderWidth, function (_ref2) {
-  var disabled = _ref2.disabled;
+}};
+	border: ${_vars.default.borderWidth} solid
+		${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
   return disabled ? _colors.default.disabledOutline : _colors.default.borderColor;
-}, _vars.default.borderRadius, function (_ref3) {
-  var fullWidth = _ref3.fullWidth;
+}};
+	border-radius: ${_vars.default.borderRadius};
+	padding: 0.5rem 1rem;
+	margin: 0.5rem 0rem;
+	width: ${_ref3 => {
+  let {
+    fullWidth
+  } = _ref3;
   return fullWidth ? '100%' : 'auto !important';
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
+}};
+	color: ${_ref4 => {
+  let {
+    disabled
+  } = _ref4;
   return disabled ? _colors.default.grey : _colors.default.textColor;
-}, function (_ref5) {
-  var disabled = _ref5.disabled;
+}}
+	cursor: ${_ref5 => {
+  let {
+    disabled
+  } = _ref5;
   return disabled ? 'not-allowed' : 'default';
-}, _colors.default.borderFocus, _vars.default.boxShadow, _vars.default.fontStackNormal, _colors.default.placeholder);
-
+}}
+
+	&:focus {
+		border-color: ${_colors.default.borderFocus};
+		box-shadow: ${_vars.default.boxShadow};
+		outline: 0;
+	}
+
+	&::placeholder {
+		font-family: ${_vars.default.fontStackNormal};
+		color: ${_colors.default.placeholder};
+	}
+`;
 TextArea.displayName = 'TextArea';
 
-var Textarea = function Textarea(_ref6) {
-  var name = _ref6.name,
-      props = _objectWithoutPropertiesLoose(_ref6, ["name"]);
+const Textarea = _ref6 => {
+  let {
+    name
+  } = _ref6,
+      props = _objectWithoutProperties(_ref6, ["name"]);
 
   return _react.default.createElement(TextArea, _extends({
     name: name