@janiscommerce/ui-web 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -7,6 +7,17 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.24.0] - 2024-10-010
+
+### Fixed
+
+- export skeleton component
+
+### Changed
+
+- revert new docs to avoid publish error
+- switch styles in components utils
+
 ## [0.23.0] - 2024-10-04
 
 ### Changed

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$g, global.require$$1));
-})(this, (function (exports, React, styled$g, require$$1) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$f, global.require$$1));
+})(this, (function (exports, React, styled$f, 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$g);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$f);
   var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function _classCallCheck$2(instance, Constructor) {
@@ -430,25 +430,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$g.css(["", "{", "}"], devices.mobile, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.mobile, styled$f.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$g.css(["", "{", "}"], devices.tablet, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.tablet, styled$f.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$g.css(["", "{", "}"], devices.tabletLg, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.tabletLg, styled$f.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$g.css(["", "{", "}"], devices.onlyDesktop, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.onlyDesktop, styled$f.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$g.css(["", "{", "}"], devices.desktopSm, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.desktopSm, styled$f.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$g.css(["", "{", "}"], devices.desktopLg, styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["", "{", "}"], devices.desktopLg, styled$f.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$g.css(["@media print{", "}"], styled$g.css.apply(void 0, arguments));
+      return styled$f.css(["@media print{", "}"], styled$f.css.apply(void 0, arguments));
     }
   };
 
@@ -641,24 +641,22 @@
     return imageSizes[size] || imageSizes.small;
   };
 
-  var styled$f = {
-    SkeletonContainer: styled__default["default"].div.withConfig({
-      displayName: "styles__SkeletonContainer",
-      componentId: "sc-1xnupv9-0"
-    })(["border-radius:", ";height:", ";width:", ";background-color:", ";animation:pulse 1.5s ease-in-out infinite;@keyframes pulse{0%{opacity:0.4;}50%{opacity:0.8;}100%{opacity:0.4;}}"], function (_ref) {
-      var circle = _ref.circle;
-      return circle ? ' 50%' : '3px';
-    }, function (_ref2) {
-      var height = _ref2.height;
-      return height;
-    }, function (_ref3) {
-      var width = _ref3.width;
-      return width;
-    }, function (_ref4) {
-      var backgroundColor = _ref4.backgroundColor;
-      return backgroundColor || palette.lightGrey;
-    })
-  };
+  var SkeletonContainer = styled__default["default"].div.withConfig({
+    displayName: "styles__SkeletonContainer",
+    componentId: "sc-1xnupv9-0"
+  })(["border-radius:", ";height:", ";width:", ";background-color:", ";animation:pulse 1.5s ease-in-out infinite;@keyframes pulse{0%{opacity:0.4;}50%{opacity:0.8;}100%{opacity:0.4;}}"], function (_ref) {
+    var circle = _ref.circle;
+    return circle ? ' 50%' : '3px';
+  }, function (_ref2) {
+    var height = _ref2.height;
+    return height;
+  }, function (_ref3) {
+    var width = _ref3.width;
+    return width;
+  }, function (_ref4) {
+    var backgroundColor = _ref4.backgroundColor;
+    return backgroundColor || palette.lightGrey;
+  });
 
   var Skeleton = function Skeleton(_ref) {
     var circle = _ref.circle,
@@ -671,7 +669,7 @@
     var skeletons = Array.from({
       length: count
     }, function (_, index) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$f.SkeletonContainer, {
+      return /*#__PURE__*/React__default["default"].createElement(SkeletonContainer, {
         key: index,
         width: currentWidth,
         height: currentHeight,
@@ -713,9 +711,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$g.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$f.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$g.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$f.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';
@@ -723,10 +721,10 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$g.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$f.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      return styled$g.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 || palette.white, thumbColor);
+      return styled$f.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 || palette.white, thumbColor);
     }
   };
 
@@ -2276,11 +2274,31 @@
   };
 
   var _templateObject$3;
+
+  var getChipVariant = function getChipVariant(props) {
+    var selected = props.selected,
+        color = props.color,
+        sizeColor = props.sizeColor,
+        variant = props.variant;
+    var variantStyles = {
+      outlined: function outlined() {
+        return styled$f.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:", ";}"], selected ? palette.blue : '#EAEBED', selected ? palette.blue : palette.black, palette.lightGreyHover, selected ? palette.blue : palette.black, palette.blue, palette.blue, palette.blue);
+      },
+      contained: function contained() {
+        return styled$f.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:", ";}"], selected ? palette.blue : palette.lightGreyHover, selected ? palette.white : palette.black, selected ? palette.white : palette.black, selected ? palette.white : palette.darkGrey, selected ? palette.blueHover : palette.lightGrey, selected ? palette.white : palette.black, palette.blue, palette.white, palette.white, palette.grey, palette.grey);
+      },
+      status: function status() {
+        return styled$f.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(color || 'grey'), getColor(sizeColor || 'white'));
+      }
+    };
+    return variantStyles[variant] || '';
+  };
+
   var styled$c = {
     Chip: styled__default["default"].button.withConfig({
       displayName: "styles__Chip",
       componentId: "sc-1vnh4co-0"
-    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", " ", ";", " ", " ", " ", ""], function (props) {
+    })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", ";", ";", " ", " ", " ", ""], function (props) {
       return !props.onlyIcon ? '0 12px' : '0';
     }, function (props) {
       return props.clickable ? 'pointer' : 'default';
@@ -2295,19 +2313,7 @@
     }, function (props) {
       return !props.onlyIcon && 'margin-right: 8px';
     }, function (props) {
-      switch (props.variant) {
-        case 'outlined':
-          return styled$g.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.blue : '#EAEBED', props.selected ? palette.blue : palette.black, palette.lightGreyHover, props.selected ? palette.blue : palette.black, palette.blue, palette.blue, palette.blue);
-
-        case 'contained':
-          return styled$g.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.blue : palette.lightGreyHover, props.selected ? palette.white : palette.black, props.selected ? palette.white : palette.black, props.selected ? palette.white : palette.darkGrey, props.selected ? palette.blueHover : palette.lightGrey, props.selected ? palette.white : palette.black, palette.blue, palette.white, palette.white, palette.grey, palette.grey);
-
-        case 'status':
-          return styled$g.css(["background-color:", ";color:", ";font-weight:700;border:none;height:24px;padding:0 17px;line-height:28px;max-width:170px;"], getColor(props.color || 'grey'), getColor(props.sizeColor || 'white'));
-
-        default:
-          return '';
-      }
+      return getChipVariant(props);
     }, function (props) {
       return props.styles;
     }, function (props) {
@@ -2317,12 +2323,12 @@
     }, function (props) {
       return props.textColor && "color: ".concat(getColor(props.textColor), ";");
     }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.darkGrey)),
-    iconPathStyles: styled$g.css(["", ";"], mixins.transition('fill')),
+    iconPathStyles: styled$f.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$g.css(["", ";"], mixins.transition('fill')),
+    deleteButtonPathStyles: styled$f.css(["", ";"], mixins.transition('fill')),
     Children: styled__default["default"].div.withConfig({
       displayName: "styles__Children",
       componentId: "sc-1vnh4co-2"
@@ -2396,7 +2402,7 @@
     })(["pointer-events:none;", " background:", ";", " & div{display:flex;& div,img,span{&:not(:first-child){margin-left:-4px;}}span:first-of-type{margin-left:0px;}}"], function (_ref) {
       var showFull = _ref.showFull,
           backgroundColor = _ref.backgroundColor;
-      return showFull ? styled$g.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$g.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
+      return showFull ? styled$f.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$f.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
     }, function (_ref2) {
       var backgroundColor = _ref2.backgroundColor;
       return backgroundColor || palette.white;
@@ -2486,6 +2492,10 @@
   PropTypes.oneOfType([PropTypes.array, PropTypes.string, PropTypes.shape({})]);
 
   var validColors = ['black', 'blue', 'darkGrey', 'fizzGreen', 'green', 'grey', 'lightBlue', 'lightGrey', 'orange', 'red', 'statusRed', 'white', 'yellow'];
+  var isValidColor = function isValidColor(color) {
+    return validColors.includes(color);
+  };
+
   var white = palette.white,
       grey = palette.grey,
       lightGreyHover = palette.lightGreyHover,
@@ -2493,10 +2503,6 @@
       blue = palette.blue,
       blueHover = palette.blueHover,
       bluePressed = palette.bluePressed;
-
-  var isValidColor = function isValidColor(color) {
-    return validColors.includes(color);
-  };
   var getHoverColor = function getHoverColor(color) {
     return isValidColor(color) ? palette["".concat(color, "Hover")] : blueHover;
   };
@@ -2505,7 +2511,7 @@
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
-    return styled$g.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
+    return styled$f.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || color || blue), getColor(iconColor || color || blue), lightGreyHover, lightGrey, grey, grey);
   };
 
   var getButtonStyles = function getButtonStyles(_ref) {
@@ -2515,10 +2521,10 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        return styled$g.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
+        return styled$f.css(["color:", ";&:before{background-color:", ";}.button-icon{fill:", ";}&:focus:after,&:hover:after{background-color:", ";}&:active{background-color:", ";}&:disabled{&:before,&:after{background-color:", ";}}"], getColor(fontColor || 'white'), getColor(color), white, getHoverColor(color), getPressedColor(color), grey);
       },
       outlined: function outlined() {
-        return styled$g.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
+        return styled$f.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
         return commonStyles(iconColor, fontColor, color);
@@ -2531,31 +2537,31 @@
     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:none;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:", ";", ";}&:disabled{&:hover{background-color:transparent;}}", " .button-icon{fill:", ";}", ";"], function (_ref) {
-      var rounded = _ref.rounded;
-      return rounded && '36px';
-    }, function (_ref2) {
+    })(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:none;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:", ";", ";}&:disabled{&:hover{background-color:transparent;}}", " .button-icon{fill:", ";}", ";"], function (_ref2) {
       var rounded = _ref2.rounded;
-      return rounded ? '0' : 'initial';
+      return rounded && '36px';
     }, function (_ref3) {
       var rounded = _ref3.rounded;
-      return rounded ? '50%' : '50px';
+      return rounded ? '0' : 'initial';
     }, function (_ref4) {
-      var rounded = _ref4.rounded,
-          hasText = _ref4.hasText,
-          hasIcon = _ref4.hasIcon;
-      return !rounded && (hasText && hasIcon ? '0 12px' : '0 16px');
+      var rounded = _ref4.rounded;
+      return rounded ? '50%' : '50px';
     }, function (_ref5) {
-      var disabled = _ref5.disabled;
+      var rounded = _ref5.rounded,
+          hasText = _ref5.hasText,
+          hasIcon = _ref5.hasIcon;
+      return !rounded && (hasText && hasIcon ? '0 12px' : '0 16px');
+    }, function (_ref6) {
+      var disabled = _ref6.disabled;
       return disabled ? 'default' : 'pointer';
-    }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, function (_ref6) {
-      var hasText = _ref6.hasText;
+    }, mixins.transition('background-color', '250ms'), timingFunctions$1.standard, palette.transparentWhite, function (_ref7) {
+      var hasText = _ref7.hasText;
       return hasText && '8px';
-    }, palette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (_ref7) {
-      var iconColor = _ref7.iconColor;
+    }, palette.white, mixins.transition('fill', '250ms'), getButtonStyles, function (_ref8) {
+      var iconColor = _ref8.iconColor;
       return getColor(iconColor);
-    }, function (_ref8) {
-      var styles = _ref8.styles;
+    }, function (_ref9) {
+      var styles = _ref9.styles;
       return styles;
     })
   };
@@ -2618,7 +2624,7 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$g.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$f.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
       return !!props.rounded && "\n\t\t\tflex-shrink: 0;\n\t\t\tpadding-right: 1px;\n\t\t";
     })
   };
@@ -2708,20 +2714,10 @@
   var statusColor = function statusColor(props) {
     var checked = props.checked,
         disabled = props.disabled;
-
-    switch (true) {
-      case disabled && checked:
-        return palette.blueDisabled;
-
-      case disabled:
-        return palette.grey;
-
-      case checked:
-        return palette.blue;
-
-      default:
-        return palette.darkGrey;
-    }
+    if (disabled && checked) return palette.blueDisabled;
+    if (disabled) return palette.grey;
+    if (checked) return palette.blue;
+    return palette.darkGrey;
   };
   var Ball = styled__default["default"].div.withConfig({
     displayName: "styles__Ball",
@@ -2729,7 +2725,7 @@
   })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], palette.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$g.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$f.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;
@@ -2841,43 +2837,21 @@
         isFloating = props.isFloating,
         disabled = props.disabled,
         error = props.error;
-
-    switch (true) {
-      case disabled:
-        return palette.grey;
-
-      case error:
-        return palette.statusRed;
-
-      case isFocused:
-        return palette.blue;
-
-      case isFloating:
-        return palette.darkGrey;
-
-      default:
-        return palette.darkGreyPressed;
-    }
+    if (disabled) return palette.grey;
+    if (error) return palette.statusRed;
+    if (isFocused) return palette.blue;
+    if (isFloating) return palette.darkGrey;
+    return palette.darkGreyPressed;
   };
 
   var hoverAndFocusColor = function hoverAndFocusColor(props) {
     var isFocused = props.isFocused,
         disabled = props.disabled,
         error = props.error;
-
-    switch (true) {
-      case disabled:
-        return palette.grey;
-
-      case error:
-        return palette.statusRed;
-
-      case isFocused:
-        return palette.blue;
-
-      default:
-        return palette.black;
-    }
+    if (disabled) return palette.grey;
+    if (error) return palette.statusRed;
+    if (isFocused) return palette.blue;
+    return palette.black;
   };
 
   var styled$6 = {
@@ -2913,7 +2887,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$g.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$f.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? palette.statusRed : palette.darkGreyPressed;
     })), function (props) {
@@ -3101,23 +3075,11 @@
         isFloating = props.isFloating,
         disabled = props.disabled,
         error = props.error;
-
-    switch (true) {
-      case disabled:
-        return palette.grey;
-
-      case error:
-        return palette.statusRed;
-
-      case isFocused:
-        return palette.blue;
-
-      case isFloating:
-        return palette.darkGrey;
-
-      default:
-        return palette.darkGreyPressed;
-    }
+    if (disabled) return palette.grey;
+    if (error) return palette.statusRed;
+    if (isFocused) return palette.blue;
+    if (isFloating) return palette.darkGrey;
+    return palette.darkGreyPressed;
   };
 
   var styled$5 = {
@@ -3132,7 +3094,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, fontSize, palette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
-    }, mixins.placeholder(styled$g.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$f.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
     })), mixins.scrollbar(palette.grey, palette.base), palette.black, palette.blue, palette.blue, palette.white, palette.grey, palette.grey, function (props) {
       return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(palette.statusRed, "\n\t\t\t}\n\t\t");
@@ -4686,20 +4648,13 @@
    * @param {string | number} value
    */
   var getHeight = function getHeight(value) {
-    var measure = 400;
-    if (!value) return measure;
-
-    switch (value) {
-      case 'large':
-        measure = 600;
-        break;
-
-      case 'full':
-        measure = window.innerHeight - 250;
-        break;
-    }
-
-    return typeof value === 'number' ? value : measure;
+    var defaultMeasure = 400;
+    if (!value) return defaultMeasure;
+    var heightValue = {
+      large: 600,
+      full: window.innerHeight - 250
+    };
+    return typeof value === 'number' ? value : heightValue[value] || defaultMeasure;
   };
 
   var HTML = function HTML(_ref) {
@@ -4803,14 +4758,14 @@
   };
 
   var verticalCommonStyles = function verticalCommonStyles(open) {
-    return styled$g.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
+    return styled$f.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
       var fullScreen = _ref.fullScreen;
       return fullScreen && 'height: 100%';
     }, open ? '100%' : 0);
   };
 
   var horizontalCommonStyles = function horizontalCommonStyles(open) {
-    return styled$g.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+    return styled$f.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
       var fullScreen = _ref2.fullScreen;
       return fullScreen && 'width: 100%';
     }, open ? '100%' : 0);
@@ -4819,16 +4774,16 @@
   var setPosition = function setPosition(position, open) {
     var positions = {
       top: function top() {
-        return styled$g.css(["", ";top:0;"], verticalCommonStyles(open));
+        return styled$f.css(["", ";top:0;"], verticalCommonStyles(open));
       },
       bottom: function bottom() {
-        return styled$g.css(["", ";bottom:0;"], verticalCommonStyles(open));
+        return styled$f.css(["", ";bottom:0;"], verticalCommonStyles(open));
       },
       left: function left() {
-        return styled$g.css(["", ";left:0;"], horizontalCommonStyles(open));
+        return styled$f.css(["", ";left:0;"], horizontalCommonStyles(open));
       },
       right: function right() {
-        return styled$g.css(["", ";right:0;"], horizontalCommonStyles(open));
+        return styled$f.css(["", ";right:0;"], horizontalCommonStyles(open));
       }
     };
     return positions[position];
@@ -4842,7 +4797,7 @@
         open = _ref3.open,
         transitionDuration = _ref3.transitionDuration;
     var transitionTime = transitionDuration / 1000;
-    return styled$g.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+    return styled$f.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
   });
   var Content = styled__default["default"].div.withConfig({
     displayName: "styles__Content",