@mw-kit/mw-ui 1.7.20 → 1.7.22

package/dist/components/Input/components/Checkbox/interfaces.d.ts

@@ -7,12 +7,14 @@ interface Padding {
     bottom?: string | keyof typeof spacings;
     right?: string | keyof typeof spacings;
 }
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    label?: ElementOrString;
+export interface LabelContentProps {
     required?: boolean;
     invalid?: boolean;
     padding?: Padding;
     bordered?: true;
+}
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'>, LabelContentProps {
+    label?: ElementOrString | React.FunctionComponent<LabelContentProps>;
     type: 'checkbox';
 }
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {

package/dist/components/Input/components/Checkbox/styles.d.ts

@@ -1,3 +1,4 @@
-import { LabelProps } from './interfaces';
-export declare const Checkmark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+import { LabelContentProps, LabelProps } from './interfaces';
+export declare const Checkmark: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, LabelProps, never>;
+export declare const LabelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, LabelContentProps, never>;

package/dist/components/Input/components/Select/hooks/Select/interfaces.d.ts

@@ -1,19 +1,9 @@
-import React from 'react';
-import { CommonContext, CommonOption, CommonProps } from '../interfaces';
-export interface Option extends CommonOption {
-    onClick?: (index: number, data: Option, event: React.MouseEvent) => void;
-}
-interface LoaderReturn {
-    options: Option[];
-    lastPage: boolean;
-}
-export declare type Loader = (search: string, page: number) => Promise<LoaderReturn | Option[]>;
+import { CommonContext, Option, CommonProps } from '../interfaces';
 export interface SelectProps extends CommonProps {
     type: 'select';
     name?: string;
-    setValue: (value: string, option: CommonOption) => void;
+    setValue: (value: string, option: Option) => void;
     value: string;
-    loader: Loader;
 }
-export declare type ContextInterface = CommonContext<SelectProps, Option>;
-export {};
+export declare type ContextInterface = CommonContext<SelectProps>;
+export * from '../interfaces';

package/dist/components/Input/components/Select/hooks/SelectMultiple/interfaces.d.ts

@@ -1,19 +1,12 @@
 /// <reference types="react" />
-import { CommonContext, CommonOption, CommonProps } from '../interfaces';
-export declare type Option = CommonOption;
-interface LoaderReturn {
-    options: Option[];
-    lastPage: boolean;
-}
-export declare type Loader = (search: string, page: number) => Promise<LoaderReturn | Option[]>;
+import { CommonContext, Option, CommonProps } from '../interfaces';
 export interface SelectProps extends CommonProps {
     type: 'select-multiple';
     setValue: (value: string[], options: Option[]) => void;
     value: string[] | Option[];
     selectAll?: boolean;
-    loader: Loader;
 }
-export interface ContextInterface extends CommonContext<SelectProps, Option> {
+export interface ContextInterface extends CommonContext<SelectProps> {
     checked: [Option[], React.Dispatch<React.SetStateAction<Option[]>>];
 }
-export {};
+export * from '../interfaces';

package/dist/components/Input/components/Select/hooks/interfaces.d.ts

@@ -3,7 +3,7 @@ import { ElementOrString, SpacingOrZero, Spacings } from '../../../../../interfa
 import { Position } from '../../../../AbsoluteContainer/interfaces';
 import { Option as MenuOption } from '../../../../Menu/interfaces';
 import { InputProps } from '../../Input/interfaces';
-export interface CommonOption {
+export interface Option {
     label: string | {
         text: string;
         element: ElementOrString;
@@ -12,7 +12,15 @@ export interface CommonOption {
     data?: any;
     disabled?: boolean;
     rules?: MenuOption['rules'];
+    onClick?: (index: number, option: Pick<Option, 'value' | 'data'> & {
+        label: Exclude<Option['label'], string>;
+    }, event: React.MouseEvent) => void;
 }
+interface LoaderReturn {
+    options: Option[];
+    lastPage: boolean;
+}
+export declare type Loader = (search: string, page: number) => Promise<LoaderReturn | Option[]>;
 export interface CommonProps extends Omit<InputProps, 'type' | 'mask' | 'icon' | 'setValue' | 'name' | 'value' | 'onChange'> {
     onScrollEnd?: () => Promise<void>;
     position?: Position;
@@ -21,6 +29,7 @@ export interface CommonProps extends Omit<InputProps, 'type' | 'mask' | 'icon' |
         x: number;
         y: number;
     };
+    loader: Loader;
 }
 interface BaseContext {
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,7 +39,7 @@ interface BaseContext {
     onSearch: () => void;
     onClearSearch: () => void;
 }
-export interface CommonContext<SelectProps extends CommonProps, Option extends CommonOption> extends BaseContext {
+export interface CommonContext<SelectProps extends CommonProps> extends BaseContext {
     props: SelectProps;
     options: Option[];
 }
@@ -42,7 +51,7 @@ export interface ParsedOption extends MenuOption {
 }
 export interface useSelectReturn {
     parsedOptions: ParsedOption[];
-    options: [CommonOption[], React.Dispatch<React.SetStateAction<CommonOption[]>>];
+    options: [Option[], React.Dispatch<React.SetStateAction<Option[]>>];
     input: {
         value: string;
     };

package/dist/components/Input/components/Select/interfaces.d.ts

@@ -1,2 +1 @@
-export type { Option as SelectOption, Loader as SelectLoader, } from './hooks/Select/interfaces';
-export type { Option as SelectMultipleOption, Loader as SelectMultipleLoader, } from './hooks/SelectMultiple/interfaces';
+export type { Option as SelectOption, Loader as SelectLoader, } from './hooks/interfaces';

package/dist/index.js

@@ -12941,9 +12941,9 @@ var Input$1 = React__default.forwardRef(function (props, ref) {
 });
 Input$1.displayName = 'Input';
 
-var _templateObject$d, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4;
-var width = '17px';
-var Checkmark = styled__default.span(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0px;\n  left: 0;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n"])), width, width, function (_ref) {
+var _templateObject$d, _templateObject2$b, _templateObject3$a, _templateObject4$9, _templateObject5$8, _templateObject6$6, _templateObject7$5, _templateObject8$4, _templateObject9$4;
+var size = '17px';
+var Checkmark = styled__default.div(_templateObject$d || (_templateObject$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n\n  border-style: solid;\n  border-color: ", ";\n  border-width: 1px;\n  border-radius: 4px;\n\n  transition-property: border-color;\n  transition-duration: 0.25s;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n\n  :after {\n    content: '';\n    position: absolute;\n\n    left: 50%;\n    top: 50%;\n    height: 0;\n    width: 0;\n\n    border-style: solid;\n    border-color: ", ";\n    border-width: 0;\n    transform: rotate(45deg);\n\n    transition-property: width height border-width top left;\n    transition-duration: 0.25s;\n    transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n  }\n\n  /** if there is a label, it will be placed after this element */\n  + * {\n    flex: 1;\n  }\n"])), size, size, function (_ref) {
   var theme = _ref.theme;
   return theme.colors.white;
 }, function (_ref2) {
@@ -12953,7 +12953,7 @@ var Checkmark = styled__default.span(_templateObject$d || (_templateObject$d = _
   var theme = _ref3.theme;
   return theme.colors.blue;
 });
-var Label$1 = styled__default.label(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  display: block;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  > div {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    padding-left: calc(", " + ", ");\n    user-select: none;\n    min-height: 17px;\n\n    > div:first-child {\n      display: inline-block;\n      ", "\n      line-height: 14px;\n\n      ", "\n    }\n\n    > input {\n      position: absolute;\n      opacity: 0;\n      height: 0;\n      width: 0;\n    }\n\n    :hover ", " {\n      background-color: ", ";\n    }\n\n    > input:checked ~ ", " {\n      border-color: ", ";\n\n      :after {\n        width: 5px;\n        height: 9.5px;\n        border-width: 0 2px 2px 0;\n        left: 5px;\n        top: 1px;\n      }\n    }\n\n    ", ";\n  }\n"])), function (_ref4) {
+var Label$1 = styled__default.label(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  display: flex;\n  align-items: center;\n\n  user-select: none;\n  min-height: ", ";\n  min-width: ", ";\n  gap: ", ";\n\n  > input {\n    position: absolute;\n    opacity: 0;\n    height: 1px;\n    width: 1px;\n  }\n\n  :hover ", " {\n    background-color: ", ";\n  }\n\n  > input:checked ~ ", " {\n    border-color: ", ";\n\n    :after {\n      width: 5px;\n      height: 9.5px;\n      border-width: 0 2px 2px 0;\n      left: 5px;\n      top: 1px;\n    }\n  }\n\n  ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.useTypography('p');
 }, function (_ref5) {
@@ -13014,47 +13014,59 @@ var Label$1 = styled__default.label(_templateObject2$b || (_templateObject2$b =
       invalid = _ref7.invalid;
   if (!bordered) return;
   return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n      padding: ", " ", ";\n\n      border-width: 1px;\n      border-style: solid;\n      border-color: ", ";\n      border-radius: 4px;\n    "])), theme.spacings.s2, theme.spacings.s3, theme.colors[invalid ? 'warningRed' : 'lightGrey']);
-}, width, function (_ref8) {
+}, size, size, function (_ref8) {
   var theme = _ref8.theme;
   return theme.spacings.s1;
-}, function (_ref9) {
+}, Checkmark, function (_ref9) {
   var theme = _ref9.theme;
-  return theme.useTypography('p');
-}, function (_ref10) {
-  var required = _ref10.required;
-  if (!required) return;
-  return styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
-}, Checkmark, function (_ref11) {
-  var theme = _ref11.theme;
   return theme.colors.iceWhite;
-}, Checkmark, function (_ref12) {
-  var theme = _ref12.theme;
+}, Checkmark, function (_ref10) {
+  var theme = _ref10.theme;
   return theme.colors.blue;
-}, function (_ref13) {
-  var theme = _ref13.theme,
-      invalid = _ref13.invalid;
+}, function (_ref11) {
+  var theme = _ref11.theme,
+      invalid = _ref11.invalid;
   if (!invalid) return;
-  return styled.css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n        ", ",\n        > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n          border-color: ", ";\n        }\n      "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+  return styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n      ", ",\n      > input:checked ~ ", ", \n      > input:checked ~ ", ":after {\n        border-color: ", ";\n      }\n    "])), Checkmark, Checkmark, Checkmark, theme.colors.warningRed);
+});
+var LabelContent = styled__default.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  ", "\n  line-height: 14px;\n  flex: 1;\n  overflow: hidden;\n\n  ", "\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.useTypography('p');
+}, function (_ref13) {
+  var required = _ref13.required;
+  if (!required) return;
+  return styled.css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Checkbox = React__default.forwardRef(function (props, ref) {
-  var label = props.label,
-      disabled = props.disabled,
+  var disabled = props.disabled,
       required = props.required,
       invalid = props.invalid,
       padding = props.padding,
       bordered = props.bordered;
   var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'padding', 'bordered']);
+
+  var _ref = typeof props.label === 'function' ? [props.label] : [LabelContent, props.label],
+      LabelComponent = _ref[0],
+      children = _ref[1];
+
   return React__default.createElement(Label$1, {
     disabled: disabled ? 1 : 0,
     required: required ? 1 : 0,
     invalid: invalid ? 1 : 0,
     bordered: bordered ? 1 : 0,
     padding: padding
-  }, React__default.createElement("div", null, React__default.createElement("div", null, label), React__default.createElement("input", Object.assign({}, htmlProps, {
+  }, React__default.createElement("input", Object.assign({}, htmlProps, {
     type: 'checkbox',
     ref: ref
-  })), React__default.createElement(Checkmark, null)));
+  })), React__default.createElement(Checkmark, null), React__default.createElement(LabelComponent, Object.assign({}, {
+    disabled: disabled,
+    required: required,
+    invalid: invalid,
+    bordered: bordered,
+    padding: padding,
+    children: children
+  })));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -13089,7 +13101,7 @@ var inputTimeWidth = {
   withoutSeconds: '66px'
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$4;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$a, _templateObject5$9, _templateObject6$7, _templateObject7$6, _templateObject8$5, _templateObject9$5;
 var Container$7 = styled__default.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: ", ";\n  background-color: ", ";\n  position: relative;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s3;
@@ -13140,7 +13152,7 @@ var MonthBtn = styled__default.div(_templateObject7$6 || (_templateObject7$6 = _
   if (!onClick) return;
   return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var NavBtn = styled__default.button(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: none;\n  background-color: transparent;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n  :not(:disabled) {\n    cursor: pointer;\n    :hover {\n      background-color: ", ";\n    }\n  }\n\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.25s;\n"])), function (_ref15) {
+var NavBtn = styled__default.button(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 14px;\n  width: 32px;\n  height: 32px;\n  box-shadow: none;\n  border: none;\n  background-color: transparent;\n\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  :disabled {\n    visibility: hidden;\n  }\n  :not(:disabled) {\n    cursor: pointer;\n    :hover {\n      background-color: ", ";\n    }\n  }\n\n  transition-property: background-color;\n  transition-timing-function: ease-in-out;\n  transition-duration: 0.25s;\n"])), function (_ref15) {
   var theme = _ref15.theme;
   return theme.useTypography('p');
 }, function (_ref16) {
@@ -13205,7 +13217,7 @@ var MonthPicker = function MonthPicker(props) {
   }));
 };
 
-var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$5, _templateObject10$3, _templateObject11$3;
+var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$3, _templateObject11$3;
 var Footer = styled__default.div(_templateObject$f || (_templateObject$f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n\n  > button:last-child {\n    margin-left: auto;\n  }\n"])));
 var WeekContainer = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n\n  :not(:first-child) {\n    border-top: 1px solid ", ";\n  }\n\n  > * {\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    width: 32px;\n    height: 32px;\n\n    color: ", ";\n    box-shadow: none;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    text-align: center;\n\n    border: 1px solid transparent;\n    :not(:last-child) {\n      border-right-color: ", ";\n    }\n  }\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -13249,7 +13261,7 @@ var DayContainer = styled__default.button(_templateObject4$b || (_templateObject
     }, hover('white'));
   }
 
-  return styled.css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
+  return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
 }, function (_ref10) {
   var theme = _ref10.theme;
   return theme.colors.silver;
@@ -14419,15 +14431,20 @@ var getOptions = function getOptions(props, options) {
       element: option.label
     } : option.label;
     var value = option.value,
-        onClick = option.onClick;
+        onClick = option.onClick,
+        data = option.data;
     return {
       label: label,
       onClick: onClick ? function (index, _option, event) {
-        onClick(index, option, event);
+        onClick(index, {
+          label: label,
+          value: value,
+          data: data
+        }, event);
       } : function () {
         props.setValue(value, option);
       },
-      data: option.data,
+      data: data,
       disabled: option.disabled,
       rules: option.rules
     };
@@ -14570,6 +14587,9 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
       text: option.label,
       element: option.label
     } : option.label;
+    var value = option.value,
+        onClick = option.onClick,
+        data = option.data;
     return {
       label: {
         text: label.text,
@@ -14598,7 +14618,14 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
           }
         })
       },
-      data: option.data,
+      onClick: onClick ? function (index, _option, event) {
+        onClick(index, {
+          label: label,
+          value: value,
+          data: data
+        }, event);
+      } : undefined,
+      data: data,
       disabled: option.disabled,
       rules: option.rules,
       keepOpen: true
@@ -14613,7 +14640,8 @@ var getInputValue$1 = function getInputValue(value) {
 
 var useSelectMultiple = function useSelectMultiple(props) {
   var init = function init() {
-    return props.value.length === 0 ? [] : typeof props.value[0] === 'string' ? [].concat(props.value).map(function (value) {
+    if (props.value.length) return [];
+    return typeof props.value[0] === 'string' ? [].concat(props.value).map(function (value) {
       return {
         value: value,
         label: value
@@ -15291,7 +15319,7 @@ var Phone = Object.assign(Component, {
   getPhoneDetails: getPhoneDetails
 });
 
-var _templateObject$q, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$6;
+var _templateObject$q, _templateObject2$k, _templateObject3$f, _templateObject4$c, _templateObject5$b, _templateObject6$9, _templateObject7$8, _templateObject8$7, _templateObject9$7;
 var RelativeContainer$4 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  input {\n    color: transparent;\n  }\n"])));
 var LabelContainer$2 = styled__default.div(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -15323,7 +15351,7 @@ var Container$8 = styled__default.div(_templateObject3$f || (_templateObject3$f
 var Button$3 = styled__default.button(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref6) {
   var onClick = _ref6.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 
 var DatePicker = React__default.forwardRef(function (props, ref) {
@@ -15520,7 +15548,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$s, _templateObject2$m, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$8, _templateObject9$7, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
+var _templateObject$s, _templateObject2$m, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$4, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
 var bullet = styled.css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n  appearance: none;\n  width: ", ";\n  height: ", ";\n  border-radius: 100%;\n  border-width: 1px;\n  border-style: solid;\n  background-color: ", ";\n  box-shadow: 0px 1px 3px ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.spacings.s4;
@@ -15563,7 +15591,7 @@ var InputContainer = styled__default.div(_templateObject6$b || (_templateObject6
 
   return styled.css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n      ", " > span {\n        background-color: ", ";\n      }\n\n      ", " {\n        /** firefox */\n        ::-moz-range-thumb {\n          border-color: ", ";\n        }\n        /** ie */\n        ::-ms-thumb {\n          border-color: ", ";\n        }\n        /** chrome */\n        ::-webkit-slider-thumb {\n          border-color: ", ";\n        }\n      }\n    "])), SelectedArea, theme.colors.warningRed, Input$2, theme.colors.warningRed, theme.colors.warningRed, theme.colors.warningRed);
 });
-var MinMaxLabelContainer = styled__default.div(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var MinMaxLabelContainer = styled__default.div(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
 var LabelsContainer = styled__default.div(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref11) {
   var position = _ref11.position;
 
@@ -15982,7 +16010,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$5;
+var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$5, _templateObject11$5;
 var RelativeContainer$5 = styled__default.div(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > input,\n  > label > input {\n    color: transparent;\n    background-color: transparent;\n    width: 1px;\n    height: 1px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    border: 0;\n    padding: 0;\n    overflow: hidden;\n    outline: none;\n    box-shadow: none;\n  }\n"])));
 var LabelContainer$5 = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16023,7 +16051,7 @@ var Container$9 = styled__default.div(_templateObject4$g || (_templateObject4$g
 var Button$4 = styled__default.button(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref9) {
   var onClick = _ref9.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return styled.css(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 var LabelText$1 = styled__default.label(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref10) {
   var theme = _ref10.theme;
@@ -16887,7 +16915,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$A, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$d, _templateObject8$a, _templateObject9$9, _templateObject10$6;
+var _templateObject$A, _templateObject2$r, _templateObject3$l, _templateObject4$h, _templateObject5$g, _templateObject6$e, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$6;
 var Background = styled__default.div(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  backdrop-filter: blur(3px);\n  background-color: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.getColor('black', 25);
@@ -16914,7 +16942,7 @@ var FooterButtons = styled__default.div(_templateObject8$a || (_templateObject8$
   var theme = _ref5.theme;
   return theme.spacings.s3;
 });
-var Container$a = styled__default.div(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
+var Container$a = styled__default.div(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), function (_ref6) {
   var theme = _ref6.theme,
       size = _ref6.size,
       customSize = _ref6.customSize,
@@ -17117,7 +17145,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$E, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$e, _templateObject8$b, _templateObject9$a, _templateObject10$7;
+var _templateObject$E, _templateObject2$s, _templateObject3$m, _templateObject4$i, _templateObject5$h, _templateObject6$f, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$7;
 var Container$b = styled__default.div(_templateObject$E || (_templateObject$E = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  background: #fff;\n  border: 1px solid #d4d4d5;\n  border-radius: 4px;\n  border-left-width: 5px;\n  padding: 14px;\n  ", "\n  ", "\n    ", "\n  ", "\n\n  ", "\n    ", "\n    ", "\n\n    ", "\n    ", "\n"])), function (props) {
   return props.size === 'mini' && styled.css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -17133,7 +17161,7 @@ var Container$b = styled__default.div(_templateObject$E || (_templateObject$E =
 }, function (props) {
   return props.borderType === 'warning' && styled.css(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n      border-left-color: #fbcb01;\n    "])));
 }, function (props) {
-  return props.borderType === 'danger' && styled.css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
+  return props.borderType === 'danger' && styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
   return props.borderType === 'none' && styled.css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
@@ -17170,7 +17198,7 @@ var Toast = function Toast(props) {
   })), React__default.createElement(IconContent, null, React__default.createElement("h4", null, props.title), React__default.createElement("p", null, " ", props.description)));
 };
 
-var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$c, _templateObject9$b, _templateObject10$8, _templateObject11$6;
+var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$8, _templateObject11$6;
 var Container$d = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$4 = styled__default.div(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -17183,7 +17211,7 @@ var HeaderLine = styled__default.div(_templateObject6$h || (_templateObject6$h =
 }, function (props) {
   return props.size === 'small' && styled.css(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n      width: 25%;\n    "])));
 }, function (props) {
-  return props.size === 'medium' && styled.css(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
+  return props.size === 'medium' && styled.css(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
@@ -17365,7 +17393,7 @@ var Template4 = function Template4(props) {
   }));
 };
 
-var _templateObject$L, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$f, _templateObject9$c;
+var _templateObject$L, _templateObject2$z, _templateObject3$t, _templateObject4$o, _templateObject5$n, _templateObject6$k, _templateObject7$i, _templateObject8$f, _templateObject9$d;
 var Container$h = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 746px;\n  height: 169px;\n  border: 1px solid #e6e6e7;\n  border-radius: 4px;\n  padding: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n"])));
 var Circle = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  width: 141px;\n  height: 141px;\n  background-color: #dddedf;\n  border-radius: 50%;\n"])));
 var HeaderLine$4 = styled__default.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -17386,7 +17414,7 @@ var CustomLine$1 = styled__default(HeaderLine$4)(_templateObject8$f || (_templat
 }, function (props) {
   return props.color;
 });
-var MainContent$2 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
+var MainContent$2 = styled__default.div(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  margin-left: 35px;\n"])));
 
 var Template5 = function Template5(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -17413,7 +17441,7 @@ var Template5 = function Template5(props) {
   })));
 };
 
-var _templateObject$M, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$g, _templateObject9$d;
+var _templateObject$M, _templateObject2$A, _templateObject3$u, _templateObject4$p, _templateObject5$o, _templateObject6$l, _templateObject7$j, _templateObject8$g, _templateObject9$e;
 var Container$i = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  width: 395px;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  background-color: #f5f5f5;\n"])));
 var Header$6 = styled__default.div(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n"])));
 var Footer$3 = styled__default.div(_templateObject3$u || (_templateObject3$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  border-top: 1px solid #b1b1b3;\n  height: 50px;\n"])));
@@ -17428,7 +17456,7 @@ var HeaderLine$5 = styled__default.div(_templateObject4$p || (_templateObject4$p
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$d || (_templateObject9$d = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
+var CustomLine$2 = styled__default(HeaderLine$5)(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  background-color: ", ";\n  border: 1px solid #dedede5e;\n"])), function (props) {
   return props.width;
 }, function (props) {
   return props.height;
@@ -17456,7 +17484,7 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$N, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$h, _templateObject9$e, _templateObject10$9;
+var _templateObject$N, _templateObject2$B, _templateObject3$v, _templateObject4$q, _templateObject5$p, _templateObject6$m, _templateObject7$k, _templateObject8$h, _templateObject9$f, _templateObject10$9;
 var Container$j = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$7 = styled__default.div(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$6 = styled__default.div(_templateObject3$v || (_templateObject3$v = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -17477,7 +17505,7 @@ var CustomLine$3 = styled__default(HeaderLine$6)(_templateObject8$h || (_templat
 }, function (props) {
   return props.color;
 });
-var Main$2 = styled__default.div(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
+var Main$2 = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  margin: 10px 0;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-evenly;\n"])));
 var Circle$1 = styled__default.div(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
 
 var Template7 = function Template7(props) {
@@ -17490,7 +17518,7 @@ var Template7 = function Template7(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null), React__default.createElement(Circle$1, null)));
 };
 
-var _templateObject$O, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$l, _templateObject8$i, _templateObject9$f;
+var _templateObject$O, _templateObject2$C, _templateObject3$w, _templateObject4$r, _templateObject5$q, _templateObject6$n, _templateObject7$l, _templateObject8$i, _templateObject9$g;
 var Container$k = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 110px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$8 = styled__default.div(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$7 = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 14px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -17511,7 +17539,7 @@ var CustomLine$4 = styled__default(HeaderLine$7)(_templateObject8$i || (_templat
 }, function (props) {
   return props.color;
 });
-var Main$3 = styled__default.div(_templateObject9$f || (_templateObject9$f = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
+var Main$3 = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n"])));
 
 var Template8 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -17533,7 +17561,7 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$P, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$m, _templateObject8$j, _templateObject9$g, _templateObject10$a;
+var _templateObject$P, _templateObject2$D, _templateObject3$x, _templateObject4$s, _templateObject5$r, _templateObject6$o, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject10$a;
 var Container$l = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$9 = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$8 = styled__default.div(_templateObject3$x || (_templateObject3$x = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -17554,7 +17582,7 @@ var CustomLine$5 = styled__default(HeaderLine$8)(_templateObject8$j || (_templat
 }, function (props) {
   return props.color;
 });
-var Main$4 = styled__default.div(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
+var Main$4 = styled__default.div(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  padding: 14px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n"])));
 var Circle$2 = styled__default.div(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template8$1 = function Template8(props) {
@@ -17572,7 +17600,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$Q, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$n, _templateObject8$k, _templateObject9$h, _templateObject10$b, _templateObject11$7;
+var _templateObject$Q, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$n, _templateObject8$k, _templateObject9$i, _templateObject10$b, _templateObject11$7;
 var Container$m = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteralLoose(["\n  width: 395px;\n  height: 245px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  background: #f5f5f5 0% 0% no-repeat padding-box;\n"])));
 var Header$a = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled__default.div(_templateObject3$y || (_templateObject3$y = _taggedTemplateLiteralLoose(["\n  height: ", ";\n  background-color: #ebebeb;\n  margin-left: 7px;\n\n  & + div {\n    margin-top: 7px;\n  }\n\n  ", "\n  ", "\n\n    ", "\n\n    ", "\n"])), function (props) {
@@ -17593,7 +17621,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$k || (_templat
 }, function (props) {
   return props.color;
 });
-var GraphLine = styled__default(CustomLine$6)(_templateObject9$h || (_templateObject9$h = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
+var GraphLine = styled__default(CustomLine$6)(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$5 = styled__default.div(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  padding: 0 7px 72px 7px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: flex-end;\n  justify-content: center;\n"])));
 var Circle$3 = styled__default.div(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
@@ -18390,7 +18418,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$W, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l, _templateObject9$i, _templateObject10$c, _templateObject11$8, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var _templateObject$W, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$c, _templateObject11$8, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -18467,7 +18495,7 @@ var Col = styled__default.div(_templateObject$W || (_templateObject$W = _taggedT
     if (align.content.vertical !== undefined) {
       var _v3 = align.content.vertical;
       var _a3 = aligns.content.vertical;
-      styles.push(styled.css(_templateObject9$i || (_templateObject9$i = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
+      styles.push(styled.css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n          align-items: ", ";\n        "])), _a3[_v3]));
     }
   }
 
@@ -18549,7 +18577,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$Y, _templateObject2$K, _templateObject3$E, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$m, _templateObject9$j, _templateObject10$d;
+var _templateObject$Y, _templateObject2$K, _templateObject3$E, _templateObject4$x, _templateObject5$v, _templateObject6$r, _templateObject7$p, _templateObject8$m, _templateObject9$k, _templateObject10$d;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -18617,7 +18645,7 @@ var Row = styled__default.div(_templateObject$Y || (_templateObject$Y = _taggedT
   var borderless = _ref7.borderless,
       lightestGrey = _ref7.theme.colors.lightestGrey;
   if (borderless) return;
-  return styled.css(_templateObject9$j || (_templateObject9$j = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-bottom: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;