@mw-kit/mw-ui 1.7.46 → 1.7.48

package/dist/components/Calendar/components/Basic/components/Main/styles.d.ts

@@ -1,11 +1,14 @@
 /// <reference types="react" />
+import { ColorOptions } from '../../../../../../theme/interfaces';
+import { DayAppearance } from '../../interfaces';
 export * from '../../styles';
 export declare const Footer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const WeekContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 interface DayContainerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     today: 1 | 0;
-    appearance?: 'active' | 'highlight' | 'disabled';
+    appearance?: DayAppearance;
+    activeColor: ColorOptions;
 }
 export declare const DayContainer: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, DayContainerProps, never>;
 export declare const DayIndicator: import("styled-components").StyledComponent<(props: Partial<import("../../../../../Indicator/interfaces").IndicatorProps>) => JSX.Element, import("styled-components").DefaultTheme, {

package/dist/components/Calendar/components/Basic/interfaces.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReactNode } from '../../../../interfaces';
+import { ColorOptions } from '../../../../theme/interfaces';
 import { AbsoluteContainerProps } from '../../../AbsoluteContainer/interfaces';
 import { IndicatorProps } from '../../../Indicator/interfaces';
 export interface CalendarInterface {
@@ -7,13 +8,15 @@ export interface CalendarInterface {
     year: number;
     weeks: Date[][];
 }
+export declare type DayAppearance = 'active' | 'highlight' | 'disabled';
 export interface Common extends React.HTMLAttributes<HTMLDivElement> {
     label?: ReactNode;
     initialMonth?: Date;
     max?: Date;
     min?: Date;
     getDay: (date: Date) => {
-        appearance?: 'active' | 'highlight' | 'disabled';
+        appearance?: DayAppearance;
+        activeColor?: ColorOptions;
         onClick?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOver?: React.MouseEventHandler<HTMLButtonElement>;
         onMouseOut?: React.MouseEventHandler<HTMLButtonElement>;

package/dist/index.js

@@ -12585,7 +12585,15 @@ var Checkbox = React__default.forwardRef(function (props, ref) {
       bordered = props.bordered;
   var htmlProps = filterObject(props, ['label', 'invalid', 'required', 'padding', 'bordered']);
 
-  var _ref = typeof props.label === 'function' ? [props.label] : [LabelContent, props.label],
+  var _ref = function () {
+    if (!props.label) {
+      return [function () {
+        return null;
+      }];
+    }
+
+    return typeof props.label === 'function' ? [props.label] : [LabelContent, props.label];
+  }(),
       LabelComponent = _ref[0],
       children = _ref[1];
 
@@ -12858,9 +12866,14 @@ var MenuComponent = function MenuComponent(props, ref) {
               var children = _ref2.children;
               return React__default.createElement(semanticUiReact.Popup, Object.assign({
                 on: 'click',
-                position: 'top left',
+                position: 'left center',
                 inverted: true,
-                wide: true
+                wide: true,
+                popperModifiers: {
+                  preventOverflow: {
+                    boundariesElement: 'window'
+                  }
+                }
               }, rule, {
                 trigger: React__default.createElement("div", null, children)
               }));
@@ -13053,7 +13066,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$5, _templateObject11$2, _templateObject12$2, _templateObject13$2;
+var _templateObject$b, _templateObject2$b, _templateObject3$a, _templateObject4$8, _templateObject5$7, _templateObject6$6, _templateObject7$6, _templateObject8$5, _templateObject9$5, _templateObject10$5, _templateObject11$2;
 var Footer = styled__default.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__default.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;
@@ -13078,52 +13091,46 @@ var Header = styled__default.div(_templateObject3$a || (_templateObject3$a = _ta
   var theme = _ref7.theme;
   return theme.getColor('lightestGrey', 40);
 }, WeekContainer);
-var DayContainer = styled__default.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 DayContainer = styled__default.button(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\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,
+      activeColor = _ref8.activeColor,
       onClick = _ref8.onClick;
-
-  if (!onClick) {
-    return styled.css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.colors.white);
-  }
-
-  var hover = function hover(color) {
-    return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n      :not(:disabled):hover {\n        border-color: ", ";\n        color: ", ";\n      }\n    "])), theme.colors[color], theme.colors[color]);
+  var hover = onClick ? function (color) {
+    return styled.css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n          :not(:disabled):hover {\n            border-color: ", ";\n            color: ", ";\n            cursor: pointer;\n          }\n        "])), theme.colors[color], theme.colors[color]);
+  } : function () {
+    return null;
   };
 
   if (appearance === 'disabled') {
-    return styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
+    return styled.css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n      "])), theme.getColor('greyishBlue', 10));
   } else if (appearance === 'highlight') {
-    return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        ", "\n      "])), theme.getColor('blue', 30), hover('blue'));
+    return styled.css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        ", "\n      "])), theme.getColor('blue', 30), hover('blue'));
   } else if (appearance === 'active') {
-    return styled.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) {
+    return styled.css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteralLoose(["\n        background-color: ", ";\n        color: ", ";\n        :not(:last-child) {\n          border-right-color: ", ";\n        }\n        ", "\n      "])), theme.colors[activeColor], theme.colors.white, function (_ref9) {
       var theme = _ref9.theme;
-      return theme.colors.blue;
+      return theme.colors[activeColor];
     }, hover('white'));
   }
 
-  return styled.css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
+  return styled.css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n      ", "\n    "])), theme.colors.white, hover('blue'));
 }, function (_ref10) {
-  var onClick = _ref10.onClick;
-  if (!onClick) return;
-  return styled.css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteralLoose(["\n      :not(:disabled) {\n        cursor: pointer;\n      }\n    "])));
-}, function (_ref11) {
-  var theme = _ref11.theme;
+  var theme = _ref10.theme;
   return theme.colors.silver;
-}, function (_ref12) {
-  var appearance = _ref12.appearance,
-      today = _ref12.today,
-      theme = _ref12.theme;
+}, function (_ref11) {
+  var appearance = _ref11.appearance,
+      today = _ref11.today,
+      theme = _ref11.theme;
 
   if (today !== 1) {
     return;
   }
 
-  return styled.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']);
+  return styled.css(_templateObject10$5 || (_templateObject10$5 = _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__default(Indicator).attrs({
   size: 'mini'
-})(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: calc(", " - 1px);\n  left: calc(50% - (", " / 2) + 1px);\n"])), sizes.mini, sizes.mini);
+})(_templateObject11$2 || (_templateObject11$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());
@@ -13542,6 +13549,7 @@ var Main = React__default.forwardRef(function (props, ref) {
         onMouseOut: onMouseOut,
         disabled: disabled,
         appearance: appearance,
+        activeColor: details.activeColor || 'blue',
         today: dateCompare(new Date(), date, 'eq', false) ? 1 : 0
       }, day, details.indicator && React__default.createElement(DayIndicator, {
         type: details.indicator
@@ -13704,7 +13712,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$6, _templateObject11$3, _templateObject12$3;
+var _templateObject$e, _templateObject2$c, _templateObject3$b, _templateObject4$9, _templateObject5$8, _templateObject6$7, _templateObject7$7, _templateObject8$6, _templateObject9$6, _templateObject10$6, _templateObject11$3, _templateObject12$2;
 var Button = styled__default.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;
@@ -13783,7 +13791,7 @@ var Button = styled__default.button(_templateObject$e || (_templateObject$e = _t
 }, function (_ref10) {
   var loading = _ref10.loading;
   if (!loading) return;
-  return styled.css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
+  return styled.css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteralLoose(["\n      pointer-events: none;\n    "])));
 });
 
 var _excluded = ["children", "content"];
@@ -15572,7 +15580,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$7, _templateObject11$4, _templateObject12$4, _templateObject13$3, _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$3, _templateObject13$2, _templateObject14$2, _templateObject15$2, _templateObject16$2, _templateObject17$2, _templateObject18$2, _templateObject19$1, _templateObject20$1;
 var bullet = styled.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;
@@ -15640,9 +15648,9 @@ var InputContainer$1 = styled__default.div(_templateObject10$7 || (_templateObje
     return styled.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 styled.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);
+  return styled.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);
 });
-var MinMaxLabelContainer = styled__default.div(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
+var MinMaxLabelContainer = styled__default.div(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding-bottom: 2px;\n"])));
 var LabelsContainer = styled__default.div(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: 7px;\n\n  ", "\n"])), function (_ref19) {
   var position = _ref19.position;
 
@@ -15895,7 +15903,7 @@ var LabelContainer$5 = styled__default.div(_templateObject$r || (_templateObject
   var theme = _ref.theme;
   return theme.useTypography('p');
 });
-var Label$6 = styled__default.label(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
+var Label$6 = styled__default.label(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  gap: ", ";\n\n  ", "\n\n  ", "\n\n", "\n\n  > input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 0;\n    width: 0;\n    /* Chrome, Safari, Edge, Opera */\n    :-webkit-outer-spin-button,\n    :-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    /* Firefox */\n    -moz-appearance: none;\n  }\n\n  > span {\n    height: 17px;\n    width: 17px;\n    min-height: 17px;\n    min-width: 17px;\n    max-height: 17px;\n    max-width: 17px;\n    border-radius: 100%;\n    border-width: 1px;\n    border-style: solid;\n    background-color: ", ";\n    position: relative;\n    transition-property: border-color;\n    transition-duration: 0.5s;\n    transition-timing-function: ease-in-out;\n    :before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      height: 0;\n      width: 0;\n      border-radius: 100%;\n      transition-property: top, left, width, height, background-color;\n      transition-duration: 0.5s;\n      transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);\n    }\n  }\n  > input:checked + span {\n    :before {\n      top: calc(50% - 4.5px);\n      left: calc(50% - 4.5px);\n      height: 9px;\n      width: 9px;\n    }\n  }\n"])), function (_ref2) {
   var theme = _ref2.theme;
   return theme.spacings.s1;
 }, function (_ref3) {
@@ -16133,7 +16141,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$8, _templateObject11$5, _templateObject12$5;
+var _templateObject$s, _templateObject2$o, _templateObject3$k, _templateObject4$f, _templateObject5$d, _templateObject6$c, _templateObject7$c, _templateObject8$9, _templateObject9$9, _templateObject10$8, _templateObject11$5, _templateObject12$4;
 var RelativeContainer$5 = styled__default.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__default.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;
@@ -16189,7 +16197,7 @@ var LabelText$1 = styled__default.label(_templateObject11$5 || (_templateObject1
 }, function (_ref13) {
   var required = _ref13.required;
   if (!required) return;
-  return styled.css(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
+  return styled.css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteralLoose(["\n      :after {\n        content: ' *';\n      }\n    "])));
 });
 
 var Component$1 = React__default.forwardRef(function (props, ref) {
@@ -17672,7 +17680,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$a, _templateObject11$6, _templateObject12$6, _templateObject13$4, _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$5, _templateObject13$3, _templateObject14$3, _templateObject15$3;
 var aligns = {
   self: {
     horizontal: {
@@ -17769,13 +17777,13 @@ var Col = styled__default.div(_templateObject$D || (_templateObject$D = _taggedT
       theme = _ref6.theme;
   if (fontColor === undefined) return;
   var c = Array.isArray(fontColor) ? theme.getColor.apply(theme, fontColor) : theme.colors[fontColor];
-  return styled.css(_templateObject12$6 || (_templateObject12$6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), c);
+  return styled.css(_templateObject12$5 || (_templateObject12$5 = _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 styled.css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
+  return styled.css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteralLoose(["\n      background-color: ", ";\n    "])), c);
 }, function (_ref8) {
   var hover = _ref8.hover,
       theme = _ref8.theme;
@@ -18822,57 +18830,120 @@ var Tab = styled__default.li(_templateObject5$t || (_templateObject5$t = _tagged
   return styled.css(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: 0 ", ";\n    gap: ", ";\n\n    span {\n      font-family: ", ";\n      font-size: ", ";\n      font-weight: ", ";\n\n      color: ", ";\n    }\n\n    svg {\n      stroke: ", ";\n\n      &:hover {\n        stroke: ", ";\n      }\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s2, theme.spacings.s2, theme.typographies.h2.fontFamily, theme.typographies.h2.fontSize, theme.typographies.h2.fontWeight, theme.colors[active ? 'white' : 'darkBlue'], theme.colors[active ? 'white' : 'darkBlue'], theme.colors.red);
 });
 
+var initialStatus = function initialStatus(active, length) {
+  var status = Array(length).fill('open');
+  status[active] = 'active';
+  return status;
+};
+
 var Tabs$1 = function Tabs$1(props) {
   var options = props.options,
       activeState = props.activeState,
       internal = props.internal;
-
-  var _useState = React.useState(options),
-      tabs = _useState[0],
-      setTabs = _useState[1];
-
   var active = activeState[0],
       setActive = activeState[1];
 
-  var updateActiveTab = function updateActiveTab(index, event) {
-    var element = event.target;
-    if (element.tagName === 'svg') return;
-    setActive(index);
-  };
+  var _useState = React.useState(initialStatus(active, options.length)),
+      status = _useState[0],
+      setStatus = _useState[1];
 
-  var removeTab = function removeTab(index) {
-    setTabs(function (prevState) {
-      var aux = [].concat(prevState);
+  var activate = function activate(active, length) {
+    setStatus(function (prev) {
+      if (length !== undefined && length !== prev.length) {
+        return initialStatus(active, length);
+      }
+
+      var current = prev.findIndex(function (e) {
+        return e === 'active';
+      });
 
-      if (index === active) {
-        setActive(index > 0 ? index - 1 : 1);
+      if (current !== active && current > -1 && active > -1 && active < prev.length) {
+        var _status = [].concat(prev);
+
+        _status[current] = 'open';
+        _status[active] = 'active';
+        return [].concat(_status);
       }
 
-      aux.splice(index, 1);
-      return aux;
+      return prev;
     });
   };
 
-  var getClose = props.alwaysOpen ? function () {
-    return undefined;
-  } : function (index) {
-    return React__default.createElement(SvgClose, {
-      onClick: function onClick() {
-        return removeTab(index);
+  React.useEffect(function () {
+    activate(active, options.length);
+  }, [active, options.length]);
+  React.useEffect(function () {
+    var current = status.findIndex(function (e) {
+      return e === 'active';
+    });
+    setActive(current);
+  }, [status]);
+
+  var onClickActivate = function onClickActivate(index, event) {
+    var element = event.target;
+
+    while (element) {
+      if (element.tagName === 'svg') return;
+      element = element.parentElement;
+    }
+
+    activate(index);
+  };
+
+  var onClickClose = function onClickClose(index) {
+    var getActive = function getActive(removed, prev) {
+      for (var i = index - 1; i > -1; i--) {
+        if (removed[i] !== 'closed') {
+          return i;
+        }
+      }
+
+      for (var _i = index + 1; _i < removed.length; _i++) {
+        if (removed[_i] !== 'closed') {
+          return _i;
+        }
       }
+
+      return prev;
+    };
+
+    setStatus(function (prev) {
+      if (prev[index] === 'closed') return prev;
+      var active = prev.findIndex(function (e) {
+        return e === 'active';
+      });
+      var status = [].concat(prev);
+      status[index] = 'closed';
+
+      if (active === index) {
+        var _active = getActive(status, index);
+
+        status[_active] = 'active';
+      }
+
+      return status;
     });
   };
+
+  var Close = props.alwaysOpen ? function () {
+    return null;
+  } : SvgClose;
   return React__default.createElement(Container$n, null, React__default.createElement(Tabs, {
     internal: +(internal || false)
-  }, tabs.map(function (tab, index) {
-    return React__default.createElement(Tab, {
+  }, options.reduce(function (elements, tab, index) {
+    if (status[index] === 'closed') return elements;
+    return [].concat(elements, [React__default.createElement(Tab, {
       key: index,
-      active: +(active === index),
+      active: +(status[index] === 'active'),
       onClick: function onClick(event) {
-        return updateActiveTab(index, event);
+        return onClickActivate(index, event);
       }
-    }, React__default.createElement("span", null, tab.label), getClose(index));
-  })));
+    }, React__default.createElement("span", null, tab.label), React__default.createElement(Close, {
+      onClick: function onClick() {
+        return onClickClose(index);
+      }
+    }))]);
+  }, [])));
 };
 
 var _templateObject$X;