@janiscommerce/ui-web 0.45.0 → 1.0.0

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (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$h, global.ReactDOM));
-})(this, (function (exports, React, styled$h, ReactDOM) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$i, global.ReactDOM));
+})(this, (function (exports, React, styled$i, ReactDOM) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,7 +26,7 @@
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
-  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$h);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$i);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
@@ -4966,25 +4966,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$h.css(["", "{", "}"], devices.mobile, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.mobile, styled$i.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$h.css(["", "{", "}"], devices.tablet, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.tablet, styled$i.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$h.css(["", "{", "}"], devices.tabletLg, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.tabletLg, styled$i.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$h.css(["", "{", "}"], devices.onlyDesktop, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.onlyDesktop, styled$i.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$h.css(["", "{", "}"], devices.desktopSm, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.desktopSm, styled$i.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$h.css(["", "{", "}"], devices.desktopLg, styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["", "{", "}"], devices.desktopLg, styled$i.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$h.css(["@media print{", "}"], styled$h.css.apply(void 0, arguments));
+      return styled$i.css(["@media print{", "}"], styled$i.css.apply(void 0, arguments));
     }
   };
 
@@ -5317,7 +5317,7 @@
     width: '100%'
   };
 
-  var styled$g = {
+  var styled$h = {
     Image: styled__default["default"].img.withConfig({
       displayName: "styles__Image",
       componentId: "sc-uljfj3-0"
@@ -5405,9 +5405,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$h.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$i.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$h.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$i.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';
@@ -5415,14 +5415,14 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$h.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$i.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      return styled$h.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$i.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);
     }
   };
 
-  var styled$f = {
+  var styled$g = {
     Initials: styled__default["default"].div.withConfig({
       displayName: "styles__Initials",
       componentId: "sc-qlu7od-0"
@@ -5446,7 +5446,7 @@
         mainColor = _ref.mainColor,
         imageSize = _ref.imageSize,
         rounded = _ref.rounded;
-    return /*#__PURE__*/React__default["default"].createElement(styled$f.Initials, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$g.Initials, {
       color: mainColor,
       size: imageSize,
       rounded: rounded
@@ -5612,7 +5612,7 @@
       imageSize: imageSize,
       rounded: rounded
     });
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$g.Image, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$h.Image, {
       ref: imageRef,
       src: url,
       alt: "".concat(firstname, " ").concat(lastname),
@@ -7131,19 +7131,19 @@
         variant = props.variant;
     var variantStyles = {
       outlined: function outlined() {
-        return styled$h.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);
+        return styled$i.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$h.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);
+        return styled$i.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$h.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 styled$i.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$e = {
+  var styled$f = {
     Chip: styled__default["default"].button.withConfig({
       displayName: "styles__Chip",
       componentId: "sc-1vnh4co-0"
@@ -7201,7 +7201,7 @@
         props = _objectWithoutProperties(_ref, _excluded$9);
 
     if (!children && !icon) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styled$e.Chip, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$f.Chip, _extends$1({
       as: props.onClick ? 'button' : 'div',
       backgroundColor: backgroundColor,
       borderColor: borderColor,
@@ -7219,7 +7219,7 @@
       name: icon,
       color: iconColor,
       size: iconSize
-    }), children && /*#__PURE__*/React__default["default"].createElement(styled$e.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$e.DeleteButton, {
+    }), children && /*#__PURE__*/React__default["default"].createElement(styled$f.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$f.DeleteButton, {
       type: "button",
       onClick: onDelete
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -7241,14 +7241,14 @@
     hasLink: false
   };
 
-  var styled$d = {
+  var styled$e = {
     AvatarGroup: styled__default["default"](Chip).withConfig({
       displayName: "styles__AvatarGroup",
       componentId: "sc-1jnt2lr-0"
     })(["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$h.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$h.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
+      return showFull ? styled$i.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$i.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
     }, function (_ref2) {
       var backgroundColor = _ref2.backgroundColor;
       return backgroundColor || palette.white;
@@ -7377,7 +7377,7 @@
         badgeColor = _ref.badgeColor;
     var extraCount = users.length > usersToDisplay ? users.length - usersToDisplay : 0;
     var hasExtraCount = extraCount > 0;
-    return /*#__PURE__*/React__default["default"].createElement(styled$d.AvatarGroup, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$e.AvatarGroup, {
       disabled: true,
       showFull: showFull
     }, /*#__PURE__*/React__default["default"].createElement(AvatarList, {
@@ -7446,7 +7446,7 @@
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
-    return styled$h.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$i.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) {
@@ -7456,10 +7456,10 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        return styled$h.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$i.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$h.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
+        return styled$i.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
         return commonStyles(iconColor, fontColor, color);
@@ -7468,7 +7468,7 @@
     return variantStyles[variant] || '';
   };
 
-  var styled$c = {
+  var styled$d = {
     Button: styled__default["default"].button.withConfig({
       displayName: "styles__Button",
       componentId: "sc-buf2do-0"
@@ -7517,7 +7517,7 @@
         disabled = _ref.disabled,
         props = _objectWithoutProperties(_ref, _excluded$8);
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$c.Button, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$d.Button, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -7542,7 +7542,7 @@
     disabled: false
   };
 
-  var styled$b = {
+  var styled$c = {
     Container: styled__default["default"].label.withConfig({
       displayName: "styles__Container",
       componentId: "sc-18bfcwf-0"
@@ -7559,7 +7559,7 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$h.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$i.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";
     })
   };
@@ -7589,18 +7589,18 @@
 
     var _props$checked = props.checked,
         conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$b.Container, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$c.Container, {
       checked: conntroledChecked,
       rounded: rounded,
       styles: styles
-    }, /*#__PURE__*/React__default["default"].createElement(styled$b.Input, _extends$1({}, props, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$c.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$b.iconCheckStyles,
+      styles: styled$c.iconCheckStyles,
       rounded: rounded
     }));
   };
@@ -7612,7 +7612,7 @@
     }
   };
 
-  var styled$a = {
+  var styled$b = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-zbd85t-0"
@@ -7636,9 +7636,9 @@
         showLabel = _ref.showLabel;
     if (!color) return null;
     var colorCode = getColor(color);
-    return /*#__PURE__*/React__default["default"].createElement(styled$a.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$a.ColorSample, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$b.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$b.ColorSample, {
       color: colorCode
-    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$a.Label, {
+    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$b.Label, {
       color: colorCode
     }, colorCode));
   };
@@ -7660,12 +7660,12 @@
   })(["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$h.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$i.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;
   }));
-  var styled$9 = {
+  var styled$a = {
     OuterContainer: styled__default["default"].div.withConfig({
       displayName: "styles__OuterContainer",
       componentId: "sc-rtzdt3-1"
@@ -7715,10 +7715,10 @@
 
     var _props$checked = props.checked,
         controledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$9.OuterContainer, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$a.OuterContainer, {
       disabled: disabled,
       checked: checked
-    }, /*#__PURE__*/React__default["default"].createElement(styled$9.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Input, {
       checked: controledChecked,
       id: id,
       name: name,
@@ -7726,10 +7726,10 @@
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
-    }), /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
       checked: controledChecked,
       disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(styled$9.Ball, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Ball, {
       checked: controledChecked,
       disabled: disabled
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -7737,7 +7737,7 @@
       disabled: disabled,
       name: "check_bold",
       size: 16,
-      styles: styled$9.iconCheckStyles
+      styles: styled$a.iconCheckStyles
     }))));
   };
 
@@ -7819,7 +7819,7 @@
     return palette.black;
   };
 
-  var styled$8 = {
+  var styled$9 = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-1fhkfhs-0"
@@ -7852,7 +7852,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$h.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$i.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? palette.statusRed : palette.darkGreyPressed;
     })), function (props) {
@@ -7972,11 +7972,11 @@
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
-        return /*#__PURE__*/React__default["default"].createElement(styled$8.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
           fullWidth: props.fullWidth
-        }, /*#__PURE__*/React__default["default"].createElement(styled$8.Container, {
+        }, /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$8.FloatingLabel, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$9.FloatingLabel, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -7985,10 +7985,10 @@
           isFloating: isFloating,
           hasIcon: !!icon,
           isTranslateActive: isTranslateActive
-        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$8.InputIcon, {
+        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$9.InputIcon, {
           name: icon,
           color: error ? 'statusRed' : 'black'
-        }), /*#__PURE__*/React__default["default"].createElement(styled$8.Input, _extends$1({}, props, {
+        }), /*#__PURE__*/React__default["default"].createElement(styled$9.Input, _extends$1({}, props, {
           ref: this.input,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -8001,7 +8001,7 @@
           error: error,
           hasIcon: !!icon,
           onAnimationStart: this.handleFocus
-        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$8.ErrorMessage, {
+        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$9.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -8047,7 +8047,7 @@
     return palette.darkGreyPressed;
   };
 
-  var styled$7 = {
+  var styled$8 = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-wtau65-0"
@@ -8059,7 +8059,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$h.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$i.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");
@@ -8186,9 +8186,9 @@
             var props = _objectWithoutProperties(_this$props, _excluded$4);
 
         var isFloating = isFocused || !!value;
-        return /*#__PURE__*/React__default["default"].createElement(styled$7.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$8.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$7.FloatingLabel, _extends$1({}, props, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$8.FloatingLabel, _extends$1({}, props, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -8196,7 +8196,7 @@
           isFocused: isFocused,
           isFloating: isFloating,
           isTranslateActive: isTranslateActive
-        }), label), /*#__PURE__*/React__default["default"].createElement(styled$7.Textarea, _extends$1({}, props, {
+        }), label), /*#__PURE__*/React__default["default"].createElement(styled$8.Textarea, _extends$1({}, props, {
           ref: this.textarea,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -8207,7 +8207,7 @@
           value: value,
           autoComplete: autoComplete ? 'on' : 'off',
           disabled: disabled
-        })), error && /*#__PURE__*/React__default["default"].createElement(styled$7.ErrorMessage, {
+        })), error && /*#__PURE__*/React__default["default"].createElement(styled$8.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -8275,7 +8275,7 @@
     return 'initial';
   };
 
-  var styled$6 = {
+  var styled$7 = {
     ImageWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ImageWrapper",
       componentId: "sc-vrvp1c-0"
@@ -8321,7 +8321,7 @@
         errorImage = _useState2[0],
         setErrorImage = _useState2[1];
 
-    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$6.ImageWrapper, {
+    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$7.ImageWrapper, {
       background: background,
       width: width || height,
       height: height || width
@@ -8329,7 +8329,7 @@
       name: errorImage,
       size: (width || height) * 0.35 || 20,
       color: palette.lightGreyPressed
-    })) : /*#__PURE__*/React__default["default"].createElement(styled$6.Image, {
+    })) : /*#__PURE__*/React__default["default"].createElement(styled$7.Image, {
       src: url,
       alt: altText || url,
       width: width,
@@ -9129,7 +9129,7 @@
 
   function u(){return (u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);}return e}).apply(this,arguments)}function c(e,r){if(null==e)return {};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function i(e){var t=React.useRef(e),n=React.useRef(function(e){t.current&&t.current(e);});return t.current=e,n.current}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return "touches"in e},v=function(e){return e&&e.ownerDocument.defaultView||self},d=function(e,r,t){var n=e.getBoundingClientRect(),o=f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return {left:s((o.pageX-(n.left+v(e).pageXOffset))/n.width),top:s((o.pageY-(n.top+v(e).pageYOffset))/n.height)}},h=function(e){!f(e)&&e.preventDefault();},m=React__default["default"].memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=React.useRef(null),g=i(a),p=i(l),b=React.useRef(null),_=React.useRef(!1),x=React.useMemo(function(){var e=function(e){h(e),(f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(d(m.current,e,b.current)):t(!1);},r=function(){return t(!1)};function t(t){var n=_.current,o=v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r);}return [function(e){var r=e.nativeEvent,n=m.current;if(n&&(h(r),!function(e,r){return r&&!f(e)}(r,_.current)&&n)){if(f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier);}n.focus(),g(d(n,r,b.current)),t(!0);}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}));},t]},[p,g]),C=x[0],E=x[1],H=x[2];return React.useEffect(function(){return H},[H]),React__default["default"].createElement("div",u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),g=function(e){return e.filter(Boolean).join(" ")},p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=g(["react-colorful__pointer",r.className]);return React__default["default"].createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},React__default["default"].createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},x=function(e){return "#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},N=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return {h:b(e.h),s:b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:b(o/2),a:b(n,2)}},w=function(e){var r=N(e);return "hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},q=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return {r:b(255*[n,u,l,l,c,n][i]),g:b(255*[c,n,n,u,l,l][i]),b:b(255*[l,l,c,n,n,u][i]),a:b(o,2)}},z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return {h:b(60*(u<0?u+6:u)),s:b(a?l/a*100:0),v:b(a/255*100),a:o}},K=React__default["default"].memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return React__default["default"].createElement("div",{className:o},React__default["default"].createElement(m,{onMove:function(e){n({h:360*e.left});},onKey:function(e){n({h:s(t+360*e.left,0,360)});},"aria-label":"Hue","aria-valuetext":b(t)},React__default["default"].createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:w({h:t,s:100,v:100,a:1})})))}),L=React__default["default"].memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:w({h:t.h,s:100,v:100,a:1})};return React__default["default"].createElement("div",{className:"react-colorful__saturation",style:o},React__default["default"].createElement(m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top});},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)});},"aria-label":"Color","aria-valuetext":"Saturation "+b(t.s)+"%, Brightness "+b(t.v)+"%"},React__default["default"].createElement(p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:w(t)})))}),A=function(e,r){if(e===r)return !0;for(var t in e)if(e[t]!==r[t])return !1;return !0};function T(e,t,l){var u=i(l),c=React.useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=React.useRef({color:t,hsva:s});React.useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),React.useEffect(function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r));},[s,e,u]);var d=React.useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var P="undefined"!=typeof window?React.useLayoutEffect:React.useEffect,X=function(){return ("undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0)},R=new Map,V=function(e){P(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!R.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',R.set(r,t);var n=X();n&&t.setAttribute("nonce",n),r.head.appendChild(t);}},[]);},$$4=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=c(t,["className","colorModel","color","onChange"]),f=React.useRef(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return React__default["default"].createElement("div",u({},s,{ref:f,className:m}),React__default["default"].createElement(L,{hsva:d,onChange:h}),React__default["default"].createElement(K,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return B(x(e))},fromHsva:function(e){return t=(r=q(e)).g,n=r.b,"#"+z(r.r)+z(t)+z(n);var r,t,n;},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(x(e),x(r))}},J=function(r){return React__default["default"].createElement($$4,u({},r,{colorModel:G}))};
 
-  var styled$5 = {
+  var styled$6 = {
     ClickableWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ClickableWrapper",
       componentId: "sc-lreg3c-0"
@@ -9194,13 +9194,13 @@
     var value = colorValue || DEFAULT_COLOR;
 
     if (isCollapsable) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$5.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$5.ClickableWrapper, {
+      return /*#__PURE__*/React__default["default"].createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ClickableWrapper, {
         "data-test": "collapsible-picker",
         color: value,
         role: "presentation",
         onClick: toggleStateVisible,
         error: error
-      }, /*#__PURE__*/React__default["default"].createElement(styled$5.Input, {
+      }, /*#__PURE__*/React__default["default"].createElement(styled$6.Input, {
         value: colorValue,
         fullWidth: true,
         onChange: function onChange(_ref2) {
@@ -9209,10 +9209,10 @@
         },
         errorMessage: errorMessage,
         error: error
-      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$5.ClosePickerWrapper, {
+      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ClosePickerWrapper, {
         onClick: handleClosePicker,
         role: "presentation"
-      }), /*#__PURE__*/React__default["default"].createElement(styled$5.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
+      }), /*#__PURE__*/React__default["default"].createElement(styled$6.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
         color: value,
         onChange: change
       }))));
@@ -9270,9 +9270,9 @@
   Context.FrameContextProvider = FrameContextProvider;
   Context.FrameContextConsumer = FrameContextConsumer;
 
-  var Content$2 = {};
+  var Content$3 = {};
 
-  Object.defineProperty(Content$2, "__esModule", {
+  Object.defineProperty(Content$3, "__esModule", {
     value: true
   });
 
@@ -9295,7 +9295,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$1 = function (_Component) {
+  var Content$2 = function (_Component) {
     _inherits$1(Content, _Component);
 
     function Content() {
@@ -9324,12 +9324,12 @@
     return Content;
   }(_react$1.Component);
 
-  Content$1.propTypes = {
+  Content$2.propTypes = {
     children: _propTypes2$1.default.element.isRequired,
     contentDidMount: _propTypes2$1.default.func.isRequired,
     contentDidUpdate: _propTypes2$1.default.func.isRequired
   };
-  Content$2.default = Content$1;
+  Content$3.default = Content$2;
 
   Object.defineProperty(Frame$2, "__esModule", {
     value: true
@@ -9354,7 +9354,7 @@
 
   var _Context = Context;
 
-  var _Content = Content$2;
+  var _Content = Content$3;
 
   var _Content2 = _interopRequireDefault(_Content);
 
@@ -9576,7 +9576,7 @@
 
   var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib$1);
 
-  var styled$4 = {
+  var styled$5 = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-3jodl7-0"
@@ -9589,7 +9589,7 @@
 
   var DefaultError = function DefaultError(_ref) {
     var message = _ref.message;
-    return /*#__PURE__*/React__default["default"].createElement(styled$4.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$4.Icon, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$5.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$5.Icon, {
       name: "exclamation_circle",
       color: "statusRed"
     }), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -9701,7 +9701,7 @@
     height: 'medium'
   };
 
-  var styled$3 = {
+  var styled$4 = {
     LinkWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__LinkWrapper",
       componentId: "sc-fhfdft-0"
@@ -9722,12 +9722,12 @@
         props = _objectWithoutProperties(_ref, _excluded$3);
 
     var renderIcon = function renderIcon() {
-      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$3.StyledIcon, {
+      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$4.StyledIcon, {
         name: icon
       }) : null;
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$3.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
+    return /*#__PURE__*/React__default["default"].createElement(styled$4.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
       href: href,
       target: target
     }, children || href));
@@ -9773,14 +9773,14 @@
   };
 
   var verticalCommonStyles = function verticalCommonStyles(open) {
-    return styled$h.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
+    return styled$i.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$h.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+    return styled$i.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
       var fullScreen = _ref2.fullScreen;
       return fullScreen && 'width: 100%';
     }, open ? '100%' : 0);
@@ -9789,16 +9789,16 @@
   var setPosition = function setPosition(position, open) {
     var positions = {
       top: function top() {
-        return styled$h.css(["", ";top:0;"], verticalCommonStyles(open));
+        return styled$i.css(["", ";top:0;"], verticalCommonStyles(open));
       },
       bottom: function bottom() {
-        return styled$h.css(["", ";bottom:0;"], verticalCommonStyles(open));
+        return styled$i.css(["", ";bottom:0;"], verticalCommonStyles(open));
       },
       left: function left() {
-        return styled$h.css(["", ";left:0;"], horizontalCommonStyles(open));
+        return styled$i.css(["", ";left:0;"], horizontalCommonStyles(open));
       },
       right: function right() {
-        return styled$h.css(["", ";right:0;"], horizontalCommonStyles(open));
+        return styled$i.css(["", ";right:0;"], horizontalCommonStyles(open));
       }
     };
     return positions[position];
@@ -9812,9 +9812,9 @@
         open = _ref3.open,
         transitionDuration = _ref3.transitionDuration;
     var transitionTime = transitionDuration / 1000;
-    return styled$h.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+    return styled$i.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
   });
-  var Content = styled__default["default"].div.withConfig({
+  var Content$1 = 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;"]);
@@ -9834,9 +9834,9 @@
     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$2 = {
+  var styled$3 = {
     Drawer: Drawer$1,
-    Content: Content,
+    Content: Content$1,
     Header: Header,
     CloseBtn: CloseBtn,
     Children: Children,
@@ -9858,16 +9858,16 @@
     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$2.Drawer, _extends$1({
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$3.Drawer, _extends$1({
       open: open,
       position: position,
       transitionDuration: transitionDuration,
       fullScreen: fullScreen,
       className: "drawer",
       ref: drawerRef
-    }, props), /*#__PURE__*/React__default["default"].createElement(styled$2.Content, {
+    }, props), /*#__PURE__*/React__default["default"].createElement(styled$3.Content, {
       className: "drawer__content"
-    }, /*#__PURE__*/React__default["default"].createElement(styled$2.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled$2.CloseBtn, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$3.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled$3.CloseBtn, {
       onClick: handleClose,
       type: "button",
       rounded: true
@@ -9876,7 +9876,7 @@
       name: "cross_light",
       width: 24,
       height: 24
-    }))), /*#__PURE__*/React__default["default"].createElement(styled$2.Children, null, children))), /*#__PURE__*/React__default["default"].createElement(styled$2.Overlay, {
+    }))), /*#__PURE__*/React__default["default"].createElement(styled$3.Children, null, children))), /*#__PURE__*/React__default["default"].createElement(styled$3.Overlay, {
       className: "drawer__overlay",
       transitionDuration: transitionDuration
     })));
@@ -15943,16 +15943,23 @@
   }
   Autocomplete.contextType = MapContext;
 
+  var Content = styled__default["default"].div.withConfig({
+    displayName: "styles__Content",
+    componentId: "sc-1sl7owm-0"
+  })(["padding:10px;"]);
+  var styled$2 = {
+    Content: Content
+  };
+
   var InfoWindow = function InfoWindow(_ref) {
     var infoWindowHandles = _ref.infoWindowHandles,
         data = _ref.data,
         children = _ref.children;
-
-    var infoWindowProps = _objectSpread2({}, infoWindowHandles);
-
-    return /*#__PURE__*/React__default["default"].createElement("div", infoWindowProps, /*#__PURE__*/React__default["default"].createElement(InfoWindow$1, {
+    return /*#__PURE__*/React__default["default"].createElement(InfoWindow$1, {
       position: data
-    }, children));
+    }, /*#__PURE__*/React__default["default"].createElement(styled$2.Content, _extends$1({
+      className: "google-map-component__info-window--content"
+    }, infoWindowHandles), children));
   };
 
   var getCoordsFromEvent = function getCoordsFromEvent() {
@@ -16003,11 +16010,12 @@
         position = _ref2.position,
         animation = _ref2.animation,
         overlay = _ref2.overlay,
-        infoWindowChildren = _ref2.infoWindowChildren,
         isDraggable = _ref2.isDraggable,
-        zIndex = _ref2.zIndex;
+        zIndex = _ref2.zIndex,
+        infoWindowOpen = _ref2.infoWindowOpen;
 
-    var _markerOptions$onLoad = markerOptions.onLoad,
+    var infoWindowContent = markerOptions.infoWindowContent,
+        _markerOptions$onLoad = markerOptions.onLoad,
         _onLoad = _markerOptions$onLoad === void 0 ? function () {} : _markerOptions$onLoad,
         _markerOptions$onClic = markerOptions.onClick,
         _onClick = _markerOptions$onClic === void 0 ? function () {} : _markerOptions$onClic,
@@ -16016,32 +16024,18 @@
         _markerOptions$onDrag2 = markerOptions.onDragStart,
         _onDragStart = _markerOptions$onDrag2 === void 0 ? function () {} : _markerOptions$onDrag2,
         _markerOptions$onDrag3 = markerOptions.onDragEnd,
-        _onDragEnd = _markerOptions$onDrag3 === void 0 ? function () {} : _markerOptions$onDrag3;
+        _onDragEnd = _markerOptions$onDrag3 === void 0 ? function () {} : _markerOptions$onDrag3,
+        _markerOptions$onMark = markerOptions.onMarkerMouseOver,
+        onMarkerMouseOver = _markerOptions$onMark === void 0 ? function () {} : _markerOptions$onMark,
+        _markerOptions$onMark2 = markerOptions.onMarkerMouseOut,
+        onMarkerMouseOut = _markerOptions$onMark2 === void 0 ? function () {} : _markerOptions$onMark2,
+        _markerOptions$onInfo = markerOptions.onInfoWindowMouseEnter,
+        onInfoWindowMouseEnter = _markerOptions$onInfo === void 0 ? function () {} : _markerOptions$onInfo,
+        _markerOptions$onInfo2 = markerOptions.onInfoWindowMouseLeave,
+        onInfoWindowMouseLeave = _markerOptions$onInfo2 === void 0 ? function () {} : _markerOptions$onInfo2;
 
     var markerRef = React.useRef(null);
     var timeoutRef = React.useRef(null);
-
-    var _useState3 = React.useState(false),
-        _useState4 = _slicedToArray(_useState3, 2),
-        infoWindowOpen = _useState4[0],
-        setInfoWindowOpen = _useState4[1];
-
-    var _useState5 = React.useState(false),
-        _useState6 = _slicedToArray(_useState5, 2),
-        mouseOverInfoWindow = _useState6[0],
-        setMouseOverInfoWindow = _useState6[1];
-
-    var openInfoWindow = function openInfoWindow() {
-      return setInfoWindowOpen(true);
-    };
-
-    var closeInfoWindow = function closeInfoWindow() {
-      return setInfoWindowOpen(false);
-    };
-
-    var delayedInfoWindowHover = debounce(function () {
-      if (!mouseOverInfoWindow) closeInfoWindow();
-    }, 100);
     React.useEffect(function () {
       setMarker(markerData);
     }, [markerData]);
@@ -16120,22 +16114,16 @@
       },
       onMouseOver: function onMouseOver() {
         if (isValidAnimation(animation)) stopAnimation();
-        openInfoWindow();
+        onMarkerMouseOver();
       },
       onMouseOut: function onMouseOut() {
         if (isValidAnimation(animation)) startAnimation();
-        delayedInfoWindowHover();
+        onMarkerMouseOut();
       }
     };
     var infoWindowHandles = {
-      onMouseEnter: function onMouseEnter() {
-        delayedInfoWindowHover.cancel();
-        setMouseOverInfoWindow(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        closeInfoWindow();
-        setMouseOverInfoWindow(false);
-      }
+      onMouseEnter: onInfoWindowMouseEnter,
+      onMouseLeave: onInfoWindowMouseLeave
     };
 
     var _getPixelPositionOffset = function getPixelPositionOffset(width) {
@@ -16152,11 +16140,11 @@
       getPixelPositionOffset: function getPixelPositionOffset(width) {
         return _getPixelPositionOffset(width);
       }
-    }, overlay()), infoWindowOpen && infoWindowChildren && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
+    }, overlay()), infoWindowOpen && infoWindowContent && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
       className: "google-map-component__info-window",
       data: position,
       infoWindowHandles: infoWindowHandles
-    }, infoWindowChildren()));
+    }, infoWindowContent()));
   };
 
   var Marker$1 = /*#__PURE__*/React__default["default"].memo(Marker, function (prev, next) {
@@ -16172,14 +16160,75 @@
         markers = _ref$markers === void 0 ? [] : _ref$markers,
         _ref$markerOptions = _ref.markerOptions,
         markerOptions = _ref$markerOptions === void 0 ? {} : _ref$markerOptions;
+
+    var _useState = React.useState(null),
+        _useState2 = _slicedToArray(_useState, 2),
+        activeMarkerId = _useState2[0],
+        setActiveMarkerId = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        mouseOverInfoWindow = _useState4[0],
+        setMouseOverInfoWindow = _useState4[1];
+
+    var openInfoWindow = function openInfoWindow(markerId) {
+      return setActiveMarkerId(markerId);
+    };
+
+    var closeInfoWindow = function closeInfoWindow() {
+      return setActiveMarkerId(null);
+    };
+
+    var infoWindowContent = markerOptions.infoWindowContent,
+        _markerOptions$onInfo = markerOptions.onInfoWindowChange,
+        onInfoWindowChange = _markerOptions$onInfo === void 0 ? function () {} : _markerOptions$onInfo;
+    var delayedInfoWindowHover = debounce(function () {
+      if (!mouseOverInfoWindow) closeInfoWindow();
+    }, 100);
+
+    var handleMarkerMouseOver = function handleMarkerMouseOver(markerId) {
+      if (!infoWindowContent) return;
+      onInfoWindowChange();
+      openInfoWindow(markerId);
+    };
+
+    var handleMarkerMouseOut = function handleMarkerMouseOut() {
+      return delayedInfoWindowHover();
+    };
+
+    var handleInfoWindowMouseEnter = function handleInfoWindowMouseEnter() {
+      delayedInfoWindowHover.cancel();
+      setMouseOverInfoWindow(true);
+    };
+
+    var handleInfoWindowMouseLeave = function handleInfoWindowMouseLeave() {
+      closeInfoWindow();
+      setMouseOverInfoWindow(false);
+    };
+
+    React.useEffect(function () {
+      return function () {
+        delayedInfoWindowHover.cancel();
+      };
+    }, []);
     if (!markers.length) return null;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, markers.map(function (marker, idx) {
       var _marker$position, _marker$position2;
 
+      var uniqueId = "".concat(marker === null || marker === void 0 ? void 0 : (_marker$position = marker.position) === null || _marker$position === void 0 ? void 0 : _marker$position.lat, "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position2 = marker.position) === null || _marker$position2 === void 0 ? void 0 : _marker$position2.lng, "/").concat(idx.toString());
       return /*#__PURE__*/React__default["default"].createElement(Marker$1, {
-        markerData: _objectSpread2({}, marker),
-        markerOptions: markerOptions,
-        key: "".concat(idx.toString(), "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position = marker.position) === null || _marker$position === void 0 ? void 0 : _marker$position.lat, "-").concat(marker === null || marker === void 0 ? void 0 : (_marker$position2 = marker.position) === null || _marker$position2 === void 0 ? void 0 : _marker$position2.lng),
+        markerData: _objectSpread2(_objectSpread2({}, marker), {}, {
+          infoWindowOpen: (marker === null || marker === void 0 ? void 0 : marker.showInfoWindow) || activeMarkerId === uniqueId
+        }),
+        markerOptions: _objectSpread2(_objectSpread2({}, markerOptions), {}, {
+          onMarkerMouseOver: function onMarkerMouseOver() {
+            return handleMarkerMouseOver(uniqueId);
+          },
+          onMarkerMouseOut: handleMarkerMouseOut,
+          onInfoWindowMouseEnter: handleInfoWindowMouseEnter,
+          onInfoWindowMouseLeave: handleInfoWindowMouseLeave
+        }),
+        key: uniqueId,
         readOnly: readOnly,
         markerIdx: idx
       });
@@ -35415,6 +35464,7 @@
     }, _objectSpread2({}, parsedData));
   });
 
+  var InfoWindowStyles = styled$i.createGlobalStyle([".gm-style-iw{&.gm-style-iw-c{padding:0 !important;border-radius:0;border:none;max-height:unset !important;}&-chr{display:none;}&-tc,button.gm-ui-hover-effect{display:none !important;}&-d{overflow:unset !important;max-height:unset !important;}}"]);
   var styled$1 = {
     LoadingElement: styled__default["default"].div.withConfig({
       displayName: "styles__LoadingElement",
@@ -35560,7 +35610,7 @@
       }
     }, [mapRef.current, markers]);
     if (!isLoaded) return null;
-    return /*#__PURE__*/React__default["default"].createElement(GoogleMap, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(InfoWindowStyles, null), /*#__PURE__*/React__default["default"].createElement(GoogleMap, _extends$1({
       className: "google-map-component",
       onLoad: onLoad,
       mapContainerStyle: {
@@ -35579,11 +35629,11 @@
       callbackOnSuccessDirections: callbackOnSuccessDirections,
       callbackOnErrorDirections: callbackOnErrorDirections,
       googleMapsApiKey: googleMapsApiKey
-    }));
+    })));
   });
   Map$1.displayName = 'Map';
 
-  var rotate = styled$h.keyframes(["to{transform:rotate(360deg);}"]);
+  var rotate = styled$i.keyframes(["to{transform:rotate(360deg);}"]);
   var Spinner$1 = styled__default["default"].div.withConfig({
     displayName: "styles__Spinner",
     componentId: "sc-1e490ps-0"
@@ -35593,7 +35643,7 @@
         size = _ref.size,
         thickness = _ref.thickness,
         backSpinnerColor = _ref.backSpinnerColor;
-    return styled$h.css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
+    return styled$i.css(["width:", "px;height:", "px;border-radius:50%;background-color:transparent;border-top:", "px solid ", ";border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";animation:", " ", "s linear infinite;position:absolute;"], size, size, thickness, getColor(color), thickness, getColor(color), thickness, getColor(color), thickness, getColor(backSpinnerColor), rotate, duration);
   });
   var SpinnerWrapper = styled__default["default"].div.withConfig({
     displayName: "styles__SpinnerWrapper",
@@ -35640,7 +35690,7 @@
     }), children && /*#__PURE__*/React__default["default"].createElement(styles$1.CenterContent, null, children));
   };
 
-  var show = styled$h.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+  var show = styled$i.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
   var Container = styled__default["default"].section.withConfig({
     displayName: "styles__Container",
     componentId: "sc-19kt9g-0"
@@ -35649,7 +35699,7 @@
     return backgroundColor;
   }, function (_ref2) {
     var effect = _ref2.effect;
-    return effect && styled$h.css(effect);
+    return effect && styled$i.css(effect);
   }, show);
   var LoaderContainer = styled__default["default"].div.withConfig({
     displayName: "styles__LoaderContainer",
@@ -35693,7 +35743,7 @@
 
   var progressAnimation = function progressAnimation() {
     var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    return styled$h.keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
+    return styled$i.keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
   };
 
   var ProgressFill = styled__default["default"].div.withConfig({
@@ -35713,7 +35763,7 @@
         _ref3$duration = _ref3.duration,
         duration = _ref3$duration === void 0 ? 1 : _ref3$duration;
     var scale = value / maxValue;
-    return animated && isNumber(duration) && duration > 0 ? styled$h.css(["animation:", " ", " linear forwards;"], progressAnimation(scale), "".concat(duration, "s")) : styled$h.css(["transform:scaleX(", ");"], scale);
+    return animated && isNumber(duration) && duration > 0 ? styled$i.css(["animation:", " ", " linear forwards;"], progressAnimation(scale), "".concat(duration, "s")) : styled$i.css(["transform:scaleX(", ");"], scale);
   });
   var styled = {
     Bar: Bar,