@mw-kit/mw-ui 1.7.3 → 1.7.5

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { InputProps } from '../Input/interfaces';
 export declare type IntervalType = 'day' | 'week' | 'month' | 'custom';
-export interface DateIntervalPickerProps extends Omit<InputProps, 'type' | 'mask' | 'icon' | 'htmlDisabled' | 'clearable' | 'onPressEnter' | 'min' | 'max' | 'setValue'> {
+export interface DateIntervalPickerProps extends React.HTMLAttributes<HTMLInputElement>, Pick<InputProps, 'label' | 'invalid' | 'required' | 'disabled' | 'width' | 'borderless' | 'paddingless'> {
     type: 'date-interval-picker';
     value: [string, string];
     setValue: (value: [string, string]) => void;

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

@@ -8,7 +8,12 @@ interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
     invalid: 1 | 0;
     disabled: 1 | 0;
     paddingless: 1 | 0;
+    borderless: 1 | 0;
 }
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ContainerProps, never>;
 export declare const Button: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+interface StyledLabelTextProps {
+    required: 1 | 0;
+}
+export declare const LabelText: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, StyledLabelTextProps, never>;
 export {};

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

@@ -1,13 +1,7 @@
-import { ElementOrString } from '../../../../../../interfaces';
+import React from 'react';
 import { CommonContext, CommonOption, CommonProps } from '../interfaces';
 export interface Option extends CommonOption {
-    onClick?: (index: number, data: {
-        label: {
-            text: string;
-            element: ElementOrString;
-        };
-        value: string;
-    }) => void;
+    onClick?: (index: number, data: Option, event: React.MouseEvent) => void;
 }
 interface LoaderReturn {
     options: Option[];
@@ -17,7 +11,7 @@ export declare type Loader = (search: string, page: number) => Promise<LoaderRet
 export interface SelectProps extends CommonProps {
     type: 'select';
     name?: string;
-    setValue: (value: string) => void;
+    setValue: (value: string, option: CommonOption) => void;
     value: string;
     loader: Loader;
 }

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

@@ -8,12 +8,12 @@ interface LoaderReturn {
 export declare type Loader = (search: string, page: number) => Promise<LoaderReturn | Option[]>;
 export interface SelectProps extends CommonProps {
     type: 'select-multiple';
-    setValue: (value: string[]) => void;
-    value: string[];
+    setValue: (value: string[], options: Option[]) => void;
+    value: string[] | Option[];
     selectAll?: boolean;
     loader: Loader;
 }
 export interface ContextInterface extends CommonContext<SelectProps, Option> {
-    checked: [string[], React.Dispatch<React.SetStateAction<string[]>>];
+    checked: [Option[], React.Dispatch<React.SetStateAction<Option[]>>];
 }
 export {};

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

@@ -9,6 +9,7 @@ export interface CommonOption {
         element: ElementOrString;
     };
     value: string;
+    data?: any;
     disabled?: boolean;
     disabledText?: string;
 }

package/dist/components/Menu/interfaces.d.ts

@@ -15,8 +15,9 @@ export interface Option {
     delimiter?: boolean;
     keepOpen?: boolean;
     caret?: boolean;
-    onClick?: (index: number) => void;
+    onClick?: (index: number, option: Option, event: React.MouseEvent) => void;
     rules?: Rule[];
+    data?: any;
 }
 export interface CommonProps extends Omit<AbsoluteContainerProps, 'children'> {
     bordered?: boolean;

package/dist/index.js

@@ -12356,8 +12356,8 @@ var MenuComponent = function MenuComponent(props, ref) {
     if (rule === undefined) {
       var _onClick = option.onClick || function () {};
 
-      onClick = function onClick() {
-        _onClick(index);
+      onClick = function onClick(e) {
+        _onClick(index, option, e);
 
         closeMenu();
       };
@@ -13638,22 +13638,21 @@ var Header$1 = function Header() {
 };
 
 var getOptions = function getOptions(props, options) {
-  return options.map(function (option, index) {
+  return options.map(function (option) {
     var label = isString(option.label) ? {
       text: option.label,
       element: option.label
     } : option.label;
     var value = option.value,
-        onClick = option.onClick;
+        onClick = option.onClick,
+        data = option.data;
     return {
       label: label,
-      onClick: onClick ? function () {
-        onClick(index, {
-          label: label,
-          value: value
-        });
+      data: data,
+      onClick: onClick ? function (index, _option, event) {
+        onClick(index, option, event);
       } : function () {
-        props.setValue(value);
+        props.setValue(value, option);
       }
     };
   });
@@ -13713,7 +13712,9 @@ var Footer$1 = function Footer() {
       setOpen = context.setOpen;
 
   var onClick = function onClick() {
-    setValue([].concat(checked));
+    setValue(checked.map(function (c) {
+      return c.value;
+    }), [].concat(checked));
     setOpen(false);
   };
 
@@ -13759,9 +13760,7 @@ var Header$2 = function Header() {
 
   var onClick = function onClick() {
     setChecked(function (prev) {
-      return prev.length === options.length ? [] : options.map(function (option) {
-        return option.value;
-      });
+      return prev.length === options.length ? [] : [].concat(options);
     });
   };
 
@@ -13800,7 +13799,9 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
         text: label.text,
         element: React__default.createElement(Checkbox, {
           type: 'checkbox',
-          checked: checked.includes(option.value),
+          checked: checked.findIndex(function (e) {
+            return e.value === option.value;
+          }) !== -1,
           label: option.disabled && option.disabledText ? React__default.createElement(semanticUiReact.Popup, {
             on: 'click',
             trigger: React__default.createElement("div", null, label.element),
@@ -13814,9 +13815,9 @@ var getOptions$1 = function getOptions(options, checked, setChecked) {
             var isChecked = event.target.checked;
             setChecked(function (prev) {
               var newState = prev.filter(function (v) {
-                return v !== option.value;
+                return v.value !== option.value;
               });
-              if (isChecked) newState.push(option.value);
+              if (isChecked) newState.push(_extends({}, option));
               return newState;
             });
           },
@@ -13839,19 +13840,61 @@ 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) {
+      return {
+        value: value,
+        label: value
+      };
+    }) : [].concat(props.value);
+  };
+
   var _useState = React.useState([]),
       options = _useState[0],
       setOptions = _useState[1];
 
-  var _useState2 = React.useState([].concat(props.value)),
-      checked = _useState2[0],
-      setChecked = _useState2[1];
+  var _useState2 = React.useState(init),
+      inital = _useState2[0],
+      setInitial = _useState2[1];
+
+  var _useState3 = React.useState(init),
+      checked = _useState3[0],
+      setChecked = _useState3[1];
+
+  React.useEffect(function () {
+    var getOption = function getOption(def, options, prev) {
+      var index = options.findIndex(function (o) {
+        return o.value === def.value;
+      });
+      if (index !== -1) return _extends({}, options[index]);else {
+        var _index = prev.findIndex(function (o) {
+          return o.value === def.value;
+        });
+
+        if (_index !== -1) return _extends({}, prev[_index]);
+      }
+      return def;
+    };
+
+    var mapper = function mapper(prev) {
+      return props.value.length > 0 && typeof props.value[0] === 'string' ? props.value.map(function (value) {
+        return getOption({
+          value: value,
+          label: value
+        }, options, prev);
+      }) : props.value.map(function (value) {
+        return getOption(value, options, prev);
+      });
+    };
 
+    setInitial(mapper);
+    setChecked(mapper);
+  }, [props.value, options]);
   var parsedOptions = getOptions$1(options, checked, setChecked);
   var inputValue = getInputValue$1(props.value);
 
   var onReset = function onReset() {
-    setChecked([].concat(props.value));
+    setChecked([].concat(inital));
   };
 
   var returnData = {
@@ -13995,6 +14038,12 @@ var Select = React__default.forwardRef(function (props, ref) {
     setSearch('');
   };
 
+  var onClick = function onClick() {
+    setOpen(function (prev) {
+      return !prev;
+    });
+  };
+
   return getContext({
     setOpen: setOpen,
     search: [search, setSearch],
@@ -14009,11 +14058,7 @@ var Select = React__default.forwardRef(function (props, ref) {
   }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
     type: 'search',
     readOnly: true,
-    onClick: function onClick() {
-      setOpen(function (prev) {
-        return !prev;
-      });
-    },
+    onClick: onClick,
     loading: loading,
     icon: {
       position: 'right',
@@ -14021,7 +14066,8 @@ var Select = React__default.forwardRef(function (props, ref) {
         type: 'semantic',
         icon: open ? 'caret up' : 'caret down',
         width: '14px'
-      }
+      },
+      onClick: onClick
     },
     ref: ref
   })), React__default.createElement(Menu, Object.assign({}, menuProps, {
@@ -15276,8 +15322,8 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5;
-var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _taggedTemplateLiteralLoose(["\n  position: relative;\n  user-select: none;\n  min-width: 220px;\n\n  > :nth-child(1) input {\n    color: transparent;\n  }\n"])));
+var _templateObject$q, _templateObject2$l, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$b, _templateObject8$7, _templateObject9$7, _templateObject10$5, _templateObject11$4;
+var RelativeContainer$5 = styled__default.div(_templateObject$q || (_templateObject$q = _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$3 = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n  text-align: center;\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.useTypography('p');
@@ -15286,42 +15332,50 @@ var LabelContainer$3 = styled__default.div(_templateObject2$l || (_templateObjec
   if (!onClick) return;
   return styled.css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
-var Container$a = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1px;\n  left: 1px;\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
+var Container$a = styled__default.div(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  white-space: nowrap;\n  gap: ", ";\n  border-width: 1px;\n  border-style: solid;\n  border-color: ", ";\n\n  width: 100%;\n\n  ", ";\n\n  ", "\n\n  ", "\n"])), function (_ref3) {
   var theme = _ref3.theme;
   return theme.spacings.s1;
 }, function (_ref4) {
   var theme = _ref4.theme,
-      invalid = _ref4.invalid;
+      invalid = _ref4.invalid,
+      borderless = _ref4.borderless;
+  if (borderless) return 'transparent';
   return invalid ? theme.colors.warningRed : theme.colors.lightGrey;
 }, function (_ref5) {
   var theme = _ref5.theme,
-      paddingless = _ref5.paddingless;
-  if (paddingless) return;
-  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), theme.spacings.s2, theme.spacings.s1, theme.spacings.s2, theme.spacings.s3);
-}, function (_ref6) {
-  var invalid = _ref6.invalid,
-      theme = _ref6.theme;
-  if (!invalid) return;
-  return styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+      invalid = _ref5.invalid;
+
+  var _ref6 = invalid ? [theme.getColor('warningRed', 5), theme.colors.warningRed] : [theme.colors.white, theme.colors.darkBlue],
+      bgColor = _ref6[0],
+      color = _ref6[1];
+
+  return styled.css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      background-color: ", ";\n      /** google chrome blue background */\n      -webkit-box-shadow: 0 0 0px 1000px ", " inset !important;\n    "])), color, bgColor, bgColor);
 }, function (_ref7) {
-  var invalid = _ref7.invalid,
-      theme = _ref7.theme;
-  if (!invalid) return;
-  return styled.css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), theme.colors.warningRed);
+  var theme = _ref7.theme,
+      paddingless = _ref7.paddingless;
+  if (paddingless) return;
+  return styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n      padding: ", " ", " ", "\n        ", ";\n    "])), theme.spacings.s2, theme.spacings.s1, theme.spacings.s2, theme.spacings.s3);
 }, function (_ref8) {
   var disabled = _ref8.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 });
-var Button$4 = styled__default.button(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref9) {
+var Button$4 = 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 (_ref9) {
   var onClick = _ref9.onClick;
   if (!onClick) return;
-  return styled.css(_templateObject10$5 || (_templateObject10$5 = _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 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;
+  return theme.spacings.s1;
+}, function (_ref11) {
+  var required = _ref11.required;
+  if (!required) return;
+  return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
   var value = parse(props.value);
-  var disabled = props.disabled || props.loading;
 
   var _useState = React.useState(null),
       open = _useState[0],
@@ -15364,7 +15418,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     var newIntervalType = identify(value);
     setIntervalType(newIntervalType);
   }, [props.value, props.min, props.max]);
-  var inputProps = filterObject(props, ['min', 'max']);
+  var inputProps = filterObject(props, ['label', 'invalid', 'required', 'disabled', 'width', 'borderless', 'paddingless', 'type', 'value', 'setValue', 'getLabel', 'max', 'min', 'only']);
 
   var getArrowProps = function getArrowProps(key) {
     if (value.some(function (v) {
@@ -15401,7 +15455,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
   var invalid = props.invalid || !validate(value, min, max);
 
   var onClick = function () {
-    if (inputProps.disabled || !['custom', undefined].includes(props.only)) {
+    if (props.disabled || !['custom', undefined].includes(props.only)) {
       return undefined;
     }
 
@@ -15413,23 +15467,23 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     };
   }();
 
+  var input = React__default.createElement("input", Object.assign({}, inputProps, {
+    type: 'text',
+    ref: ref,
+    readOnly: true
+  }));
   return React__default.createElement(RelativeContainer$5, {
     ref: useOnClickOut(function () {
       return setOpen(null);
     }),
     invalid: invalid
-  }, React__default.createElement(Input$1, Object.assign({}, inputProps, {
-    style: {
-      width: 0
-    },
-    type: 'text',
-    ref: ref,
-    borderless: true,
-    htmlDisabled: true
-  })), React__default.createElement(Container$a, {
+  }, props.label ? React__default.createElement(LabelText$1, {
+    required: props.required ? 1 : 0
+  }, props.label, input) : input, React__default.createElement(Container$a, {
     invalid: props.invalid ? 1 : 0,
     disabled: props.disabled ? 1 : 0,
-    paddingless: props.paddingless ? 1 : 0
+    paddingless: props.paddingless ? 1 : 0,
+    borderless: props.borderless ? 1 : 0
   }, function () {
     var label = React__default.createElement(LabelContainer$3, {
       onClick: onClick
@@ -15442,7 +15496,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     return React__default.createElement(React__default.Fragment, null, React__default.createElement(Button$4, Object.assign({
       type: 'button'
     }, decrementProps, {
-      disabled: disabled || decrementProps.disabled
+      disabled: props.disabled || decrementProps.disabled
     }), React__default.createElement(Icon, {
       type: 'feather',
       icon: 'chevron_left',
@@ -15451,7 +15505,7 @@ var Component$1 = React__default.forwardRef(function (props, ref) {
     })), label, React__default.createElement(Button$4, Object.assign({
       type: 'button'
     }, incrementProps, {
-      disabled: disabled || incrementProps.disabled
+      disabled: props.disabled || incrementProps.disabled
     }), React__default.createElement(Icon, {
       type: 'feather',
       icon: 'chevron_right',
@@ -16452,7 +16506,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$C, _templateObject2$r, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$4;
+var _templateObject$C, _templateObject2$r, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$e, _templateObject8$a, _templateObject9$a, _templateObject10$8, _templateObject11$5;
 var Container$e = styled__default.div(_templateObject$C || (_templateObject$C = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$4 = styled__default.div(_templateObject2$r || (_templateObject2$r = _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"])));
@@ -16469,7 +16523,7 @@ var HeaderLine = styled__default.div(_templateObject6$h || (_templateObject6$h =
 }, function (props) {
   return props.size === 'large' && styled.css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
-var MainLine = styled__default(HeaderLine)(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled__default(HeaderLine)(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
 var Template1 = function Template1(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -16854,7 +16908,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$2, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$M, _templateObject2$B, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$m, _templateObject8$i, _templateObject9$g, _templateObject10$b, _templateObject11$5;
+var _templateObject$M, _templateObject2$B, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$m, _templateObject8$i, _templateObject9$g, _templateObject10$b, _templateObject11$6;
 var Container$n = styled__default.div(_templateObject$M || (_templateObject$M = _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$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$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) {
@@ -16877,7 +16931,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$i || (_templat
 });
 var GraphLine = styled__default(CustomLine$6)(_templateObject9$g || (_templateObject9$g = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
 var Main$3 = 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$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$3 = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -17672,7 +17726,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$S, _templateObject2$F, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$6, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
+var _templateObject$S, _templateObject2$F, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$n, _templateObject8$j, _templateObject9$h, _templateObject10$c, _templateObject11$7, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -17763,7 +17817,7 @@ var Col = styled__default.div(_templateObject$S || (_templateObject$S = _taggedT
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return styled.css(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;