@janiscommerce/ui-web 1.2.0 → 1.4.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$i, global.ReactDOM));
-})(this, (function (exports, React, styled$i, ReactDOM) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('styled-components'), require('react-dom'), require('react-collapsed')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'styled-components', 'react-dom', 'react-collapsed'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.main = {}, global.React, global.styled$j, global.ReactDOM, global.reactCollapsed));
+})(this, (function (exports, React, styled$j, ReactDOM, reactCollapsed) { '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$i);
+  var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$j);
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
   var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 
@@ -4937,6 +4937,9 @@
   var isNumber = function isNumber(num) {
     return typeof num === 'number' && !Number.isNaN(Number(num));
   };
+  var isFunction = function isFunction(value) {
+    return typeof value === 'function';
+  };
 
   var breakpoints = {
     values: {
@@ -4966,25 +4969,25 @@
   };
   var mediaBreaks = {
     mobile: function mobile() {
-      return styled$i.css(["", "{", "}"], devices.mobile, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.mobile, styled$j.css.apply(void 0, arguments));
     },
     tablet: function tablet() {
-      return styled$i.css(["", "{", "}"], devices.tablet, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.tablet, styled$j.css.apply(void 0, arguments));
     },
     tabletLg: function tabletLg() {
-      return styled$i.css(["", "{", "}"], devices.tabletLg, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.tabletLg, styled$j.css.apply(void 0, arguments));
     },
     onlyDesktop: function onlyDesktop() {
-      return styled$i.css(["", "{", "}"], devices.onlyDesktop, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.onlyDesktop, styled$j.css.apply(void 0, arguments));
     },
     desktopSm: function desktopSm() {
-      return styled$i.css(["", "{", "}"], devices.desktopSm, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.desktopSm, styled$j.css.apply(void 0, arguments));
     },
     desktopLg: function desktopLg() {
-      return styled$i.css(["", "{", "}"], devices.desktopLg, styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["", "{", "}"], devices.desktopLg, styled$j.css.apply(void 0, arguments));
     },
     onlyPrint: function onlyPrint() {
-      return styled$i.css(["@media print{", "}"], styled$i.css.apply(void 0, arguments));
+      return styled$j.css(["@media print{", "}"], styled$j.css.apply(void 0, arguments));
     }
   };
 
@@ -5317,7 +5320,7 @@
     width: '100%'
   };
 
-  var styled$h = {
+  var styled$i = {
     Image: styled__default["default"].img.withConfig({
       displayName: "styles__Image",
       componentId: "sc-uljfj3-0"
@@ -5405,9 +5408,9 @@
     accelerate: 'cubic-bezier(0.4, 0.0, 1, 1)'
   };
   var mixins = {
-    flexCenter: styled$i.css(["display:flex;align-items:center;justify-content:center;"]),
+    flexCenter: styled$j.css(["display:flex;align-items:center;justify-content:center;"]),
     placeholder: function placeholder(styles) {
-      return styled$i.css(["&::-moz-placeholder{", "}&::-webkit-input-placeholder{", "}&:-moz-placeholder{", "}&:-ms-input-placeholder{", "}&::placeholder{", "}"], styles, styles, styles, styles, styles);
+      return styled$j.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 +5418,14 @@
       var transitionProperty;
       if (property.includes(',')) transitionProperty = "transition-property: ".concat(property);
       var transition = "".concat(property.split(',')[0], " ").concat(time, " ").concat(timingFunctions.standard);
-      return styled$i.css(["transition:", ";", ";"], transition, transitionProperty);
+      return styled$j.css(["transition:", ";", ";"], transition, transitionProperty);
     },
     scrollbar: function scrollbar(thumbColor, shadowColor) {
-      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);
+      return styled$j.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$g = {
+  var styled$h = {
     Initials: styled__default["default"].div.withConfig({
       displayName: "styles__Initials",
       componentId: "sc-qlu7od-0"
@@ -5446,7 +5449,7 @@
         mainColor = _ref.mainColor,
         imageSize = _ref.imageSize,
         rounded = _ref.rounded;
-    return /*#__PURE__*/React__default["default"].createElement(styled$g.Initials, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$h.Initials, {
       color: mainColor,
       size: imageSize,
       rounded: rounded
@@ -5612,7 +5615,7 @@
       imageSize: imageSize,
       rounded: rounded
     });
-    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$h.Image, {
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$i.Image, {
       ref: imageRef,
       src: url,
       alt: "".concat(firstname, " ").concat(lastname),
@@ -7131,19 +7134,19 @@
         variant = props.variant;
     var variantStyles = {
       outlined: function outlined() {
-        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);
+        return styled$j.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$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);
+        return styled$j.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$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 styled$j.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$f = {
+  var styled$g = {
     Chip: styled__default["default"].button.withConfig({
       displayName: "styles__Chip",
       componentId: "sc-1vnh4co-0"
@@ -7201,7 +7204,7 @@
         props = _objectWithoutProperties(_ref, _excluded$9);
 
     if (!children && !icon) return null;
-    return /*#__PURE__*/React__default["default"].createElement(styled$f.Chip, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$g.Chip, _extends$1({
       as: props.onClick ? 'button' : 'div',
       backgroundColor: backgroundColor,
       borderColor: borderColor,
@@ -7219,7 +7222,7 @@
       name: icon,
       color: iconColor,
       size: iconSize
-    }), children && /*#__PURE__*/React__default["default"].createElement(styled$f.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$f.DeleteButton, {
+    }), children && /*#__PURE__*/React__default["default"].createElement(styled$g.Children, null, children), onDelete && /*#__PURE__*/React__default["default"].createElement(styled$g.DeleteButton, {
       type: "button",
       onClick: onDelete
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -7241,14 +7244,14 @@
     hasLink: false
   };
 
-  var styled$e = {
+  var styled$f = {
     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$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;"]);
+      return showFull ? styled$j.css(["height:45px;padding-left:9px;padding-right:9px;max-width:inherit;&:hover,&:active{background:", ";}"], backgroundColor || palette.white) : styled$j.css(["height:33px;padding-left:5px;padding-right:5px;cursor:pointer;"]);
     }, function (_ref2) {
       var backgroundColor = _ref2.backgroundColor;
       return backgroundColor || palette.white;
@@ -7377,7 +7380,7 @@
         badgeColor = _ref.badgeColor;
     var extraCount = users.length > usersToDisplay ? users.length - usersToDisplay : 0;
     var hasExtraCount = extraCount > 0;
-    return /*#__PURE__*/React__default["default"].createElement(styled$e.AvatarGroup, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$f.AvatarGroup, {
       disabled: true,
       showFull: showFull
     }, /*#__PURE__*/React__default["default"].createElement(AvatarList, {
@@ -7446,7 +7449,7 @@
   };
 
   var commonStyles = function commonStyles(iconColor, fontColor, color) {
-    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);
+    return styled$j.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 +7459,10 @@
         iconColor = _ref.iconColor;
     var variantStyles = {
       contained: function contained() {
-        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);
+        return styled$j.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$i.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
+        return styled$j.css(["", ";border:1px solid ", ";"], commonStyles(iconColor, fontColor, color), getColor(grey));
       },
       cleaned: function cleaned() {
         return commonStyles(iconColor, fontColor, color);
@@ -7468,7 +7471,7 @@
     return variantStyles[variant] || '';
   };
 
-  var styled$d = {
+  var styled$e = {
     Button: styled__default["default"].button.withConfig({
       displayName: "styles__Button",
       componentId: "sc-buf2do-0"
@@ -7517,7 +7520,7 @@
         disabled = _ref.disabled,
         props = _objectWithoutProperties(_ref, _excluded$8);
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$d.Button, _extends$1({
+    return /*#__PURE__*/React__default["default"].createElement(styled$e.Button, _extends$1({
       color: color,
       iconColor: iconColor || fontColor,
       fontColor: fontColor,
@@ -7542,7 +7545,7 @@
     disabled: false
   };
 
-  var styled$c = {
+  var styled$d = {
     Container: styled__default["default"].label.withConfig({
       displayName: "styles__Container",
       componentId: "sc-18bfcwf-0"
@@ -7559,7 +7562,7 @@
       displayName: "styles__Input",
       componentId: "sc-18bfcwf-1"
     })(["opacity:0;position:absolute;cursor:pointer;"]),
-    iconCheckStyles: styled$i.css(["transform:translateY(-5%);fill:", ";", ""], getColor('white'), function (props) {
+    iconCheckStyles: styled$j.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 +7592,18 @@
 
     var _props$checked = props.checked,
         conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$c.Container, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$d.Container, {
       checked: conntroledChecked,
       rounded: rounded,
       styles: styles
-    }, /*#__PURE__*/React__default["default"].createElement(styled$c.Input, _extends$1({}, props, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$d.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$c.iconCheckStyles,
+      styles: styled$d.iconCheckStyles,
       rounded: rounded
     }));
   };
@@ -7612,7 +7615,7 @@
     }
   };
 
-  var styled$b = {
+  var styled$c = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-zbd85t-0"
@@ -7636,9 +7639,9 @@
         showLabel = _ref.showLabel;
     if (!color) return null;
     var colorCode = getColor(color);
-    return /*#__PURE__*/React__default["default"].createElement(styled$b.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$b.ColorSample, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$c.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$c.ColorSample, {
       color: colorCode
-    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$b.Label, {
+    }), showLabel && /*#__PURE__*/React__default["default"].createElement(styled$c.Label, {
       color: colorCode
     }, colorCode));
   };
@@ -7660,12 +7663,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$i.css(["position:absolute;fill:", ";", ""], function (props) {
+  var iconCheckStyles = styled$j.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$a = {
+  var styled$b = {
     OuterContainer: styled__default["default"].div.withConfig({
       displayName: "styles__OuterContainer",
       componentId: "sc-rtzdt3-1"
@@ -7715,10 +7718,10 @@
 
     var _props$checked = props.checked,
         controledChecked = _props$checked === void 0 ? checked : _props$checked;
-    return /*#__PURE__*/React__default["default"].createElement(styled$a.OuterContainer, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$b.OuterContainer, {
       disabled: disabled,
       checked: checked
-    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$b.Input, {
       checked: controledChecked,
       id: id,
       name: name,
@@ -7726,10 +7729,10 @@
       disabled: disabled,
       autoComplete: autoComplete ? 'on' : 'off',
       onChange: handleChange
-    }), /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
+    }), /*#__PURE__*/React__default["default"].createElement(styled$b.Container, {
       checked: controledChecked,
       disabled: disabled
-    }, /*#__PURE__*/React__default["default"].createElement(styled$a.Ball, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$b.Ball, {
       checked: controledChecked,
       disabled: disabled
     }, /*#__PURE__*/React__default["default"].createElement(Icon, {
@@ -7737,7 +7740,7 @@
       disabled: disabled,
       name: "check_bold",
       size: 16,
-      styles: styled$a.iconCheckStyles
+      styles: styled$b.iconCheckStyles
     }))));
   };
 
@@ -7819,7 +7822,7 @@
     return palette.black;
   };
 
-  var styled$9 = {
+  var styled$a = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-1fhkfhs-0"
@@ -7852,7 +7855,7 @@
     }, function (_ref4) {
       var hasIcon = _ref4.hasIcon;
       return hasIcon && "padding-left: 32px;";
-    }, mixins.placeholder(styled$i.css(["font-weight:400;color:", ";"], function (_ref5) {
+    }, mixins.placeholder(styled$j.css(["font-weight:400;color:", ";"], function (_ref5) {
       var error = _ref5.error;
       return error ? palette.statusRed : palette.darkGreyPressed;
     })), function (props) {
@@ -7972,11 +7975,11 @@
 
         var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
         var isFloating = isFocused || !!value.toString();
-        return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
           fullWidth: props.fullWidth
-        }, /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
+        }, /*#__PURE__*/React__default["default"].createElement(styled$a.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$9.FloatingLabel, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$a.FloatingLabel, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -7985,10 +7988,10 @@
           isFloating: isFloating,
           hasIcon: !!icon,
           isTranslateActive: isTranslateActive
-        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$9.InputIcon, {
+        }, props.label), icon && /*#__PURE__*/React__default["default"].createElement(styled$a.InputIcon, {
           name: icon,
           color: error ? 'statusRed' : 'black'
-        }), /*#__PURE__*/React__default["default"].createElement(styled$9.Input, _extends$1({}, props, {
+        }), /*#__PURE__*/React__default["default"].createElement(styled$a.Input, _extends$1({}, props, {
           ref: this.input,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -8001,7 +8004,7 @@
           error: error,
           hasIcon: !!icon,
           onAnimationStart: this.handleFocus
-        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$9.ErrorMessage, {
+        }))), error && /*#__PURE__*/React__default["default"].createElement(styled$a.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -8047,7 +8050,7 @@
     return palette.darkGreyPressed;
   };
 
-  var styled$8 = {
+  var styled$9 = {
     Container: styled__default["default"].div.withConfig({
       displayName: "styles__Container",
       componentId: "sc-wtau65-0"
@@ -8059,7 +8062,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$i.css(["opacity:1;color:", ";"], function (props) {
+    }, mixins.placeholder(styled$j.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 +8189,9 @@
             var props = _objectWithoutProperties(_this$props, _excluded$4);
 
         var isFloating = isFocused || !!value;
-        return /*#__PURE__*/React__default["default"].createElement(styled$8.Container, {
+        return /*#__PURE__*/React__default["default"].createElement(styled$9.Container, {
           fullWidth: props.fullWidth
-        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$8.FloatingLabel, _extends$1({}, props, {
+        }, hasFloatingLabel && /*#__PURE__*/React__default["default"].createElement(styled$9.FloatingLabel, _extends$1({}, props, {
           "data-test": "floatingLabel",
           error: error,
           onClick: this.handleLabelClick,
@@ -8196,7 +8199,7 @@
           isFocused: isFocused,
           isFloating: isFloating,
           isTranslateActive: isTranslateActive
-        }), label), /*#__PURE__*/React__default["default"].createElement(styled$8.Textarea, _extends$1({}, props, {
+        }), label), /*#__PURE__*/React__default["default"].createElement(styled$9.Textarea, _extends$1({}, props, {
           ref: this.textarea,
           placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
           onBlur: this.handleBlur,
@@ -8207,7 +8210,7 @@
           value: value,
           autoComplete: autoComplete ? 'on' : 'off',
           disabled: disabled
-        })), error && /*#__PURE__*/React__default["default"].createElement(styled$8.ErrorMessage, {
+        })), error && /*#__PURE__*/React__default["default"].createElement(styled$9.ErrorMessage, {
           "data-test": "errorMessage"
         }, errorMessage));
       }
@@ -8275,7 +8278,7 @@
     return 'initial';
   };
 
-  var styled$7 = {
+  var styled$8 = {
     ImageWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ImageWrapper",
       componentId: "sc-vrvp1c-0"
@@ -8321,7 +8324,7 @@
         errorImage = _useState2[0],
         setErrorImage = _useState2[1];
 
-    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$7.ImageWrapper, {
+    return errorImage ? /*#__PURE__*/React__default["default"].createElement(styled$8.ImageWrapper, {
       background: background,
       width: width || height,
       height: height || width
@@ -8329,7 +8332,7 @@
       name: errorImage,
       size: (width || height) * 0.35 || 20,
       color: palette.lightGreyPressed
-    })) : /*#__PURE__*/React__default["default"].createElement(styled$7.Image, {
+    })) : /*#__PURE__*/React__default["default"].createElement(styled$8.Image, {
       src: url,
       alt: altText || url,
       width: width,
@@ -9129,7 +9132,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$6 = {
+  var styled$7 = {
     ClickableWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__ClickableWrapper",
       componentId: "sc-lreg3c-0"
@@ -9194,13 +9197,13 @@
     var value = colorValue || DEFAULT_COLOR;
 
     if (isCollapsable) {
-      return /*#__PURE__*/React__default["default"].createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ClickableWrapper, {
+      return /*#__PURE__*/React__default["default"].createElement(styled$7.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$7.ClickableWrapper, {
         "data-test": "collapsible-picker",
         color: value,
         role: "presentation",
         onClick: toggleStateVisible,
         error: error
-      }, /*#__PURE__*/React__default["default"].createElement(styled$6.Input, {
+      }, /*#__PURE__*/React__default["default"].createElement(styled$7.Input, {
         value: colorValue,
         fullWidth: true,
         onChange: function onChange(_ref2) {
@@ -9209,10 +9212,10 @@
         },
         errorMessage: errorMessage,
         error: error
-      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$6.ClosePickerWrapper, {
+      })), pickerVisible && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$7.ClosePickerWrapper, {
         onClick: handleClosePicker,
         role: "presentation"
-      }), /*#__PURE__*/React__default["default"].createElement(styled$6.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
+      }), /*#__PURE__*/React__default["default"].createElement(styled$7.PickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(J, {
         color: value,
         onChange: change
       }))));
@@ -9576,7 +9579,7 @@
 
   var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib$1);
 
-  var styled$5 = {
+  var styled$6 = {
     Wrapper: styled__default["default"].div.withConfig({
       displayName: "styles__Wrapper",
       componentId: "sc-3jodl7-0"
@@ -9589,7 +9592,7 @@
 
   var DefaultError = function DefaultError(_ref) {
     var message = _ref.message;
-    return /*#__PURE__*/React__default["default"].createElement(styled$5.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$5.Icon, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default["default"].createElement(styled$6.Icon, {
       name: "exclamation_circle",
       color: "statusRed"
     }), /*#__PURE__*/React__default["default"].createElement("p", {
@@ -9701,7 +9704,7 @@
     height: 'medium'
   };
 
-  var styled$4 = {
+  var styled$5 = {
     LinkWrapper: styled__default["default"].div.withConfig({
       displayName: "styles__LinkWrapper",
       componentId: "sc-fhfdft-0"
@@ -9722,12 +9725,12 @@
         props = _objectWithoutProperties(_ref, _excluded$3);
 
     var renderIcon = function renderIcon() {
-      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$4.StyledIcon, {
+      return icon ? /*#__PURE__*/React__default["default"].createElement(styled$5.StyledIcon, {
         name: icon
       }) : null;
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(styled$4.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
+    return /*#__PURE__*/React__default["default"].createElement(styled$5.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default["default"].createElement("a", {
       href: href,
       target: target
     }, children || href));
@@ -9773,14 +9776,14 @@
   };
 
   var verticalCommonStyles = function verticalCommonStyles(open) {
-    return styled$i.css(["width:100%;", ";max-height:", ";left:0;right:0;"], function (_ref) {
+    return styled$j.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$i.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
+    return styled$j.css(["height:100%;", ";max-width:", ";top:0;"], function (_ref2) {
       var fullScreen = _ref2.fullScreen;
       return fullScreen && 'width: 100%';
     }, open ? '100%' : 0);
@@ -9789,16 +9792,16 @@
   var setPosition = function setPosition(position, open) {
     var positions = {
       top: function top() {
-        return styled$i.css(["", ";top:0;"], verticalCommonStyles(open));
+        return styled$j.css(["", ";top:0;"], verticalCommonStyles(open));
       },
       bottom: function bottom() {
-        return styled$i.css(["", ";bottom:0;"], verticalCommonStyles(open));
+        return styled$j.css(["", ";bottom:0;"], verticalCommonStyles(open));
       },
       left: function left() {
-        return styled$i.css(["", ";left:0;"], horizontalCommonStyles(open));
+        return styled$j.css(["", ";left:0;"], horizontalCommonStyles(open));
       },
       right: function right() {
-        return styled$i.css(["", ";right:0;"], horizontalCommonStyles(open));
+        return styled$j.css(["", ";right:0;"], horizontalCommonStyles(open));
       }
     };
     return positions[position];
@@ -9812,7 +9815,7 @@
         open = _ref3.open,
         transitionDuration = _ref3.transitionDuration;
     var transitionTime = transitionDuration / 1000;
-    return styled$i.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
+    return styled$j.css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
   });
   var Content$1 = styled__default["default"].div.withConfig({
     displayName: "styles__Content",
@@ -9834,7 +9837,7 @@
     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$3 = {
+  var styled$4 = {
     Drawer: Drawer$1,
     Content: Content$1,
     Header: Header,
@@ -9858,16 +9861,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$3.Drawer, _extends$1({
+    }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(styled$4.Drawer, _extends$1({
       open: open,
       position: position,
       transitionDuration: transitionDuration,
       fullScreen: fullScreen,
       className: "drawer",
       ref: drawerRef
-    }, props), /*#__PURE__*/React__default["default"].createElement(styled$3.Content, {
+    }, props), /*#__PURE__*/React__default["default"].createElement(styled$4.Content, {
       className: "drawer__content"
-    }, /*#__PURE__*/React__default["default"].createElement(styled$3.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled$3.CloseBtn, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$4.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default["default"].createElement(styled$4.CloseBtn, {
       onClick: handleClose,
       type: "button",
       rounded: true
@@ -9876,7 +9879,7 @@
       name: "cross_light",
       width: 24,
       height: 24
-    }))), /*#__PURE__*/React__default["default"].createElement(styled$3.Children, null, children))), /*#__PURE__*/React__default["default"].createElement(styled$3.Overlay, {
+    }))), /*#__PURE__*/React__default["default"].createElement(styled$4.Children, null, children))), /*#__PURE__*/React__default["default"].createElement(styled$4.Overlay, {
       className: "drawer__overlay",
       transitionDuration: transitionDuration
     })));
@@ -15947,17 +15950,27 @@
     displayName: "styles__Content",
     componentId: "sc-1sl7owm-0"
   })(["padding:10px;"]);
-  var styled$2 = {
+  var styled$3 = {
     Content: Content
   };
 
   var InfoWindow = function InfoWindow(_ref) {
-    var infoWindowHandles = _ref.infoWindowHandles,
-        data = _ref.data,
+    var data = _ref.data,
+        _ref$infoWindowOption = _ref.infoWindowOptions,
+        infoWindowOptions = _ref$infoWindowOption === void 0 ? {} : _ref$infoWindowOption,
+        infoWindowHandles = _ref.infoWindowHandles,
         children = _ref.children;
+    var _infoWindowOptions$in = infoWindowOptions.infoWindowPosition,
+        infoWindowPosition = _infoWindowOptions$in === void 0 ? {} : _infoWindowOptions$in;
+    var pixelOffset = React.useMemo(function () {
+      return new window.google.maps.Size(isNumber(infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.x) ? infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.x : 0, isNumber(infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.y) ? infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.y : -35);
+    }, [infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.x, infoWindowPosition === null || infoWindowPosition === void 0 ? void 0 : infoWindowPosition.y]);
     return /*#__PURE__*/React__default["default"].createElement(InfoWindow$1, {
-      position: data
-    }, /*#__PURE__*/React__default["default"].createElement(styled$2.Content, _extends$1({
+      position: data,
+      options: {
+        pixelOffset: pixelOffset
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(styled$3.Content, _extends$1({
       className: "google-map-component__info-window--content"
     }, infoWindowHandles), children));
   };
@@ -16015,6 +16028,8 @@
         infoWindowOpen = _ref2.infoWindowOpen;
 
     var infoWindowContent = markerOptions.infoWindowContent,
+        _markerOptions$infoWi = markerOptions.infoWindowOptions,
+        infoWindowOptions = _markerOptions$infoWi === void 0 ? {} : _markerOptions$infoWi,
         _markerOptions$onLoad = markerOptions.onLoad,
         _onLoad = _markerOptions$onLoad === void 0 ? function () {} : _markerOptions$onLoad,
         _markerOptions$onClic = markerOptions.onClick,
@@ -16143,6 +16158,7 @@
     }, overlay()), infoWindowOpen && infoWindowContent && /*#__PURE__*/React__default["default"].createElement(InfoWindow, {
       className: "google-map-component__info-window",
       data: position,
+      infoWindowOptions: infoWindowOptions,
       infoWindowHandles: infoWindowHandles
     }, infoWindowContent(markerData)));
   };
@@ -35464,8 +35480,8 @@
     }, _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 = {
+  var InfoWindowStyles = styled$j.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$2 = {
     LoadingElement: styled__default["default"].div.withConfig({
       displayName: "styles__LoadingElement",
       componentId: "sc-z1wxm2-0"
@@ -35525,7 +35541,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StandaloneSearchBox, {
       onPlacesChanged: onPlacesChanged,
       onLoad: onLoad
-    }, /*#__PURE__*/React__default["default"].createElement(styled$1.SearchBoxWrapper, null, /*#__PURE__*/React__default["default"].createElement(Input, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$2.SearchBoxWrapper, null, /*#__PURE__*/React__default["default"].createElement(Input, {
       placeholder: "Search",
       hasFloatingLabel: false
     })));
@@ -35633,7 +35649,7 @@
   });
   Map$1.displayName = 'Map';
 
-  var rotate = styled$i.keyframes(["to{transform:rotate(360deg);}"]);
+  var rotate = styled$j.keyframes(["to{transform:rotate(360deg);}"]);
   var Spinner$1 = styled__default["default"].div.withConfig({
     displayName: "styles__Spinner",
     componentId: "sc-1e490ps-0"
@@ -35643,7 +35659,7 @@
         size = _ref.size,
         thickness = _ref.thickness,
         backSpinnerColor = _ref.backSpinnerColor;
-    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);
+    return styled$j.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",
@@ -35690,7 +35706,7 @@
     }), children && /*#__PURE__*/React__default["default"].createElement(styles$1.CenterContent, null, children));
   };
 
-  var show = styled$i.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
+  var show = styled$j.keyframes(["0%{opacity:0;}to{opacity:1;}"]);
   var Container = styled__default["default"].section.withConfig({
     displayName: "styles__Container",
     componentId: "sc-19kt9g-0"
@@ -35699,7 +35715,7 @@
     return backgroundColor;
   }, function (_ref2) {
     var effect = _ref2.effect;
-    return effect && styled$i.css(effect);
+    return effect && styled$j.css(effect);
   }, show);
   var LoaderContainer = styled__default["default"].div.withConfig({
     displayName: "styles__LoaderContainer",
@@ -35743,7 +35759,7 @@
 
   var progressAnimation = function progressAnimation() {
     var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-    return styled$i.keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
+    return styled$j.keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
   };
 
   var ProgressFill = styled__default["default"].div.withConfig({
@@ -35763,9 +35779,9 @@
         _ref3$duration = _ref3.duration,
         duration = _ref3$duration === void 0 ? 1 : _ref3$duration;
     var scale = value / maxValue;
-    return animated && isNumber(duration) && duration > 0 ? styled$i.css(["animation:", " ", " linear forwards;"], progressAnimation(scale), "".concat(duration, "s")) : styled$i.css(["transform:scaleX(", ");"], scale);
+    return animated && isNumber(duration) && duration > 0 ? styled$j.css(["animation:", " ", " linear forwards;"], progressAnimation(scale), "".concat(duration, "s")) : styled$j.css(["transform:scaleX(", ");"], scale);
   });
-  var styled = {
+  var styled$1 = {
     Bar: Bar,
     ProgressFill: ProgressFill
   };
@@ -35792,7 +35808,7 @@
         color = _ref$color === void 0 ? 'blue' : _ref$color;
     if (!isValidValue(value) || !isValidMaxValue(maxValue) || value > maxValue) return null;
     var progress = Math.max(0, Math.min(maxValue, value));
-    return /*#__PURE__*/React__default["default"].createElement(styled.Bar, {
+    return /*#__PURE__*/React__default["default"].createElement(styled$1.Bar, {
       height: height,
       role: "progressbar",
       "aria-valuemin": 0,
@@ -35800,7 +35816,7 @@
       "aria-valuenow": animated ? undefined : Math.round(progress),
       "aria-busy": animated || undefined,
       "aria-valuetext": animated ? undefined : "".concat(Math.round(progress / maxValue * 100), "%")
-    }, /*#__PURE__*/React__default["default"].createElement(styled.ProgressFill, {
+    }, /*#__PURE__*/React__default["default"].createElement(styled$1.ProgressFill, {
       value: progress,
       maxValue: maxValue,
       animated: animated,
@@ -35809,12 +35825,155 @@
     }));
   };
 
+  var Wrapper = styled__default["default"].div.withConfig({
+    displayName: "styles__Wrapper",
+    componentId: "sc-mlx2bu-0"
+  })(["border-radius:3px;background-color:", ";"], palette.white);
+  var HeaderWrapper = styled__default["default"].div.withConfig({
+    displayName: "styles__HeaderWrapper",
+    componentId: "sc-mlx2bu-1"
+  })(["display:flex;gap:16px;", ";align-items:center;padding:8px 16px;"], function (_ref) {
+    var position = _ref.position;
+    return position === 'right' && 'flex-direction: row-reverse';
+  });
+  var CollapseButton = styled__default["default"](Button).withConfig({
+    displayName: "styles__CollapseButton",
+    componentId: "sc-mlx2bu-2"
+  })(["padding:0;&:hover,&:focus,&:active{background-color:transparent;}"]);
+  var ContentWrapper = styled__default["default"].section.withConfig({
+    displayName: "styles__ContentWrapper",
+    componentId: "sc-mlx2bu-3"
+  })(["padding:16px;border-top:", ";"], function (_ref2) {
+    var contentBorder = _ref2.contentBorder;
+    return "1px solid ".concat(contentBorder ? palette.blue : 'transparent');
+  });
+  var styled = {
+    Wrapper: Wrapper,
+    HeaderWrapper: HeaderWrapper,
+    CollapseButton: CollapseButton,
+    ContentWrapper: ContentWrapper
+  };
+
+  var AVAILABLE_ICONS = ['minus_big_light', 'plus_big_light', 'arrow_down_flat', 'arrow_up_flat'];
+  var DEFAULT_TOGGLE_ICON = {
+    iconNames: {
+      opened: 'minus_big_light',
+      closed: 'plus_big_light'
+    },
+    color: 'blue',
+    position: 'left'
+  };
+
+  var getIcon = function getIcon(iconName) {
+    return AVAILABLE_ICONS.includes(iconName) ? iconName : null;
+  };
+
+  var Collapse = function Collapse(_ref) {
+    var _ref$disabled = _ref.disabled,
+        disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+        _ref$isOpen = _ref.isOpen,
+        isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+        renderHeader = _ref.renderHeader,
+        renderContent = _ref.renderContent,
+        _ref$toggleIcon = _ref.toggleIcon,
+        toggleIcon = _ref$toggleIcon === void 0 ? {} : _ref$toggleIcon,
+        _ref$contentBorder = _ref.contentBorder,
+        contentBorder = _ref$contentBorder === void 0 ? true : _ref$contentBorder,
+        _ref$expandStartHandl = _ref.expandStartHandler,
+        expandStartHandler = _ref$expandStartHandl === void 0 ? function () {} : _ref$expandStartHandl,
+        _ref$expandingHandler = _ref.expandingHandler,
+        expandingHandler = _ref$expandingHandler === void 0 ? function () {} : _ref$expandingHandler,
+        _ref$expandEndHandler = _ref.expandEndHandler,
+        expandEndHandler = _ref$expandEndHandler === void 0 ? function () {} : _ref$expandEndHandler,
+        _ref$collapseStartHan = _ref.collapseStartHandler,
+        collapseStartHandler = _ref$collapseStartHan === void 0 ? function () {} : _ref$collapseStartHan,
+        _ref$collapsingHandle = _ref.collapsingHandler,
+        collapsingHandler = _ref$collapsingHandle === void 0 ? function () {} : _ref$collapsingHandle,
+        _ref$collapseEndHandl = _ref.collapseEndHandler,
+        collapseEndHandler = _ref$collapseEndHandl === void 0 ? function () {} : _ref$collapseEndHandl;
+
+    var _useState = React.useState(isOpen),
+        _useState2 = _slicedToArray(_useState, 2),
+        isOpenState = _useState2[0],
+        setIsOpenState = _useState2[1];
+
+    var collapseState = React.useMemo(function () {
+      return {
+        expandStart: expandStartHandler,
+        expanding: expandingHandler,
+        expandEnd: expandEndHandler,
+        collapseStart: collapseStartHandler,
+        collapsing: collapsingHandler,
+        collapseEnd: collapseEndHandler
+      };
+    }, [expandStartHandler, expandingHandler, expandEndHandler, collapseStartHandler, collapsingHandler, collapseEndHandler]);
+
+    var triggerHandler = function triggerHandler(state) {
+      var _collapseState$state;
+
+      return (_collapseState$state = collapseState[state]) === null || _collapseState$state === void 0 ? void 0 : _collapseState$state.call(collapseState);
+    };
+
+    var _useCollapse = reactCollapsed.useCollapse({
+      isExpanded: isOpenState,
+      onTransitionStateChange: function onTransitionStateChange(state) {
+        return !disabled && triggerHandler(state);
+      }
+    }),
+        getCollapseProps = _useCollapse.getCollapseProps,
+        getToggleProps = _useCollapse.getToggleProps;
+
+    var _DEFAULT_TOGGLE_ICON$ = _objectSpread2(_objectSpread2({}, DEFAULT_TOGGLE_ICON), toggleIcon),
+        _DEFAULT_TOGGLE_ICON$2 = _DEFAULT_TOGGLE_ICON$.iconNames,
+        iconNames = _DEFAULT_TOGGLE_ICON$2 === void 0 ? {} : _DEFAULT_TOGGLE_ICON$2,
+        _DEFAULT_TOGGLE_ICON$3 = _DEFAULT_TOGGLE_ICON$.color,
+        color = _DEFAULT_TOGGLE_ICON$3 === void 0 ? '' : _DEFAULT_TOGGLE_ICON$3,
+        _DEFAULT_TOGGLE_ICON$4 = _DEFAULT_TOGGLE_ICON$.position,
+        position = _DEFAULT_TOGGLE_ICON$4 === void 0 ? '' : _DEFAULT_TOGGLE_ICON$4;
+
+    var handleClick = React.useCallback(function () {
+      return setIsOpenState(function (prevOpenState) {
+        return !prevOpenState;
+      });
+    }, []);
+
+    var togglePropsParams = _objectSpread2({}, !disabled && {
+      onClick: handleClick
+    });
+
+    var buttonProps = {
+      className: 'collapse__collapseButton',
+      icon: isOpenState ? getIcon(iconNames === null || iconNames === void 0 ? void 0 : iconNames.opened) || 'minus_big_light' : getIcon(iconNames === null || iconNames === void 0 ? void 0 : iconNames.closed) || 'plus_big_light',
+      iconColor: color,
+      disabled: disabled
+    };
+    React.useEffect(function () {
+      setIsOpenState(isOpen);
+    }, [isOpen]);
+    if (!renderHeader || !isFunction(renderHeader) || !renderContent || !isFunction(renderContent)) return null;
+    return /*#__PURE__*/React__default["default"].createElement(styled.Wrapper, {
+      className: "collapse",
+      isOpen: isOpenState
+    }, /*#__PURE__*/React__default["default"].createElement(styled.HeaderWrapper, _extends$1({
+      className: "collapse__header"
+    }, getToggleProps(togglePropsParams), {
+      isOpen: isOpenState,
+      position: position
+    }), /*#__PURE__*/React__default["default"].createElement(styled.CollapseButton, buttonProps), renderHeader()), /*#__PURE__*/React__default["default"].createElement("div", getCollapseProps(), /*#__PURE__*/React__default["default"].createElement(styled.ContentWrapper, {
+      className: "collapse__content",
+      contentBorder: contentBorder
+    }, renderContent())));
+  };
+
+  var Collapse$1 = /*#__PURE__*/React__default["default"].memo(Collapse);
+
   exports.Avatar = Avatar;
   exports.AvatarGroup = AvatarGroup$1;
   exports.Button = Button;
   exports.Checkbox = Checkbox;
   exports.Chip = Chip;
   exports.ClickAwayListener = ClickAwayListener;
+  exports.Collapse = Collapse$1;
   exports.Color = Color;
   exports.ColorPicker = ColorPicker;
   exports.Drawer = Drawer;