@taikai/rocket-kit 3.0.0-beta.2 → 3.0.0-beta.4

package/dist/rocket-kit.cjs.development.js

@@ -190,16 +190,15 @@ const typography = {
   defaultSize: '16px',
   regular: 400,
   medium: 500,
-  bold: 700,
-  letterSpacing: /*#__PURE__*/polished.rem('1px')
+  bold: 700
 };
 const button = {
-  height: /*#__PURE__*/polished.rem('42px'),
+  height: /*#__PURE__*/polished.rem('44px'),
   borderWidth: /*#__PURE__*/polished.rem('1px'),
   borderRadius: /*#__PURE__*/polished.rem('8px'),
-  padding: /*#__PURE__*/polished.rem('28px'),
-  iconSpacing: /*#__PURE__*/polished.rem('8px'),
-  iconSize: /*#__PURE__*/polished.rem('16px')
+  padding: /*#__PURE__*/polished.rem('24px'),
+  iconSpacing: /*#__PURE__*/polished.rem('14px'),
+  iconSize: /*#__PURE__*/polished.rem('20px')
 };
 const misc = {
   transitionDuration: '0.3s'
@@ -247,16 +246,14 @@ const useColor = value => {
   const c = value.split(/([0-9]+)/).filter(Boolean);
   const tint = c[0];
   const hue = parseFloat(c[1]);
-
   const getHoverColor = (tint, hue) => {
     const indexCurrentHue = colorHues.indexOf(hue);
     const indexIsLast = indexCurrentHue === colorHues.length - 1;
-    const indexHoverHue = indexIsLast ? indexCurrentHue - 1 : indexCurrentHue + 1; // @ts-ignore
-
+    const indexHoverHue = indexIsLast ? indexCurrentHue - 1 : indexCurrentHue + 1;
+    // @ts-ignore
     const hoverColor = colors == null ? void 0 : colors[indexCurrentHue > -1 ? tint + colorHues[indexHoverHue] : tint];
     return hoverColor != null ? hoverColor : colors.black;
   };
-
   const hover = getHoverColor(tint, hue);
   return {
     color,
@@ -266,20 +263,17 @@ const useColor = value => {
 
 const ButtonWrapper = /*#__PURE__*/_styled__default.button.withConfig({
   displayName: "styles__ButtonWrapper",
-  componentId: "baestp-0"
-})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
+  componentId: "sc-baestp-0"
+})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
   var _props$color;
-
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
   var _props$txtColor;
-
   return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
 }, props => {
   var _props$color2;
-
   return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
-}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const Button = props => {
   const {
@@ -335,15 +329,12 @@ const ActionsMenuStyle = /*#__PURE__*/_styled__default.div.withConfig({
 function useVisible(initialIsVisible) {
   const [isVisible, setIsVisible] = React.useState(initialIsVisible);
   const ref = React.useRef(null);
-
   const handleClickOutside = event => {
     if (!ref || !ref.current) return;
-
     if (!ref.current.contains(event.target)) {
       setIsVisible(false);
     }
   };
-
   React.useEffect(() => {
     document.addEventListener('click', handleClickOutside, false);
     return () => {
@@ -430,20 +421,17 @@ const ButtonDropdown = props => {
 
 const ButtonLinkStyle = /*#__PURE__*/_styled__default.a.withConfig({
   displayName: "styles__ButtonLinkStyle",
-  componentId: "clge7v-0"
-})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
+  componentId: "sc-clge7v-0"
+})(["--bg:", ";--txt:", ";--hover:", ";border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}> *:not(:last-child){margin-left:", ";margin-right:", ";}span{position:relative;font-size:", ";font-weight:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
   var _props$color;
-
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
   var _props$txtColor;
-
   return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
 }, props => {
   var _props$color2;
-
   return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
-}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' || props.variant === 'outline' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const ButtonLink = props => {
   const {
@@ -465,12 +453,10 @@ const ButtonLink = props => {
     ariaLabel = '',
     ariaHidden = false
   } = props;
-
   const getRelationshipAttributes = () => {
     if (rel && rel !== '') return rel;
     return blank ? 'noopener noreferrer' : '';
   };
-
   return /*#__PURE__*/React__default.createElement(ButtonLinkStyle, {
     variant: variant,
     rounded: rounded,
@@ -505,34 +491,53 @@ const {
 } = colors;
 const CheckboxWrapper = /*#__PURE__*/_styled__default.label.withConfig({
   displayName: "styles__CheckboxWrapper",
-  componentId: "w5t014-0"
+  componentId: "sc-w5t014-0"
 })(["display:flex;position:relative;padding-left:0;cursor:", ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;&:hover input:not(:disabled) ~ span{border-color:", ";}span{color:", ";border-color:", ";}"], props => props.disabled ? 'auto' : 'pointer', props => props.error ? darkRed : normal$1, props => props.disabled ? grey$1 : props.error ? red : null, props => props.error ? red : null);
 const CheckboxLabel = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__CheckboxLabel",
-  componentId: "w5t014-1"
+  componentId: "sc-w5t014-1"
 })(["margin-left:calc(", " + ", ");line-height:", ";"], /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('24px'));
 const CheckboxInput = /*#__PURE__*/_styled__default.input.withConfig({
   displayName: "styles__CheckboxInput",
-  componentId: "w5t014-2"
+  componentId: "sc-w5t014-2"
 })(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled)[aria-checked='true'] ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled[aria-checked='true'] ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? red : green, props => props.error ? darkRed : darkGreen, lightGrey$1, grey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
 const Checkmark = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__Checkmark",
-  componentId: "w5t014-3"
-})(["position:absolute;top:0;left:0;border:", " solid ", ";border-radius:100%;width:", ";height:", ";transition-duration:0.3s;&:after{content:'';position:absolute;display:none;top:", ";left:", ";width:", ";height:", ";border:solid ", ";border-width:0 ", " ", " 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], /*#__PURE__*/polished.rem('2px'), props => props.error ? red : grey$1, /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('9px'), light$1, /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('3px'));
+  componentId: "sc-w5t014-3"
+})(["position:absolute;top:0;left:0;border:", " solid ", ";border-radius:100%;width:", ";height:", ";transition-duration:0.3s;&:after{display:block;content:'';position:absolute;display:none;top:", ";left:", ";width:", ";height:", ";border:solid ", ";border-width:0 ", " ", " 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}&.checked.not-disabled{background-color:", ";border-color:", ";&:after{display:block;}}&.checked.disabled{color:", ";border-color:transparent;background-color:", ";&:after{display:block;}}&.not-checked.disabled{border-color:", ";background-color:", ";}&.not-disabled:hover{border-color:", ";&:checked ~ span{border-color:", ";}}"], /*#__PURE__*/polished.rem('2px'), props => props.error ? red : grey$1, /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('9px'), light$1, /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('3px'), props => props.error ? red : green, props => props.error ? darkRed : darkGreen, grey$1, lightGrey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
 
-const Checkbox = props => {
-  const {
-    label,
-    value,
-    checked = false,
-    onChange = () => {},
-    error = false,
-    disabled = false,
-    className = 'checkbox',
-    style,
-    dataTestId,
-    required = false
-  } = props;
+const Checkbox = ({
+  label,
+  value,
+  checked = false,
+  onChange = () => {},
+  error = false,
+  disabled = false,
+  className = 'checkbox',
+  style,
+  dataTestId,
+  required = false
+}) => {
+  const checkedRef = React.useRef(checked);
+  const [isChecked, setIsChecked] = React.useState(checked);
+  const handleOnChange = event => {
+    setIsChecked(prev => !prev);
+    onChange(event);
+  };
+  const checkmarkClassName = React.useMemo(() => {
+    let isCheckStr = '';
+    let isDisabledStr = '';
+    // if they are different
+    // use the value coming from the props
+    // as it is the source of truth
+    if (checked !== checkedRef.current) {
+      setIsChecked(checked);
+      checkedRef.current = checked;
+      isCheckStr = checked ? 'checked' : 'not-checked';
+    } else if (isChecked) isCheckStr = 'checked';else isCheckStr = 'not-checked';
+    if (disabled) isDisabledStr = 'disabled';else isDisabledStr = 'not-disabled';
+    return `${isCheckStr} ${isDisabledStr}`;
+  }, [checked, isChecked, disabled]);
   return /*#__PURE__*/React__default.createElement(CheckboxWrapper, {
     style: style,
     className: className,
@@ -541,14 +546,17 @@ const Checkbox = props => {
   }, /*#__PURE__*/React__default.createElement(CheckboxLabel, null, label), /*#__PURE__*/React__default.createElement(CheckboxInput, {
     type: "checkbox",
     name: value,
-    defaultChecked: checked,
-    "aria-checked": checked,
-    onChange: onChange,
+    defaultChecked: isChecked,
+    "aria-checked": isChecked,
+    onChange: handleOnChange,
     error: error,
     disabled: disabled,
     "data-testid": dataTestId,
     required: required
-  }), /*#__PURE__*/React__default.createElement(Checkmark, null));
+  }), /*#__PURE__*/React__default.createElement(Checkmark, {
+    className: checkmarkClassName,
+    error: error
+  }));
 };
 
 const {
@@ -560,19 +568,19 @@ const {
 } = colors;
 const CheckboxWrapper$1 = /*#__PURE__*/_styled__default.label.withConfig({
   displayName: "styles__CheckboxWrapper",
-  componentId: "itly0z-0"
+  componentId: "sc-itly0z-0"
 })(["border:", " solid ", ";border-radius:", ";background-color:", ";height:", ";display:flex;align-items:center;position:relative;cursor:", ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;transition-duration:0.3s;&:hover input:not(:disabled) ~ span{border-color:", ";}&:hover{background-color:", ";}span{color:", ";transition-duration:0.3s;}"], /*#__PURE__*/polished.rem('3px'), props => props.disabled ? grey$2 : props.checked ? darkGreen$1 : grey$2, /*#__PURE__*/polished.rem('6px'), props => props.disabled ? lightGrey$2 : props.checked ? green$1 : light$2, /*#__PURE__*/polished.rem('50px'), props => props.disabled ? 'auto' : 'pointer', grey$2, props => props.disabled ? lightGrey$2 : props.checked ? green$1 : lightGrey$2, props => props.disabled ? grey$2 : props.checked ? light$2 : null);
 const CheckboxLabel$1 = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__CheckboxLabel",
-  componentId: "itly0z-1"
+  componentId: "sc-itly0z-1"
 })(["margin-left:", ";line-height:", ";"], /*#__PURE__*/polished.rem('40px'), /*#__PURE__*/polished.rem('24px'));
 const CheckboxInput$1 = /*#__PURE__*/_styled__default.input.withConfig({
   displayName: "styles__CheckboxInput",
-  componentId: "itly0z-2"
+  componentId: "sc-itly0z-2"
 })(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled) ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){&:checked ~ span{border-color:", ";}}"], light$2, light$2, grey$2, grey$2, grey$2, lightGrey$2, light$2);
 const Checkmark$1 = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__Checkmark",
-  componentId: "itly0z-3"
+  componentId: "sc-itly0z-3"
 })(["position:absolute;left:", ";border:", " solid ", ";border-radius:999px;background-color:", ";width:", ";height:", ";transition-duration:0.3s;&:after{content:'';position:absolute;display:none;top:", ";left:", ";width:", ";height:", ";border:solid ", ";border-width:0 ", " ", " 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], /*#__PURE__*/polished.rem('10px'), /*#__PURE__*/polished.rem('2px'), grey$2, light$2, /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('9px'), props => props.disabled ? light$2 : green$1, /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('3px'));
 
 const CheckboxButton = props => {
@@ -987,13 +995,12 @@ const {
 } = typography;
 const LabelStyle = /*#__PURE__*/_styled__default.label.withConfig({
   displayName: "styles__LabelStyle",
-  componentId: "pbv9we-0"
+  componentId: "sc-pbv9we-0"
 })(["display:flex;align-items:center;font-size:0.75rem;font-weight:", ";color:", ";text-transform:uppercase;svg{width:auto;height:", ";}"], bold, grey$6, /*#__PURE__*/polished.rem('15px'));
 
 const {
   grey: grey$7
 } = colors;
-
 const Label = props => {
   const {
     value,
@@ -1023,13 +1030,12 @@ const rotation = _styled.keyframes`
 `;
 const Loading = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__Loading",
-  componentId: "sxnx45-0"
+  componentId: "sc-sxnx45-0"
 })(["border:", " solid hsla(0,0%,48%,0.5);border-top-color:", ";border-radius:50%;width:", ";height:", ";animation:", " 0.8s ease infinite;"], /*#__PURE__*/polished.rem('5px'), props => props.fill || light$4, props => props.size || polished.rem('20px'), props => props.size || polished.rem('20px'), rotation);
 
 const {
   grey: grey$8
 } = colors;
-
 const Spinner = props => {
   const {
     fill = grey$8,
@@ -1050,11 +1056,9 @@ const TagWrapper = /*#__PURE__*/_styled__default.span.withConfig({
   componentId: "sc-1ghratr-0"
 })(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => {
   var _props$color;
-
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
   var _props$txtColor;
-
   return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
 }, /*#__PURE__*/polished.rem('2px'), /*#__PURE__*/polished.rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), typography.medium, /*#__PURE__*/polished.rem('1px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)');
 
@@ -1079,14 +1083,12 @@ const Tag = props => {
 
 const TagWrapper$1 = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__TagWrapper",
-  componentId: "db57da-0"
+  componentId: "sc-db57da-0"
 })(["--bg:", ";--valueColor:", ";display:flex;border:", " solid var(--bg);border-radius:", ";line-height:1;max-width:100%;width:max-content;overflow:hidden;span{display:inline-block;padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";&.label{flex:1;color:var(--bg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-transform:uppercase;}&.value{background-color:var(--bg);color:var(--valueColor);}}&:not(:first-child){margin-left:", ";}"], props => {
   var _props$color;
-
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
 }, props => {
   var _props$valueColor;
-
   return useColor((_props$valueColor = props.valueColor) != null ? _props$valueColor : 'black').color;
 }, /*#__PURE__*/polished.rem('2px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), typography.medium, /*#__PURE__*/polished.rem('1px'), /*#__PURE__*/polished.rem('5px'));
 
@@ -1266,6 +1268,7 @@ const SelectWrapper = _styled__default.div`
     }
 
     &__value-container {
+      display: flex;
       align-items: center;
       padding: 0 ${/*#__PURE__*/polished.rem('15px')};
     }
@@ -1331,6 +1334,10 @@ const SelectWrapper = _styled__default.div`
 
   .select__value-container.select__value-container--is-multi > div {
     align-items: stretch;
+
+    .select__multi-value__remove {
+      padding-right: 0;
+    }
   }
 
   .select__value-container,
@@ -1376,10 +1383,8 @@ const SelectGroupLabel = _styled__default.span`
 const {
   Option
 } = Select$1.components;
-const FormatGroupLabel = ({
-  label,
-  options
-}) => {
+const FormatGroupLabel = props => {
+  var _props$options;
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -1388,16 +1393,22 @@ const FormatGroupLabel = ({
     }
   }, /*#__PURE__*/React__default.createElement(SelectGroupLabel, {
     className: "selective-options-group-label"
-  }, label), /*#__PURE__*/React__default.createElement(Tag, {
-    value: `${options == null ? void 0 : options.length}`
+  }, props.label), /*#__PURE__*/React__default.createElement(Tag, {
+    value: `${(_props$options = props.options) == null ? void 0 : _props$options.length}`
   }));
 };
 const CustomSelectOption = (props, commonProps) => /*#__PURE__*/React__default.createElement(Option, Object.assign({}, props, commonProps), props.data.icon ? /*#__PURE__*/React__default.createElement(Icon, {
   icon: props.data.icon
-}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+}) : props.data.customImage ? /*#__PURE__*/React__default.createElement("img", {
+  src: props.data.customImage,
+  alt: props.data.label
+}) : null, props.data.label);
 const CustomSelectValue = props => /*#__PURE__*/React__default.createElement("div", null, props.data.icon ? /*#__PURE__*/React__default.createElement(Icon, {
   icon: props.data.icon
-}) : props.data.customImage ? props.data.customImage : null, props.data.label);
+}) : props.data.customImage ? /*#__PURE__*/React__default.createElement("img", {
+  src: props.data.customImage,
+  alt: props.data.label
+}) : null, props.data.label);
 
 const SelectInteractive = ({
   name,
@@ -1945,7 +1956,6 @@ const Slideshow = props => {
           title: `Slide ${index + 1} selected`
         });
       }
-
       return /*#__PURE__*/React__default.createElement("li", null, /*#__PURE__*/React__default.createElement("button", {
         onClick: onClickHandler,
         onKeyDown: onClickHandler,
@@ -2147,13 +2157,11 @@ const Toggle = ({
   // tracks the active state so it's easier to test
   const [state, setState] = React.useState(checked);
   const [id, setId] = React.useState('');
-
   const handleClick = value => {
     if (disabled) return;
     setState(value);
     return onClick(value);
   };
-
   React.useEffect(() => {
     // If the ID stays outside the component
     // it will be the same if we instantiate
@@ -2305,15 +2313,13 @@ const FilePicker = props => {
     disabled = false
   } = props;
   const [fileName, setFileName] = React.useState(value ? value : placeholder);
-
   const getUploadedFileName = e => {
     let files = e.target.files,
-        value = e.target.value,
-        fileName;
+      value = e.target.value,
+      fileName;
     if (files && files.length > 1) fileName = `${files.length} ${pluralText}`;else fileName = value.split('\\').pop();
     if (fileName) setFileName(fileName);
   };
-
   return /*#__PURE__*/React__default.createElement(Wrapper$6, {
     disabled: disabled,
     minimal: minimal,
@@ -2395,7 +2401,6 @@ const ActionMenuList = props => {
     }
   }, /*#__PURE__*/React__default.createElement("span", null, value)))));
 };
-
 const ActionsMenu = props => {
   const {
     ariaLabel = '',
@@ -2511,19 +2516,16 @@ const EmptyTable = props => {
   const headCells = tableHead.map((value, index) => /*#__PURE__*/React__default.createElement("div", {
     key: index
   }, value));
-
   for (let i = 0; i < tableHead.length; i++) {
     columns.push( /*#__PURE__*/React__default.createElement("div", {
       key: i
     }, /*#__PURE__*/React__default.createElement(EmptyTableCellText, null)));
   }
-
   for (let i = 0; i < 3; i++) {
     rows.push( /*#__PURE__*/React__default.createElement(EmptyTableRow, {
       key: i
     }, columns));
   }
-
   return /*#__PURE__*/React__default.createElement(EmptyTableWrapper, null, /*#__PURE__*/React__default.createElement(EmptyTableOverlay, null, /*#__PURE__*/React__default.createElement("span", null, value)), /*#__PURE__*/React__default.createElement(EmptyTableHead, {
     border: border
   }, headCells), /*#__PURE__*/React__default.createElement(EmptyTableBody, {
@@ -2570,7 +2572,7 @@ const {
 } = colors;
 const Wrapper$7 = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__Wrapper",
-  componentId: "d2fn4g-0"
+  componentId: "sc-d2fn4g-0"
 })(["--default:", ";--light:", ";--dark:", ";", " ", " ", " border-width:", ";border-style:solid;border-color:var(--default);border-radius:", ";background-color:var(--light);padding:", ";div{&:first-child{flex:1;}p{margin:0;}}", ""], grey$e, lightGrey$c, darkGrey$1, props => props.color === 'grey' && _styled.css`
       --default: ${grey$e};
       --light: ${lightGrey$c};
@@ -2651,15 +2653,15 @@ const {
 } = typography;
 const TableWrapper = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__TableWrapper",
-  componentId: "vmoy3z-0"
+  componentId: "sc-vmoy3z-0"
 })(["position:relative;"]);
 const OverflowWrapper = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__OverflowWrapper",
-  componentId: "vmoy3z-1"
+  componentId: "sc-vmoy3z-1"
 })(["@media ", "{display:block;border-radius:", ";background:linear-gradient(to right,", " 30%,rgba(255,255,255,0)),linear-gradient(to right,rgba(255,255,255,0),", " 70%) 0 100%,radial-gradient( farthest-side at 0% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ),radial-gradient( farthest-side at 100% 50%,rgba(0,0,0,0.2),rgba(0,0,0,0) ) 0 100%;background-repeat:no-repeat;background-color:#fff;background-size:", " 100%,", " 100%,", " 100%,", " 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;-webkit-scrollbar-width:none;-moz-scrollbar-width:none;-ms-scrollbar-width:none;scrollbar-width:none;}"], device.s, /*#__PURE__*/polished.rem('6px'), light$c, light$c, /*#__PURE__*/polished.rem('40px'), /*#__PURE__*/polished.rem('40px'), /*#__PURE__*/polished.rem('14px'), /*#__PURE__*/polished.rem('14px'));
 const Table = /*#__PURE__*/_styled__default.table.withConfig({
   displayName: "styles__Table",
-  componentId: "vmoy3z-2"
+  componentId: "sc-vmoy3z-2"
 })(["width:100%;border-width:0;border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;@media ", "{border-width:", ";}th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;align-items:center;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;", "}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], grey$f, /*#__PURE__*/polished.rem('6px'), device.s, props => props.border ? polished.rem('1px') : '0', /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('1px'), /*#__PURE__*/polished.rem('-1px'), /*#__PURE__*/polished.rem('1px'), device.s, bold$3, grey$f, props => props.loadingState ? 'transparent' : lightGrey$d, device.s, /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('30px'), /*#__PURE__*/polished.rem('30px'), normal$7, grey$f, /*#__PURE__*/polished.rem('15px'), bold$3, props => props.loadingState && _styled.css`
             width: ${polished.rem('75px')};
             height: ${polished.rem('15px')};
@@ -2681,7 +2683,7 @@ const Table = /*#__PURE__*/_styled__default.table.withConfig({
           `, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('10px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('36px'), /*#__PURE__*/polished.rem('-170px'), device.s, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('40px'));
 const SkeletonCell = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__SkeletonCell",
-  componentId: "vmoy3z-3"
+  componentId: "sc-vmoy3z-3"
 })(["@keyframes placeholderSkeleton{0%{background-position:", " 0;}100%{background-position:", " 0;}}width:100%;height:", " !important;background:#f6f7f8;background-image:-webkit-linear-gradient( left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100% );background-repeat:no-repeat;background-size:", " 100%;animation-fill-mode:forwards;animation-name:placeholderSkeleton;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:1.5s;"], /*#__PURE__*/polished.rem('-800px'), /*#__PURE__*/polished.rem('800px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('800px'));
 
 const Table$1 = props => {
@@ -2718,7 +2720,6 @@ const Table$1 = props => {
   const headSkeleton = /*#__PURE__*/React__default.createElement("th", null, /*#__PURE__*/React__default.createElement(SkeletonCell, null));
   const cellSkeleton = /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(SkeletonCell, null));
   const columnsSkeleton = columns.length > 0 ? columns.length : loadingColumns;
-
   if (showEmpty && !hasValues) {
     const columnHeaders = columns.map(column => column.value);
     return /*#__PURE__*/React__default.createElement(EmptyTable, {
@@ -2727,7 +2728,6 @@ const Table$1 = props => {
       value: emptyValue
     });
   }
-
   return /*#__PURE__*/React__default.createElement(TableWrapper, null, /*#__PURE__*/React__default.createElement(OverflowWrapper, null, /*#__PURE__*/React__default.createElement(Table, {
     border: border,
     "data-testid": dataTestId,
@@ -2814,7 +2814,6 @@ const TableRow = /*#__PURE__*/_styled__default.tr.withConfig({
 const {
   light: light$d
 } = colors;
-
 const TableDnD = props => {
   const {
     border = false,
@@ -2845,7 +2844,6 @@ const TableDnD = props => {
   const hasActionMenu = actions.length > 0;
   const validValues = values.filter(hasValue);
   const hasValues = Array.isArray(values) && values.length > 0;
-
   if (showEmpty && !hasValues) {
     const columnHeaders = columns.map(column => column.value);
     return /*#__PURE__*/React__default.createElement(EmptyTable, {
@@ -2854,7 +2852,6 @@ const TableDnD = props => {
       value: emptyValue
     });
   }
-
   const reorder = (list, startIndex, endIndex) => {
     const result = Array.from(list);
     const [removed] = result.splice(startIndex, 1);
@@ -2864,17 +2861,14 @@ const TableDnD = props => {
       return dragItem;
     });
   };
-
   const getItemStyle = (isDragging, draggableStyle) => ({
     userSelect: 'none',
     background: isDragging ? light$d : 'transparent',
     ...draggableStyle
   });
-
   const getListStyle = isDraggingOver => ({
     background: isDraggingOver ? light$d : 'transparent'
   });
-
   return (
     /*#__PURE__*/
     // @ts-ignore
@@ -2886,7 +2880,6 @@ const TableDnD = props => {
         if (!result.destination) {
           return;
         }
-
         const newValues = reorder(values, result.source.index, result.destination.index);
         onChange(newValues);
         setDraggableId('');
@@ -2977,7 +2970,7 @@ const {
 } = colors;
 const Wrapper$8 = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__Wrapper",
-  componentId: "mbja2a-0"
+  componentId: "sc-mbja2a-0"
 })(["display:inline-block;> label{margin-bottom:", ";color:", ";span{color:", ";}}&:not(:last-child){margin-bottom:", ";}"], /*#__PURE__*/polished.rem('5px'), props => props.error ? red$9 : grey$h, props => props.error ? red$9 : normal$9, /*#__PURE__*/polished.rem('15px'));
 
 const FormGroup = props => {
@@ -3031,18 +3024,14 @@ const NumberInputSpinner = props => {
       isFirstRender.current = false;
       return;
     }
-
     setNumber(value);
   }, [value]);
-
   const updateValue = value => {
     if (onChange) {
       onChange(value);
     }
-
     setNumber(value);
   };
-
   return /*#__PURE__*/React__default.createElement(Wrapper$9, null, /*#__PURE__*/React__default.createElement(Button$1, {
     className: "remove-button",
     "aria-label": decreaseAriaLabel,
@@ -3322,9 +3311,7 @@ const PaginationControl = props => {
         if (window.innerWidth > 700) setPageDisplayed(3);
       }
     }
-
     updateDimensions();
-
     if (typeof window !== 'undefined') {
       window.addEventListener('resize', updateDimensions);
     }
@@ -5385,20 +5372,16 @@ const DataWarning = props => {
     type = 'login',
     children
   } = props;
-
   switch (type) {
     case 'login':
       icon = /*#__PURE__*/React__default.createElement(IconLoginOnly, null);
       break;
-
     case 'data':
       icon = /*#__PURE__*/React__default.createElement(IconEmptyData, null);
       break;
-
     default:
       icon = /*#__PURE__*/React__default.createElement(IconLoginOnly, null);
   }
-
   return /*#__PURE__*/React__default.createElement(Wrapper$c, {
     type: type
   }, icon, /*#__PURE__*/React__default.createElement("div", null, children));
@@ -5618,6 +5601,7 @@ const Field = _styled__default.div`
 
   input {
     flex: 1;
+    margin-right: 0;
     border-radius: ${/*#__PURE__*/polished.rem('6px')} 0 0 ${/*#__PURE__*/polished.rem('6px')};
 
     &:focus {
@@ -5644,7 +5628,6 @@ const Field = _styled__default.div`
     justify-content: center;
     align-items: center;
     padding: 0 ${/*#__PURE__*/polished.rem('20px')};
-    text-transform: uppercase;
     white-space: nowrap;
     transition-duration: 0.3s;
     cursor: pointer;
@@ -5723,11 +5706,11 @@ const {
 } = typography;
 const Wrapper$g = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__Wrapper",
-  componentId: "znznmm-0"
+  componentId: "sc-znznmm-0"
 })(["display:flex;align-items:center;ul.menu{width:0;animation:showAnimation 1s forwards;animation-delay:0.5s;overflow:hidden;}@keyframes showAnimation{0%{width:0%;}100%{width:100%;}}ul{margin:0;max-width:max-content;padding:0;&.menu{display:flex;li:not(:last-child){margin-right:", ";}}li{position:relative;list-style:none;a{display:flex;align-items:center;padding:", ";color:", ";text-transform:capitalize;text-decoration:none;white-space:nowrap;transition-duration:0.3s;svg{margin-right:", ";width:auto;height:", ";min-width:", ";fill:", ";transition-duration:0.3s;}&:hover{color:", ";svg{fill:", ";}}}&.active{font-weight:", ";a{pointer-events:none;svg{fill:", ";}}}}}"], /*#__PURE__*/polished.rem('10px'), /*#__PURE__*/polished.rem('10px'), normal$e, /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('24px'), /*#__PURE__*/polished.rem('24px'), grey$m, props => props.customColor ? props.customColor : purple500$5, props => props.customColor ? props.customColor : purple500$5, bold$8, props => props.customColor ? props.customColor : purple500$5);
 const More = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__More",
-  componentId: "znznmm-1"
+  componentId: "sc-znznmm-1"
 })(["position:relative;display:none;&.hide{display:initial;}ul{position:absolute;right:0;border:", " solid ", ";border-radius:", ";background-color:", ";margin-top:", ";padding:0;-moz-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);-webkit-box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);box-shadow:0 0 ", " 0 rgba(40,40,40,0.2);z-index:1;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;&.more{display:none;}&.is-open{display:inherit;}li{list-style:none;transition-duration:0.3s;&:hover{background-color:", ";cursor:pointer;a{color:", ";svg{fill:", ";}}}&:first-child{border-radius:", " ", " 0 0;}&:last-child{border-radius:0 0 ", " ", ";}a{width:100%;height:100%;padding:", ";}}}"], /*#__PURE__*/polished.rem('1px'), lightGrey$j, /*#__PURE__*/polished.rem('4px'), light$i, /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('15px'), lightGrey$j, normal$e, normal$e, /*#__PURE__*/polished.rem('4px'), /*#__PURE__*/polished.rem('4px'), /*#__PURE__*/polished.rem('4px'), /*#__PURE__*/polished.rem('4px'), /*#__PURE__*/polished.rem('15px'));
 
 const HorizontalNav = props => {
@@ -5749,37 +5732,29 @@ const HorizontalNav = props => {
     if (!ref || !ref.current) return;
     const visible = document.querySelector('ul.menu').getElementsByTagName('li');
     const more = document.querySelector('.more').getElementsByTagName('li');
-
     const moreVisibility = () => more.length > 0 ? setShowMore(true) : setShowMore(false);
-
     const removeItem = () => {
       if (visible.length === 1) return;
       let last = visible[visible.length - 1];
       document.querySelector('ul.more').prepend(last);
     };
-
     const addItem = () => {
       if (more.length === 0) return;
       let first = more[0];
       document.querySelector('ul.menu').append(first);
     };
-
     const checkOverflow = () => {
       moreVisibility();
-
       for (let i = 0; i < visible.length + 20; i++) {
         visibleMenuRef.current.scrollWidth + 50 > ref.current.offsetWidth ? removeItem() : addItem();
       }
     };
-
     checkOverflow();
-
     if (typeof window !== 'undefined') {
       moreVisibility();
       window.addEventListener('resize', checkOverflow);
       return () => window.removeEventListener('resize', checkOverflow);
     }
-
     return;
   }, [ref]);
   return /*#__PURE__*/React__default.createElement(Wrapper$g, {
@@ -5923,21 +5898,25 @@ const ModalDrawer = props => {
     footerHidden = false,
     zIndex = 10
   } = props;
+  React.useEffect(() => {
+    if (isShowing && typeof window !== 'undefined') {
+      document.documentElement.style.overflow = 'hidden';
+    } else {
+      document.documentElement.style.overflow = '';
+    }
+  }, [isShowing]);
   React.useEffect(() => {
     const fixViewport = () => {
       let vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty('--vh', `${vh}px`);
     };
-
     fixViewport();
-
     if (typeof window !== 'undefined') {
       let vh = window.innerHeight * 0.01;
       document.documentElement.style.setProperty('--vh', `${vh}px`);
       window.addEventListener('resize', fixViewport);
       return () => window.removeEventListener('resize', fixViewport);
     }
-
     return;
   }, []);
   return isShowing ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ModalOverlay$1, {
@@ -6071,14 +6050,12 @@ const LoadingState = props => {
   let paragraphs = [];
   let cards = [];
   let loadingType;
-
   for (let i = 0; i < lines; i++) {
     paragraphs.push( /*#__PURE__*/React__default.createElement("div", {
       key: i,
       className: "paragraph"
     }));
   }
-
   for (let i = 0; i < cardsNumber; i++) {
     cards.push( /*#__PURE__*/React__default.createElement("div", {
       key: i,
@@ -6099,7 +6076,6 @@ const LoadingState = props => {
       className: "paragraph"
     })));
   }
-
   switch (type) {
     case 'text':
       loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
@@ -6108,19 +6084,16 @@ const LoadingState = props => {
         className: "subtitle"
       }), paragraphs));
       break;
-
     case 'card':
       loadingType = /*#__PURE__*/React__default.createElement(Grid, {
         center: center
       }, cards);
       break;
-
     case 'value':
       loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
         className: "value"
       })));
       break;
-
     default:
       loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
         className: "title"
@@ -6128,7 +6101,6 @@ const LoadingState = props => {
         className: "subtitle"
       }), paragraphs));
   }
-
   return /*#__PURE__*/React__default.createElement(Wrapper$h, {
     type: type
   }, loadingType);
@@ -6308,7 +6280,6 @@ const TabsPanel = props => {
     onChange,
     tabs
   } = props;
-
   const getTabs = () => {
     return tabs.map((tab, index) => ({
       key: index,
@@ -6318,7 +6289,6 @@ const TabsPanel = props => {
       getContent: () => tab.renderer
     }));
   };
-
   return /*#__PURE__*/React__default.createElement(Wrapper$i, null, /*#__PURE__*/React__default.createElement(Tabs, {
     transform: false,
     unmountOnExit: unmountOnExit,