@mw-kit/mw-ui 1.7.104 → 1.7.106

package/dist/index.modern.js

@@ -12193,36 +12193,44 @@ var getMask = function getMask(mask) {
   };
 };
 
-var _templateObject$4, _templateObject2$4, _templateObject3$4;
-var EllipsisContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref) {
-  var lines = _ref.lines;
-  return lines ? css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n          display: -webkit-box;\n\n          -webkit-box-orient: vertical;\n          -moz-box-orient: vertical;\n          -ms-box-orient: vertical;\n          box-orient: vertical;\n\n          -webkit-line-clamp: ", ";\n          -moz-line-clamp: ", ";\n          -ms-line-clamp: ", ";\n          line-clamp: ", ";\n        "])), lines, lines, lines, lines) : css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n          white-space: nowrap;\n        "])));
-});
+var updateTitle = function updateTitle(event) {
+  var target = event.target;
 
-var EllipsisContainer$1 = function EllipsisContainer$1(props) {
-  var myProps = _extends({}, props);
+  while (target && !('ellipsis' in target.dataset)) {
+    target = target.parentElement;
+  }
 
-  var _onMouseOver = myProps.onMouseOver || function () {};
+  if (!target) return;
 
-  myProps.onMouseOver = function (event) {
-    _onMouseOver(event);
+  if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
+    target.title = target.innerText;
+  } else target.removeAttribute('title');
+};
 
-    var target = event.target;
+var voidF = function voidF() {};
 
-    while (target && !('ellipsis' in target.dataset)) {
-      target = target.parentElement;
-    }
+var useEllipsis = function useEllipsis(onMouseOver) {
+  var originalHandler = onMouseOver || voidF;
 
-    if (!target) return;
+  var handler = function handler(event) {
+    originalHandler(event);
+    updateTitle(event);
+  };
 
-    if (target.scrollWidth > target.offsetWidth || target.scrollHeight > target.offsetHeight) {
-      target.title = target.innerText;
-    } else target.removeAttribute('title');
+  return {
+    onMouseOver: handler,
+    'data-ellipsis': ''
   };
+};
 
-  return React__default.createElement(EllipsisContainer, Object.assign({}, myProps, {
-    "data-ellipsis": ''
-  }));
+var _templateObject$4, _templateObject2$4, _templateObject3$4;
+var EllipsisContainer = styled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ", "\n"])), function (_ref) {
+  var lines = _ref.lines;
+  return lines ? css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteralLoose(["\n          display: -webkit-box;\n\n          -webkit-box-orient: vertical;\n          -moz-box-orient: vertical;\n          -ms-box-orient: vertical;\n          box-orient: vertical;\n\n          -webkit-line-clamp: ", ";\n          -moz-line-clamp: ", ";\n          -ms-line-clamp: ", ";\n          line-clamp: ", ";\n        "])), lines, lines, lines, lines) : css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteralLoose(["\n          white-space: nowrap;\n        "])));
+});
+
+var EllipsisContainer$1 = function EllipsisContainer$1(props) {
+  return React__default.createElement(EllipsisContainer, Object.assign({}, props, useEllipsis(props.onMouseOver)));
 };
 
 var _templateObject$5, _templateObject2$5, _templateObject3$5, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1;
@@ -19348,17 +19356,157 @@ var ProgressBar = function ProgressBar(props) {
 };
 
 var _templateObject$17;
-var Close = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: calc(50% - ", " / 2);\n  right: ", ";\n\n  + div {\n    /** icon width + tab gap + tab right padding */\n    padding-right: ", ";\n  }\n\n  svg > * {\n    transition-property: stroke;\n    transition-duration: 0.25s;\n    transition-timing-function: ease-in-out;\n  }\n"])), function (_ref) {
+var Container$n = styled.div(_templateObject$17 || (_templateObject$17 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  height: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: #ecedef;\n  opacity: 0.8;\n\n  cursor: pointer;\n  color: ", ";\n\n  transition-property: left, right;\n  transition-timing-function: linear;\n  transition-duration: 0.25s;\n\n  z-index: 3;\n"])), function (_ref) {
   var theme = _ref.theme;
-  return theme.spacings.s3;
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.spacings.s3;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return "calc(" + theme.spacings.s3 + " + " + theme.spacings.s3 + " + " + theme.spacings.s3 + ")";
+  return theme.colors.darkBlue;
+});
+
+var ScrollButton = function ScrollButton(props) {
+  var mode = props.mode,
+      visible = props.visible,
+      scrollRef = props.scrollRef;
+  var icon = "chevron_" + mode;
+  var onClick = useCallback(function () {
+    if (!scrollRef) return;
+    scrollRef.scrollBy({
+      left: mode === 'left' ? -(scrollRef.scrollWidth + 1) : scrollRef.scrollWidth,
+      behavior: 'smooth'
+    });
+  }, [scrollRef, mode]);
+  return React__default.createElement(Container$n, {
+    className: ['scroll-arrow'].concat(visible ? ['visible'] : []).join(' '),
+    onClick: onClick
+  }, React__default.createElement(Icon, {
+    type: 'feather',
+    icon: icon,
+    width: 16,
+    height: 16,
+    color: 'black'
+  }));
+};
+
+var _templateObject$18, _templateObject2$Q;
+var Container$o = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  overflow-x: auto;\n  scrollbar-width: thin;\n  scroll-behavior: smooth;\n  display: flex;\n  width: 100%;\n\n  scrollbar-gutter: stable;\n\n  -ms-overflow-style: none; /* IE / Edge antigos */\n  scrollbar-width: none; /* Firefox */\n  &::-webkit-scrollbar {\n    display: none; /* Chrome, Safari, Opera */\n  }\n\n  ", "\n"])), function (_ref) {
+  var theme = _ref.theme,
+      internal = _ref.$internal;
+  return internal && css(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n      gap: ", ";\n    "])), theme.spacings.s6);
 });
 
+var ScrollButtons = function ScrollButtons(props) {
+  var activeTabIndex = props.activeTabIndex,
+      tabsLength = props.tabsLength;
+
+  var _useState = useState(null),
+      ref = _useState[0],
+      setRef = _useState[1];
+
+  var _useState2 = useState(false),
+      showLeftArrow = _useState2[0],
+      setShowLeftArrow = _useState2[1];
+
+  var _useState3 = useState(false),
+      showRightArrow = _useState3[0],
+      setShowRightArrow = _useState3[1];
+
+  var checkScrollPosition = useCallback(function () {
+    if (!ref) return;
+
+    if (ref.scrollWidth > ref.offsetWidth) {
+      var scrollLeft = ref.scrollLeft,
+          scrollWidth = ref.scrollWidth,
+          clientWidth = ref.clientWidth;
+      setShowLeftArrow(scrollLeft > 10);
+      setShowRightArrow(scrollWidth - clientWidth - scrollLeft > 10);
+    } else {
+      setShowLeftArrow(false);
+      setShowRightArrow(false);
+    }
+  }, [ref]);
+  useEffect(function () {
+    checkScrollPosition();
+    window.addEventListener('resize', checkScrollPosition);
+    return function () {
+      return window.removeEventListener('resize', checkScrollPosition);
+    };
+  }, [checkScrollPosition, tabsLength]);
+  useEffect(function () {
+    if (!ref) return;
+    if (ref.scrollWidth <= ref.offsetWidth) return;
+    var element = ref.children[activeTabIndex];
+    if (!element) return;
+    element.scrollIntoView({
+      behavior: 'smooth',
+      inline: 'nearest'
+    });
+  }, [activeTabIndex, ref]);
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(ScrollButton, {
+    scrollRef: ref,
+    mode: 'left',
+    visible: showLeftArrow
+  }), React__default.createElement(Container$o, {
+    ref: setRef,
+    onWheel: function onWheel(e) {
+      if (!ref) return;
+      var x = ref.offsetWidth * 100 / ref.scrollWidth;
+      ref.scrollLeft += x * (e.deltaY > 0 ? 1 : -1) * 2;
+      e.preventDefault();
+    },
+    onScroll: checkScrollPosition,
+    "$internal": props.internal,
+    children: props.children
+  }), React__default.createElement(ScrollButton, {
+    scrollRef: ref,
+    mode: 'right',
+    visible: showRightArrow
+  }));
+};
+
+var sortTabs = function sortTabs(tabs, sorted) {
+  if (sorted === void 0) {
+    sorted = [];
+  }
+
+  if (tabs.length < 1) return sorted;
+  var tab = tabs[0];
+  var group = tab.group;
+
+  if (!group) {
+    return sortTabs(tabs.slice(1), [].concat(sorted, [tab]));
+  }
+
+  var res = tabs.reduce(function (_ref, t) {
+    var tabs = _ref.tabs,
+        sorted = _ref.sorted;
+
+    if (t.group !== group) {
+      return {
+        tabs: [].concat(tabs, [t]),
+        sorted: sorted
+      };
+    }
+
+    return t.primary ? {
+      tabs: tabs,
+      sorted: [t].concat(sorted)
+    } : {
+      tabs: tabs,
+      sorted: [].concat(sorted, [t])
+    };
+  }, {
+    tabs: [],
+    sorted: []
+  });
+  return sortTabs(res.tabs, [].concat(sorted, res.sorted));
+};
+var hasChildren = function hasChildren(tabs, group) {
+  return group ? tabs.some(function (tab) {
+    return tab.group === group && !tab.primary;
+  }) : false;
+};
+
+var _templateObject$19;
+var Close = styled.div(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  background-color: var(--bgColor);\n  color: var(--color);\n  padding: 4px 8px;\n\n  transition: --color 0.5s, --bgColor 0.5s;\n\n  svg {\n    width: 14px;\n    height: 14px;\n\n    * {\n      transition: --color 0.5s;\n      stroke: var(--color);\n    }\n  }\n"])));
+
 var Close$1 = function Close$1(props) {
   var index = props.index,
       _props$active = props.active,
@@ -19403,18 +19551,108 @@ var Close$1 = function Close$1(props) {
     onClick: onClickClose,
     width: '14px',
     height: '14px',
-    strokeWidth: '3px',
-    color: active === index ? 'white' : 'darkBlue'
+    strokeWidth: '3px'
+  }));
+};
+
+var _templateObject$1a, _templateObject2$R;
+var StyledTab = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 1;\n  white-space: nowrap;\n  overflow: hidden;\n  cursor: ", ";\n\n  background-color: var(--bgColor);\n  color: var(--color);\n\n  padding: ", ";\n  box-shadow: ", ";\n  transition: --color 0.5s, --bgColor 0.5s;\n\n  border-radius: ", ";\n\n  /* Pseudo-element para o degrad\xEA */\n  &.overflow::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 34px;\n    height: 100%;\n\n    background-image: linear-gradient(\n      to right,\n      transparent,\n      var(--bgColor) 80%\n    );\n    transition: --color 0.5s, --bgColor 0.5s;\n  }\n\n  ", "\n"])), function (_ref) {
+  var onClick = _ref.onClick;
+  return onClick ? 'pointer' : 'default';
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacings.s1 + " " + theme.spacings.s3;
+}, function (_ref3) {
+  var $internal = _ref3.$internal,
+      theme = _ref3.theme;
+  return $internal ? 'none' : "0px 3px 6px " + theme.getColor('black', 15);
+}, function (_ref4) {
+  var $internal = _ref4.$internal;
+  return $internal ? '4px 4px 0 0' : 'none';
+}, function (_ref5) {
+  var $primary = _ref5.$primary,
+      $hasSiblings = _ref5.$hasSiblings,
+      $internal = _ref5.$internal;
+  return $primary && $hasSiblings && !$internal && css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      &::before {\n        content: '';\n        position: absolute;\n        left: 4px;\n        top: 4px;\n        bottom: 4px;\n        width: 3px;\n        background-color: var(--colorBefore);\n        transition: --colorBefore 0.5s;\n        border-radius: 2px;\n      }\n    "])));
+});
+
+var LabelItem = function LabelItem(props) {
+  var children = props.children,
+      onClick = props.onClick,
+      primary = props.primary,
+      hasSiblings = props.hasSiblings,
+      internal = props.internal;
+
+  var _useState = useState(null),
+      ref = _useState[0],
+      setRef = _useState[1];
+
+  return React__default.createElement(StyledTab, Object.assign({
+    ref: setRef,
+    "$primary": primary,
+    "$hasSiblings": hasSiblings,
+    "$internal": internal,
+    onClick: onClick
+  }, useEllipsis(), ref && ref.scrollWidth > ref.offsetWidth ? {
+    className: 'overflow'
+  } : {}, {
+    children: children
   }));
 };
 
-var _templateObject$18, _templateObject2$Q, _templateObject3$J, _templateObject4$x, _templateObject5$t, _templateObject6$q, _templateObject7$q, _templateObject8$n, _templateObject9$k;
-var Container$n = styled.div(_templateObject$18 || (_templateObject$18 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
+var _templateObject$1b;
+var Container$p = styled.div(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  @property --bgColor {\n    syntax: '<color>';\n    initial-value: #ffffff;\n    inherits: false;\n  }\n\n  @property --color {\n    syntax: '<color>';\n    initial-value: #000000;\n    inherits: false;\n  }\n\n  @property --colorBefore {\n    syntax: '<color>';\n    initial-value: #3455ab;\n    inherits: false;\n  }\n\n  &.active *,\n  &.active ::before,\n  &.active ::after {\n    --bgColor: #3455ab;\n    --color: #ffffff;\n    --colorBefore: #ffffff;\n  }\n\n  display: flex;\n\n  max-width: 176px;\n  position: relative;\n"])));
+
+var _excluded$3 = ["index"];
+
+var VoidClose = function VoidClose() {
+  return React__default.createElement(React__default.Fragment, null);
+};
+
+var TabItem = function TabItem(props) {
+  var _props$active = props.active,
+      active = _props$active[0],
+      setActive = _props$active[1],
+      _props$tabs = props.tabs,
+      tabs = _props$tabs[0],
+      setTabs = _props$tabs[1],
+      onClose = props.onClose,
+      alwaysOpen = props.alwaysOpen;
+  var CloseComponent = alwaysOpen || tabs.length < 2 ? VoidClose : Close$1;
+  return React__default.createElement(React__default.Fragment, null, tabs.map(function (_ref) {
+    var index = _ref.index,
+        tab = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+
+    var isActive = index === active;
+    var hasSiblings = hasChildren(tabs, tab.group);
+    var canClose = !props.internal && (!tab.primary || !hasSiblings);
+    return React__default.createElement(Container$p, Object.assign({
+      key: index
+    }, isActive ? {
+      className: 'active'
+    } : {}), React__default.createElement(LabelItem, {
+      children: tab.label,
+      primary: tab.primary,
+      hasSiblings: hasSiblings,
+      onClick: isActive ? undefined : function () {
+        return setActive(index, tab.data);
+      },
+      internal: props.internal
+    }), canClose && React__default.createElement(CloseComponent, {
+      index: index,
+      active: [active, setActive],
+      options: [tabs, setTabs],
+      onClose: onClose
+    }));
+  }));
+};
+
+var _templateObject$1c, _templateObject2$S, _templateObject3$J;
 var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
 };
-var Tabs = styled.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  width: 100%;\n\n  overflow-x: auto;\n  scrollbar-width: none;\n\n  ", "\n\n  ", ";\n\n  gap: ", ";\n\n  > li {\n    position: relative;\n  }\n"])), function (_ref) {
+var Tabs = styled.div(_templateObject$1c || (_templateObject$1c = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  display: flex;\n  width: 100%;\n  white-space: nowrap;\n\n  ", "\n\n  ", "\n\n\n  /* exibe as setas de navega\xE7\xE3o vis\xEDveis ao passar o mouse sobre o container */\n  &:hover .scroll-arrow.visible:nth-child(1) {\n    left: 0;\n  }\n  & .scroll-arrow:nth-child(1) {\n    left: -16px;\n  }\n\n  &:hover .scroll-arrow.visible:nth-last-child(1) {\n    right: 0;\n  }\n  & .scroll-arrow:nth-last-child(1) {\n    right: -16px;\n  }\n"])), function (_ref) {
   var spacing = _ref.$spacing;
 
   var _getSpacings$split = getSpacings(spacing || {}, {
@@ -19428,46 +19666,15 @@ var Tabs = styled.ul(_templateObject2$Q || (_templateObject2$Q = _taggedTemplate
       bottom = _getSpacings$split[2],
       left = _getSpacings$split[3];
 
-  return css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
+  return css(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
 }, function (_ref2) {
   var theme = _ref2.theme,
       internal = _ref2.$internal,
       delimiter = _ref2.$delimiter;
-
-  var border = function () {
-    if (delimiter === 'none') {
-      return 'none';
-    }
-
-    return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
-  }();
-
-  return css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
-}, function (_ref3) {
-  var theme = _ref3.theme,
-      internal = _ref3.$internal;
-  return internal ? theme.spacings.s6 : 0;
-});
-var Tab = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  ", "\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  white-space: nowrap;\n\n  ", "\n\n  transition-property: padding-right, background-color, color;\n  transition-duration: 0.25s;\n  transition-timing-function: ease-in-out;\n"])), function (_ref4) {
-  var onClick = _ref4.onClick;
-  return onClick && css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n      cursor: pointer;\n    "])));
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      active = _ref5.$active,
-      internal = _ref5.$internal;
-  return css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: calc(", " * 1.5) ", ";\n    gap: ", ";\n\n    ", "\n\n    color: ", ";\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s1, theme.spacings.s3, theme.spacings.s3, internal ? css(_templateObject8$n || (_templateObject8$n = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          ", "\n          line-height: 17px;\n        "])), function (_ref6) {
-    var theme = _ref6.theme;
-    return theme.useTypography('h4');
-  }) : css(_templateObject9$k || (_templateObject9$k = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          ", "\n          line-height: 19px;\n        "])), theme.getColor('black', 15), function (_ref7) {
-    var theme = _ref7.theme;
-    return theme.useTypography('h2');
-  }), theme.colors[active ? 'white' : 'darkBlue']);
+  var border = delimiter === 'none' ? 'none' : internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
+  return css(_templateObject3$J || (_templateObject3$J = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
 });
 
-var VoidClose = function VoidClose() {
-  return React__default.createElement(React__default.Fragment, null);
-};
-
 var VoidProvider = function VoidProvider(props) {
   return React__default.createElement(React__default.Fragment, {
     children: props.children
@@ -19475,55 +19682,38 @@ var VoidProvider = function VoidProvider(props) {
 };
 
 var Tabs$1 = function Tabs$1(props) {
-  var _ref = Array.isArray(props.active) ? props.active : useState(props.active),
-      active = _ref[0],
-      setActive = _ref[1];
+  var _ref = typeof props.options[1] === 'function' ? props.options : useState(props.options),
+      options = _ref[0],
+      setOptions = _ref[1];
 
-  var _ref2 = typeof props.options[1] === 'function' ? props.options : useState(props.options),
-      options = _ref2[0],
-      setOptions = _ref2[1];
+  var _ref2 = Array.isArray(props.active) ? props.active : useState(props.active),
+      active = _ref2[0],
+      setActive = _ref2[1];
 
+  var sortedTabs = sortTabs(options.map(function (tab, index) {
+    return _extends({}, tab, {
+      index: index
+    });
+  }));
+  var activeTabIndex = sortedTabs.findIndex(function (tab) {
+    return tab.index === active;
+  });
   var divProps = filterObject(props, ['options', 'active', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'onClose', 'alwaysOpen', 'delimiter', 'spacing']);
-  var CloseComponent = props.alwaysOpen || options.length < 2 ? VoidClose : Close$1;
-  return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Tabs, Object.assign({}, divProps, {
     "$internal": props.internal,
     "$delimiter": props.delimiter,
-    "$spacing": props.spacing,
-    onWheel: function onWheel(e) {
-      var target = function () {
-        var target = e.target;
-
-        while (target && target.tagName !== 'UL') {
-          target = target.parentElement;
-        }
-
-        return target;
-      }();
-
-      if (!target) return;
-      var x = target.offsetWidth * 100 / target.scrollWidth;
-      target.scrollLeft += x * (e.deltaY > 0 ? 1 : -1) * 2;
-      e.preventDefault();
-    }
-  }, options.map(function (tab, index) {
-    return React__default.createElement("li", {
-      key: index
-    }, React__default.createElement(CloseComponent, {
-      index: index,
-      active: [active, setActive],
-      options: [options, setOptions],
-      onClose: props.onClose
-    }), React__default.createElement(Tab, Object.assign({}, index === active ? {
-      $active: true
-    } : {
-      onClick: function onClick() {
-        return setActive(index, tab.data);
-      }
-    }, {
-      "$internal": props.internal,
-      children: tab.label
-    })));
-  })), options.map(function (tab, index) {
+    "$spacing": props.spacing
+  }), React__default.createElement(ScrollButtons, Object.assign({}, {
+    activeTabIndex: activeTabIndex,
+    tabsLength: options.length,
+    internal: props.internal
+  }), React__default.createElement(TabItem, {
+    active: [active, setActive],
+    tabs: [sortedTabs, setOptions],
+    onClose: props.onClose,
+    alwaysOpen: props.alwaysOpen,
+    internal: props.internal
+  }))), options.map(function (tab, index) {
     if (!('component' in tab)) return React__default.createElement(React__default.Fragment, {
       key: index
     });
@@ -19557,7 +19747,7 @@ var Tabs$1 = function Tabs$1(props) {
       data: tab.data,
       setTab: setTab,
       setLabel: setLabel
-    }, index === active ? {
+    }, index === activeTabIndex ? {
       active: true,
       children: React__default.createElement("div", null, React__default.createElement(Component, {
         data: tab.data,
@@ -19569,32 +19759,32 @@ var Tabs$1 = function Tabs$1(props) {
   }));
 };
 
-var _templateObject$19;
-var Container$o = styled.textarea(_templateObject$19 || (_templateObject$19 = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
+var _templateObject$1d;
+var Container$q = styled.textarea(_templateObject$1d || (_templateObject$1d = _taggedTemplateLiteralLoose(["\n  width: ", ";\n  height: ", ";\n  resize: none;\n  outline: 0;\n  border: 1px solid #c8c8c8;\n  padding: 14px;\n  border-radius: 4px;\n  color: #192338;\n"])), function (props) {
   return "" + props.width;
 }, function (props) {
   return "" + props.height;
 });
 
 var TextArea = function TextArea(props) {
-  return React__default.createElement(Container$o, Object.assign({}, props));
+  return React__default.createElement(Container$q, Object.assign({}, props));
 };
 
-var _templateObject$1a, _templateObject2$R, _templateObject3$K, _templateObject4$y, _templateObject5$u, _templateObject6$r;
-var Container$p = styled.div(_templateObject$1a || (_templateObject$1a = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
+var _templateObject$1e, _templateObject2$T, _templateObject3$K, _templateObject4$x, _templateObject5$t, _templateObject6$q;
+var Container$r = styled.div(_templateObject$1e || (_templateObject$1e = _taggedTemplateLiteralLoose(["\n  border-radius: 4px;\n  width: ", ";\n  height: 88px;\n  border: 1px solid transparent;\n  position: relative;\n\n  ", "\n\n  ", "\n\n    ", "\n\n  svg {\n    cursor: pointer;\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    width: 13px;\n    height: 13px;\n  }\n"])), function (props) {
   return props.size === 'large' ? '837px' : '460px';
 }, function (props) {
-  return props.color === 'success' && css(_templateObject2$R || (_templateObject2$R = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
+  return props.color === 'success' && css(_templateObject2$T || (_templateObject2$T = _taggedTemplateLiteralLoose(["\n      background-color: #fcfff5;\n      opacity: 1;\n      border-color: #a8c599;\n      h4 {\n        color: #1e561f;\n      }\n      p {\n        color: #1e561fcc;\n      }\n    "])));
 }, function (props) {
   return props.color === 'error' && css(_templateObject3$K || (_templateObject3$K = _taggedTemplateLiteralLoose(["\n      background-color: #fff6f6;\n      opacity: 1;\n      border-color: #973937;\n      h4 {\n        color: #973937;\n      }\n      p {\n        color: #973937;\n      }\n    "])));
 }, function (props) {
-  return props.color === 'warning' && css(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
+  return props.color === 'warning' && css(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n      background-color: #fffaf3;\n      opacity: 1;\n      border-color: #ccbea0;\n      h4 {\n        color: #7a4d05;\n      }\n      p {\n        color: #7a4d05cc;\n      }\n    "])));
 });
-var IconContainer$2 = styled.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
-var IconContent = styled.div(_templateObject6$r || (_templateObject6$r = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
+var IconContainer$2 = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 14px 0 0;\n  margin: 0;\n"])));
+var IconContent = styled.div(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding: 13px 0 21px 28px;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  h4 {\n    margin-bottom: 7px;\n    font-size: 18p;\n  }\n  p {\n    margin: 0;\n    font-size: 14px;\n    max-width: 380px;\n  }\n"])));
 
 var Toast = function Toast(props) {
-  return React__default.createElement(Container$p, Object.assign({}, props), React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, {
+  return React__default.createElement(Container$r, Object.assign({}, props), React__default.createElement(IconContainer$2, null, React__default.createElement(Icon, {
     type: 'feather',
     icon: 'x',
     onClick: function onClick() {
@@ -19603,9 +19793,9 @@ 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$1b, _templateObject2$S, _templateObject3$L, _templateObject4$z, _templateObject5$v;
-var Image = styled.img(_templateObject$1b || (_templateObject$1b = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
-var Container$q = styled.div(_templateObject2$S || (_templateObject2$S = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
+var _templateObject$1f, _templateObject2$U, _templateObject3$L, _templateObject4$y, _templateObject5$u;
+var Image = styled.img(_templateObject$1f || (_templateObject$1f = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n  max-height: 100%;\n"])));
+var Container$s = styled.div(_templateObject2$U || (_templateObject2$U = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-flex;\n\n  &,\n  ", " {\n    width: ", ";\n\n    height: ", ";\n  }\n"])), Image, function (_ref) {
   var width = _ref.width;
 
   switch (typeof width) {
@@ -19636,23 +19826,23 @@ var Dimmer = styled.div(_templateObject3$L || (_templateObject3$L = _taggedTempl
   var theme = _ref3.theme;
   return theme.getColor('greyishBlue', 50);
 });
-var Button$6 = styled(Button$1)(_templateObject4$z || (_templateObject4$z = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
+var Button$6 = styled(Button$1)(_templateObject4$y || (_templateObject4$y = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.getColor('white', 50);
 });
-var ModalContent = styled.div(_templateObject5$v || (_templateObject5$v = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
+var ModalContent = styled.div(_templateObject5$u || (_templateObject5$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n\n  img {\n    max-height: 100%;\n    max-width: 100%;\n  }\n"])));
 
-var _excluded$3 = ["src", "defaultClickOptions"];
+var _excluded$4 = ["src", "defaultClickOptions"];
 
 var Zoom = function Zoom(props) {
   var src = props.src,
-      imgProps = _objectWithoutPropertiesLoose(props, _excluded$3);
+      imgProps = _objectWithoutPropertiesLoose(props, _excluded$4);
 
   var _useState = useState(false),
       modalOpened = _useState[0],
       setModalOpened = _useState[1];
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$q, Object.assign({}, imgProps, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Container$s, Object.assign({}, imgProps, {
     onClick: function onClick() {
       return setModalOpened(true);
     }