@janiscommerce/ui-web 1.3.0 → 1.4.0

package/dist/index.esm.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, PureComponent, useMemo, useCallback, useLayoutEffect, createContext, forwardRef, useImperativeHandle } from 'react';
-import styled$i, { css, createGlobalStyle, keyframes } from 'styled-components';
+import styled$j, { css, createGlobalStyle, keyframes } from 'styled-components';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
+import { useCollapse } from 'react-collapsed';
 
 function ownKeys$2(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -4911,6 +4912,9 @@ var isObject$2 = function isObject(value) {
 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: {
@@ -5246,7 +5250,7 @@ $$b({ target: 'Array', stat: true, forced: INCORRECT_ITERATION$1 }, {
   from: from
 });
 
-var SkeletonContainer = styled$i.div.withConfig({
+var SkeletonContainer = styled$j.div.withConfig({
   displayName: "styles__SkeletonContainer",
   componentId: "sc-1xnupv9-0"
 })(["border-radius:", ";height:", ";width:", ";background-color:", ";animation:pulse 1.5s ease-in-out infinite;@keyframes pulse{0%{opacity:0.4;}50%{opacity:0.8;}100%{opacity:0.4;}}"], function (_ref) {
@@ -5291,8 +5295,8 @@ Skeleton.defaultProps = {
   width: '100%'
 };
 
-var styled$h = {
-  Image: styled$i.img.withConfig({
+var styled$i = {
+  Image: styled$j.img.withConfig({
     displayName: "styles__Image",
     componentId: "sc-uljfj3-0"
   })(["width:", ";height:", ";display:", ";border-radius:", ";"], function (_ref) {
@@ -5396,8 +5400,8 @@ var mixins = {
   }
 };
 
-var styled$g = {
-  Initials: styled$i.div.withConfig({
+var styled$h = {
+  Initials: styled$j.div.withConfig({
     displayName: "styles__Initials",
     componentId: "sc-qlu7od-0"
   })(["width:", ";height:", ";border-radius:", ";font-weight:500;color:", ";background-color:", ";text-transform:uppercase;", ";"], function (_ref) {
@@ -5420,7 +5424,7 @@ var InitialsAvatar = function InitialsAvatar(_ref) {
       mainColor = _ref.mainColor,
       imageSize = _ref.imageSize,
       rounded = _ref.rounded;
-  return /*#__PURE__*/React__default.createElement(styled$g.Initials, {
+  return /*#__PURE__*/React__default.createElement(styled$h.Initials, {
     color: mainColor,
     size: imageSize,
     rounded: rounded
@@ -5586,7 +5590,7 @@ var Avatar = function Avatar(_ref) {
     imageSize: imageSize,
     rounded: rounded
   });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$h.Image, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$i.Image, {
     ref: imageRef,
     src: url,
     alt: "".concat(firstname, " ").concat(lastname),
@@ -5630,7 +5634,7 @@ $$7({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, {
 
 var _templateObject$4;
 var styles$2 = {
-  Svg: styled$i.svg.withConfig({
+  Svg: styled$j.svg.withConfig({
     displayName: "styles__Svg",
     componentId: "sc-jf3e5i-0"
   })(["fill:", ";", " ", ";", ";"], function (props) {
@@ -5638,7 +5642,7 @@ var styles$2 = {
   }, mediaBreaks.onlyPrint(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n\t\t\tfill: ", ";\n\t\t"])), palette.darkGrey), mixins.transition('fill'), function (props) {
     return props.styles;
   }),
-  Path: styled$i.path.withConfig({
+  Path: styled$j.path.withConfig({
     displayName: "styles__Path",
     componentId: "sc-jf3e5i-1"
   })(["fill:inherit;", ";"], function (props) {
@@ -5646,15 +5650,15 @@ var styles$2 = {
   })
 };
 ({
-  Grid: styled$i.div.withConfig({
+  Grid: styled$j.div.withConfig({
     displayName: "styles__Grid",
     componentId: "sc-jf3e5i-2"
   })(["display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));grid-gap:15px;"]),
-  Item: styled$i.div.withConfig({
+  Item: styled$j.div.withConfig({
     displayName: "styles__Item",
     componentId: "sc-jf3e5i-3"
   })(["padding:5px;border:1px dashed #ccc;cursor:default;display:grid;justify-items:center;justify-content:center;grid-row-gap:5px;", ";& ", "{", ";}&:hover{color:", ";}&:hover ", "{fill:", ";}"], mixins.transition('color'), styles$2.Svg, mixins.transition('fill'), palette.blue, styles$2.Svg, palette.blue),
-  SearchInput: styled$i.input.withConfig({
+  SearchInput: styled$j.input.withConfig({
     displayName: "styles__SearchInput",
     componentId: "sc-jf3e5i-4"
   })(["margin-bottom:10px;padding:5px;"])
@@ -7117,8 +7121,8 @@ var getChipVariant = function getChipVariant(props) {
   return variantStyles[variant] || '';
 };
 
-var styled$f = {
-  Chip: styled$i.button.withConfig({
+var styled$g = {
+  Chip: styled$j.button.withConfig({
     displayName: "styles__Chip",
     componentId: "sc-1vnh4co-0"
   })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", ";", ";", " ", " ", " ", ""], function (props) {
@@ -7146,11 +7150,11 @@ var styled$f = {
   }, function (props) {
     return props.textColor && "color: ".concat(getColor(props.textColor), ";");
   }, mediaBreaks.onlyPrint(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n\t\t\tborder: 1px solid ", ";\n\t\t"])), palette.darkGrey)),
-  DeleteButton: styled$i.button.withConfig({
+  DeleteButton: styled$j.button.withConfig({
     displayName: "styles__DeleteButton",
     componentId: "sc-1vnh4co-1"
   })(["width:16px;height:16px;margin-left:12px;"]),
-  Children: styled$i.div.withConfig({
+  Children: styled$j.div.withConfig({
     displayName: "styles__Children",
     componentId: "sc-1vnh4co-2"
   })(["text-overflow:ellipsis;overflow:hidden;"])
@@ -7175,7 +7179,7 @@ var Chip = function Chip(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$9);
 
   if (!children && !icon) return null;
-  return /*#__PURE__*/React__default.createElement(styled$f.Chip, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styled$g.Chip, _extends$1({
     as: props.onClick ? 'button' : 'div',
     backgroundColor: backgroundColor,
     borderColor: borderColor,
@@ -7193,7 +7197,7 @@ var Chip = function Chip(_ref) {
     name: icon,
     color: iconColor,
     size: iconSize
-  }), children && /*#__PURE__*/React__default.createElement(styled$f.Children, null, children), onDelete && /*#__PURE__*/React__default.createElement(styled$f.DeleteButton, {
+  }), children && /*#__PURE__*/React__default.createElement(styled$g.Children, null, children), onDelete && /*#__PURE__*/React__default.createElement(styled$g.DeleteButton, {
     type: "button",
     onClick: onDelete
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7215,8 +7219,8 @@ Chip.defaultProps = {
   hasLink: false
 };
 
-var styled$e = {
-  AvatarGroup: styled$i(Chip).withConfig({
+var styled$f = {
+  AvatarGroup: styled$j(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) {
@@ -7351,7 +7355,7 @@ var AvatarGroup = function AvatarGroup(_ref) {
       badgeColor = _ref.badgeColor;
   var extraCount = users.length > usersToDisplay ? users.length - usersToDisplay : 0;
   var hasExtraCount = extraCount > 0;
-  return /*#__PURE__*/React__default.createElement(styled$e.AvatarGroup, {
+  return /*#__PURE__*/React__default.createElement(styled$f.AvatarGroup, {
     disabled: true,
     showFull: showFull
   }, /*#__PURE__*/React__default.createElement(AvatarList, {
@@ -7442,8 +7446,8 @@ var getButtonStyles = function getButtonStyles(_ref) {
   return variantStyles[variant] || '';
 };
 
-var styled$d = {
-  Button: styled$i.button.withConfig({
+var styled$e = {
+  Button: styled$j.button.withConfig({
     displayName: "styles__Button",
     componentId: "sc-buf2do-0"
   })(["display:flex;align-items:center;justify-content:center;height:36px;width:", ";flex-shrink:", ";border-radius:", ";padding:", ";cursor:", ";border:none;font-size:13px;font-weight:500;position:relative;", ";z-index:0;&:before{content:'';border-radius:50px;position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;}&:after{content:'';border-radius:50px;position:absolute;z-index:-1;width:100%;height:100%;transition:all 0.25s ", ";transform:scale(0,0);top:0;bottom:0;left:0;right:0;}&:focus:after,&:hover:after,&:active:after{transform:scale(1,1);}&:active{-webkit-tap-highlight-color:", ";}.button-icon{margin-right:", ";fill:", ";", ";}&:disabled{&:hover{background-color:transparent;}}", " .button-icon{fill:", ";}", ";"], function (_ref2) {
@@ -7491,7 +7495,7 @@ var Button = function Button(_ref) {
       disabled = _ref.disabled,
       props = _objectWithoutProperties(_ref, _excluded$8);
 
-  return /*#__PURE__*/React__default.createElement(styled$d.Button, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styled$e.Button, _extends$1({
     color: color,
     iconColor: iconColor || fontColor,
     fontColor: fontColor,
@@ -7516,8 +7520,8 @@ Button.defaultProps = {
   disabled: false
 };
 
-var styled$c = {
-  Container: styled$i.label.withConfig({
+var styled$d = {
+  Container: styled$j.label.withConfig({
     displayName: "styles__Container",
     componentId: "sc-18bfcwf-0"
   })(["background:", ";border:1px solid ", ";border-radius:", "px;width:16px;height:16px;line-height:16px;position:relative;cursor:pointer;display:flex;transition:background ", " 0.2s;user-select:none;margin-right:12px;", ";"], function (props) {
@@ -7529,7 +7533,7 @@ var styled$c = {
   }, timingFunctions$1.standard, function (props) {
     return props.styles;
   }),
-  Input: styled$i.input.withConfig({
+  Input: styled$j.input.withConfig({
     displayName: "styles__Input",
     componentId: "sc-18bfcwf-1"
   })(["opacity:0;position:absolute;cursor:pointer;"]),
@@ -7563,18 +7567,18 @@ var Checkbox = function Checkbox(_ref) {
 
   var _props$checked = props.checked,
       conntroledChecked = _props$checked === void 0 ? checked : _props$checked;
-  return /*#__PURE__*/React__default.createElement(styled$c.Container, {
+  return /*#__PURE__*/React__default.createElement(styled$d.Container, {
     checked: conntroledChecked,
     rounded: rounded,
     styles: styles
-  }, /*#__PURE__*/React__default.createElement(styled$c.Input, _extends$1({}, props, {
+  }, /*#__PURE__*/React__default.createElement(styled$d.Input, _extends$1({}, props, {
     type: "checkbox",
     disabled: disabled,
     autoComplete: autoComplete ? 'on' : 'off',
     onChange: handleChange
   })), /*#__PURE__*/React__default.createElement(Icon, {
     name: "check_bold",
-    styles: styled$c.iconCheckStyles,
+    styles: styled$d.iconCheckStyles,
     rounded: rounded
   }));
 };
@@ -7586,18 +7590,18 @@ Checkbox.defaultProps = {
   }
 };
 
-var styled$b = {
-  Wrapper: styled$i.div.withConfig({
+var styled$c = {
+  Wrapper: styled$j.div.withConfig({
     displayName: "styles__Wrapper",
     componentId: "sc-zbd85t-0"
   })(["display:flex;align-items:center;"]),
-  ColorSample: styled$i.div.withConfig({
+  ColorSample: styled$j.div.withConfig({
     displayName: "styles__ColorSample",
     componentId: "sc-zbd85t-1"
   })(["display:block;width:16px;height:16px;background-color:", ";border:1px solid ", ";border-radius:50%;"], function (props) {
     return props.color;
   }, palette.grey),
-  Label: styled$i.span.withConfig({
+  Label: styled$j.span.withConfig({
     displayName: "styles__Label",
     componentId: "sc-zbd85t-2"
   })(["margin-left:5px;text-transform:", ";"], function (props) {
@@ -7610,9 +7614,9 @@ var Color = function Color(_ref) {
       showLabel = _ref.showLabel;
   if (!color) return null;
   var colorCode = getColor(color);
-  return /*#__PURE__*/React__default.createElement(styled$b.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$b.ColorSample, {
+  return /*#__PURE__*/React__default.createElement(styled$c.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$c.ColorSample, {
     color: colorCode
-  }), showLabel && /*#__PURE__*/React__default.createElement(styled$b.Label, {
+  }), showLabel && /*#__PURE__*/React__default.createElement(styled$c.Label, {
     color: colorCode
   }, colorCode));
 };
@@ -7628,7 +7632,7 @@ var statusColor = function statusColor(props) {
   if (checked) return palette.blue;
   return palette.darkGrey;
 };
-var Ball = styled$i.div.withConfig({
+var Ball = styled$j.div.withConfig({
   displayName: "styles__Ball",
   componentId: "sc-rtzdt3-0"
 })(["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) {
@@ -7639,8 +7643,8 @@ var iconCheckStyles = css(["position:absolute;fill:", ";", ""], function (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 = {
-  OuterContainer: styled$i.div.withConfig({
+var styled$b = {
+  OuterContainer: styled$j.div.withConfig({
     displayName: "styles__OuterContainer",
     componentId: "sc-rtzdt3-1"
   })(["display:flex;width:44px;align-items:center;pointer-events:", ";align-self:center;position:relative;", " &:active ", "{box-shadow:0px 0px 0px 10px ", ";", " svg{fill:", ";}}"], function (props) {
@@ -7650,12 +7654,12 @@ var styled$a = {
   iconCheckStyles, function (props) {
     return props.checked ? palette.blue : palette.darkGrey;
   }),
-  Input: styled$i.input.withConfig({
+  Input: styled$j.input.withConfig({
     displayName: "styles__Input",
     componentId: "sc-rtzdt3-2"
   })(["position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;"]),
   Ball: Ball,
-  Container: styled$i.div.withConfig({
+  Container: styled$j.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-rtzdt3-3"
   })(["width:44px;height:24px;background-color:", ";border-radius:50px;position:relative;", ""], function (props) {
@@ -7689,10 +7693,10 @@ var Switch = function Switch(_ref) {
 
   var _props$checked = props.checked,
       controledChecked = _props$checked === void 0 ? checked : _props$checked;
-  return /*#__PURE__*/React__default.createElement(styled$a.OuterContainer, {
+  return /*#__PURE__*/React__default.createElement(styled$b.OuterContainer, {
     disabled: disabled,
     checked: checked
-  }, /*#__PURE__*/React__default.createElement(styled$a.Input, {
+  }, /*#__PURE__*/React__default.createElement(styled$b.Input, {
     checked: controledChecked,
     id: id,
     name: name,
@@ -7700,10 +7704,10 @@ var Switch = function Switch(_ref) {
     disabled: disabled,
     autoComplete: autoComplete ? 'on' : 'off',
     onChange: handleChange
-  }), /*#__PURE__*/React__default.createElement(styled$a.Container, {
+  }), /*#__PURE__*/React__default.createElement(styled$b.Container, {
     checked: controledChecked,
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement(styled$a.Ball, {
+  }, /*#__PURE__*/React__default.createElement(styled$b.Ball, {
     checked: controledChecked,
     disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7711,7 +7715,7 @@ var Switch = function Switch(_ref) {
     disabled: disabled,
     name: "check_bold",
     size: 16,
-    styles: styled$a.iconCheckStyles
+    styles: styled$b.iconCheckStyles
   }))));
 };
 
@@ -7793,14 +7797,14 @@ var hoverAndFocusColor = function hoverAndFocusColor(props) {
   return palette.black;
 };
 
-var styled$9 = {
-  Container: styled$i.div.withConfig({
+var styled$a = {
+  Container: styled$j.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-1fhkfhs-0"
   })(["position:relative;width:", ";"], function (props) {
     return props.fullWidth ? '100%' : 'auto';
   }),
-  FloatingLabel: styled$i.div.withConfig({
+  FloatingLabel: styled$j.div.withConfig({
     displayName: "styles__FloatingLabel",
     componentId: "sc-1fhkfhs-1"
   })(["position:absolute;font-size:", ";font-weight:400;color:", ";height:30px;line-height:30px;bottom:0;left:0;", " transform-origin:top left;transform:", ";transition:all 0.2s ", ";", ""], fontSize$1, function (props) {
@@ -7815,7 +7819,7 @@ var styled$9 = {
         isFloating = _ref2.isFloating;
     return hasIcon && !isFloating && "padding-left: 32px";
   }),
-  Input: styled$i.input.withConfig({
+  Input: styled$j.input.withConfig({
     displayName: "styles__Input",
     componentId: "sc-1fhkfhs-2"
   })(["@keyframes onAutoFill{}", " height:34px;border:none;font-size:", ";font-weight:400;color:", ";transition:color 0.2s ", ";cursor:pointer;width:100%;border-bottom:1px solid ", ";border-radius:0;", " ", " ", " &:hover{border-color:", ";}&:focus{border-color:", ";caret-color:", ";outline:none;}&:disabled{background-color:", ";color:", ";border-color:", ";cursor:default;}&:-webkit-autofill{animation-name:onAutoFill;}::-webkit-inner-spin-button{appearance:none;}", ""], function (props) {
@@ -7836,11 +7840,11 @@ var styled$9 = {
   }, function (props) {
     return hoverAndFocusColor(props);
   }, palette.white, palette.grey, palette.grey, mediaBreaks.onlyPrint(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n\t\t\tborder-bottom: none;\n\t\t"])))),
-  ErrorMessage: styled$i.span.withConfig({
+  ErrorMessage: styled$j.span.withConfig({
     displayName: "styles__ErrorMessage",
     componentId: "sc-1fhkfhs-3"
   })(["color:", ";font-size:12px;line-height:14px;transform:translateY(-6px);word-break:break-word;"], palette.statusRed),
-  InputIcon: styled$i(Icon).withConfig({
+  InputIcon: styled$j(Icon).withConfig({
     displayName: "styles__InputIcon",
     componentId: "sc-1fhkfhs-4"
   })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
@@ -7946,11 +7950,11 @@ var Input = /*#__PURE__*/function (_PureComponent) {
 
       var autoCompleteOff = props.type === 'password' ? 'new-password' : 'off';
       var isFloating = isFocused || !!value.toString();
-      return /*#__PURE__*/React__default.createElement(styled$9.Container, {
+      return /*#__PURE__*/React__default.createElement(styled$a.Container, {
         fullWidth: props.fullWidth
-      }, /*#__PURE__*/React__default.createElement(styled$9.Container, {
+      }, /*#__PURE__*/React__default.createElement(styled$a.Container, {
         fullWidth: props.fullWidth
-      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$9.FloatingLabel, {
+      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$a.FloatingLabel, {
         "data-test": "floatingLabel",
         error: error,
         onClick: this.handleLabelClick,
@@ -7959,10 +7963,10 @@ var Input = /*#__PURE__*/function (_PureComponent) {
         isFloating: isFloating,
         hasIcon: !!icon,
         isTranslateActive: isTranslateActive
-      }, props.label), icon && /*#__PURE__*/React__default.createElement(styled$9.InputIcon, {
+      }, props.label), icon && /*#__PURE__*/React__default.createElement(styled$a.InputIcon, {
         name: icon,
         color: error ? 'statusRed' : 'black'
-      }), /*#__PURE__*/React__default.createElement(styled$9.Input, _extends$1({}, props, {
+      }), /*#__PURE__*/React__default.createElement(styled$a.Input, _extends$1({}, props, {
         ref: this.input,
         placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
         onBlur: this.handleBlur,
@@ -7975,7 +7979,7 @@ var Input = /*#__PURE__*/function (_PureComponent) {
         error: error,
         hasIcon: !!icon,
         onAnimationStart: this.handleFocus
-      }))), error && /*#__PURE__*/React__default.createElement(styled$9.ErrorMessage, {
+      }))), error && /*#__PURE__*/React__default.createElement(styled$a.ErrorMessage, {
         "data-test": "errorMessage"
       }, errorMessage));
     }
@@ -8021,14 +8025,14 @@ var placeholderColor = function placeholderColor(props) {
   return palette.darkGreyPressed;
 };
 
-var styled$8 = {
-  Container: styled$i.div.withConfig({
+var styled$9 = {
+  Container: styled$j.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-wtau65-0"
   })(["position:relative;width:", ";"], function (props) {
     return props.fullWidth ? '100%' : 'auto';
   }),
-  Textarea: styled$i.textarea.withConfig({
+  Textarea: styled$j.textarea.withConfig({
     displayName: "styles__Textarea",
     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) {
@@ -8038,7 +8042,7 @@ var styled$8 = {
   })), 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");
   }, mediaBreaks.onlyPrint(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t\tmin-height: initial;\n\t\t\theight: auto !important;\n\t\t\tborder-bottom: none;\n\t\t"])))),
-  FloatingLabel: styled$i.div.withConfig({
+  FloatingLabel: styled$j.div.withConfig({
     displayName: "styles__FloatingLabel",
     componentId: "sc-wtau65-2"
   })(["position:absolute;font-size:", ";font-weight:400;color:", ";height:24px;line-height:22px;top:0;left:0;pointer-events:", ";transform-origin:top left;transform:", ";transition:all 0.2s ", ";"], fontSize, function (props) {
@@ -8049,7 +8053,7 @@ var styled$8 = {
   }, function (props) {
     return props.isFloating && 'translate(0, -18px) scale(0.75)';
   }, timingFunctions.standard),
-  ErrorMessage: styled$i.span.withConfig({
+  ErrorMessage: styled$j.span.withConfig({
     displayName: "styles__ErrorMessage",
     componentId: "sc-wtau65-3"
   })(["color:", ";font-size:12px;line-height:14px;display:block;word-break:break-word;"], palette.statusRed)
@@ -8160,9 +8164,9 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
           var props = _objectWithoutProperties(_this$props, _excluded$4);
 
       var isFloating = isFocused || !!value;
-      return /*#__PURE__*/React__default.createElement(styled$8.Container, {
+      return /*#__PURE__*/React__default.createElement(styled$9.Container, {
         fullWidth: props.fullWidth
-      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$8.FloatingLabel, _extends$1({}, props, {
+      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$9.FloatingLabel, _extends$1({}, props, {
         "data-test": "floatingLabel",
         error: error,
         onClick: this.handleLabelClick,
@@ -8170,7 +8174,7 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
         isFocused: isFocused,
         isFloating: isFloating,
         isTranslateActive: isTranslateActive
-      }), label), /*#__PURE__*/React__default.createElement(styled$8.Textarea, _extends$1({}, props, {
+      }), label), /*#__PURE__*/React__default.createElement(styled$9.Textarea, _extends$1({}, props, {
         ref: this.textarea,
         placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
         onBlur: this.handleBlur,
@@ -8181,7 +8185,7 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
         value: value,
         autoComplete: autoComplete ? 'on' : 'off',
         disabled: disabled
-      })), error && /*#__PURE__*/React__default.createElement(styled$8.ErrorMessage, {
+      })), error && /*#__PURE__*/React__default.createElement(styled$9.ErrorMessage, {
         "data-test": "errorMessage"
       }, errorMessage));
     }
@@ -8249,8 +8253,8 @@ var getBorders = function getBorders(value) {
   return 'initial';
 };
 
-var styled$7 = {
-  ImageWrapper: styled$i.div.withConfig({
+var styled$8 = {
+  ImageWrapper: styled$j.div.withConfig({
     displayName: "styles__ImageWrapper",
     componentId: "sc-vrvp1c-0"
   })(["width:", ";height:", ";border-radius:", ";", ";overflow:hidden;display:flex;justify-content:center;align-items:center;"], function (_ref) {
@@ -8266,7 +8270,7 @@ var styled$7 = {
     var background = _ref4.background;
     return background && "background-color: ".concat(background);
   }),
-  Image: styled$i.img.withConfig({
+  Image: styled$j.img.withConfig({
     displayName: "styles__Image",
     componentId: "sc-vrvp1c-1"
   })(["width:", ";height:", ";border-radius:", ";"], function (_ref5) {
@@ -8295,7 +8299,7 @@ var Image = function Image(_ref) {
       errorImage = _useState2[0],
       setErrorImage = _useState2[1];
 
-  return errorImage ? /*#__PURE__*/React__default.createElement(styled$7.ImageWrapper, {
+  return errorImage ? /*#__PURE__*/React__default.createElement(styled$8.ImageWrapper, {
     background: background,
     width: width || height,
     height: height || width
@@ -8303,7 +8307,7 @@ var Image = function Image(_ref) {
     name: errorImage,
     size: (width || height) * 0.35 || 20,
     color: palette.lightGreyPressed
-  })) : /*#__PURE__*/React__default.createElement(styled$7.Image, {
+  })) : /*#__PURE__*/React__default.createElement(styled$8.Image, {
     src: url,
     alt: altText || url,
     width: width,
@@ -9103,8 +9107,8 @@ QRCode.defaultProps = {
 
 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=useRef(e),n=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.memo(function(o){var a=o.onMove,l=o.onKey,s=c(o,["onMove","onKey"]),m=useRef(null),g=i(a),p=i(l),b=useRef(null),_=useRef(!1),x=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 useEffect(function(){return H},[H]),React__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.createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},React__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.memo(function(r){var t=r.hue,n=r.onChange,o=g(["react-colorful__hue",r.className]);return React__default.createElement("div",{className:o},React__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.createElement(p,{className:"react-colorful__hue-pointer",left:t/360,color:w({h:t,s:100,v:100,a:1})})))}),L=React__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.createElement("div",{className:"react-colorful__saturation",style:o},React__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.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=useState(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=useRef({color:t,hsva:s});useEffect(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r);}},[t,e]),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=useCallback(function(e){f(function(r){return Object.assign({},r,e)});},[]);return [s,d]}var P="undefined"!=typeof window?useLayoutEffect: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=useRef(null);V(f);var v=T(o,l,i),d=v[0],h=v[1],m=g(["react-colorful",n]);return React__default.createElement("div",u({},s,{ref:f,className:m}),React__default.createElement(L,{hsva:d,onChange:h}),React__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.createElement($$4,u({},r,{colorModel:G}))};
 
-var styled$6 = {
-  ClickableWrapper: styled$i.div.withConfig({
+var styled$7 = {
+  ClickableWrapper: styled$j.div.withConfig({
     displayName: "styles__ClickableWrapper",
     componentId: "sc-lreg3c-0"
   })(["display:flex;align-items:center;border:none;cursor:pointer;&:before{content:'';z-index:1;display:inline-block;border:1px solid ", ";background-color:", ";border-radius:48%;width:14px;height:14px;margin:7px 4px;position:absolute;margin-bottom:", "px;}"], palette.grey, function (props) {
@@ -9112,19 +9116,19 @@ var styled$6 = {
   }, function (props) {
     return props.error ? '25' : '7';
   }),
-  ClosePickerWrapper: styled$i.div.withConfig({
+  ClosePickerWrapper: styled$j.div.withConfig({
     displayName: "styles__ClosePickerWrapper",
     componentId: "sc-lreg3c-1"
   })(["position:fixed;top:0px;right:0px;bottom:0px;left:0px;"]),
-  Input: styled$i(Input).withConfig({
+  Input: styled$j(Input).withConfig({
     displayName: "styles__Input",
     componentId: "sc-lreg3c-2"
   })(["padding-left:26px;"]),
-  PickerWrapper: styled$i.div.withConfig({
+  PickerWrapper: styled$j.div.withConfig({
     displayName: "styles__PickerWrapper",
     componentId: "sc-lreg3c-3"
   })(["position:absolute;top:31px;z-index:2;left:0;margin-top:15px;"]),
-  Wrapper: styled$i.div.withConfig({
+  Wrapper: styled$j.div.withConfig({
     displayName: "styles__Wrapper",
     componentId: "sc-lreg3c-4"
   })(["display:flex;flex-direction:column;width:100%;position:relative;"])
@@ -9168,13 +9172,13 @@ var ColorPicker = function ColorPicker(_ref) {
   var value = colorValue || DEFAULT_COLOR;
 
   if (isCollapsable) {
-    return /*#__PURE__*/React__default.createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$6.ClickableWrapper, {
+    return /*#__PURE__*/React__default.createElement(styled$7.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$7.ClickableWrapper, {
       "data-test": "collapsible-picker",
       color: value,
       role: "presentation",
       onClick: toggleStateVisible,
       error: error
-    }, /*#__PURE__*/React__default.createElement(styled$6.Input, {
+    }, /*#__PURE__*/React__default.createElement(styled$7.Input, {
       value: colorValue,
       fullWidth: true,
       onChange: function onChange(_ref2) {
@@ -9183,10 +9187,10 @@ var ColorPicker = function ColorPicker(_ref) {
       },
       errorMessage: errorMessage,
       error: error
-    })), pickerVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$6.ClosePickerWrapper, {
+    })), pickerVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$7.ClosePickerWrapper, {
       onClick: handleClosePicker,
       role: "presentation"
-    }), /*#__PURE__*/React__default.createElement(styled$6.PickerWrapper, null, /*#__PURE__*/React__default.createElement(J, {
+    }), /*#__PURE__*/React__default.createElement(styled$7.PickerWrapper, null, /*#__PURE__*/React__default.createElement(J, {
       color: value,
       onChange: change
     }))));
@@ -9550,12 +9554,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib$1);
 
-var styled$5 = {
-  Wrapper: styled$i.div.withConfig({
+var styled$6 = {
+  Wrapper: styled$j.div.withConfig({
     displayName: "styles__Wrapper",
     componentId: "sc-3jodl7-0"
   })(["display:flex;align-items:center;align-self:center;height:100%;max-height:36px;overflow:hidden;white-space:nowrap;"]),
-  Icon: styled$i(Icon).withConfig({
+  Icon: styled$j(Icon).withConfig({
     displayName: "styles__Icon",
     componentId: "sc-3jodl7-1"
   })(["margin-right:6px;flex-shrink:0;"])
@@ -9563,7 +9567,7 @@ var styled$5 = {
 
 var DefaultError = function DefaultError(_ref) {
   var message = _ref.message;
-  return /*#__PURE__*/React__default.createElement(styled$5.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$5.Icon, {
+  return /*#__PURE__*/React__default.createElement(styled$6.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$6.Icon, {
     name: "exclamation_circle",
     color: "statusRed"
   }), /*#__PURE__*/React__default.createElement("p", {
@@ -9675,12 +9679,12 @@ HTML.defaultProps = {
   height: 'medium'
 };
 
-var styled$4 = {
-  LinkWrapper: styled$i.div.withConfig({
+var styled$5 = {
+  LinkWrapper: styled$j.div.withConfig({
     displayName: "styles__LinkWrapper",
     componentId: "sc-fhfdft-0"
   })(["display:flex;color:", ";align-items:center;font-size:13px;& a{text-decoration:none;color:inherit;}"], getColor('blue')),
-  StyledIcon: styled$i(Icon).withConfig({
+  StyledIcon: styled$j(Icon).withConfig({
     displayName: "styles__StyledIcon",
     componentId: "sc-fhfdft-1"
   })(["margin-right:8px;"])
@@ -9696,12 +9700,12 @@ var Link = function Link(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var renderIcon = function renderIcon() {
-    return icon ? /*#__PURE__*/React__default.createElement(styled$4.StyledIcon, {
+    return icon ? /*#__PURE__*/React__default.createElement(styled$5.StyledIcon, {
       name: icon
     }) : null;
   };
 
-  return /*#__PURE__*/React__default.createElement(styled$4.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default.createElement("a", {
+  return /*#__PURE__*/React__default.createElement(styled$5.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default.createElement("a", {
     href: href,
     target: target
   }, children || href));
@@ -9778,7 +9782,7 @@ var setPosition = function setPosition(position, open) {
   return positions[position];
 };
 
-var Drawer$1 = styled$i.div.withConfig({
+var Drawer$1 = styled$j.div.withConfig({
   displayName: "styles__Drawer",
   componentId: "sc-1tz9fgf-0"
 })(["box-sizing:border-box;background-color:#ffffff;overflow:hidden;position:absolute;box-shadow:0px 2px 5px 0px #27394727;border-radius:3px;", ";z-index:999;"], function (_ref3) {
@@ -9788,27 +9792,27 @@ var Drawer$1 = styled$i.div.withConfig({
   var transitionTime = transitionDuration / 1000;
   return css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
 });
-var Content$1 = styled$i.div.withConfig({
+var Content$1 = styled$j.div.withConfig({
   displayName: "styles__Content",
   componentId: "sc-1tz9fgf-1"
 })(["min-height:300px;min-width:300px;box-sizing:border-box;padding:16px 28px 32px 32px;"]);
-var Header = styled$i.div.withConfig({
+var Header = styled$j.div.withConfig({
   displayName: "styles__Header",
   componentId: "sc-1tz9fgf-2"
 })(["display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;"]);
-var CloseBtn = styled$i(Button).withConfig({
+var CloseBtn = styled$j(Button).withConfig({
   displayName: "styles__CloseBtn",
   componentId: "sc-1tz9fgf-3"
 })(["padding:0;background-color:transparent;margin-left:auto;"]);
-var Children = styled$i.div.withConfig({
+var Children = styled$j.div.withConfig({
   displayName: "styles__Children",
   componentId: "sc-1tz9fgf-4"
 })(["width:inherit;"]);
-var Overlay = styled$i.div.withConfig({
+var Overlay = styled$j.div.withConfig({
   displayName: "styles__Overlay",
   componentId: "sc-1tz9fgf-5"
 })(["position:absolute;width:100%;height:100%;top:0;left:0;visibility:hidden;pointer-events:none;z-index:998;"]);
-var styled$3 = {
+var styled$4 = {
   Drawer: Drawer$1,
   Content: Content$1,
   Header: Header,
@@ -9832,16 +9836,16 @@ var Drawer = function Drawer(_ref) {
   var drawerRef = useRef(null);
   return /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: closeOnClickAway && open && handleClose
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$3.Drawer, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$4.Drawer, _extends$1({
     open: open,
     position: position,
     transitionDuration: transitionDuration,
     fullScreen: fullScreen,
     className: "drawer",
     ref: drawerRef
-  }, props), /*#__PURE__*/React__default.createElement(styled$3.Content, {
+  }, props), /*#__PURE__*/React__default.createElement(styled$4.Content, {
     className: "drawer__content"
-  }, /*#__PURE__*/React__default.createElement(styled$3.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default.createElement(styled$3.CloseBtn, {
+  }, /*#__PURE__*/React__default.createElement(styled$4.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default.createElement(styled$4.CloseBtn, {
     onClick: handleClose,
     type: "button",
     rounded: true
@@ -9850,7 +9854,7 @@ var Drawer = function Drawer(_ref) {
     name: "cross_light",
     width: 24,
     height: 24
-  }))), /*#__PURE__*/React__default.createElement(styled$3.Children, null, children))), /*#__PURE__*/React__default.createElement(styled$3.Overlay, {
+  }))), /*#__PURE__*/React__default.createElement(styled$4.Children, null, children))), /*#__PURE__*/React__default.createElement(styled$4.Overlay, {
     className: "drawer__overlay",
     transitionDuration: transitionDuration
   })));
@@ -15917,11 +15921,11 @@ class Autocomplete extends React.PureComponent {
 }
 Autocomplete.contextType = MapContext;
 
-var Content = styled$i.div.withConfig({
+var Content = styled$j.div.withConfig({
   displayName: "styles__Content",
   componentId: "sc-1sl7owm-0"
 })(["padding:10px;"]);
-var styled$2 = {
+var styled$3 = {
   Content: Content
 };
 
@@ -15941,7 +15945,7 @@ var InfoWindow = function InfoWindow(_ref) {
     options: {
       pixelOffset: pixelOffset
     }
-  }, /*#__PURE__*/React__default.createElement(styled$2.Content, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(styled$3.Content, _extends$1({
     className: "google-map-component__info-window--content"
   }, infoWindowHandles), children));
 };
@@ -35452,12 +35456,12 @@ var parsePlaces = (function (places, parsedData) {
 });
 
 var InfoWindowStyles = 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$i.div.withConfig({
+var styled$2 = {
+  LoadingElement: styled$j.div.withConfig({
     displayName: "styles__LoadingElement",
     componentId: "sc-z1wxm2-0"
   })(["height:100%;"]),
-  SearchBoxWrapper: styled$i.div.withConfig({
+  SearchBoxWrapper: styled$j.div.withConfig({
     displayName: "styles__SearchBoxWrapper",
     componentId: "sc-z1wxm2-1"
   })(["z-index:0;position:relative;right:0px;top:0px;background:", ";margin:10px;padding:4px 8px 6px;border-radius:2px;width:auto;box-shadow:rgba(0,0,0,0.3) 0px 1px 4px -1px;"], palette.white)
@@ -35512,7 +35516,7 @@ var SearchBox = function SearchBox(_ref) {
   return /*#__PURE__*/React__default.createElement(StandaloneSearchBox, {
     onPlacesChanged: onPlacesChanged,
     onLoad: onLoad
-  }, /*#__PURE__*/React__default.createElement(styled$1.SearchBoxWrapper, null, /*#__PURE__*/React__default.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement(styled$2.SearchBoxWrapper, null, /*#__PURE__*/React__default.createElement(Input, {
     placeholder: "Search",
     hasFloatingLabel: false
   })));
@@ -35621,7 +35625,7 @@ var Map$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
 Map$1.displayName = 'Map';
 
 var rotate = keyframes(["to{transform:rotate(360deg);}"]);
-var Spinner$1 = styled$i.div.withConfig({
+var Spinner$1 = styled$j.div.withConfig({
   displayName: "styles__Spinner",
   componentId: "sc-1e490ps-0"
 })(["", ""], function (_ref) {
@@ -35632,7 +35636,7 @@ var Spinner$1 = styled$i.div.withConfig({
       backSpinnerColor = _ref.backSpinnerColor;
   return 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$i.div.withConfig({
+var SpinnerWrapper = styled$j.div.withConfig({
   displayName: "styles__SpinnerWrapper",
   componentId: "sc-1e490ps-1"
 })(["position:relative;display:flex;justify-content:center;align-items:center;width:", "px;height:", "px;"], function (_ref2) {
@@ -35642,7 +35646,7 @@ var SpinnerWrapper = styled$i.div.withConfig({
   var size = _ref3.size;
   return size;
 });
-var CenterContent = styled$i.div.withConfig({
+var CenterContent = styled$j.div.withConfig({
   displayName: "styles__CenterContent",
   componentId: "sc-1e490ps-2"
 })(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
@@ -35678,7 +35682,7 @@ var Spinner = function Spinner(_ref) {
 };
 
 var show = keyframes(["0%{opacity:0;}to{opacity:1;}"]);
-var Container = styled$i.section.withConfig({
+var Container = styled$j.section.withConfig({
   displayName: "styles__Container",
   componentId: "sc-19kt9g-0"
 })(["display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;position:fixed;top:0;left:0;background:", ";", ";z-index:100;animation:", " 0.2s ease-in;"], function (_ref) {
@@ -35688,7 +35692,7 @@ var Container = styled$i.section.withConfig({
   var effect = _ref2.effect;
   return effect && css(effect);
 }, show);
-var LoaderContainer = styled$i.div.withConfig({
+var LoaderContainer = styled$j.div.withConfig({
   displayName: "styles__LoaderContainer",
   componentId: "sc-19kt9g-1"
 })(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
@@ -35719,7 +35723,7 @@ var FullLoader = function FullLoader(_ref) {
   })));
 };
 
-var Bar = styled$i.div.withConfig({
+var Bar = styled$j.div.withConfig({
   displayName: "styles__Bar",
   componentId: "sc-1baov1w-0"
 })(["width:100%;height:", ";background-color:", ";border-radius:10px;overflow:hidden;"], function (_ref) {
@@ -35733,7 +35737,7 @@ var progressAnimation = function progressAnimation() {
   return keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
 };
 
-var ProgressFill = styled$i.div.withConfig({
+var ProgressFill = styled$j.div.withConfig({
   displayName: "styles__ProgressFill",
   componentId: "sc-1baov1w-1"
 })(["width:100%;height:100%;transform-origin:left center;background-color:", ";", ""], function (_ref2) {
@@ -35752,7 +35756,7 @@ var ProgressFill = styled$i.div.withConfig({
   var scale = value / maxValue;
   return animated && isNumber(duration) && duration > 0 ? css(["animation:", " ", " linear forwards;"], progressAnimation(scale), "".concat(duration, "s")) : css(["transform:scaleX(", ");"], scale);
 });
-var styled = {
+var styled$1 = {
   Bar: Bar,
   ProgressFill: ProgressFill
 };
@@ -35779,7 +35783,7 @@ var ProgressBar = function ProgressBar(_ref) {
       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.createElement(styled.Bar, {
+  return /*#__PURE__*/React__default.createElement(styled$1.Bar, {
     height: height,
     role: "progressbar",
     "aria-valuemin": 0,
@@ -35787,7 +35791,7 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-valuenow": animated ? undefined : Math.round(progress),
     "aria-busy": animated || undefined,
     "aria-valuetext": animated ? undefined : "".concat(Math.round(progress / maxValue * 100), "%")
-  }, /*#__PURE__*/React__default.createElement(styled.ProgressFill, {
+  }, /*#__PURE__*/React__default.createElement(styled$1.ProgressFill, {
     value: progress,
     maxValue: maxValue,
     animated: animated,
@@ -35796,5 +35800,147 @@ var ProgressBar = function ProgressBar(_ref) {
   }));
 };
 
-export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Color, ColorPicker, Drawer, ErrorBoundary, FullLoader, HTML, Icon, Image, Input, Link, Map$1 as Map, ProgressBar, QRCode, Skeleton, Spinner, Switch, Textarea, icons, palette };
+var Wrapper = styled$j.div.withConfig({
+  displayName: "styles__Wrapper",
+  componentId: "sc-mlx2bu-0"
+})(["border-radius:3px;background-color:", ";"], palette.white);
+var HeaderWrapper = styled$j.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$j(Button).withConfig({
+  displayName: "styles__CollapseButton",
+  componentId: "sc-mlx2bu-2"
+})(["padding:0;&:hover,&:focus,&:active{background-color:transparent;}"]);
+var ContentWrapper = styled$j.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 = useState(isOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpenState = _useState2[0],
+      setIsOpenState = _useState2[1];
+
+  var collapseState = 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 = 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 = 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
+  };
+  useEffect(function () {
+    setIsOpenState(isOpen);
+  }, [isOpen]);
+  if (!renderHeader || !isFunction(renderHeader) || !renderContent || !isFunction(renderContent)) return null;
+  return /*#__PURE__*/React__default.createElement(styled.Wrapper, {
+    className: "collapse",
+    isOpen: isOpenState
+  }, /*#__PURE__*/React__default.createElement(styled.HeaderWrapper, _extends$1({
+    className: "collapse__header"
+  }, getToggleProps(togglePropsParams), {
+    isOpen: isOpenState,
+    position: position
+  }), /*#__PURE__*/React__default.createElement(styled.CollapseButton, buttonProps), renderHeader()), /*#__PURE__*/React__default.createElement("div", getCollapseProps(), /*#__PURE__*/React__default.createElement(styled.ContentWrapper, {
+    className: "collapse__content",
+    contentBorder: contentBorder
+  }, renderContent())));
+};
+
+var Collapse$1 = /*#__PURE__*/React__default.memo(Collapse);
+
+export { Avatar, AvatarGroup$1 as AvatarGroup, Button, Checkbox, Chip, ClickAwayListener, Collapse$1 as Collapse, Color, ColorPicker, Drawer, ErrorBoundary, FullLoader, HTML, Icon, Image, Input, Link, Map$1 as Map, ProgressBar, QRCode, Skeleton, Spinner, Switch, Textarea, icons, palette };
 //# sourceMappingURL=index.esm.js.map