@mw-kit/mw-ui 1.7.15 → 1.7.17

package/dist/components/Button/constants.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
+import { StyledButtonProps } from './interfaces';
 export declare const sizes: {
-    readonly tiny: import("react").Key;
-    readonly mini: import("react").Key;
-    readonly small: import("react").Key;
-    readonly large: import("react").Key;
-    readonly big: import("react").Key;
-    readonly default: import("react").Key;
+    [key in StyledButtonProps['size']]: {
+        fontSize: string;
+        lineHeight: string;
+        minWidth: string;
+        minHeight: string;
+    };
 };
-export declare const fontSizes: typeof sizes;

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

@@ -4,7 +4,7 @@ export interface StyledButtonProps extends React.ButtonHTMLAttributes<HTMLButton
     /**
      * Specifies the button size.
      */
-    size: 'mini' | 'tiny' | 'small' | 'large' | 'big';
+    size: 'tiny' | 'mini' | 'small' | 'large' | 'big';
     /**
      * Specifies if the button style is solid, bordered or text only.
      */

package/dist/components/Button/theme.d.ts

@@ -1,20 +1,35 @@
-/// <reference types="react" />
 declare const theme: {
     readonly sizes: {
-        readonly tiny: import("react").Key;
-        readonly mini: import("react").Key;
-        readonly small: import("react").Key;
-        readonly large: import("react").Key;
-        readonly big: import("react").Key;
-        readonly default: import("react").Key;
-    };
-    readonly fontSizes: {
-        readonly tiny: import("react").Key;
-        readonly mini: import("react").Key;
-        readonly small: import("react").Key;
-        readonly large: import("react").Key;
-        readonly big: import("react").Key;
-        readonly default: import("react").Key;
+        small: {
+            fontSize: string;
+            lineHeight: string;
+            minWidth: string;
+            minHeight: string;
+        };
+        big: {
+            fontSize: string;
+            lineHeight: string;
+            minWidth: string;
+            minHeight: string;
+        };
+        tiny: {
+            fontSize: string;
+            lineHeight: string;
+            minWidth: string;
+            minHeight: string;
+        };
+        mini: {
+            fontSize: string;
+            lineHeight: string;
+            minWidth: string;
+            minHeight: string;
+        };
+        large: {
+            fontSize: string;
+            lineHeight: string;
+            minWidth: string;
+            minHeight: string;
+        };
     };
 };
 export default theme;

package/dist/components/theme.d.ts

@@ -1,21 +1,36 @@
-/// <reference types="react" />
 declare const theme: {
     readonly button: {
         readonly sizes: {
-            readonly tiny: import("react").Key;
-            readonly mini: import("react").Key;
-            readonly small: import("react").Key;
-            readonly large: import("react").Key;
-            readonly big: import("react").Key;
-            readonly default: import("react").Key;
-        };
-        readonly fontSizes: {
-            readonly tiny: import("react").Key;
-            readonly mini: import("react").Key;
-            readonly small: import("react").Key;
-            readonly large: import("react").Key;
-            readonly big: import("react").Key;
-            readonly default: import("react").Key;
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            big: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            tiny: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            mini: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
+            large: {
+                fontSize: string;
+                lineHeight: string;
+                minWidth: string;
+                minHeight: string;
+            };
         };
     };
 };

package/dist/index.js

@@ -448,24 +448,40 @@ var Loader = styled__default.div(_templateObject2 || (_templateObject2 = _tagged
 });
 
 var sizes = {
-  tiny: '21px',
-  mini: '31px',
-  small: '33px',
-  large: '41px',
-  big: '46px',
-  default: '33px'
-};
-var fontSizes = {
-  tiny: '10px',
-  mini: '12px',
-  small: '14px',
-  large: '16px',
-  big: '18px',
-  default: '14px'
+  mini: {
+    fontSize: '11px',
+    lineHeight: '13px',
+    minWidth: '51px',
+    minHeight: '28px'
+  },
+  tiny: {
+    fontSize: '13px',
+    lineHeight: '16px',
+    minWidth: '62px',
+    minHeight: '34px'
+  },
+  small: {
+    fontSize: '14px',
+    lineHeight: '17px',
+    minWidth: '74px',
+    minHeight: '35px'
+  },
+  large: {
+    fontSize: '16px',
+    lineHeight: '19px',
+    minWidth: '89px',
+    minHeight: '43px'
+  },
+  big: {
+    fontSize: '18px',
+    lineHeight: '22px',
+    minWidth: '79px',
+    minHeight: '52px'
+  }
 };
 
-var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  font-size: ", ";\n\n  height: ", ";\n\n  background-color: ", ";\n\n  border: ", ";\n\n  color: ", ";\n\n  :disabled {\n    ", "\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
+var _templateObject$1, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteralLoose(["\n  padding: 0\n    ", ";\n  font-family: 'Lato', sans-serif;\n  font-weight: ", ";\n  border-radius: 4px;\n  position: relative;\n  user-select: none;\n\n  ", ";\n\n  ", ";\n\n  color: ", ";\n\n  :disabled {\n    ", "\n  }\n\n  :hover {\n    cursor: ", ";\n\n    ", "\n  }\n\n  :active {\n    ", ";\n  }\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme,
       appearance = _ref.appearance;
   return appearance === 'link' ? 0 : theme.spacings.s3;
@@ -475,40 +491,20 @@ var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _t
 }, function (_ref3) {
   var size = _ref3.size,
       theme = _ref3.theme;
-  var fontSizes = theme.components.button.fontSizes;
-  return size ? fontSizes[size] : fontSizes.default;
-}, function (_ref4) {
-  var size = _ref4.size,
-      theme = _ref4.theme,
-      appearance = _ref4.appearance;
-  if (appearance === 'link') return 'auto';
   var sizes = theme.components.button.sizes;
-  return size ? sizes[size] : sizes.default;
+  return styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      min-width: ", ";\n      min-height: ", ";\n    "])), sizes[size].fontSize, sizes[size].lineHeight, sizes[size].minWidth, sizes[size].minHeight);
+}, function (_ref4) {
+  var appearance = _ref4.appearance,
+      color = _ref4.color,
+      theme = _ref4.theme;
+  var bgColor = ['bordered', 'link', 'bordeless'].includes(appearance) ? 'transparent' : theme.getColor(color || 'blue');
+  var borderColor = appearance !== 'bordered' ? bgColor : theme.getColor(color || 'blue');
+  return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      border: 1px solid ", ";\n    "])), bgColor, borderColor);
 }, function (_ref5) {
   var appearance = _ref5.appearance,
       color = _ref5.color,
+      loading = _ref5.loading,
       theme = _ref5.theme;
-
-  if (['bordered', 'link', 'bordeless'].includes(appearance)) {
-    return 'transparent';
-  }
-
-  return theme.getColor(color || 'blue');
-}, function (_ref6) {
-  var appearance = _ref6.appearance,
-      color = _ref6.color,
-      theme = _ref6.theme;
-
-  if (appearance !== 'bordered') {
-    return 'none';
-  }
-
-  return "1px solid " + theme.getColor(color || 'blue');
-}, function (_ref7) {
-  var appearance = _ref7.appearance,
-      color = _ref7.color,
-      loading = _ref7.loading,
-      theme = _ref7.theme;
   if (loading) return 'transparent';
 
   if (['link', 'bordeless'].includes(appearance)) {
@@ -520,50 +516,50 @@ var Button = styled__default.button(_templateObject$1 || (_templateObject$1 = _t
   }
 
   return theme.getColor('white');
-}, function (_ref8) {
-  var appearance = _ref8.appearance,
-      loading = _ref8.loading,
-      theme = _ref8.theme;
+}, function (_ref6) {
+  var appearance = _ref6.appearance,
+      loading = _ref6.loading,
+      theme = _ref6.theme;
 
   if (['bordered', 'link', 'bordeless'].includes(appearance)) {
-    return styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n          opacity: 0.3;\n          pointer-events: none;\n        "])));
+    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n          opacity: 0.3;\n          pointer-events: none;\n        "])));
   }
 
-  return styled.css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        pointer-events: none;\n      "])), theme.getColor('greyishBlue', 10), loading ? 'transparent' : theme.getColor('greyishBlue', 30));
-}, function (_ref9) {
-  var loading = _ref9.loading,
-      disabled = _ref9.disabled;
+  return styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        border-color: ", ";\n        color: ", ";\n        pointer-events: none;\n      "])), theme.getColor('greyishBlue', 10), theme.getColor('greyishBlue', 10), loading ? 'transparent' : theme.getColor('greyishBlue', 30));
+}, function (_ref7) {
+  var loading = _ref7.loading,
+      disabled = _ref7.disabled;
   return loading || disabled ? 'default' : 'pointer';
-}, function (_ref10) {
-  var appearance = _ref10.appearance,
-      color = _ref10.color,
-      theme = _ref10.theme;
+}, function (_ref8) {
+  var appearance = _ref8.appearance,
+      color = _ref8.color,
+      theme = _ref8.theme;
 
   if (appearance === 'bordered') {
-    return styled.css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n          border: 1px solid ", ";\n        "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
+    return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n          border: 1px solid ", ";\n        "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
   } else if (['link', 'bordeless'].includes(appearance)) {
-    return styled.css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.blue);
+    return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.colors.blue);
   }
 
-  return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor(color || 'blue', 70));
-}, function (_ref11) {
-  var appearance = _ref11.appearance,
-      color = _ref11.color,
-      theme = _ref11.theme;
+  return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        border-color: ", ";\n      "])), theme.getColor(color || 'blue', 70), theme.getColor(color || 'blue', 70));
+}, function (_ref9) {
+  var appearance = _ref9.appearance,
+      color = _ref9.color,
+      theme = _ref9.theme;
 
   if (appearance === 'bordered') {
-    return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n        "])), theme.getColor('iceWhite'));
+    return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n          background-color: ", ";\n        "])), theme.getColor('iceWhite'));
   }
 
   if (['link', 'bordeless'].includes(appearance)) {
-    return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
 
-  return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
-}, function (_ref12) {
-  var loading = _ref12.loading;
+  return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
+}, function (_ref10) {
+  var loading = _ref10.loading;
   if (!loading) return;
-  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
+  return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
 });
 
 var _excluded = ["children", "content"];
@@ -581,13 +577,11 @@ var Button$1 = function Button$1(props) {
     type: styled.type || 'button'
   };
   var htmlProps = filterObject(props, ['size', 'appearance', 'color', 'loading', 'content']);
-
-  var _size = defaultValues.size ? sizes[defaultValues.size] : sizes.default;
-
-  return React__default.createElement(Button, Object.assign({}, defaultValues, htmlProps), React__default.createElement("span", null, children || content), props.loading && React__default.createElement(Loader, {
+  var loaderSize = sizes[defaultValues.size].lineHeight;
+  return React__default.createElement(Button, Object.assign({}, defaultValues, htmlProps), children || content, props.loading && React__default.createElement(Loader, {
     color: defaultValues.appearance !== 'bordered' && defaultValues.appearance !== 'link' ? 'white' : 'blue',
-    size: "calc(" + _size + " * 0.5454)",
-    borderSize: "calc(" + _size + " * 0.0757)"
+    size: loaderSize,
+    borderSize: "calc(" + loaderSize + " * 0.0757)"
   }));
 };
 
@@ -12144,7 +12138,7 @@ var useTransition = function useTransition(props, values) {
   }).join(', '), functions.join(', '), animation[active ? 'enabled' : 'disabled']);
 };
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$4, _templateObject5$3, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13, _templateObject14;
 var positions = {
   'top right': function topRight(_ref) {
     var bottom = _ref.bottom,
@@ -12202,11 +12196,11 @@ var Container$2 = styled__default.div(_templateObject9$1 || (_templateObject9$1
 }, function (_ref14) {
   var height = _ref14.height;
   if (!height) return;
-  return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
+  return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      height: ", ";\n    "])), height);
 }, function (_ref15) {
   var maxWidth = _ref15.maxWidth;
   if (!maxWidth) return;
-  return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      max-width: ", ";\n    "])), maxWidth);
+  return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n      max-width: ", ";\n    "])), maxWidth);
 }, function (_ref16) {
   var maxHeight = _ref16.maxHeight;
   if (!maxHeight) return;
@@ -12667,7 +12661,7 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$c, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15;
+var _templateObject$c, _templateObject2$a, _templateObject3$9, _templateObject4$8, _templateObject5$7, _templateObject6$5, _templateObject7$4, _templateObject8$3, _templateObject9$3, _templateObject10$2, _templateObject11$2, _templateObject12$2, _templateObject13$1, _templateObject14$1, _templateObject15;
 var IconContainer = styled__default.button(_templateObject$c || (_templateObject$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 17px;\n\n  background-color: transparent;\n  border: none;\n  box-shadow: none;\n  padding: 0;\n\n  ", "\n"])), function (_ref) {
   var onClick = _ref.onClick,
       disabled = _ref.disabled;
@@ -12738,7 +12732,7 @@ var Label = styled__default.label(_templateObject10$2 || (_templateObject10$2 =
 }, function (_ref16) {
   var disabled = _ref16.disabled;
   if (!disabled) return;
-  return styled.css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
+  return styled.css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      opacity: 0.5;\n    "])));
 }, IconContainer, function (_ref17) {
   var theme = _ref17.theme,
       paddingless = _ref17.paddingless;
@@ -12753,7 +12747,7 @@ var Label = styled__default.label(_templateObject10$2 || (_templateObject10$2 =
   var padding = paddingless ? '0px' : theme.spacings.s3;
 
   if (position === 'right') {
-    return styled.css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
+    return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n        > ", " {\n          width: ", ";\n          right: calc(", " / 2);\n        }\n\n        > ", " {\n          padding-right: calc(", " + ", ");\n        }\n      "])), IconContainer, width, padding, Input, padding, width);
   }
 
   return styled.css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteralLoose(["\n      > ", " {\n        width: ", ";\n        left: calc(", " / 2);\n      }\n\n      > ", " {\n        padding-left: calc(", " + ", ");\n      }\n    "])), IconContainer, width, padding, Input, padding, width);
@@ -13180,7 +13174,7 @@ var MonthPicker = function MonthPicker(props) {
   }));
 };
 
-var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$5, _templateObject9$5, _templateObject10$3, _templateObject11$2;
+var _templateObject$f, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$a, _templateObject6$8, _templateObject7$7, _templateObject8$5, _templateObject9$5, _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;
@@ -13241,7 +13235,7 @@ var DayContainer = styled__default.button(_templateObject4$b || (_templateObject
 });
 var DayIndicator = styled__default(Indicator).attrs({
   size: 'mini'
-})(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes$1.mini, sizes$1.mini);
+})(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes$1.mini, sizes$1.mini);
 
 var getCalendar = function getCalendar(d) {
   var date = new Date(d.getTime());
@@ -13375,8 +13369,7 @@ var getInitialCalendar = function getInitialCalendar(date, min, max) {
 };
 
 var theme = {
-  sizes: sizes,
-  fontSizes: fontSizes
+  sizes: sizes
 };
 
 var theme$1 = {
@@ -15499,7 +15492,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$7, _templateObject9$7, _templateObject10$4, _templateObject11$3, _templateObject12$2, _templateObject13$2, _templateObject14$2, _templateObject15$1, _templateObject16;
+var _templateObject$s, _templateObject2$m, _templateObject3$h, _templateObject4$e, _templateObject5$d, _templateObject6$b, _templateObject7$a, _templateObject8$7, _templateObject9$7, _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;
@@ -15547,10 +15540,10 @@ var LabelsContainer = styled__default.div(_templateObject10$4 || (_templateObjec
   var position = _ref11.position;
 
   if (position === 'bottom') {
-    return styled.css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer, Marker, MinMaxLabelContainer);
+    return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n        ", " {\n          flex-direction: column-reverse;\n        }\n\n        ", " {\n          :after {\n            bottom: calc(100% + 10.5px);\n          }\n        }\n\n        ", " {\n          align-items: start;\n        }\n      "])), InputContainer, Marker, MinMaxLabelContainer);
   }
 
-  return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer, Marker, MinMaxLabelContainer);
+  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      ", " {\n        flex-direction: column;\n      }\n\n      ", " {\n        :after {\n          top: calc(100% + 8px);\n        }\n      }\n\n      ", " {\n        align-items: end;\n      }\n    "])), InputContainer, Marker, MinMaxLabelContainer);
 });
 var SelectedArea = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 3px;\n  width: 100%;\n  position: absolute;\n  bottom: calc(50% - 2px);\n  left: 0;\n  display: flex;\n  z-index: 1;\n\n  > span {\n    width: ", "%;\n    display: block;\n    box-sizing: border-box;\n    height: 100%;\n  }\n"])), function (_ref12) {
   var theme = _ref12.theme;
@@ -15961,7 +15954,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$8, _templateObject9$8, _templateObject10$5, _templateObject11$4;
+var _templateObject$u, _templateObject2$o, _templateObject3$j, _templateObject4$g, _templateObject5$f, _templateObject6$d, _templateObject7$c, _templateObject8$8, _templateObject9$8, _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;
@@ -16010,7 +16003,7 @@ var LabelText$1 = styled__default.label(_templateObject10$5 || (_templateObject1
 }, function (_ref11) {
   var required = _ref11.required;
   if (!required) return;
-  return styled.css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -17149,7 +17142,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$b, _templateObject9$b, _templateObject10$8, _templateObject11$5;
+var _templateObject$G, _templateObject2$u, _templateObject3$o, _templateObject4$k, _templateObject5$j, _templateObject6$h, _templateObject7$f, _templateObject8$b, _templateObject9$b, _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"])));
@@ -17166,7 +17159,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$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
+var MainLine = styled__default(HeaderLine)(_templateObject11$6 || (_templateObject11$6 = _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);
@@ -17551,7 +17544,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$j, _templateObject9$h, _templateObject10$b, _templateObject11$6;
+var _templateObject$Q, _templateObject2$E, _templateObject3$y, _templateObject4$t, _templateObject5$s, _templateObject6$p, _templateObject7$n, _templateObject8$j, _templateObject9$h, _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) {
@@ -17574,7 +17567,7 @@ var CustomLine$6 = styled__default(HeaderLine$9)(_templateObject8$j || (_templat
 });
 var GraphLine = styled__default(CustomLine$6)(_templateObject9$h || (_templateObject9$h = _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$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\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"])));
 
 var Template10 = function Template10(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18369,7 +18362,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$k, _templateObject9$i, _templateObject10$c, _templateObject11$7, _templateObject12$3, _templateObject13$3, _templateObject14$3, _templateObject15$2;
+var _templateObject$W, _templateObject2$I, _templateObject3$C, _templateObject4$w, _templateObject5$u, _templateObject6$q, _templateObject7$o, _templateObject8$k, _templateObject9$i, _templateObject10$c, _templateObject11$8, _templateObject12$4, _templateObject13$3, _templateObject14$3, _templateObject15$2;
 var aligns = {
   self: {
     horizontal: {
@@ -18460,13 +18453,13 @@ var Col = styled__default.div(_templateObject$W || (_templateObject$W = _taggedT
   var bordered = _ref5.bordered,
       lightestGrey = _ref5.theme.colors.lightestGrey;
   if (!bordered) return;
-  return styled.css(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
+  return styled.css(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n      :not(:last-child) {\n        border-right: 1px solid ", ";\n      }\n    "])), lightestGrey);
 }, function (_ref6) {
   var fontColor = _ref6.fontColor,
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;