@janiscommerce/ui-web 0.9.0 → 0.10.0

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$b, global.require$$1));
-})(this, (function (exports, React, styled$b, require$$1) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$c, global.require$$1));
+})(this, (function (exports, React, styled$c, 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$b);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$c);
   var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
   function _classCallCheck$2(instance, Constructor) {
@@ -1779,9 +1779,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$b.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$c.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$b.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$c.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';
@@ -1789,10 +1789,10 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$b.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$c.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      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 || viewsPalette.white, thumbColor);
+      return styled$c.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 || viewsPalette.white, thumbColor);
     }
   };
 
@@ -1824,25 +1824,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$b.css(["", "{", "}"], devices.mobile, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.mobile, styled$c.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$b.css(["", "{", "}"], devices.tablet, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.tablet, styled$c.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$b.css(["", "{", "}"], devices.tabletLg, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.tabletLg, styled$c.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$b.css(["", "{", "}"], devices.onlyDesktop, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.onlyDesktop, styled$c.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$b.css(["", "{", "}"], devices.desktopSm, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.desktopSm, styled$c.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$b.css(["", "{", "}"], devices.desktopLg, styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["", "{", "}"], devices.desktopLg, styled$c.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$b.css(["@media print{", "}"], styled$b.css.apply(void 0, arguments));
+      return styled$c.css(["@media print{", "}"], styled$c.css.apply(void 0, arguments));
     }
   };
 
@@ -1934,8 +1934,8 @@
     return isValidColor(color) ? viewsPalette["".concat(color, "Pressed")] : bluePressed;
   };
 
-  var commonStyles = function commonStyles(iconColor, fontColor) {
-    return styled$b.css(["color:", ";.button-icon{fill:", ";}background:none;&:focus,&:hover{background-color:", ";}&:active{background-color:", ";}&:disabled{color:", ";.button-icon{fill:", ";}}"], getColor(fontColor || blue), getColor(iconColor || blue), lightGreyHover, lightGrey, grey, grey);
+  var commonStyles = function commonStyles(iconColor, fontColor, color) {
+    return styled$c.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) {
@@ -1945,19 +1945,19 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        return styled$b.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$c.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$b.css(["", ";border:1px solid ", ";"], commonStyles(color), getColor(grey));
+        return styled$c.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
-        return commonStyles(iconColor, fontColor);
+        return commonStyles(iconColor, fontColor, color);
       }
     };
     return variantStyles[variant] || '';
   };
 
-  var styled$a = {
+  var styled$b = {
     Button: styled__default["default"].button.withConfig({
       displayName: "styles__Button",
       componentId: "sc-buf2do-0"
@@ -2006,7 +2006,7 @@
         disabled = _ref.disabled,
         props = _objectWithoutProperties(_ref, _excluded$6);
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$a.Button, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$b.Button, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -2031,7 +2031,7 @@
     disabled: false
   };
 
-  var styled$9 = {
+  var styled$a = {
     Container: styled__default["default"].label.withConfig({
       displayName: "styles__Container",
       componentId: "sc-18bfcwf-0"
@@ -2048,7 +2048,7 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$b.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$c.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";
     })
   };
@@ -2078,18 +2078,18 @@
 
     var _props$checked = props.checked,
         conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
       checked: conntroledChecked,
       rounded: rounded,
       styles: styles
-    }, /*#__PURE__*/React__default["default"].createElement(styled$9.Input, _extends$1({}, props, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Input, _extends$1({}, props, {
       type: "checkbox",
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
     })), /*#__PURE__*/React__default["default"].createElement(Icon, {
       name: "check_bold",
-      styles: styled$9.iconCheckStyles,
+      styles: styled$a.iconCheckStyles,
       rounded: rounded
     }));
   };
@@ -2102,7 +2102,7 @@
   };
 
   var _templateObject$3;
-  var styled$8 = {
+  var styled$9 = {
     Chip: styled__default["default"].button.withConfig({
       displayName: "styles__Chip",
       componentId: "sc-1vnh4co-0"
@@ -2123,13 +2123,13 @@
     }, function (props) {
       switch (props.variant) {
         case 'outlined':
-          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 ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
+          return styled$c.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 ? viewsPalette.blue : '#EAEBED', props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.lightGreyHover, props.selected ? viewsPalette.blue : viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.blue);
 
         case 'contained':
-          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 ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
+          return styled$c.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 ? viewsPalette.blue : viewsPalette.lightGreyHover, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.black, props.selected ? viewsPalette.white : viewsPalette.darkGrey, props.selected ? viewsPalette.blueHover : viewsPalette.lightGrey, props.selected ? viewsPalette.white : viewsPalette.black, viewsPalette.blue, viewsPalette.white, viewsPalette.white, viewsPalette.grey, viewsPalette.grey);
 
         case 'status':
-          return styled$b.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'));
+          return styled$c.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 '';
@@ -2143,12 +2143,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"])), viewsPalette.darkGrey)),
-    iconPathStyles: styled$b.css(["", ";"], mixins.transition('fill')),
+    iconPathStyles: styled$c.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$b.css(["", ";"], mixins.transition('fill')),
+    deleteButtonPathStyles: styled$c.css(["", ";"], mixins.transition('fill')),
     Children: styled__default["default"].div.withConfig({
       displayName: "styles__Children",
       componentId: "sc-1vnh4co-2"
@@ -2173,7 +2173,7 @@
         props = _objectWithoutProperties(_ref, _excluded$4);
 
     if (!children && !icon) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styled$8.Chip, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$9.Chip, _extends$1({
       as: props.onClick ? 'button' : 'div',
       backgroundColor: backgroundColor,
       borderColor: borderColor,
@@ -2191,13 +2191,13 @@
       className: "chip-icon",
       name: icon,
       color: iconColor,
-      pathStyles: styled$8.iconPathStyles
-    }), children && /*#__PURE__*/React__default["default"].createElement(styled$8.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$8.DeleteButton, {
+      pathStyles: styled$9.iconPathStyles
+    }), children && /*#__PURE__*/React__default["default"].createElement(styled$9.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$9.DeleteButton, {
       type: "button",
       onClick: onDelete
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
       color: "black",
-      pathStyles: styled$8.deleteButtonPathStyles,
+      pathStyles: styled$9.deleteButtonPathStyles,
       className: "delete-button",
       name: "cross_circle_flat",
       size: 16
@@ -2215,7 +2215,7 @@
     hasLink: false
   };
 
-  var styled$7 = {
+  var styled$8 = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-zbd85t-0"
@@ -2239,9 +2239,9 @@
         showLabel = _ref.showLabel;
     if (!color) return null;
     var colorCode = getColor(color);
-    return /*#__PURE__*/React__default["default"].createElement(styled$7.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$7.ColorSample, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$8.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$8.ColorSample, {
       color: colorCode
-    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$7.Label, {
+    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$8.Label, {
       color: colorCode
     }, colorCode));
   };
@@ -2273,12 +2273,12 @@
   })(["width:16px;height:16px;border-radius:50%;position:absolute;top:4px;left:4px;background-color:", ";transition:all ", " 0.2s;", ""], viewsPalette.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$b.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$c.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 ? viewsPalette.black : viewsPalette.darkGrey;
   }));
-  var styled$6 = {
+  var styled$7 = {
     OuterContainer: styled__default["default"].div.withConfig({
       displayName: "styles__OuterContainer",
       componentId: "sc-rtzdt3-1"
@@ -2328,10 +2328,10 @@
 
     var _props$checked = props.checked,
         controledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$6.OuterContainer, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$7.OuterContainer, {
       disabled: disabled,
       checked: checked
-    }, /*#__PURE__*/React__default["default"].createElement(styled$6.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$7.Input, {
       checked: controledChecked,
       id: id,
       name: name,
@@ -2339,10 +2339,10 @@
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
-    }), /*#__PURE__*/React__default["default"].createElement(styled$6.Container, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$7.Container, {
       checked: controledChecked,
       disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(styled$6.Ball, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$7.Ball, {
       checked: controledChecked,
       disabled: disabled
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -2350,7 +2350,7 @@
       disabled: disabled,
       name: "check_bold",
       size: 16,
-      styles: styled$6.iconCheckStyles
+      styles: styled$7.iconCheckStyles
     }))));
   };
 
@@ -2424,7 +2424,7 @@
     }
   };
 
-  var styled$5 = {
+  var styled$6 = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-1fhkfhs-0"
@@ -2457,7 +2457,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$b.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$c.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? viewsPalette.statusRed : viewsPalette.darkGreyPressed;
     })), function (props) {
@@ -2577,11 +2577,11 @@
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
-        return /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$6.Container, {
           fullWidth: props.fullWidth
-        }, /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
+        }, /*#__PURE__*/React__default["default"].createElement(styled$6.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$5.FloatingLabel, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$6.FloatingLabel, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -2590,10 +2590,10 @@
           isFloating: isFloating,
           hasIcon: !!icon,
           isTranslateActive: isTranslateActive
-        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$5.InputIcon, {
+        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$6.InputIcon, {
           name: icon,
           color: error ? 'statusRed' : 'black'
-        }), /*#__PURE__*/React__default["default"].createElement(styled$5.Input, _extends$1({}, props, {
+        }), /*#__PURE__*/React__default["default"].createElement(styled$6.Input, _extends$1({}, props, {
           ref: this.input,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -2606,7 +2606,7 @@
           error: error,
           hasIcon: !!icon,
           onAnimationStart: this.handleFocus
-        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$5.ErrorMessage, {
+        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$6.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -2664,7 +2664,7 @@
     }
   };
 
-  var styled$4 = {
+  var styled$5 = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-wtau65-0"
@@ -2676,7 +2676,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;}", " ", ""], viewsPalette.grey, fontSize, viewsPalette.black, mixins.transition('color,border-color', '0.2s'), function (props) {
       return props.fullWidth ? '100%' : 'auto';
-    }, mixins.placeholder(styled$b.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$c.css(["opacity:1;color:", ";"], function (props) {
       return placeholderColor(props);
     })), mixins.scrollbar(viewsPalette.grey, viewsPalette.base), viewsPalette.black, viewsPalette.blue, viewsPalette.blue, viewsPalette.white, viewsPalette.grey, viewsPalette.grey, function (props) {
       return props.error && "\n\t\t\t&, &:hover, &:focus {\n\t\t\t\tborder-color: ".concat(viewsPalette.statusRed, "\n\t\t\t}\n\t\t");
@@ -2803,9 +2803,9 @@
             var props = _objectWithoutProperties(_this$props, _excluded$1);
 
         var isFloating = isFocused || !!value;
-        return /*#__PURE__*/React__default["default"].createElement(styled$4.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$5.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$4.FloatingLabel, _extends$1({}, props, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$5.FloatingLabel, _extends$1({}, props, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -2813,7 +2813,7 @@
           isFocused: isFocused,
           isFloating: isFloating,
           isTranslateActive: isTranslateActive
-        }), label), /*#__PURE__*/React__default["default"].createElement(styled$4.Textarea, _extends$1({}, props, {
+        }), label), /*#__PURE__*/React__default["default"].createElement(styled$5.Textarea, _extends$1({}, props, {
           ref: this.textarea,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -2824,7 +2824,7 @@
           value: value,
           autoComplete: autoComplete ? 'on' : 'off',
           disabled: disabled
-        })), error && /*#__PURE__*/React__default["default"].createElement(styled$4.ErrorMessage, {
+        })), error && /*#__PURE__*/React__default["default"].createElement(styled$5.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -2860,7 +2860,7 @@
     return 'initial';
   };
 
-  var styled$3 = {
+  var styled$4 = {
     ImageWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ImageWrapper",
       componentId: "sc-vrvp1c-0"
@@ -2906,7 +2906,7 @@
         errorImage = _useState2[0],
         setErrorImage = _useState2[1];
 
-    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$3.ImageWrapper, {
+    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$4.ImageWrapper, {
       background: background,
       width: width || height,
       height: height || width
@@ -2914,7 +2914,7 @@
       name: errorImage,
       size: (width || height) * 0.35 || 20,
       color: viewsPalette.lightGreyPressed
-    })) : /*#__PURE__*/React__default["default"].createElement(styled$3.Image, {
+    })) : /*#__PURE__*/React__default["default"].createElement(styled$4.Image, {
       src: url,
       alt: altText || url,
       width: width,
@@ -3747,7 +3747,7 @@
     return debounced;
   }
 
-  var styled$2 = {
+  var styled$3 = {
     ClickableWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ClickableWrapper",
       componentId: "sc-lreg3c-0"
@@ -3812,13 +3812,13 @@
     var value = colorValue || DEFAULT_COLOR;
 
     if (isCollapsable) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$2.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$2.ClickableWrapper, {
+      return /*#__PURE__*/React__default["default"].createElement(styled$3.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$3.ClickableWrapper, {
         "data-test": "collapsible-picker",
         color: value,
         role: "presentation",
         onClick: toggleStateVisible,
         error: error
-      }, /*#__PURE__*/React__default["default"].createElement(styled$2.Input, {
+      }, /*#__PURE__*/React__default["default"].createElement(styled$3.Input, {
         value: colorValue,
         fullWidth: true,
         onChange: function onChange(_ref2) {
@@ -3827,10 +3827,10 @@
         },
         errorMessage: errorMessage,
         error: error
-      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$2.ClosePickerWrapper, {
+      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$3.ClosePickerWrapper, {
         onClick: handleClosePicker,
         role: "presentation"
-      }), /*#__PURE__*/React__default["default"].createElement(styled$2.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
+      }), /*#__PURE__*/React__default["default"].createElement(styled$3.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
         color: value,
         onChange: change
       }))));
@@ -3888,9 +3888,9 @@
   Context.FrameContextProvider = FrameContextProvider;
   Context.FrameContextConsumer = FrameContextConsumer;
 
-  var Content$1 = {};
+  var Content$2 = {};
 
-  Object.defineProperty(Content$1, "__esModule", {
+  Object.defineProperty(Content$2, "__esModule", {
     value: true
   });
 
@@ -3913,7 +3913,7 @@
   function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } // eslint-disable-line no-unused-vars
 
 
-  var Content = function (_Component) {
+  var Content$1 = function (_Component) {
     _inherits$1(Content, _Component);
 
     function Content() {
@@ -3942,12 +3942,12 @@
     return Content;
   }(_react$1.Component);
 
-  Content.propTypes = {
+  Content$1.propTypes = {
     children: _propTypes2$1.default.element.isRequired,
     contentDidMount: _propTypes2$1.default.func.isRequired,
     contentDidUpdate: _propTypes2$1.default.func.isRequired
   };
-  Content$1.default = Content;
+  Content$2.default = Content$1;
 
   Object.defineProperty(Frame$2, "__esModule", {
     value: true
@@ -3972,7 +3972,7 @@
 
   var _Context = Context;
 
-  var _Content = Content$1;
+  var _Content = Content$2;
 
   var _Content2 = _interopRequireDefault(_Content);
 
@@ -4176,7 +4176,7 @@
 
   var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib);
 
-  var styled$1 = {
+  var styled$2 = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-3jodl7-0"
@@ -4189,7 +4189,7 @@
 
   var DefaultError = function DefaultError(_ref) {
     var message = _ref.message;
-    return /*#__PURE__*/React__default["default"].createElement(styled$1.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$1.Icon, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$2.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$2.Icon, {
       name: "exclamation_circle",
       color: "statusRed"
     }), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -4308,7 +4308,7 @@
     height: 'medium'
   };
 
-  var styled = {
+  var styled$1 = {
     LinkWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__LinkWrapper",
       componentId: "sc-fhfdft-0"
@@ -4329,12 +4329,12 @@
         props = _objectWithoutProperties(_ref, _excluded);
 
     var renderIcon = function renderIcon() {
-      return icon ? /*#__PURE__*/React__default["default"].createElement(styled.StyledIcon, {
+      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$1.StyledIcon, {
         name: icon
       }) : null;
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(styled.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
+    return /*#__PURE__*/React__default["default"].createElement(styled$1.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
       href: href,
       target: target
     }, children || href));
@@ -4345,11 +4345,159 @@
     target: '_self'
   };
 
+  var ClickAwayListener = function ClickAwayListener(_ref) {
+    var nodeRef = _ref.nodeRef,
+        onClickAway = _ref.onClickAway,
+        className = _ref.className,
+        children = _ref.children;
+    var node = undefined;
+    React.useEffect(function () {
+      var handleClickAway = function handleClickAway(e) {
+        if (node.contains(e.target)) return;
+        if (nodeRef && nodeRef.contains(e.target)) return;
+        if (onClickAway) onClickAway();
+      };
+
+      window.addEventListener('click', handleClickAway, true);
+      return function () {
+        window.removeEventListener('click', handleClickAway, true);
+      };
+    });
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      ref: function ref(_ref2) {
+        return node = _ref2;
+      },
+      className: className
+    }, children);
+  };
+  ClickAwayListener.defaultProps = {
+    onClickAway: function onClickAway() {},
+    className: ''
+  };
+
+  var getPropertyForTransition = function getPropertyForTransition(position) {
+    return position === 'right' || position === 'left' ? 'max-width' : 'max-height';
+  };
+
+  var verticalCommonStyles = function verticalCommonStyles(open) {
+    return styled$c.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$c.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+      var fullScreen = _ref2.fullScreen;
+      return fullScreen && 'width: 100%';
+    }, open ? '100%' : 0);
+  };
+
+  var setPosition = function setPosition(position, open) {
+    var positions = {
+      top: function top() {
+        return styled$c.css(["", ";top:0;"], verticalCommonStyles(open));
+      },
+      bottom: function bottom() {
+        return styled$c.css(["", ";bottom:0;"], verticalCommonStyles(open));
+      },
+      left: function left() {
+        return styled$c.css(["", ";left:0;"], horizontalCommonStyles(open));
+      },
+      right: function right() {
+        return styled$c.css(["", ";right:0;"], horizontalCommonStyles(open));
+      }
+    };
+    return positions[position];
+  };
+
+  var Drawer$1 = styled__default["default"].div.withConfig({
+    displayName: "styles__Drawer",
+    componentId: "sc-1tz9fgf-0"
+  })(["box-sizing:border-box;background-color:#ffffff;overflow:hidden;position:absolute;box-shadow:0px 2px 5px 0px #27394727;border-radius:3px;", ";z-index:999;"], function (_ref3) {
+    var position = _ref3.position,
+        open = _ref3.open,
+        transitionDuration = _ref3.transitionDuration;
+    var transitionTime = transitionDuration / 1000;
+    return styled$c.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+  });
+  var Content = styled__default["default"].div.withConfig({
+    displayName: "styles__Content",
+    componentId: "sc-1tz9fgf-1"
+  })(["min-height:300px;min-width:300px;box-sizing:border-box;padding:16px 28px 32px 32px;"]);
+  var Header = styled__default["default"].div.withConfig({
+    displayName: "styles__Header",
+    componentId: "sc-1tz9fgf-2"
+  })(["display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;"]);
+  var CloseBtn = styled__default["default"](Button).withConfig({
+    displayName: "styles__CloseBtn",
+    componentId: "sc-1tz9fgf-3"
+  })(["width:24px;height:24px;padding:0;background-color:transparent;border-radius:0;outline:0;margin-left:auto;"]);
+  var Children = styled__default["default"].div.withConfig({
+    displayName: "styles__Children",
+    componentId: "sc-1tz9fgf-4"
+  })(["width:inherit;"]);
+  var Overlay = styled__default["default"].div.withConfig({
+    displayName: "styles__Overlay",
+    componentId: "sc-1tz9fgf-5"
+  })(["position:absolute;width:100%;height:100%;top:0;left:0;visibility:hidden;pointer-events:none;z-index:998;"]);
+  var styled = {
+    Drawer: Drawer$1,
+    Content: Content,
+    Header: Header,
+    CloseBtn: CloseBtn,
+    Children: Children,
+    Overlay: Overlay
+  };
+
+  var Drawer = function Drawer(_ref) {
+    var open = _ref.open,
+        position = _ref.position,
+        handleClose = _ref.handleClose,
+        transitionDuration = _ref.transitionDuration,
+        fullScreen = _ref.fullScreen,
+        closeOnClickAway = _ref.closeOnClickAway,
+        children = _ref.children;
+    var drawerRef = React.useRef(null);
+    return /*#__PURE__*/React__default["default"].createElement(ClickAwayListener, {
+      onClickAway: closeOnClickAway && open && handleClose
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled.Drawer, {
+      open: open,
+      position: position,
+      transitionDuration: transitionDuration,
+      fullScreen: fullScreen,
+      className: "drawer",
+      ref: drawerRef
+    }, /*#__PURE__*/React__default["default"].createElement(styled.Content, {
+      className: "drawer__content"
+    }, /*#__PURE__*/React__default["default"].createElement(styled.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled.CloseBtn, {
+      onClick: handleClose
+    }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      className: "close-btn",
+      name: "cross_light",
+      width: 24,
+      height: 24
+    }))), /*#__PURE__*/React__default["default"].createElement(styled.Children, null, children))), /*#__PURE__*/React__default["default"].createElement(styled.Overlay, {
+      className: "drawer__overlay",
+      transitionDuration: transitionDuration
+    })));
+  };
+  Drawer.defaultProps = {
+    open: false,
+    position: 'right',
+    handleClose: function handleClose() {},
+    transitionDuration: 500,
+    fullScreen: false,
+    closeOnClickAway: true
+  };
+
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;
+  exports.ClickAwayListener = ClickAwayListener;
   exports.Color = Color;
   exports.ColorPicker = ColorPicker;
+  exports.Drawer = Drawer;
   exports.ErrorBoundary = ErrorBoundary;
   exports.HTML = HTML;
   exports.Icon = Icon;