bright-components 9.31.0 → 10.0.0

package/dist/components/InlineLoader/index.js

@@ -11,80 +11,65 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _colors = _interopRequireDefault(require("../../constants/colors"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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 _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 _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n\tstroke: ", ";\n\tstroke-dasharray: 1, 200;\n\tstroke-dashoffset: 0;\n\tanimation: ", " 1.5s ease-in-out infinite, color 6s ease-in-out infinite;\n\tstroke-linecap: round;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\tanimation: ", " 2s linear infinite;\n\ttransform-origin: center center;\n\twidth: ", ";\n\theight: ", ";\n\tvertical-align: middle;\n"]);
+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; }
 
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
+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; }
 
-  return data;
+const Rotate = (0, _styledComponents.keyframes)`
+ {
+  100% {
+    transform: rotate(360deg);
+  }
 }
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
+`;
+const Dash = (0, _styledComponents.keyframes)`
+ {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -35px;
+  }
+  100% {
+    stroke-dasharray: 89, 200;
+    stroke-dashoffset: -124px;
+  }
 }
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Rotate = (0, _styledComponents.keyframes)(_templateObject());
-var Dash = (0, _styledComponents.keyframes)(_templateObject2());
-
-var Circular = _styledComponents.default.svg(_templateObject3(), Rotate, function (props) {
-  return props.size;
-}, function (props) {
-  return props.size;
-});
-
+`;
+const Circular = _styledComponents.default.svg`
+	animation: ${Rotate} 2s linear infinite;
+	transform-origin: center center;
+	width: ${props => props.size};
+	height: ${props => props.size};
+	vertical-align: middle;
+`;
 Circular.displayName = 'Circular';
-
-var Circle = _styledComponents.default.circle(_templateObject4(), function (props) {
-  return props.standalone ? _colors.default.secondary : 'currentColor';
-}, Dash);
-
+const Circle = _styledComponents.default.circle`
+	stroke: ${props => props.standalone ? _colors.default.secondary : 'currentColor'};
+	stroke-dasharray: 1, 200;
+	stroke-dashoffset: 0;
+	animation: ${Dash} 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
+	stroke-linecap: round;
+`;
 Circle.displayName = 'Circle';
 
-var InlineLoader = function InlineLoader(_ref) {
-  var isLoading = _ref.isLoading,
-      standalone = _ref.standalone,
-      size = _ref.size,
-      rest = _objectWithoutPropertiesLoose(_ref, ["isLoading", "standalone", "size"]);
+const InlineLoader = _ref => {
+  let {
+    isLoading,
+    standalone,
+    size
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, ["isLoading", "standalone", "size"]);
 
   if (!isLoading) {
     return null;

package/dist/components/Input/index.js

@@ -15,40 +15,55 @@ var _spacing = _interopRequireDefault(require("../../constants/spacing"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\t\t\t-moz-appearance: text-field;\n\t\t\t&::-webkit-inner-spin-button {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t&::-webkit-outer-spin-button {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tappearance: none;\n\t-moz-appearance: textfield; /* DO NOT RE-ORDER */\n\tfont-family: ", ";\n\tborder-radius: ", ";\n\tborder: ", " solid\n\t\t", " !important;\n\tbackground-color: ", ";\n\tpadding: 0 ", " !important;\n\toutline: none;\n\theight: 2.75rem !important;\n\tmin-height: 2.75rem !important;\n\twidth: ", ";\n\tmargin: 0.5rem 0 !important;\n\tline-height: normal !important;\n\tvertical-align: top;\n\tdisplay: inline-block;\n\n\t&:focus {\n\t\tborder-color: ", " !important;\n\t\tbox-shadow: ", ";\n\t}\n\n\t&:disabled {\n\t\tcolor: ", ";\n\t\t-webkit-text-fill-color: ", ";\n\t\tborder-color: ", " !important;\n\t\tbackground-color: ", ";\n\t}\n\n\t&::placeholder {\n\t\tfont-family: ", ";\n\t\tcolor: ", ";\n\t}\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 Input = _styledComponents.default.input(_templateObject(), _vars.default.fontStackBold, _vars.default.borderRadius, _vars.default.borderWidth, function (props) {
-  return props.hasError ? _colors.default.error : _colors.default.borderColor;
-}, _colors.default.white, _spacing.default.s2, function (props) {
-  return props.fullWidth ? '100%' : 'auto !important';
-}, _colors.default.borderFocus, _vars.default.boxShadow, _colors.default.disabled, _colors.default.disabled, _colors.default.disabledOutline, _colors.default.disabledBackground, _vars.default.fontStackNormal, _colors.default.placeholder, function (props) {
-  return props.type === 'number' && (0, _styledComponents.css)(_templateObject2());
-});
-
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Input = _styledComponents.default.input`
+	appearance: none;
+	-moz-appearance: textfield; /* DO NOT RE-ORDER */
+	font-family: ${_vars.default.fontStackBold};
+	border-radius: ${_vars.default.borderRadius};
+	border: ${_vars.default.borderWidth} solid
+		${props => props.hasError ? _colors.default.error : _colors.default.borderColor} !important;
+	background-color: ${_colors.default.white};
+	padding: 0 ${_spacing.default.s2} !important;
+	outline: none;
+	height: 2.75rem !important;
+	min-height: 2.75rem !important;
+	width: ${props => props.fullWidth ? '100%' : 'auto !important'};
+	margin: 0.5rem 0 !important;
+	line-height: normal !important;
+	vertical-align: top;
+	display: inline-block;
+
+	&:focus {
+		border-color: ${_colors.default.borderFocus} !important;
+		box-shadow: ${_vars.default.boxShadow};
+	}
+
+	&:disabled {
+		color: ${_colors.default.disabled};
+		-webkit-text-fill-color: ${_colors.default.disabled};
+		border-color: ${_colors.default.disabledOutline} !important;
+		background-color: ${_colors.default.disabledBackground};
+	}
+
+	&::placeholder {
+		font-family: ${_vars.default.fontStackNormal};
+		color: ${_colors.default.placeholder};
+	}
+
+	${props => props.type === 'number' && (0, _styledComponents.css)`
+			-moz-appearance: text-field;
+			&::-webkit-inner-spin-button {
+				display: none;
+			}
+			&::-webkit-outer-spin-button {
+				display: none;
+			}
+		`}
+`;
 Input.displayName = 'Input';
 Input.propTypes = {
   hasError: _propTypes.bool,

package/dist/components/InputBox/AdornedBox/Adornment/index.js

@@ -15,60 +15,44 @@ var _vars = _interopRequireDefault(require("../../../../constants/vars"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n\t\tcolor: ", "\n\t\tcursor: ", ";\n\t\tuser-select: none;\n\t"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\tdisplay: flex;\n\tflex: 1 ", ";\n\tmargin: ", ";\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tflex: 1 0 auto\n\tfont-weight: bold;\n\tfont-family: ", ";\n\tcolor: ", ";\n\tmargin: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var Text = _styledComponents.default.span(_templateObject(), _vars.default.fontStackBold, _colors.default.borderColor, function (_ref) {
-  var position = _ref.position;
+const Text = _styledComponents.default.span`
+	flex: 1 0 auto
+	font-weight: bold;
+	font-family: ${_vars.default.fontStackBold};
+	color: ${_colors.default.borderColor};
+	margin: ${_ref => {
+  let {
+    position
+  } = _ref;
   return position === 'start' ? '0 10px 0 0' : '0 0 0 10px';
-});
-
+}};
+`;
 Text.displayName = 'Text'; // need display:flex here to fix Safari layout issue caused by react-icon-base setting vertical-align: middle
 
-var IconWrapper = _styledComponents.default.div(_templateObject2(), function (_ref2) {
-  var iconSize = _ref2.iconSize;
-  return iconSize + "px";
-}, function (_ref3) {
-  var position = _ref3.position;
+const IconWrapper = _styledComponents.default.div`
+	display: flex;
+	flex: 1 ${_ref2 => {
+  let {
+    iconSize
+  } = _ref2;
+  return `${iconSize}px`;
+}};
+	margin: ${_ref3 => {
+  let {
+    position
+  } = _ref3;
   return position === 'start' ? '0 10px 0 0' : '0 0 0 10px';
-});
-
+}};
+`;
 IconWrapper.displayName = 'IconWrapper';
 
-var Adornment = function Adornment(_ref4) {
-  var element = _ref4.element,
-      disabled = _ref4.disabled,
-      position = _ref4.position,
-      size = _ref4.size;
+const Adornment = _ref4 => {
+  let {
+    element,
+    disabled,
+    position,
+    size
+  } = _ref4;
 
   if (typeof element === 'string') {
     return _react.default.createElement(Text, {
@@ -76,11 +60,11 @@ var Adornment = function Adornment(_ref4) {
     }, element);
   }
 
-  var Icon = (0, _styledComponents.default)(element.icon)(_templateObject3(), function (props) {
-    return props.disabled ? _colors.default.disabled : element.color;
-  }, function (props) {
-    return props.disabled ? 'default' : 'pointer';
-  });
+  const Icon = (0, _styledComponents.default)(element.icon)`
+		color: ${props => props.disabled ? _colors.default.disabled : element.color}
+		cursor: ${props => props.disabled ? 'default' : 'pointer'};
+		user-select: none;
+	`;
   Icon.displayName = 'Icon';
   return _react.default.createElement(IconWrapper, {
     position: position,

package/dist/components/InputBox/AdornedBox/index.js

@@ -19,67 +19,74 @@ var _Adornment = _interopRequireDefault(require("./Adornment"));
 
 var _InputFactory = _interopRequireWildcard(require("../InputFactory"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 _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 _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n\toutline: none;\n\twidth: 100%;\n\tpadding: 0;\n\tmargin: 0;\n\tborder: none;\n\tbox-shadow: none;\n\tmin-width: 0; /* Firefox */\n\n\t&:focus {\n\t\tbox-shadow: none;\n\t}\n\n\t&:disabled {\n\t\tcolor: ", ";\n\t\tbackground-color: ", ";\n\t}\n\n\t&::placeholder {\n\t\tfont-family: ", ";\n\t\tcolor: ", ";\n\t}\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", ";\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tpadding: ", ";\n\theight: ", ";\n\tmargin: 0.5rem 0;\n\tborder-radius: ", ";\n\tborder: ", " solid\n\t\t", ";\n\tbackground-color: ", ";\n\tdisplay: inline-flex;\n\talign-items: center;\n\tflex-wrap: no-wrap;\n\n\tbackground-color: ", ";\n\n\t@media (min-width: ", ") {\n\t\twidth: ", ";\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 Container = _styledComponents.default.div(_templateObject(), function (props) {
-  return (0, _InputFactory.baseWidth)(props);
-}, function (props) {
-  return props.size === 'small' ? _vars.default.fontStackNormal : _vars.default.fontStackBold;
-}, function (props) {
-  return props.size === 'small' ? '90%' : '100%';
-}, function (props) {
-  return props.size === 'regular' ? '0 10px' : '0 8px';
-}, function (props) {
-  return props.size === 'regular' ? '2.75rem' : '2rem';
-}, _vars.default.borderRadius, _vars.default.borderWidth, function (props) {
-  return props.error ? _colors.default.error : _colors.default.borderColor;
-}, _colors.default.white, function (props) {
-  return props.disabled ? _colors.default.disabledBackground : _colors.default.white;
-}, _breakpoints.default.tablet, function (props) {
-  return (0, _InputFactory.largerDevicesWidth)(props);
-});
+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 Container = _styledComponents.default.div`
+	width: ${props => (0, _InputFactory.baseWidth)(props)};
+	font-family: ${props => props.size === 'small' ? _vars.default.fontStackNormal : _vars.default.fontStackBold};
+	font-size: ${props => props.size === 'small' ? '90%' : '100%'};
+	padding: ${props => props.size === 'regular' ? '0 10px' : '0 8px'};
+	height: ${props => props.size === 'regular' ? '2.75rem' : '2rem'};
+	margin: 0.5rem 0;
+	border-radius: ${_vars.default.borderRadius};
+	border: ${_vars.default.borderWidth} solid
+		${props => props.error ? _colors.default.error : _colors.default.borderColor};
+	background-color: ${_colors.default.white};
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: no-wrap;
+
+	background-color: ${props => props.disabled ? _colors.default.disabledBackground : _colors.default.white};
+
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		width: ${props => (0, _InputFactory.largerDevicesWidth)(props)};
+	}
+`;
 Container.displayName = 'InputGroup';
-var InnerInput = (0, _styledComponents.default)(_InputFactory.default)(_templateObject2(), _colors.default.disabled, _colors.default.disabledBackground, _vars.default.fontStackNormal, _colors.default.placeholder);
+const InnerInput = (0, _styledComponents.default)(_InputFactory.default)`
+	outline: none;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	border: none;
+	box-shadow: none;
+	min-width: 0; /* Firefox */
+
+	&:focus {
+		box-shadow: none;
+	}
+
+	&:disabled {
+		color: ${_colors.default.disabled};
+		background-color: ${_colors.default.disabledBackground};
+	}
+
+	&::placeholder {
+		font-family: ${_vars.default.fontStackNormal};
+		color: ${_colors.default.placeholder};
+	}
+`;
 InnerInput.displayName = 'InnerInput';
 
-var AdornedBox = function AdornedBox(_ref) {
-  var prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      width = _ref.width,
-      size = _ref.size,
-      responsive = _ref.responsive,
-      fullWidth = _ref.fullWidth,
-      error = _ref.error,
-      props = _objectWithoutPropertiesLoose(_ref, ["prefix", "suffix", "width", "size", "responsive", "fullWidth", "error"]);
+const AdornedBox = _ref => {
+  let {
+    prefix,
+    suffix,
+    width,
+    size,
+    responsive,
+    fullWidth,
+    error
+  } = _ref,
+      props = _objectWithoutProperties(_ref, ["prefix", "suffix", "width", "size", "responsive", "fullWidth", "error"]);
 
   return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(Container, {
     width: width,
@@ -101,7 +108,7 @@ var AdornedBox = function AdornedBox(_ref) {
   })));
 };
 
-var iconShape = {
+const iconShape = {
   icon: _propTypes.func.isRequired,
   onClick: _propTypes.func.isRequired,
   color: _propTypes.string

package/dist/components/InputBox/InputError/index.js

@@ -11,21 +11,11 @@ var _colors = _interopRequireDefault(require("../../../constants/colors"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\tfont-size: 90%;\n\tmargin-top: ", ";\n\tcolor: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var InputError = (0, _styledComponents.default)(_P.default)(_templateObject(), function (props) {
-  return props.size === 'small' ? '-0.4em' : '-0.25em';
-}, _colors.default.error);
+const InputError = (0, _styledComponents.default)(_P.default)`
+	font-size: 90%;
+	margin-top: ${props => props.size === 'small' ? '-0.4em' : '-0.25em'};
+	color: ${_colors.default.error};
+`;
 InputError.displayName = 'InputError';
 var _default = InputError;
 exports.default = _default;

package/dist/components/InputBox/InputFactory/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.default = exports.largerDevicesWidth = exports.baseWidth = void 0;
+exports.largerDevicesWidth = exports.default = exports.baseWidth = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,16 +13,18 @@ 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 _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 baseWidth = function baseWidth(props) {
+const baseWidth = props => {
   if (props.fullWidth || props.responsive) return '100%';
   return props.width || 'auto';
 };
 
 exports.baseWidth = baseWidth;
 
-var largerDevicesWidth = function largerDevicesWidth(props) {
+const largerDevicesWidth = props => {
   // larger devices ignore the responsive prop
   if (props.fullWidth) return '100%';
   return props.width || 'auto';
@@ -31,23 +33,23 @@ var largerDevicesWidth = function largerDevicesWidth(props) {
 
 exports.largerDevicesWidth = largerDevicesWidth;
 
-var InputFactory = function InputFactory(_ref) {
-  var size = _ref.size,
-      error = _ref.error,
-      fullWidth = _ref.fullWidth,
-      responsive = _ref.responsive,
-      mask = _ref.mask,
-      filteredProps = _objectWithoutPropertiesLoose(_ref, ["size", "error", "fullWidth", "responsive", "mask"]);
+const InputFactory = _ref => {
+  let {
+    size,
+    error,
+    fullWidth,
+    responsive,
+    mask
+  } = _ref,
+      filteredProps = _objectWithoutProperties(_ref, ["size", "error", "fullWidth", "responsive", "mask"]);
 
   return mask ? _react.default.createElement(_reactTextMask.default, _extends({
     guide: false,
     mask: mask
   }, filteredProps, {
-    render: function render(ref, rp) {
-      return _react.default.createElement("input", _extends({
-        ref: ref
-      }, rp));
-    }
+    render: (ref, rp) => _react.default.createElement("input", _extends({
+      ref: ref
+    }, rp))
   })) : _react.default.createElement("input", filteredProps);
 };
 

package/dist/components/InputBox/UnadornedBox/index.js

@@ -15,39 +15,48 @@ var _breakpoints = _interopRequireDefault(require("../../../constants/breakpoint
 
 var _InputFactory = _interopRequireWildcard(require("../InputFactory"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n\twidth: ", ";\n\tfont-family: ", ";\n\tfont-size: ", ";\n\tpadding: ", ";\n\theight: ", ";\n\tmargin: 0.5rem 0;\n\tborder-radius: ", ";\n\tborder: ", " solid\n\t\t", ";\n\tbackground-color: ", ";\n\toutline: none;\n\tline-height: normal;\n\tdisplay: inline-block;\n\n\t@media (min-width: ", ") {\n\t\twidth: ", ";\n\t}\n\n\t&:focus {\n\t\tborder-color: ", " !important;\n\t\tbox-shadow: ", ";\n\t}\n\n\t&:disabled {\n\t\tcolor: ", ";\n\t\t-webkit-text-fill-color: ", ";\n\t\tborder-color: ", " !important;\n\t\tbackground-color: ", ";\n\t}\n\n\t&::placeholder {\n\t\tfont-family: ", ";\n\t\tcolor: ", ";\n\t}\n"]);
+const UnadornedBox = (0, _styledComponents.default)(_InputFactory.default)`
+	width: ${props => (0, _InputFactory.baseWidth)(props)};
+	font-family: ${props => props.size === 'small' ? _vars.default.fontStackNormal : _vars.default.fontStackBold};
+	font-size: ${props => props.size === 'small' ? '90%' : '100%'};
+	padding: ${props => props.size === 'regular' ? '0 10px' : '0 8px'};
+	height: ${props => props.size === 'regular' ? '2.75rem' : '2rem'};
+	margin: 0.5rem 0;
+	border-radius: ${_vars.default.borderRadius};
+	border: ${_vars.default.borderWidth} solid
+		${props => props.error ? _colors.default.error : _colors.default.borderColor};
+	background-color: ${_colors.default.white};
+	outline: none;
+	line-height: normal;
+	display: inline-block;
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
+	@media (min-width: ${_breakpoints.default.tablet}) {
+		width: ${props => (0, _InputFactory.largerDevicesWidth)(props)};
+	}
 
-  return data;
-}
+	&:focus {
+		border-color: ${_colors.default.borderFocus} !important;
+		box-shadow: ${_vars.default.boxShadow};
+	}
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+	&:disabled {
+		color: ${_colors.default.disabled};
+		-webkit-text-fill-color: ${_colors.default.disabled};
+		border-color: ${_colors.default.disabledOutline} !important;
+		background-color: ${_colors.default.disabledBackground};
+	}
 
-var UnadornedBox = (0, _styledComponents.default)(_InputFactory.default)(_templateObject(), function (props) {
-  return (0, _InputFactory.baseWidth)(props);
-}, function (props) {
-  return props.size === 'small' ? _vars.default.fontStackNormal : _vars.default.fontStackBold;
-}, function (props) {
-  return props.size === 'small' ? '90%' : '100%';
-}, function (props) {
-  return props.size === 'regular' ? '0 10px' : '0 8px';
-}, function (props) {
-  return props.size === 'regular' ? '2.75rem' : '2rem';
-}, _vars.default.borderRadius, _vars.default.borderWidth, function (props) {
-  return props.error ? _colors.default.error : _colors.default.borderColor;
-}, _colors.default.white, _breakpoints.default.tablet, function (props) {
-  return (0, _InputFactory.largerDevicesWidth)(props);
-}, _colors.default.borderFocus, _vars.default.boxShadow, _colors.default.disabled, _colors.default.disabled, _colors.default.disabledOutline, _colors.default.disabledBackground, _vars.default.fontStackNormal, _colors.default.placeholder);
+	&::placeholder {
+		font-family: ${_vars.default.fontStackNormal};
+		color: ${_colors.default.placeholder};
+	}
+`;
 UnadornedBox.displayName = 'StyledInput';
 UnadornedBox.propTypes = {
   size: (0, _propTypes.oneOf)(['small', 'regular']),