@mw-kit/mw-ui 1.7.44 → 1.7.46

package/dist/index.modern.js

@@ -12892,7 +12892,7 @@ var MenuComponent = function MenuComponent(props, ref) {
 
 var Menu = React__default.forwardRef(MenuComponent);
 
-var _templateObject$9, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4;
+var _templateObject$9, _templateObject2$9, _templateObject3$9, _templateObject4$7, _templateObject5$6, _templateObject6$5, _templateObject7$5, _templateObject8$4, _templateObject9$4, _templateObject10$4;
 var Container$3 = styled.div(_templateObject$9 || (_templateObject$9 = _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;
@@ -12900,7 +12900,9 @@ var Container$3 = styled.div(_templateObject$9 || (_templateObject$9 = _taggedTe
   var theme = _ref2.theme;
   return theme.colors.white;
 }, function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+      paddingless = _ref3.$paddingless;
+  if (paddingless) return;
   var s3 = theme.spacings.s3;
   return css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteralLoose(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      :first-child {\n        padding-left: ", ";\n      }\n      :last-child {\n        padding-right: ", ";\n      }\n    "])), s3, s3, s3, s3);
 });
@@ -12926,7 +12928,7 @@ var MonthContainer = styled.div(_templateObject6$5 || (_templateObject6$5 = _tag
   var theme = _ref9.theme;
   return theme.spacings.s1;
 });
-var MonthBtn = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), function (_ref10) {
+var MonthName = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n  ", ";\n  line-height: ", ";\n  color: ", ";\n  text-align: center;\n"])), function (_ref10) {
   var theme = _ref10.theme;
   return theme.useTypography('p');
 }, function (_ref11) {
@@ -12935,15 +12937,16 @@ var MonthBtn = styled.div(_templateObject7$5 || (_templateObject7$5 = _taggedTem
 }, function (_ref12) {
   var theme = _ref12.theme;
   return theme.colors.darkBlue;
-}, function (_ref13) {
+});
+var MonthBtn = styled.div(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: ", ";\n\n  ", "\n"])), function (_ref13) {
   var theme = _ref13.theme;
   return theme.spacings.s1;
 }, function (_ref14) {
   var onClick = _ref14.onClick;
   if (!onClick) return;
-  return css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
+  return css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
 });
-var NavBtn = styled.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.button(_templateObject10$4 || (_templateObject10$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 theme = _ref15.theme;
   return theme.useTypography('p');
 }, function (_ref16) {
@@ -13024,8 +13027,9 @@ var types = {
 
 var _templateObject$a, _templateObject2$a;
 var Container$4 = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: ", ";\n\n  :before {\n    content: '';\n    display: block;\n    border-radius: 100%;\n\n    ", ";\n\n    background-color: ", ";\n  }\n"])), function (_ref) {
-  var labelColor = _ref.labelColor;
-  return labelColor;
+  var theme = _ref.theme,
+      labelColor = _ref.labelColor;
+  return theme.getColor(labelColor);
 }, function (_ref2) {
   var spacings = _ref2.theme.spacings;
   return spacings.s1;
@@ -13046,7 +13050,7 @@ var Indicator = function Indicator(props) {
   }, props)));
 };
 
-var _templateObject$b, _templateObject2$b, _templateObject3$a, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$4, _templateObject11$2;
+var _templateObject$b, _templateObject2$b, _templateObject3$a, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$2, _templateObject12$2, _templateObject13$2;
 var Footer = styled.div(_templateObject$b || (_templateObject$b = _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.div(_templateObject2$b || (_templateObject2$b = _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;
@@ -13071,43 +13075,52 @@ var Header = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTempl
   var theme = _ref7.theme;
   return theme.getColor('lightestGrey', 40);
 }, WeekContainer);
-var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  ", ";\n\n  :disabled {\n    color: ", ";\n  }\n\n  :not(:disabled) {\n    cursor: pointer;\n  }\n\n  &,\n  :after {\n    transition-property: background-color, color, border-color;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.25s;\n  }\n\n  ", "\n"])), function (_ref8) {
+var DayContainer = styled.button(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  ", ";\n\n  ", "\n\n  :disabled {\n    color: ", ";\n  }\n\n  &,\n  :after {\n    transition-property: background-color, color, border-color;\n    transition-timing-function: ease-in-out;\n    transition-duration: 0.25s;\n  }\n\n  ", "\n"])), function (_ref8) {
   var theme = _ref8.theme,
-      appearance = _ref8.appearance;
+      appearance = _ref8.appearance,
+      onClick = _ref8.onClick;
+
+  if (!onClick) {
+    return css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
+  }
 
   var hover = function hover(color) {
-    return css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled):hover {\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), theme.colors[color], theme.colors[color]);
+    return css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n      :not(:disabled):hover {\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), theme.colors[color], theme.colors[color]);
   };
 
   if (appearance === 'disabled') {
-    return css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
+    return css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
   } else if (appearance === 'highlight') {
-    return css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        ", "\n      "])), theme.getColor('blue', 30), hover('blue'));
+    return css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        ", "\n      "])), theme.getColor('blue', 30), hover('blue'));
   } else if (appearance === 'active') {
-    return css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        :not(:last-child) {\n          border-right-color: ", ";\n        }\n        ", "\n      "])), theme.colors.blue, theme.colors.white, function (_ref9) {
+    return css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        :not(:last-child) {\n          border-right-color: ", ";\n        }\n        ", "\n      "])), theme.colors.blue, theme.colors.white, function (_ref9) {
       var theme = _ref9.theme;
       return theme.colors.blue;
     }, hover('white'));
   }
 
-  return css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
+  return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
 }, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.silver;
+  var onClick = _ref10.onClick;
+  if (!onClick) return;
+  return css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 }, function (_ref11) {
-  var appearance = _ref11.appearance,
-      today = _ref11.today,
-      theme = _ref11.theme;
+  var theme = _ref11.theme;
+  return theme.colors.silver;
+}, function (_ref12) {
+  var appearance = _ref12.appearance,
+      today = _ref12.today,
+      theme = _ref12.theme;
 
   if (today !== 1) {
     return;
   }
 
-  return css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
+  return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: '';\n        position: absolute;\n        top: -60%;\n        right: -60%;\n        width: 100%;\n        height: 100%;\n        background-color: ", ";\n        transform: rotate(45deg);\n      }\n    "])), theme.colors[appearance === 'active' ? 'white' : 'blue']);
 });
 var DayIndicator = styled(Indicator).attrs({
   size: 'mini'
-})(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
+})(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
 
 var getCalendar = function getCalendar(d) {
   var date = new Date(d.getTime());
@@ -13395,6 +13408,9 @@ var Main = React__default.forwardRef(function (props, ref) {
     });
   };
 
+  useEffect(function () {
+    setCalendar(getInitialCalendar(initialMonth, min, max));
+  }, [initialMonth === null || initialMonth === void 0 ? void 0 : initialMonth.toISOString(), min === null || min === void 0 ? void 0 : min.toISOString(), max === null || max === void 0 ? void 0 : max.toISOString()]);
   useEffect(function () {
     var _ref2 = [calendar.weeks[0], calendar.weeks[calendar.weeks.length - 1]],
         first = _ref2[0],
@@ -13454,22 +13470,29 @@ var Main = React__default.forwardRef(function (props, ref) {
   };
 
   return React__default.createElement(Container$3, {
-    ref: ref
+    ref: ref,
+    "$paddingless": props.paddingless
   }, props.label && React__default.createElement(LabelContainer, null, props.label), React__default.createElement(CalendarContainer, null, React__default.createElement(Header, null, React__default.createElement(MonthContainer, null, getPrev(), React__default.createElement("div", {
     ref: useOnClickOut(function () {
       return setSelectOpen(false);
     })
-  }, React__default.createElement(MonthBtn, {
-    onClick: function onClick() {
-      return setSelectOpen(function (prev) {
-        return !prev;
-      });
+  }, function () {
+    if (min !== undefined && max !== undefined && min.getFullYear() === max.getFullYear() && min.getMonth() === max.getMonth()) {
+      return React__default.createElement(MonthName, null, months[calendar.month], " ", calendar.year);
     }
-  }, months[calendar.month], " ", calendar.year, React__default.createElement(Icon, {
-    type: 'semantic',
-    icon: selectOpen ? 'caret up' : 'caret down',
-    width: '14px'
-  })), React__default.createElement(MonthPicker, {
+
+    return React__default.createElement(MonthBtn, {
+      onClick: function onClick() {
+        return setSelectOpen(function (prev) {
+          return !prev;
+        });
+      }
+    }, React__default.createElement(MonthName, null, months[calendar.month], " ", calendar.year), React__default.createElement(Icon, {
+      type: 'semantic',
+      icon: selectOpen ? 'caret up' : 'caret down',
+      width: '14px'
+    }));
+  }(), React__default.createElement(MonthPicker, {
     open: selectOpen,
     close: function close() {
       return setSelectOpen(false);
@@ -13528,7 +13551,7 @@ var Main = React__default.forwardRef(function (props, ref) {
 Main.displayName = 'Main';
 
 var BasicCalendar = React__default.forwardRef(function (props, ref) {
-  var containerProps = filterObject(props, ['initialMonth', 'max', 'min', 'getDay', 'calendar', 'absolute', 'onChangeMonth']);
+  var containerProps = filterObject(props, ['initialMonth', 'max', 'min', 'getDay', 'calendar', 'absolute', 'onChangeMonth', 'paddingless']);
   return 'absolute' in props ? React__default.createElement(AbsoluteContainer$1, Object.assign({
     axis: 'y',
     maxHeight: maxHeight
@@ -13678,7 +13701,7 @@ var getTimeProps = function getTimeProps(time, value) {
   });
 };
 
-var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$5, _templateObject11$3, _templateObject12$2;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$3, _templateObject12$3;
 var Button = styled.button(_templateObject$e || (_templateObject$e = _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;
@@ -13750,14 +13773,14 @@ var Button = styled.button(_templateObject$e || (_templateObject$e = _taggedTemp
   }
 
   if (['link', 'borderless'].includes(appearance)) {
-    return css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
+    return css(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n          color: ", ";\n        "])), theme.getColor('blue', 50));
   }
 
   return css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), theme.getColor(color || 'blue'));
 }, function (_ref10) {
   var loading = _ref10.loading;
   if (!loading) return;
-  return css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
+  return css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
 });
 
 var _excluded = ["children", "content"];
@@ -15202,7 +15225,7 @@ var Component = React__default.forwardRef(function (props, ref) {
 
   var _useState = useState(!value ? '' : function () {
     var details = getPhoneDetails(value);
-    return details ? details.masked : '';
+    return details ? details.masked : value;
   }),
       inputValue = _useState[0],
       setInputValue = _useState[1];
@@ -15260,7 +15283,7 @@ var Component = React__default.forwardRef(function (props, ref) {
   }, [country]);
   useEffect(function () {
     var v = inputValue.replace(/\D+/g, '').substring(0, country.charLimit);
-    setValue(country.ddi + " " + v);
+    setValue(v ? country.ddi + " " + v : v);
   }, [inputValue]);
   var placeholder = props.placeholder && props.placeholder[country.iso] ? props.placeholder[country.iso] : country.placeholder;
   return React__default.createElement(RelativeContainer$3, {
@@ -15546,7 +15569,7 @@ var Switch = function Switch(props) {
   })), React__default.createElement("span", null), label.after && React__default.createElement(LabelContainer$3, null, label.after));
 };
 
-var _templateObject$q, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$6, _templateObject11$4, _templateObject12$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1;
+var _templateObject$q, _templateObject2$m, _templateObject3$i, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$a, _templateObject8$8, _templateObject9$8, _templateObject10$7, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1;
 var bullet = css(_templateObject$q || (_templateObject$q = _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;
@@ -15606,7 +15629,7 @@ var Label$5 = styled.label(_templateObject7$a || (_templateObject7$a = _taggedTe
   var required = _ref17.required;
   return required && css(_templateObject9$8 || (_templateObject9$8 = _taggedTemplateLiteralLoose(["\n          :after {\n            content: ' *';\n          }\n        "])));
 }, NavBar);
-var InputContainer$1 = styled.div(_templateObject10$6 || (_templateObject10$6 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref18) {
+var InputContainer$1 = styled.div(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  gap: 6px;\n\n  > div {\n    position: relative;\n  }\n\n  ", "\n"])), function (_ref18) {
   var theme = _ref18.theme,
       invalid = _ref18.invalid;
 
@@ -15614,9 +15637,9 @@ var InputContainer$1 = styled.div(_templateObject10$6 || (_templateObject10$6 =
     return css(_templateObject11$4 || (_templateObject11$4 = _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.blue, Input$2, theme.colors.lightestGrey, theme.colors.lightestGrey, theme.colors.lightestGrey);
   }
 
-  return css(_templateObject12$3 || (_templateObject12$3 = _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);
+  return css(_templateObject12$4 || (_templateObject12$4 = _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.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var MinMaxLabelContainer = styled.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
 var LabelsContainer = styled.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref19) {
   var position = _ref19.position;
 
@@ -16107,7 +16130,7 @@ var parse = function parse(value) {
   });
 };
 
-var _templateObject$s, _templateObject2$o, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$7, _templateObject11$5, _templateObject12$4;
+var _templateObject$s, _templateObject2$o, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$8, _templateObject11$5, _templateObject12$5;
 var RelativeContainer$5 = styled.div(_templateObject$s || (_templateObject$s = _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$6 = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", "\n  line-height: 17px;\n  flex: 1;\n\n  :first-child {\n    text-align: left;\n  }\n  :not(:first-child) {\n    text-align: center;\n  }\n\n  ", "\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -16155,7 +16178,7 @@ var Container$6 = styled.div(_templateObject5$d || (_templateObject5$d = _tagged
 var Button$4 = styled.button(_templateObject9$9 || (_templateObject9$9 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  background-color: transparent;\n  border: none;\n  padding: 0;\n  box-shadow: none;\n\n  ", ";\n"])), function (_ref11) {
   var onClick = _ref11.onClick;
   if (!onClick) return;
-  return css(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
+  return css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
 });
 var LabelText$1 = styled.label(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n  margin-bottom: ", ";\n\n  ", "\n"])), function (_ref12) {
   var theme = _ref12.theme;
@@ -16163,7 +16186,7 @@ var LabelText$1 = styled.label(_templateObject11$5 || (_templateObject11$5 = _ta
 }, function (_ref13) {
   var required = _ref13.required;
   if (!required) return;
-  return css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -17204,7 +17227,7 @@ var AppliedFilters = Object.assign(function (props) {
   Menu: AppliedFiltersMenu
 });
 
-var _templateObject$A, _templateObject2$t, _templateObject3$o, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$8;
+var _templateObject$A, _templateObject2$t, _templateObject3$o, _templateObject4$h, _templateObject5$e, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$a, _templateObject10$9;
 var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _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' && css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteralLoose(["\n      width: 394px;\n      height: 99px;\n    "])));
 }, function (props) {
@@ -17222,7 +17245,7 @@ var Container$9 = styled.div(_templateObject$A || (_templateObject$A = _taggedTe
 }, function (props) {
   return props.borderType === 'danger' && css(_templateObject9$a || (_templateObject9$a = _taggedTemplateLiteralLoose(["\n      border-left-color: #e23851;\n    "])));
 }, function (props) {
-  return props.borderType === 'none' && css(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
+  return props.borderType === 'none' && css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n      border: 1px solid #d4d4d5;\n    "])));
 });
 
 var _excluded$1 = ["children"];
@@ -17394,7 +17417,8 @@ var getInstance = function getInstance(props) {
 var Submenu = function Submenu(props) {
   var item = props.item,
       close = props.close,
-      setAppliedFilters = props.setAppliedFilters;
+      setAppliedFilters = props.setAppliedFilters,
+      closeParent = props.closeParent;
 
   var _getInstance = getInstance(props),
       open = _getInstance.open,
@@ -17498,6 +17522,7 @@ var Submenu = function Submenu(props) {
       });
       return newState;
     });
+    !item.keepOpen && closeParent();
   } : undefined;
 
   var optionsParser = function optionsParser(option) {
@@ -17515,7 +17540,7 @@ var Submenu = function Submenu(props) {
     });
   };
 
-  return React__default.createElement(Menu, {
+  return React__default.createElement(Menu, Object.assign({
     open: open,
     axis: 'x',
     options: options.map(optionsParser),
@@ -17553,7 +17578,7 @@ var Submenu = function Submenu(props) {
         width: {}
       }
     }
-  });
+  }, props.containerProps || {}));
 };
 
 var FiltersMenu = function FiltersMenu(props) {
@@ -17609,14 +17634,17 @@ var FiltersMenu = function FiltersMenu(props) {
     close: function close() {
       return setActive(-1);
     },
-    setAppliedFilters: props.setAppliedFilters
+    closeParent: close,
+    setAppliedFilters: props.setAppliedFilters,
+    containerProps: props.subContainerProps
   }));
 };
 
 var Filters = Object.assign(function (props) {
   var items = props.items,
       setAppliedFilters = props.setAppliedFilters,
-      containerProps = props.containerProps;
+      containerProps = props.containerProps,
+      subContainerProps = props.subContainerProps;
   var buttonProps = filterObject(props, ['items', 'setAppliedFilters']);
   return React__default.createElement(Button$5, Object.assign({}, buttonProps, {
     getContent: function getContent(open, close) {
@@ -17625,7 +17653,8 @@ var Filters = Object.assign(function (props) {
         close: close,
         setAppliedFilters: setAppliedFilters,
         items: items,
-        containerProps: containerProps
+        containerProps: containerProps,
+        subContainerProps: subContainerProps
       }));
     }
   }), "Filtros");
@@ -17640,7 +17669,7 @@ var useContext$2 = function useContext() {
   return React__default.useContext(Provider$2);
 };
 
-var _templateObject$D, _templateObject2$u, _templateObject3$p, _templateObject4$i, _templateObject5$f, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$9, _templateObject11$6, _templateObject12$5, _templateObject13$3, _templateObject14$3, _templateObject15$3;
+var _templateObject$D, _templateObject2$u, _templateObject3$p, _templateObject4$i, _templateObject5$f, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$b, _templateObject10$a, _templateObject11$6, _templateObject12$6, _templateObject13$4, _templateObject14$3, _templateObject15$3;
 var aligns = {
   self: {
     horizontal: {
@@ -17723,7 +17752,7 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
 
   if (align.text !== undefined) {
     var _v4 = align.text;
-    styles.push(css(_templateObject10$9 || (_templateObject10$9 = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
+    styles.push(css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n        text-align: ", ";\n      "])), _v4));
   }
 
   return styles;
@@ -17737,13 +17766,13 @@ var Col = styled.div(_templateObject$D || (_templateObject$D = _taggedTemplateLi
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
 }, function (_ref7) {
   var backgroundColor = _ref7.backgroundColor,
       theme = _ref7.theme;
   if (backgroundColor === undefined) return;
   var c = Array.isArray(backgroundColor) ? theme.getColor.apply(theme, backgroundColor) : theme.colors[backgroundColor];
-  return css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
+  return css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;
@@ -17799,7 +17828,7 @@ var Grid$1 = function Grid$1(props) {
   }, React__default.createElement(Grid, Object.assign({}, gridProps)));
 };
 
-var _templateObject$F, _templateObject2$w, _templateObject3$r, _templateObject4$j, _templateObject5$g, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$a;
+var _templateObject$F, _templateObject2$w, _templateObject3$r, _templateObject4$j, _templateObject5$g, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$c, _templateObject10$b;
 var horizontalAligns = {
   around: 'space-around',
   between: 'space-between',
@@ -17874,7 +17903,7 @@ var Row = styled.div(_templateObject$F || (_templateObject$F = _taggedTemplateLi
   if (!hover) return;
   var h = hover === true ? ['lightGrey', 50] : hover;
   var c = Array.isArray(h) ? theme.getColor.apply(theme, h) : theme.colors[h];
-  return css(_templateObject10$a || (_templateObject10$a = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
+  return css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n      :hover {\n        background-color: ", ";\n      }\n    "])), c);
 });
 
 var Row$1 = function Row$1(props) {
@@ -17927,7 +17956,7 @@ var widths = {
   default: '642.5px'
 };
 
-var _templateObject$G, _templateObject2$x, _templateObject3$s, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$b;
+var _templateObject$G, _templateObject2$x, _templateObject3$s, _templateObject4$k, _templateObject5$h, _templateObject6$g, _templateObject7$g, _templateObject8$d, _templateObject9$d, _templateObject10$c;
 var Background = styled.div(_templateObject$G || (_templateObject$G = _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);
@@ -17960,7 +17989,7 @@ var Container$b = styled.div(_templateObject9$d || (_templateObject9$d = _tagged
       customSize = _ref6.customSize,
       color = _ref6.color,
       inverted = _ref6.inverted;
-  return css(_templateObject10$b || (_templateObject10$b = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
+  return css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    box-shadow: 0 0 21px 7px ", ";\n\n    width: ", ";\n\n    height: ", ";\n\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  "])), theme.colors.white, theme.getColor('black', 15), size === 'custom' && customSize ? customSize.width || 'auto' : widths[size], size === 'custom' && customSize ? customSize.height || 'auto' : heights[size], Header$5, inverted ? theme.isDarkColor(color) : theme.colors[color], inverted ? theme.colors[color] : theme.isDarkColor(color));
 });
 
 var _excluded$2 = ["children"];
@@ -18157,7 +18186,7 @@ var Modal$1 = Object.assign(Modal, {
   Audit: Audit
 });
 
-var _templateObject$K, _templateObject2$y, _templateObject3$t, _templateObject4$l, _templateObject5$i, _templateObject6$h, _templateObject7$h, _templateObject8$e, _templateObject9$e, _templateObject10$c, _templateObject11$7;
+var _templateObject$K, _templateObject2$y, _templateObject3$t, _templateObject4$l, _templateObject5$i, _templateObject6$h, _templateObject7$h, _templateObject8$e, _templateObject9$e, _templateObject10$d, _templateObject11$7;
 var Container$c = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 300px;\n  position: absolute;\n  padding: 14px;\n"])));
 var Header$6 = styled.div(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var HeaderImage = styled.div(_templateObject3$t || (_templateObject3$t = _taggedTemplateLiteralLoose(["\n  width: 43px;\n  height: 44px;\n  background-color: #ebebeb;\n"])));
@@ -18172,7 +18201,7 @@ var HeaderLine = styled.div(_templateObject6$h || (_templateObject6$h = _taggedT
 }, function (props) {
   return props.size === 'medium' && css(_templateObject9$e || (_templateObject9$e = _taggedTemplateLiteralLoose(["\n      width: 45%;\n    "])));
 }, function (props) {
-  return props.size === 'large' && css(_templateObject10$c || (_templateObject10$c = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
+  return props.size === 'large' && css(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n      width: 75%;\n    "])));
 });
 var MainLine = styled(HeaderLine)(_templateObject11$7 || (_templateObject11$7 = _taggedTemplateLiteralLoose(["\n  margin-bottom: 14px;\n  margin-left: 0;\n"])));
 
@@ -18443,7 +18472,7 @@ var Template6 = function Template6(props) {
   })));
 };
 
-var _templateObject$R, _templateObject2$F, _templateObject3$A, _templateObject4$r, _templateObject5$o, _templateObject6$m, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject10$d;
+var _templateObject$R, _templateObject2$F, _templateObject3$A, _templateObject4$r, _templateObject5$o, _templateObject6$m, _templateObject7$m, _templateObject8$j, _templateObject9$h, _templateObject10$e;
 var Container$i = styled.div(_templateObject$R || (_templateObject$R = _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$9 = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$6 = styled.div(_templateObject3$A || (_templateObject3$A = _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) {
@@ -18465,7 +18494,7 @@ var CustomLine$3 = styled(HeaderLine$6)(_templateObject8$j || (_templateObject8$
   return props.color;
 });
 var Main$2 = styled.div(_templateObject9$h || (_templateObject9$h = _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.div(_templateObject10$d || (_templateObject10$d = _taggedTemplateLiteralLoose(["\n  width: 30px;\n  height: 30px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n  margin: 0 16px;\n"])));
+var Circle$1 = styled.div(_templateObject10$e || (_templateObject10$e = _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) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18520,7 +18549,7 @@ var Template8 = function Template8(props) {
   })));
 };
 
-var _templateObject$T, _templateObject2$H, _templateObject3$C, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$e;
+var _templateObject$T, _templateObject2$H, _templateObject3$C, _templateObject4$t, _templateObject5$q, _templateObject6$o, _templateObject7$o, _templateObject8$l, _templateObject9$j, _templateObject10$f;
 var Container$k = styled.div(_templateObject$T || (_templateObject$T = _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$b = styled.div(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$8 = styled.div(_templateObject3$C || (_templateObject3$C = _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) {
@@ -18542,7 +18571,7 @@ var CustomLine$5 = styled(HeaderLine$8)(_templateObject8$l || (_templateObject8$
   return props.color;
 });
 var Main$4 = styled.div(_templateObject9$j || (_templateObject9$j = _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.div(_templateObject10$e || (_templateObject10$e = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
+var Circle$2 = styled.div(_templateObject10$f || (_templateObject10$f = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template8$1 = function Template8(props) {
   if (!props.loading) return React__default.createElement(React__default.Fragment, null);
@@ -18559,7 +18588,7 @@ var Template8$1 = function Template8(props) {
   })), React__default.createElement(Main$4, null, React__default.createElement(Circle$2, null)));
 };
 
-var _templateObject$U, _templateObject2$I, _templateObject3$D, _templateObject4$u, _templateObject5$r, _templateObject6$p, _templateObject7$p, _templateObject8$m, _templateObject9$k, _templateObject10$f, _templateObject11$8;
+var _templateObject$U, _templateObject2$I, _templateObject3$D, _templateObject4$u, _templateObject5$r, _templateObject6$p, _templateObject7$p, _templateObject8$m, _templateObject9$k, _templateObject10$g, _templateObject11$8;
 var Container$l = styled.div(_templateObject$U || (_templateObject$U = _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$c = styled.div(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  padding: 14px;\n  width: 100%;\n"])));
 var HeaderLine$9 = styled.div(_templateObject3$D || (_templateObject3$D = _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) {
@@ -18581,7 +18610,7 @@ var CustomLine$6 = styled(HeaderLine$9)(_templateObject8$m || (_templateObject8$
   return props.color;
 });
 var GraphLine = styled(CustomLine$6)(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n  margin: 0 7px;\n"])));
-var Main$5 = styled.div(_templateObject10$f || (_templateObject10$f = _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 Main$5 = styled.div(_templateObject10$g || (_templateObject10$g = _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.div(_templateObject11$8 || (_templateObject11$8 = _taggedTemplateLiteralLoose(["\n  width: 128px;\n  height: 128px;\n  background-color: #ebebeb;\n  border-radius: 50%;\n"])));
 
 var Template10 = function Template10(props) {