@janiscommerce/ui-web 0.44.0 → 0.45.0

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useState, useEffect, useRef, PureComponent, useMemo, useCallback, useLayoutEffect, createContext, forwardRef, useImperativeHandle } from 'react';
-import styled$g, { css, keyframes } from 'styled-components';
+import styled$h, { css, keyframes } from 'styled-components';
 import * as ReactDOM from 'react-dom';
 import ReactDOM__default from 'react-dom';
 
@@ -5246,7 +5246,7 @@ $$b({ target: 'Array', stat: true, forced: INCORRECT_ITERATION$1 }, {
   from: from
 });
 
-var SkeletonContainer = styled$g.div.withConfig({
+var SkeletonContainer = styled$h.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 +5291,8 @@ Skeleton.defaultProps = {
   width: '100%'
 };
 
-var styled$f = {
-  Image: styled$g.img.withConfig({
+var styled$g = {
+  Image: styled$h.img.withConfig({
     displayName: "styles__Image",
     componentId: "sc-uljfj3-0"
   })(["width:", ";height:", ";display:", ";border-radius:", ";"], function (_ref) {
@@ -5396,8 +5396,8 @@ var mixins = {
   }
 };
 
-var styled$e = {
-  Initials: styled$g.div.withConfig({
+var styled$f = {
+  Initials: styled$h.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 +5420,7 @@ var InitialsAvatar = function InitialsAvatar(_ref) {
       mainColor = _ref.mainColor,
       imageSize = _ref.imageSize,
       rounded = _ref.rounded;
-  return /*#__PURE__*/React__default.createElement(styled$e.Initials, {
+  return /*#__PURE__*/React__default.createElement(styled$f.Initials, {
     color: mainColor,
     size: imageSize,
     rounded: rounded
@@ -5586,7 +5586,7 @@ var Avatar = function Avatar(_ref) {
     imageSize: imageSize,
     rounded: rounded
   });
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$f.Image, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$g.Image, {
     ref: imageRef,
     src: url,
     alt: "".concat(firstname, " ").concat(lastname),
@@ -5630,7 +5630,7 @@ $$7({ target: 'Object', stat: true, forced: FAILS_ON_PRIMITIVES }, {
 
 var _templateObject$4;
 var styles$2 = {
-  Svg: styled$g.svg.withConfig({
+  Svg: styled$h.svg.withConfig({
     displayName: "styles__Svg",
     componentId: "sc-jf3e5i-0"
   })(["fill:", ";", " ", ";", ";"], function (props) {
@@ -5638,7 +5638,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$g.path.withConfig({
+  Path: styled$h.path.withConfig({
     displayName: "styles__Path",
     componentId: "sc-jf3e5i-1"
   })(["fill:inherit;", ";"], function (props) {
@@ -5646,15 +5646,15 @@ var styles$2 = {
   })
 };
 ({
-  Grid: styled$g.div.withConfig({
+  Grid: styled$h.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$g.div.withConfig({
+  Item: styled$h.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$g.input.withConfig({
+  SearchInput: styled$h.input.withConfig({
     displayName: "styles__SearchInput",
     componentId: "sc-jf3e5i-4"
   })(["margin-bottom:10px;padding:5px;"])
@@ -7117,11 +7117,11 @@ var getChipVariant = function getChipVariant(props) {
   return variantStyles[variant] || '';
 };
 
-var styled$d = {
-  Chip: styled$g.button.withConfig({
+var styled$e = {
+  Chip: styled$h.button.withConfig({
     displayName: "styles__Chip",
     componentId: "sc-1vnh4co-0"
-  })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;max-width:150px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", ";", ";", " ", " ", " ", ""], function (props) {
+  })(["padding:", ";cursor:", ";font-size:13px;color:", ";height:", ";width:", ";min-width:36px;border-radius:", ";display:inline-flex;justify-content:center;align-items:center;pointer-events:", ";white-space:nowrap;.chip-icon{", ";}", ";", ";", " ", " ", " ", ""], function (props) {
     return !props.onlyIcon ? '0 12px' : '0';
   }, function (props) {
     return props.clickable ? 'pointer' : 'default';
@@ -7146,11 +7146,11 @@ var styled$d = {
   }, 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$g.button.withConfig({
+  DeleteButton: styled$h.button.withConfig({
     displayName: "styles__DeleteButton",
     componentId: "sc-1vnh4co-1"
   })(["width:16px;height:16px;margin-left:12px;"]),
-  Children: styled$g.div.withConfig({
+  Children: styled$h.div.withConfig({
     displayName: "styles__Children",
     componentId: "sc-1vnh4co-2"
   })(["text-overflow:ellipsis;overflow:hidden;"])
@@ -7175,7 +7175,7 @@ var Chip = function Chip(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$9);
 
   if (!children && !icon) return null;
-  return /*#__PURE__*/React__default.createElement(styled$d.Chip, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styled$e.Chip, _extends$1({
     as: props.onClick ? 'button' : 'div',
     backgroundColor: backgroundColor,
     borderColor: borderColor,
@@ -7193,7 +7193,7 @@ var Chip = function Chip(_ref) {
     name: icon,
     color: iconColor,
     size: iconSize
-  }), children && /*#__PURE__*/React__default.createElement(styled$d.Children, null, children), onDelete && /*#__PURE__*/React__default.createElement(styled$d.DeleteButton, {
+  }), children && /*#__PURE__*/React__default.createElement(styled$e.Children, null, children), onDelete && /*#__PURE__*/React__default.createElement(styled$e.DeleteButton, {
     type: "button",
     onClick: onDelete
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7215,8 +7215,8 @@ Chip.defaultProps = {
   hasLink: false
 };
 
-var styled$c = {
-  AvatarGroup: styled$g(Chip).withConfig({
+var styled$d = {
+  AvatarGroup: styled$h(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 +7351,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$c.AvatarGroup, {
+  return /*#__PURE__*/React__default.createElement(styled$d.AvatarGroup, {
     disabled: true,
     showFull: showFull
   }, /*#__PURE__*/React__default.createElement(AvatarList, {
@@ -7442,8 +7442,8 @@ var getButtonStyles = function getButtonStyles(_ref) {
   return variantStyles[variant] || '';
 };
 
-var styled$b = {
-  Button: styled$g.button.withConfig({
+var styled$c = {
+  Button: styled$h.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 +7491,7 @@ var Button = function Button(_ref) {
       disabled = _ref.disabled,
       props = _objectWithoutProperties(_ref, _excluded$8);
 
-  return /*#__PURE__*/React__default.createElement(styled$b.Button, _extends$1({
+  return /*#__PURE__*/React__default.createElement(styled$c.Button, _extends$1({
     color: color,
     iconColor: iconColor || fontColor,
     fontColor: fontColor,
@@ -7516,8 +7516,8 @@ Button.defaultProps = {
   disabled: false
 };
 
-var styled$a = {
-  Container: styled$g.label.withConfig({
+var styled$b = {
+  Container: styled$h.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 +7529,7 @@ var styled$a = {
   }, timingFunctions$1.standard, function (props) {
     return props.styles;
   }),
-  Input: styled$g.input.withConfig({
+  Input: styled$h.input.withConfig({
     displayName: "styles__Input",
     componentId: "sc-18bfcwf-1"
   })(["opacity:0;position:absolute;cursor:pointer;"]),
@@ -7563,18 +7563,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$a.Container, {
+  return /*#__PURE__*/React__default.createElement(styled$b.Container, {
     checked: conntroledChecked,
     rounded: rounded,
     styles: styles
-  }, /*#__PURE__*/React__default.createElement(styled$a.Input, _extends$1({}, props, {
+  }, /*#__PURE__*/React__default.createElement(styled$b.Input, _extends$1({}, props, {
     type: "checkbox",
     disabled: disabled,
     autoComplete: autoComplete ? 'on' : 'off',
     onChange: handleChange
   })), /*#__PURE__*/React__default.createElement(Icon, {
     name: "check_bold",
-    styles: styled$a.iconCheckStyles,
+    styles: styled$b.iconCheckStyles,
     rounded: rounded
   }));
 };
@@ -7586,18 +7586,18 @@ Checkbox.defaultProps = {
   }
 };
 
-var styled$9 = {
-  Wrapper: styled$g.div.withConfig({
+var styled$a = {
+  Wrapper: styled$h.div.withConfig({
     displayName: "styles__Wrapper",
     componentId: "sc-zbd85t-0"
   })(["display:flex;align-items:center;"]),
-  ColorSample: styled$g.div.withConfig({
+  ColorSample: styled$h.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$g.span.withConfig({
+  Label: styled$h.span.withConfig({
     displayName: "styles__Label",
     componentId: "sc-zbd85t-2"
   })(["margin-left:5px;text-transform:", ";"], function (props) {
@@ -7610,9 +7610,9 @@ var Color = function Color(_ref) {
       showLabel = _ref.showLabel;
   if (!color) return null;
   var colorCode = getColor(color);
-  return /*#__PURE__*/React__default.createElement(styled$9.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$9.ColorSample, {
+  return /*#__PURE__*/React__default.createElement(styled$a.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$a.ColorSample, {
     color: colorCode
-  }), showLabel && /*#__PURE__*/React__default.createElement(styled$9.Label, {
+  }), showLabel && /*#__PURE__*/React__default.createElement(styled$a.Label, {
     color: colorCode
   }, colorCode));
 };
@@ -7628,7 +7628,7 @@ var statusColor = function statusColor(props) {
   if (checked) return palette.blue;
   return palette.darkGrey;
 };
-var Ball = styled$g.div.withConfig({
+var Ball = styled$h.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 +7639,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$8 = {
-  OuterContainer: styled$g.div.withConfig({
+var styled$9 = {
+  OuterContainer: styled$h.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 +7650,12 @@ var styled$8 = {
   iconCheckStyles, function (props) {
     return props.checked ? palette.blue : palette.darkGrey;
   }),
-  Input: styled$g.input.withConfig({
+  Input: styled$h.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$g.div.withConfig({
+  Container: styled$h.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-rtzdt3-3"
   })(["width:44px;height:24px;background-color:", ";border-radius:50px;position:relative;", ""], function (props) {
@@ -7689,10 +7689,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$8.OuterContainer, {
+  return /*#__PURE__*/React__default.createElement(styled$9.OuterContainer, {
     disabled: disabled,
     checked: checked
-  }, /*#__PURE__*/React__default.createElement(styled$8.Input, {
+  }, /*#__PURE__*/React__default.createElement(styled$9.Input, {
     checked: controledChecked,
     id: id,
     name: name,
@@ -7700,10 +7700,10 @@ var Switch = function Switch(_ref) {
     disabled: disabled,
     autoComplete: autoComplete ? 'on' : 'off',
     onChange: handleChange
-  }), /*#__PURE__*/React__default.createElement(styled$8.Container, {
+  }), /*#__PURE__*/React__default.createElement(styled$9.Container, {
     checked: controledChecked,
     disabled: disabled
-  }, /*#__PURE__*/React__default.createElement(styled$8.Ball, {
+  }, /*#__PURE__*/React__default.createElement(styled$9.Ball, {
     checked: controledChecked,
     disabled: disabled
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -7711,7 +7711,7 @@ var Switch = function Switch(_ref) {
     disabled: disabled,
     name: "check_bold",
     size: 16,
-    styles: styled$8.iconCheckStyles
+    styles: styled$9.iconCheckStyles
   }))));
 };
 
@@ -7793,14 +7793,14 @@ var hoverAndFocusColor = function hoverAndFocusColor(props) {
   return palette.black;
 };
 
-var styled$7 = {
-  Container: styled$g.div.withConfig({
+var styled$8 = {
+  Container: styled$h.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-1fhkfhs-0"
   })(["position:relative;width:", ";"], function (props) {
     return props.fullWidth ? '100%' : 'auto';
   }),
-  FloatingLabel: styled$g.div.withConfig({
+  FloatingLabel: styled$h.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 +7815,7 @@ var styled$7 = {
         isFloating = _ref2.isFloating;
     return hasIcon && !isFloating && "padding-left: 32px";
   }),
-  Input: styled$g.input.withConfig({
+  Input: styled$h.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 +7836,11 @@ var styled$7 = {
   }, 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$g.span.withConfig({
+  ErrorMessage: styled$h.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$g(Icon).withConfig({
+  InputIcon: styled$h(Icon).withConfig({
     displayName: "styles__InputIcon",
     componentId: "sc-1fhkfhs-4"
   })(["position:absolute;flex-shrink:0;flex-grow:0;margin-right:8px;height:100%;"])
@@ -7946,11 +7946,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$7.Container, {
+      return /*#__PURE__*/React__default.createElement(styled$8.Container, {
         fullWidth: props.fullWidth
-      }, /*#__PURE__*/React__default.createElement(styled$7.Container, {
+      }, /*#__PURE__*/React__default.createElement(styled$8.Container, {
         fullWidth: props.fullWidth
-      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$7.FloatingLabel, {
+      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$8.FloatingLabel, {
         "data-test": "floatingLabel",
         error: error,
         onClick: this.handleLabelClick,
@@ -7959,10 +7959,10 @@ var Input = /*#__PURE__*/function (_PureComponent) {
         isFloating: isFloating,
         hasIcon: !!icon,
         isTranslateActive: isTranslateActive
-      }, props.label), icon && /*#__PURE__*/React__default.createElement(styled$7.InputIcon, {
+      }, props.label), icon && /*#__PURE__*/React__default.createElement(styled$8.InputIcon, {
         name: icon,
         color: error ? 'statusRed' : 'black'
-      }), /*#__PURE__*/React__default.createElement(styled$7.Input, _extends$1({}, props, {
+      }), /*#__PURE__*/React__default.createElement(styled$8.Input, _extends$1({}, props, {
         ref: this.input,
         placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
         onBlur: this.handleBlur,
@@ -7975,7 +7975,7 @@ var Input = /*#__PURE__*/function (_PureComponent) {
         error: error,
         hasIcon: !!icon,
         onAnimationStart: this.handleFocus
-      }))), error && /*#__PURE__*/React__default.createElement(styled$7.ErrorMessage, {
+      }))), error && /*#__PURE__*/React__default.createElement(styled$8.ErrorMessage, {
         "data-test": "errorMessage"
       }, errorMessage));
     }
@@ -8021,14 +8021,14 @@ var placeholderColor = function placeholderColor(props) {
   return palette.darkGreyPressed;
 };
 
-var styled$6 = {
-  Container: styled$g.div.withConfig({
+var styled$7 = {
+  Container: styled$h.div.withConfig({
     displayName: "styles__Container",
     componentId: "sc-wtau65-0"
   })(["position:relative;width:", ";"], function (props) {
     return props.fullWidth ? '100%' : 'auto';
   }),
-  Textarea: styled$g.textarea.withConfig({
+  Textarea: styled$h.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 +8038,7 @@ var styled$6 = {
   })), 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$g.div.withConfig({
+  FloatingLabel: styled$h.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 +8049,7 @@ var styled$6 = {
   }, function (props) {
     return props.isFloating && 'translate(0, -18px) scale(0.75)';
   }, timingFunctions.standard),
-  ErrorMessage: styled$g.span.withConfig({
+  ErrorMessage: styled$h.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 +8160,9 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
           var props = _objectWithoutProperties(_this$props, _excluded$4);
 
       var isFloating = isFocused || !!value;
-      return /*#__PURE__*/React__default.createElement(styled$6.Container, {
+      return /*#__PURE__*/React__default.createElement(styled$7.Container, {
         fullWidth: props.fullWidth
-      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$6.FloatingLabel, _extends$1({}, props, {
+      }, hasFloatingLabel && /*#__PURE__*/React__default.createElement(styled$7.FloatingLabel, _extends$1({}, props, {
         "data-test": "floatingLabel",
         error: error,
         onClick: this.handleLabelClick,
@@ -8170,7 +8170,7 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
         isFocused: isFocused,
         isFloating: isFloating,
         isTranslateActive: isTranslateActive
-      }), label), /*#__PURE__*/React__default.createElement(styled$6.Textarea, _extends$1({}, props, {
+      }), label), /*#__PURE__*/React__default.createElement(styled$7.Textarea, _extends$1({}, props, {
         ref: this.textarea,
         placeholder: hasFloatingLabel && !isFloating ? '' : placeholder,
         onBlur: this.handleBlur,
@@ -8181,7 +8181,7 @@ var Textarea = /*#__PURE__*/function (_PureComponent) {
         value: value,
         autoComplete: autoComplete ? 'on' : 'off',
         disabled: disabled
-      })), error && /*#__PURE__*/React__default.createElement(styled$6.ErrorMessage, {
+      })), error && /*#__PURE__*/React__default.createElement(styled$7.ErrorMessage, {
         "data-test": "errorMessage"
       }, errorMessage));
     }
@@ -8249,8 +8249,8 @@ var getBorders = function getBorders(value) {
   return 'initial';
 };
 
-var styled$5 = {
-  ImageWrapper: styled$g.div.withConfig({
+var styled$6 = {
+  ImageWrapper: styled$h.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 +8266,7 @@ var styled$5 = {
     var background = _ref4.background;
     return background && "background-color: ".concat(background);
   }),
-  Image: styled$g.img.withConfig({
+  Image: styled$h.img.withConfig({
     displayName: "styles__Image",
     componentId: "sc-vrvp1c-1"
   })(["width:", ";height:", ";border-radius:", ";"], function (_ref5) {
@@ -8295,7 +8295,7 @@ var Image = function Image(_ref) {
       errorImage = _useState2[0],
       setErrorImage = _useState2[1];
 
-  return errorImage ? /*#__PURE__*/React__default.createElement(styled$5.ImageWrapper, {
+  return errorImage ? /*#__PURE__*/React__default.createElement(styled$6.ImageWrapper, {
     background: background,
     width: width || height,
     height: height || width
@@ -8303,7 +8303,7 @@ var Image = function Image(_ref) {
     name: errorImage,
     size: (width || height) * 0.35 || 20,
     color: palette.lightGreyPressed
-  })) : /*#__PURE__*/React__default.createElement(styled$5.Image, {
+  })) : /*#__PURE__*/React__default.createElement(styled$6.Image, {
     src: url,
     alt: altText || url,
     width: width,
@@ -9103,8 +9103,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$4 = {
-  ClickableWrapper: styled$g.div.withConfig({
+var styled$5 = {
+  ClickableWrapper: styled$h.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 +9112,19 @@ var styled$4 = {
   }, function (props) {
     return props.error ? '25' : '7';
   }),
-  ClosePickerWrapper: styled$g.div.withConfig({
+  ClosePickerWrapper: styled$h.div.withConfig({
     displayName: "styles__ClosePickerWrapper",
     componentId: "sc-lreg3c-1"
   })(["position:fixed;top:0px;right:0px;bottom:0px;left:0px;"]),
-  Input: styled$g(Input).withConfig({
+  Input: styled$h(Input).withConfig({
     displayName: "styles__Input",
     componentId: "sc-lreg3c-2"
   })(["padding-left:26px;"]),
-  PickerWrapper: styled$g.div.withConfig({
+  PickerWrapper: styled$h.div.withConfig({
     displayName: "styles__PickerWrapper",
     componentId: "sc-lreg3c-3"
   })(["position:absolute;top:31px;z-index:2;left:0;margin-top:15px;"]),
-  Wrapper: styled$g.div.withConfig({
+  Wrapper: styled$h.div.withConfig({
     displayName: "styles__Wrapper",
     componentId: "sc-lreg3c-4"
   })(["display:flex;flex-direction:column;width:100%;position:relative;"])
@@ -9168,13 +9168,13 @@ var ColorPicker = function ColorPicker(_ref) {
   var value = colorValue || DEFAULT_COLOR;
 
   if (isCollapsable) {
-    return /*#__PURE__*/React__default.createElement(styled$4.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$4.ClickableWrapper, {
+    return /*#__PURE__*/React__default.createElement(styled$5.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$5.ClickableWrapper, {
       "data-test": "collapsible-picker",
       color: value,
       role: "presentation",
       onClick: toggleStateVisible,
       error: error
-    }, /*#__PURE__*/React__default.createElement(styled$4.Input, {
+    }, /*#__PURE__*/React__default.createElement(styled$5.Input, {
       value: colorValue,
       fullWidth: true,
       onChange: function onChange(_ref2) {
@@ -9183,10 +9183,10 @@ var ColorPicker = function ColorPicker(_ref) {
       },
       errorMessage: errorMessage,
       error: error
-    })), pickerVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$4.ClosePickerWrapper, {
+    })), pickerVisible && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$5.ClosePickerWrapper, {
       onClick: handleClosePicker,
       role: "presentation"
-    }), /*#__PURE__*/React__default.createElement(styled$4.PickerWrapper, null, /*#__PURE__*/React__default.createElement(J, {
+    }), /*#__PURE__*/React__default.createElement(styled$5.PickerWrapper, null, /*#__PURE__*/React__default.createElement(J, {
       color: value,
       onChange: change
     }))));
@@ -9550,12 +9550,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var Frame = /*@__PURE__*/getDefaultExportFromCjs(lib$1);
 
-var styled$3 = {
-  Wrapper: styled$g.div.withConfig({
+var styled$4 = {
+  Wrapper: styled$h.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$g(Icon).withConfig({
+  Icon: styled$h(Icon).withConfig({
     displayName: "styles__Icon",
     componentId: "sc-3jodl7-1"
   })(["margin-right:6px;flex-shrink:0;"])
@@ -9563,7 +9563,7 @@ var styled$3 = {
 
 var DefaultError = function DefaultError(_ref) {
   var message = _ref.message;
-  return /*#__PURE__*/React__default.createElement(styled$3.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$3.Icon, {
+  return /*#__PURE__*/React__default.createElement(styled$4.Wrapper, null, /*#__PURE__*/React__default.createElement(styled$4.Icon, {
     name: "exclamation_circle",
     color: "statusRed"
   }), /*#__PURE__*/React__default.createElement("p", {
@@ -9675,12 +9675,12 @@ HTML.defaultProps = {
   height: 'medium'
 };
 
-var styled$2 = {
-  LinkWrapper: styled$g.div.withConfig({
+var styled$3 = {
+  LinkWrapper: styled$h.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$g(Icon).withConfig({
+  StyledIcon: styled$h(Icon).withConfig({
     displayName: "styles__StyledIcon",
     componentId: "sc-fhfdft-1"
   })(["margin-right:8px;"])
@@ -9696,12 +9696,12 @@ var Link = function Link(_ref) {
       props = _objectWithoutProperties(_ref, _excluded$3);
 
   var renderIcon = function renderIcon() {
-    return icon ? /*#__PURE__*/React__default.createElement(styled$2.StyledIcon, {
+    return icon ? /*#__PURE__*/React__default.createElement(styled$3.StyledIcon, {
       name: icon
     }) : null;
   };
 
-  return /*#__PURE__*/React__default.createElement(styled$2.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default.createElement("a", {
+  return /*#__PURE__*/React__default.createElement(styled$3.LinkWrapper, props, renderIcon(), /*#__PURE__*/React__default.createElement("a", {
     href: href,
     target: target
   }, children || href));
@@ -9778,7 +9778,7 @@ var setPosition = function setPosition(position, open) {
   return positions[position];
 };
 
-var Drawer$1 = styled$g.div.withConfig({
+var Drawer$1 = styled$h.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 +9788,27 @@ var Drawer$1 = styled$g.div.withConfig({
   var transitionTime = transitionDuration / 1000;
   return css(["", ";", ";"], position && setPosition(position, open), transitionDuration && "transition: ".concat(getPropertyForTransition(position), " ").concat(transitionTime, "s ease"));
 });
-var Content = styled$g.div.withConfig({
+var Content = styled$h.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$g.div.withConfig({
+var Header = styled$h.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$g(Button).withConfig({
+var CloseBtn = styled$h(Button).withConfig({
   displayName: "styles__CloseBtn",
   componentId: "sc-1tz9fgf-3"
 })(["padding:0;background-color:transparent;margin-left:auto;"]);
-var Children = styled$g.div.withConfig({
+var Children = styled$h.div.withConfig({
   displayName: "styles__Children",
   componentId: "sc-1tz9fgf-4"
 })(["width:inherit;"]);
-var Overlay = styled$g.div.withConfig({
+var Overlay = styled$h.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$1 = {
+var styled$2 = {
   Drawer: Drawer$1,
   Content: Content,
   Header: Header,
@@ -9832,16 +9832,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$1.Drawer, _extends$1({
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(styled$2.Drawer, _extends$1({
     open: open,
     position: position,
     transitionDuration: transitionDuration,
     fullScreen: fullScreen,
     className: "drawer",
     ref: drawerRef
-  }, props), /*#__PURE__*/React__default.createElement(styled$1.Content, {
+  }, props), /*#__PURE__*/React__default.createElement(styled$2.Content, {
     className: "drawer__content"
-  }, /*#__PURE__*/React__default.createElement(styled$1.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default.createElement(styled$1.CloseBtn, {
+  }, /*#__PURE__*/React__default.createElement(styled$2.Header, null, handleClose && typeof handleClose === 'function' && /*#__PURE__*/React__default.createElement(styled$2.CloseBtn, {
     onClick: handleClose,
     type: "button",
     rounded: true
@@ -9850,7 +9850,7 @@ var Drawer = function Drawer(_ref) {
     name: "cross_light",
     width: 24,
     height: 24
-  }))), /*#__PURE__*/React__default.createElement(styled$1.Children, null, children))), /*#__PURE__*/React__default.createElement(styled$1.Overlay, {
+  }))), /*#__PURE__*/React__default.createElement(styled$2.Children, null, children))), /*#__PURE__*/React__default.createElement(styled$2.Overlay, {
     className: "drawer__overlay",
     transitionDuration: transitionDuration
   })));
@@ -35389,12 +35389,12 @@ var parsePlaces = (function (places, parsedData) {
   }, _objectSpread2({}, parsedData));
 });
 
-var styled = {
-  LoadingElement: styled$g.div.withConfig({
+var styled$1 = {
+  LoadingElement: styled$h.div.withConfig({
     displayName: "styles__LoadingElement",
     componentId: "sc-z1wxm2-0"
   })(["height:100%;"]),
-  SearchBoxWrapper: styled$g.div.withConfig({
+  SearchBoxWrapper: styled$h.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)
@@ -35449,7 +35449,7 @@ var SearchBox = function SearchBox(_ref) {
   return /*#__PURE__*/React__default.createElement(StandaloneSearchBox, {
     onPlacesChanged: onPlacesChanged,
     onLoad: onLoad
-  }, /*#__PURE__*/React__default.createElement(styled.SearchBoxWrapper, null, /*#__PURE__*/React__default.createElement(Input, {
+  }, /*#__PURE__*/React__default.createElement(styled$1.SearchBoxWrapper, null, /*#__PURE__*/React__default.createElement(Input, {
     placeholder: "Search",
     hasFloatingLabel: false
   })));
@@ -35558,7 +35558,7 @@ var Map$1 = /*#__PURE__*/forwardRef(function (_ref, ref) {
 Map$1.displayName = 'Map';
 
 var rotate = keyframes(["to{transform:rotate(360deg);}"]);
-var Spinner$1 = styled$g.div.withConfig({
+var Spinner$1 = styled$h.div.withConfig({
   displayName: "styles__Spinner",
   componentId: "sc-1e490ps-0"
 })(["", ""], function (_ref) {
@@ -35569,7 +35569,7 @@ var Spinner$1 = styled$g.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$g.div.withConfig({
+var SpinnerWrapper = styled$h.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) {
@@ -35579,7 +35579,7 @@ var SpinnerWrapper = styled$g.div.withConfig({
   var size = _ref3.size;
   return size;
 });
-var CenterContent = styled$g.div.withConfig({
+var CenterContent = styled$h.div.withConfig({
   displayName: "styles__CenterContent",
   componentId: "sc-1e490ps-2"
 })(["position:absolute;display:flex;justify-content:center;align-items:center;"]);
@@ -35615,7 +35615,7 @@ var Spinner = function Spinner(_ref) {
 };
 
 var show = keyframes(["0%{opacity:0;}to{opacity:1;}"]);
-var Container = styled$g.section.withConfig({
+var Container = styled$h.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) {
@@ -35625,7 +35625,7 @@ var Container = styled$g.section.withConfig({
   var effect = _ref2.effect;
   return effect && css(effect);
 }, show);
-var LoaderContainer = styled$g.div.withConfig({
+var LoaderContainer = styled$h.div.withConfig({
   displayName: "styles__LoaderContainer",
   componentId: "sc-19kt9g-1"
 })(["position:relative;display:flex;justify-content:center;align-items:center;width:115px;height:115px;"]);
@@ -35656,5 +35656,78 @@ var FullLoader = function FullLoader(_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, QRCode, Skeleton, Spinner, Switch, Textarea, icons, palette };
+var Bar = styled$h.div.withConfig({
+  displayName: "styles__Bar",
+  componentId: "sc-1baov1w-0"
+})(["width:100%;height:", ";background-color:", ";border-radius:10px;overflow:hidden;"], function (_ref) {
+  var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 16 : _ref$height;
+  return "".concat(height, "px");
+}, palette.grey);
+
+var progressAnimation = function progressAnimation() {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
+  return keyframes(["0%{transform:scaleX(0);}100%{transform:scaleX(", ");}"], scale);
+};
+
+var ProgressFill = styled$h.div.withConfig({
+  displayName: "styles__ProgressFill",
+  componentId: "sc-1baov1w-1"
+})(["width:100%;height:100%;transform-origin:left center;background-color:", ";", ""], function (_ref2) {
+  var _ref2$color = _ref2.color,
+      color = _ref2$color === void 0 ? palette.blue : _ref2$color;
+  return color;
+}, function (_ref3) {
+  var _ref3$value = _ref3.value,
+      value = _ref3$value === void 0 ? 0 : _ref3$value,
+      _ref3$maxValue = _ref3.maxValue,
+      maxValue = _ref3$maxValue === void 0 ? 100 : _ref3$maxValue,
+      _ref3$animated = _ref3.animated,
+      animated = _ref3$animated === void 0 ? false : _ref3$animated,
+      _ref3$duration = _ref3.duration,
+      duration = _ref3$duration === void 0 ? 1 : _ref3$duration;
+  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 = {
+  Bar: Bar,
+  ProgressFill: ProgressFill
+};
+
+var isValidValue = function isValidValue(value) {
+  return !!value && isNumber(value) && value > 0;
+};
+
+var ProgressBar = function ProgressBar(_ref) {
+  var value = _ref.value,
+      _ref$maxValue = _ref.maxValue,
+      maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
+      _ref$animated = _ref.animated,
+      animated = _ref$animated === void 0 ? false : _ref$animated,
+      _ref$duration = _ref.duration,
+      duration = _ref$duration === void 0 ? 1 : _ref$duration,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 16 : _ref$height,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'blue' : _ref$color;
+  if (!isValidValue(value) || !isValidValue(maxValue) || value > maxValue) return null;
+  var progress = Math.max(0, Math.min(maxValue, value));
+  return /*#__PURE__*/React__default.createElement(styled.Bar, {
+    height: height,
+    role: "progressbar",
+    "aria-valuemin": 0,
+    "aria-valuemax": maxValue,
+    "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, {
+    value: progress,
+    maxValue: maxValue,
+    animated: animated,
+    duration: duration,
+    color: getColor(color)
+  }));
+};
+
+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 };
 //# sourceMappingURL=index.esm.js.map