@janiscommerce/ui-web 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.8.0] - 2022-01-23
+
+### Changed
+
+- Changed Button to use Icon component
+
 ## [0.7.3] - 2022-12-04
 
 ### Fixed

package/dist/index.umd.js

@@ -1,13 +1,13 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom')) :
   typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$a, global.require$$1));
-})(this, (function (exports, React, styled$a, require$$1) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$b, global.require$$1));
+})(this, (function (exports, React, styled$b, require$$1) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$a);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$b);
   var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function ownKeys(object, enumerableOnly) {
@@ -917,6 +917,10 @@
   	path: "M482.525 839.6h-54.9l113.85-655.2h54.9z",
   	size: 24
   };
+  var item = {
+  	path: "M704 892.587c-92.16 0-167.253-75.093-167.253-167.253s75.093-167.253 167.253-167.253 167.253 75.093 167.253 167.253-75.093 167.253-167.253 167.253zM704 600.747c-68.693 0-124.587 55.893-124.587 124.587s55.893 124.587 124.587 124.587 124.587-55.893 124.587-124.587-55.893-124.587-124.587-124.587zM459.947 874.24h-307.2v-307.2h307.2v307.2zM195.413 831.573h221.867v-221.867h-221.867v221.867zM727.040 490.24h-414.293l206.933-358.827 207.36 358.827zM386.56 447.573h266.667l-133.12-230.827-133.12 230.827z",
+  	size: 24
+  };
   var journey = {
   	path: "M938.473 490.522v21.479c0 235.75-191.292 427.542-426.458 427.542-235.75 0-427.542-191.792-427.542-427.542s191.792-427.542 427.542-427.542h21.333c11.792 0 21.333 9.542 21.333 21.333s-9.542 21.333-21.333 21.333h-21.333c-212.208 0-384.875 172.646-384.875 384.875s172.667 384.875 384.875 384.875c211.625 0 383.792-172.646 383.792-384.875v-21.479c0-11.792 9.542-21.333 21.333-21.333s21.333 9.542 21.333 21.333zM490.64 298.793c-11.792 0-21.333 9.542-21.333 21.333v244.542c0 7.688 4.125 14.792 10.833 18.583l170.417 96.25c3.333 1.854 6.917 2.75 10.5 2.75 7.417 0 14.667-3.896 18.583-10.833 5.792-10.271 2.167-23.292-8.083-29.083l-159.583-90.125v-232.084c-0-11.792-9.542-21.333-21.334-21.333zM661.145 170.501c11.758 0 21.271-9.513 21.271-21.271s-9.513-21.271-21.271-21.271h-0.414c-11.758 0-21.062 9.513-21.062 21.271s9.721 21.271 21.476 21.271zM789.145 255.834c11.758 0 21.271-9.513 21.271-21.271s-9.513-21.271-21.271-21.271h-0.414c-11.758 0-21.062 9.513-21.062 21.271s9.721 21.271 21.476 21.271zM874.731 383.665c11.755 0 21.271-9.513 21.271-21.268 0-11.758-9.516-21.271-21.271-21.271h-0.417c-11.755 0-21.062 9.513-21.062 21.271 0 11.755 9.722 21.268 21.479 21.268z",
   	size: 24
@@ -1568,6 +1572,7 @@
   	ingreso_mercaderias: ingreso_mercaderias,
   	iso_janis: iso_janis,
   	italic: italic,
+  	item: item,
   	journey: journey,
   	key: key,
   	keyboard: keyboard,
@@ -1794,11 +1799,11 @@
       base = mainPallet.base,
       black = mainPallet.black,
       error = mainPallet.error,
-      grey = mainPallet.grey,
+      grey$1 = mainPallet.grey,
       primary = mainPallet.primary,
       success = mainPallet.success,
       warning = mainPallet.warning,
-      white = mainPallet.white;
+      white$1 = mainPallet.white;
   var viewsPallet = {
     black: black.main,
     blackHover: black.hover,
@@ -1807,24 +1812,24 @@
     blueHover: primary.hover,
     bluePressed: primary.pressed,
     blueDisabled: primary.disabled,
-    darkGrey: grey.dark,
-    darkGreyHover: grey.darkHover,
-    darkGreyPressed: grey.darkPressed,
+    darkGrey: grey$1.dark,
+    darkGreyHover: grey$1.darkHover,
+    darkGreyPressed: grey$1.darkPressed,
     fizzGreen: success.main,
     fizzGreenHover: success.hover,
     fizzGreenPressed: success.pressed,
     green: '#74C655',
     greenHover: '#8FD177',
     greenPressed: '#54B039',
-    grey: grey.main,
-    greyHover: grey.hover,
-    greyPressed: grey.pressed,
+    grey: grey$1.main,
+    greyHover: grey$1.hover,
+    greyPressed: grey$1.pressed,
     lightBlue: '#08C4C4',
     lightBlueHover: '#39CFCF',
     lightBluePressed: '#04ADAD',
-    lightGrey: white.main,
-    lightGreyHover: white.hover,
-    lightGreyPressed: white.pressed,
+    lightGrey: white$1.main,
+    lightGreyHover: white$1.hover,
+    lightGreyPressed: white$1.pressed,
     orange: warning.main,
     orangeHover: warning.hover,
     orangePressed: warning.pressed,
@@ -19076,9 +19081,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$a.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$b.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$a.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$b.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
     },
     transition: function transition() {
       var property = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'all';
@@ -19086,11 +19091,11 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$a.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$b.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
       var colors = palette.colors;
-      return styled$a.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || colors.white, thumbColor);
+      return styled$b.css(["&::-webkit-scrollbar{width:5px;}&::-webkit-scrollbar-track{box-shadow:inset 0 0 6px ", ";}&::-webkit-scrollbar-thumb{height:5px;width:4px;border-radius:50px;background-color:", ";}"], shadowColor || colors.white, thumbColor);
     }
   };
 
@@ -19122,25 +19127,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$a.css(["", "{", "}"], devices.mobile, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.mobile, styled$b.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$a.css(["", "{", "}"], devices.tablet, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.tablet, styled$b.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$a.css(["", "{", "}"], devices.tabletLg, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.tabletLg, styled$b.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$a.css(["", "{", "}"], devices.onlyDesktop, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.onlyDesktop, styled$b.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$a.css(["", "{", "}"], devices.desktopSm, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.desktopSm, styled$b.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$a.css(["", "{", "}"], devices.desktopLg, styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["", "{", "}"], devices.desktopLg, styled$b.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$a.css(["@media print{", "}"], styled$a.css.apply(void 0, arguments));
+      return styled$b.css(["@media print{", "}"], styled$b.css.apply(void 0, arguments));
     }
   };
 
@@ -19185,10 +19190,10 @@
         viewBox = _ref.viewBox,
         props = _objectWithoutProperties(_ref, _excluded$7);
 
-    var iconProps = icons[name];
-    if (!iconProps) return null;
-    var path = iconProps.path,
-        defaultSize = iconProps.size;
+    if (!icons[name]) return null;
+    var _icons$name = icons[name],
+        path = _icons$name.path,
+        defaultSize = _icons$name.size;
     var size = sizeProp || defaultSize;
     if (!path) return null;
     return /*#__PURE__*/React__default["default"].createElement(styles.Svg, _extends$1({
@@ -19209,10 +19214,15 @@
     viewBox: '0 0 1024 1024'
   };
 
-  var StyledIcon = styles.Svg;
-
   var mainPaletteColors = ['black', 'primary', 'success', 'grey', 'warning', 'error', 'white', 'alert'];
   var validColors = ['blue', 'darkGrey', 'grey.dark', 'fizzGreen', 'green', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'yellow'].concat(mainPaletteColors);
+  var white = palette.white,
+      grey = palette.grey,
+      lightGreyHover = palette.lightGreyHover,
+      lightGrey = palette.lightGrey,
+      blue = palette.blue,
+      blueHover = palette.blueHover,
+      bluePressed = palette.bluePressed;
   /**
    * Find normal, hover and pressed color
    * @param {string} color
@@ -19244,49 +19254,54 @@
   };
 
   var getColor = function getColor(color) {
-    return isValidColor(color) ? findColor(color) : palette.blue;
+    return isValidColor(color) ? findColor(color) : blue;
   };
   var getHoverColor = function getHoverColor(color) {
-    return isValidColor(color) ? findColor(color, 'hover') : palette.blueHover;
+    return isValidColor(color) ? findColor(color, 'hover') : blueHover;
   };
   var getPressedColor = function getPressedColor(color) {
-    return isValidColor(color) ? findColor(color, 'pressed') : palette.bluePressed;
-  };
-
-  var StyledButton = styled__default["default"].button.withConfig({
-    displayName: "styles",
-    componentId: "sc-buf2do-0"
-  })(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:", ";font-size:13px;font-weight:500;position:relative;", ";z-index:0;&:before{content:'';border-radius:50px;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;}&:after{content:'';border-radius:50px;position:absolute;z-index:-1;width:100%;height:100%;transition:all 0.25s ", ";transform:scale(0,0);top:0;bottom:0;left:0;right:0;}&:focus:after,&:hover:after,&:active:after{transform:scale(1,1);}&:active{-webkit-tap-highlight-color:", ";}", "{margin-right:", ";fill:", ";", ";}", ";", "{fill:", ";}", ";"], function (props) {
-    return props.rounded && '36px';
-  }, function (props) {
-    return props.rounded ? '0' : 'initial';
-  }, function (props) {
-    return props.rounded ? '50%' : '50px';
-  }, function (props) {
-    return !props.rounded && (props.hasText && props.hasIcon ? '0 12px' : '0 16px');
-  }, function (props) {
-    return props.disabled ? 'default' : 'pointer';
-  }, function (props) {
-    return props.variant === 'outlined' ? "1px solid ".concat(getColor$1('grey')) : 'none';
-  }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, StyledIcon, function (props) {
-    return props.hasText && '8px';
-  }, palette.white, mixins.transition('fill', '250ms'), function (props) {
-    switch (props.variant) {
-      case 'contained':
-        return styled$a.css(["color:", ";&:before{background-color:", ";}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(props.fontColor), getColor(props.color), StyledIcon, palette.white, getHoverColor(props.color), getPressedColor(props.color), palette.grey);
-
-      case 'outlined':
-      case 'cleaned':
-        return styled$a.css(["color:", ";&:after{background-color:transparent;}", "{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}", "{fill:", ";}}"], getColor(props.color), StyledIcon, getColor(props.color), palette.lightGreyHover, palette.lightGrey, palette.grey, StyledIcon, palette.grey);
+    return isValidColor(color) ? findColor(color, 'pressed') : bluePressed;
+  };
+  var getButtonStyles = function getButtonStyles(_ref) {
+    var fontColor = _ref.fontColor,
+        color = _ref.color,
+        variant = _ref.variant;
+    var variantStyles = {
+      contained: function contained() {
+        return styled$b.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor$1(fontColor), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
+      },
+      outlined: function outlined() {
+        return styled$b.css(["color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}}"], getColor(color), getColor(color), lightGreyHover, lightGrey, grey, grey);
+      },
+      cleaned: function cleaned() {
+        return styled$b.css(["color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active:after{background-color:", ";}&:disabled{color:", ";&:after{background-color:transparent;}.button-icon{fill:", ";}}"], getColor(color), getColor(color), lightGreyHover, lightGrey, grey, grey);
+      }
+    };
+    return variantStyles[variant] || '';
+  };
 
-      default:
-        return '';
-    }
-  }, StyledIcon, function (props) {
-    return getColor$1(props.iconColor);
-  }, function (props) {
-    return props.styles;
-  });
+  var styled$a = {
+    Button: styled__default["default"].button.withConfig({
+      displayName: "styles__Button",
+      componentId: "sc-buf2do-0"
+    })(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:", ";font-size:13px;font-weight:500;position:relative;", ";z-index:0;&:before{content:'';border-radius:50px;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;}&:after{content:'';border-radius:50px;position:absolute;z-index:-1;width:100%;height:100%;transition:all 0.25s ", ";transform:scale(0,0);top:0;bottom:0;left:0;right:0;}&:focus:after,&:hover:after,&:active:after{transform:scale(1,1);}&:active{-webkit-tap-highlight-color:", ";}.button-icon{margin-right:", ";fill:", ";", ";}", " .button-icon{fill:", ";}"], function (props) {
+      return props.rounded && '36px';
+    }, function (props) {
+      return props.rounded ? '0' : 'initial';
+    }, function (props) {
+      return props.rounded ? '50%' : '50px';
+    }, function (props) {
+      return !props.rounded && (props.hasText && props.hasIcon ? '0 12px' : '0 16px');
+    }, function (props) {
+      return props.disabled ? 'default' : 'pointer';
+    }, function (props) {
+      return props.variant === 'outlined' ? "1px solid ".concat(getColor$1('grey')) : 'none';
+    }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, function (props) {
+      return props.hasText && '8px';
+    }, palette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (props) {
+      return getColor$1(props.iconColor);
+    })
+  };
 
   var _excluded$6 = ["children", "color", "hideLabel", "icon", "iconColor", "iconSize", "fontColor", "rounded", "styles", "variant"];
 
@@ -19303,7 +19318,7 @@
         variant = _ref.variant,
         props = _objectWithoutProperties(_ref, _excluded$6);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledButton, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$a.Button, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -19314,9 +19329,10 @@
       hasIcon: !!icon,
       tabIndex: "0"
     }, props), icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "button-icon",
       name: icon,
       size: iconSize
-    }), children);
+    }), !hideLabel && children);
   };
 
   Button.defaultProps = {
@@ -19343,7 +19359,7 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$a.css(["transform:translateY(-5%);fill:", ";", ""], getColor$1('base.white'), function (props) {
+    iconCheckStyles: styled$b.css(["transform:translateY(-5%);fill:", ";", ""], getColor$1('base.white'), function (props) {
       return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
     })
   };
@@ -19418,13 +19434,13 @@
     }, function (props) {
       switch (props.variant) {
         case 'outlined':
-          return styled$a.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? palette.primary.main : '#EAEBED', props.selected ? palette.primary.main : palette.black.main, palette.white.hover, props.selected ? palette.primary.main : palette.black.main, palette.primary.main, palette.primary.main, palette.primary.main);
+          return styled$b.css(["border:1px solid ", ";color:", ";&:hover{background-color:", ";}&:hover .chip-icon,&:hover .delete-button{fill:", ";}&:active{border-color:", ";color:", ";background-color:transparent;}&:active .chip-icon,&:active .delete-button{fill:", ";}"], props.selected ? palette.primary.main : '#EAEBED', props.selected ? palette.primary.main : palette.black.main, palette.white.hover, props.selected ? palette.primary.main : palette.black.main, palette.primary.main, palette.primary.main, palette.primary.main);
 
         case 'contained':
-          return styled$a.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? palette.primary.main : palette.white.hover, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.grey.dark, props.selected ? palette.primary.mainHover : palette.white.main, props.selected ? palette.base.white : palette.black.main, palette.primary.main, palette.base.white, palette.base.white, palette.grey.main, palette.grey.main);
+          return styled$b.css(["background-color:", ";color:", ";.chip-icon{fill:", ";}.delete-button{fill:", ";}&:hover{background-color:", ";}&:hover .delete-button{fill:", ";}&:active{background-color:", ";color:", ";}&:active .chip-icon,&:active .delete-button{fill:", ";}&:disabled{fill:", ";color:", ";}"], props.selected ? palette.primary.main : palette.white.hover, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.black.main, props.selected ? palette.base.white : palette.grey.dark, props.selected ? palette.primary.mainHover : palette.white.main, props.selected ? palette.base.white : palette.black.main, palette.primary.main, palette.base.white, palette.base.white, palette.grey.main, palette.grey.main);
 
         case 'status':
-          return styled$a.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor$1(props.color || 'grey'), getColor$1(props.sizeColor || 'base.white'));
+          return styled$b.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor$1(props.color || 'grey'), getColor$1(props.sizeColor || 'base.white'));
 
         default:
           return '';
@@ -19438,12 +19454,12 @@
     }, function (props) {
       return props.textColor && "color: ".concat(getColor$1(props.textColor), ";");
     }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.grey.dark)),
-    iconPathStyles: styled$a.css(["", ";"], mixins.transition('fill')),
+    iconPathStyles: styled$b.css(["", ";"], mixins.transition('fill')),
     DeleteButton: styled__default["default"].button.withConfig({
       displayName: "styles__DeleteButton",
       componentId: "sc-1vnh4co-1"
     })(["width:16px;height:16px;margin-left:12px;"]),
-    deleteButtonPathStyles: styled$a.css(["", ";"], mixins.transition('fill')),
+    deleteButtonPathStyles: styled$b.css(["", ";"], mixins.transition('fill')),
     Children: styled__default["default"].div.withConfig({
       displayName: "styles__Children",
       componentId: "sc-1vnh4co-2"
@@ -19568,7 +19584,7 @@
   })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], palette.base.white, timingFunctions$1.standard, function (props) {
     return props.checked && "\n\t\t\tleft: 100%;\n\t\t\tmargin-left: -20px;\n\t\t";
   });
-  var iconCheckStyles = styled$a.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$b.css(["position:absolute;fill:", ";", ""], function (props) {
     return statusColor(props);
   }, onlyPrint(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n\t\tfill: ", " !important;\n\t"])), function (props) {
     return props.checked ? palette.black : palette.darkGrey;
@@ -19752,7 +19768,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$a.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$b.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? palette.error.main : palette.grey.darkPressed;
     })), function (props) {
@@ -19971,7 +19987,7 @@
       componentId: "sc-wtau65-1"
     })(["border:none;border-bottom:1px solid ", ";border-radius:0;height:23px;max-height:350px;padding:0 9px 4px 0;resize:none;font-size:", ";font-weight:400;color:", ";", ";width:", ";", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}", " ", ""], palette.grey.main, fontSize, palette.black.main, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
-    }, mixins.placeholder(styled$a.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$b.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
     })), mixins.scrollbar(palette.grey.main, palette.base.white), palette.black.main, palette.primary.main, palette.primary.main, palette.base.white, palette.grey.main, palette.grey.main, function (props) {
       return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(palette.error.main, "\n\t\t\t}\n\t\t");