@megafon/ui-core 2.1.2 → 3.0.0-beta.0

package/dist/es/components/Select/Select.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -13,7 +60,7 @@ h5 {
   position: relative;
   z-index: 1;
   min-height: 40px;
-  color: #333333;
+  color: var(--content);
 }
 .mfui-select__inner {
   position: relative;
@@ -25,8 +72,8 @@ h5 {
           box-sizing: border-box;
   width: 100%;
   height: 48px;
-  border: 1px solid #D8D8D8;
-  background-color: #FFFFFF;
+  border: 1px solid var(--spbSky2);
+  background-color: var(--base);
   outline: none;
   cursor: pointer;
 }
@@ -40,7 +87,7 @@ h5 {
   border-right: 5px solid transparent;
   border-bottom: none;
   border-left: 5px solid transparent;
-  color: #333333;
+  color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
@@ -59,6 +106,7 @@ h5 {
   border: none;
   border-radius: 0;
   overflow: auto;
+  color: var(--content);
   background-color: transparent;
   outline: none;
   -webkit-box-shadow: none;
@@ -70,7 +118,7 @@ h5 {
           appearance: none;
 }
 .mfui-select_no-touch .mfui-select__control:hover {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select__title {
   position: relative;
@@ -86,7 +134,7 @@ h5 {
   outline: none;
 }
 .mfui-select__title_placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__title-inner {
   position: relative;
@@ -111,26 +159,26 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__require-mark {
   margin-left: 1px;
-  color: #F62434;
+  color: var(--fury);
   font-size: 20px;
   line-height: 0;
 }
 .mfui-select input::-webkit-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input::-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-moz-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select input:-ms-input-placeholder {
-  color: #b3b3b3;
+  color: var(--spbSky3);
 }
 .mfui-select__list {
   position: absolute;
@@ -139,7 +187,7 @@ h5 {
   left: 0;
   z-index: 10;
   display: none;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   -webkit-box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
           box-shadow: 0 1px 16px rgba(0, 0, 0, 0.2);
 }
@@ -153,11 +201,11 @@ h5 {
 .mfui-select__list-item {
   font-family: inherit;
   padding: 8px 32px;
-  background-color: #FFFFFF;
+  background-color: var(--base);
   cursor: pointer;
 }
 .mfui-select__list-item_active {
-  background-color: #F6F6F6;
+  background-color: var(--spbSky0);
 }
 .mfui-select__item-title {
   position: relative;
@@ -180,12 +228,12 @@ h5 {
   right: 0;
   bottom: 0;
   width: 40px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#FFFFFF));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--base)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--base));
 }
 .mfui-select__list-item_active .mfui-select__item-title:after {
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(#F6F6F6));
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), #F6F6F6);
+  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(var(--spbSky0)));
+  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--spbSky0));
 }
 .mfui-select__not-found {
   padding: 8px 32px;
@@ -208,26 +256,26 @@ h5 {
 }
 .mfui-select_open .mfui-select__list {
   display: block;
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_open .mfui-select__control {
-  border-color: #333333;
+  border-color: var(--content);
 }
 .mfui-select_valid .mfui-select__control {
-  border-color: #00B956 !important;
+  border-color: var(--green) !important;
 }
 .mfui-select_valid .mfui-select__text {
-  color: #00B956;
+  color: var(--green);
 }
 .mfui-select_error .mfui-select__control {
-  border-color: #F62434 !important;
+  border-color: var(--fury) !important;
 }
 .mfui-select_error .mfui-select__text {
-  color: #F62434;
+  color: var(--fury);
 }
 .mfui-select_disabled .mfui-select__control {
-  border-color: #EDEDED;
-  background-color: #EDEDED;
+  border-color: var(--spbSky1);
+  background-color: var(--spbSky1);
   -webkit-user-select: none;
      -moz-user-select: none;
       -ms-user-select: none;

package/dist/es/components/Switcher/Switcher.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -8,47 +55,44 @@ h5 {
 .mfui-switcher {
   top: 22px;
   right: 28px;
-  width: 48px;
-  height: 28px;
+  width: 40px;
+  height: 24px;
   border-radius: 15.5px;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
-          box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+  background-color: var(--spbSky1);
   cursor: pointer;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_no-touch:hover {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
 }
 .mfui-switcher__pointer {
   position: relative;
-  top: 1px;
-  left: 0;
-  width: 24px;
-  height: 24px;
-  border: 1px solid #D8D8D8;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
-  background-color: #FFFFFF;
-  -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
-          box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 3px 3px 0 rgba(0, 0, 0, 0.05);
+  background-color: var(--base);
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
 }
 .mfui-switcher_checked {
-  background-color: #00B956;
+  background-color: var(--green);
 }
 .mfui-switcher_checked .mfui-switcher__pointer {
-  left: 22px;
+  left: 18px;
 }
 .mfui-switcher_checked.mfui-switcher_no-touch:hover {
-  background-color: #10E272;
+  background-color: var(--buttonHoverGreen);
 }
 .mfui-switcher_disabled {
-  background-color: #EDEDED;
+  background-color: var(--spbSky1);
   cursor: default;
 }
-.mfui-switcher_checked.mfui-switcher_disabled,
-.mfui-switcher_checked.mfui-switcher_disabled.mfui-switcher_no-touch:hover {
-  background-color: #D8D8D8;
+.mfui-switcher_disabled.mfui-switcher_checked.mfui-switcher_no-touch.mfui-switcher:hover {
+  background-color: var(--spbSky1);
+}
+.mfui-switcher_disabled .mfui-switcher__pointer {
+  background-color: var(--spbSky2);
 }

package/dist/es/components/Tabs/Tabs.css

@@ -1,3 +1,50 @@
+:root {
+  --green: #00B956;
+  --purple: #731982;
+  --base: #FFFFFF;
+  --content: #333333;
+  --spbSky0: #F6F6F6;
+  --spbSky1: #EDEDED;
+  --spbSky2: #D8D8D8;
+  --spbSky3: #999999;
+  --warmRedC: #EB5A40;
+  --137C: #FFA717;
+  --311C: #5BD9E5;
+  --reflexBlue: #444189;
+  --fury: #F62434;
+  --systemBlue: #34AAF2;
+  --background: #FFFFFF;
+  --buttonHoverGreen: #10E272;
+  --buttonhoverPurple: #534455;
+  --buttonDown: #404D46;
+  --gradientBasic: linear-gradient(90deg, #01873F 0%, #00B956 74%, #14CD6A 100%);
+  --gradientVIP: linear-gradient(90deg, #5B1168 0%, #731982 74%, #821E93 100%);
+  --gradientExclusive: linear-gradient(90deg, #2A2674 0%, #444189 74%, #504D93 100%);
+  --STCWhite: #FFFFFF;
+  --STCBlack: #333333;
+  --STCWhite5: #FFFFFF0D;
+  --STCWhite10: #FFFFFF1A;
+  --STCWhite20: #FFFFFF33;
+  --STCWhite50: #FFFFFF80;
+  --STCBlack5: #3333330D;
+  --STCBlack10: #3333331A;
+  --STCBlack20: #33333333;
+  --STCBlack50: #33333380;
+  --green80: #0CDC78;
+  --green20: #DDFFEC;
+  --purple80: #AA67C1;
+  --purple20: #FFEEFF;
+  --warmRedC80: #FF765D;
+  --warmRedC20: #FFCFC7;
+  --137C80: #FFB945;
+  --137C20: #FFEDD1;
+  --311C80: #62E3FF;
+  --311C20: #E1FAFF;
+  --reflexBlue80: #554FC9;
+  --reflexBlue20: #EBEAFF;
+  --fury80: #F8505D;
+  --fury20: #FFC5C9;
+}
 h1,
 h2,
 h3,
@@ -28,13 +75,13 @@ h5 {
 }
 .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, left top, right top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to right, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
-  background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
+  background: -webkit-gradient(linear, right top, left top, from(var(--base)), to(rgba(255, 255, 255, 0)));
+  background: linear-gradient(to left, var(--base), rgba(255, 255, 255, 0));
 }
 .mfui-tabs__swiper_beginning:before {
   display: none;
@@ -80,19 +127,19 @@ h5 {
   -webkit-box-sizing: content-box;
           box-sizing: content-box;
   height: 32px;
-  color: #333333;
+  color: var(--content);
   white-space: nowrap;
   text-decoration: none;
   cursor: pointer;
-  fill: #333333;
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--green);
+  fill: var(--green);
 }
 .mfui-tabs__tab-inner_current {
-  color: #00B956;
-  fill: #00B956;
+  color: var(--green);
+  fill: var(--green);
 }
 .mfui-tabs__tab-icon {
   width: 32px;
@@ -116,7 +163,7 @@ h5 {
   bottom: 0;
   left: 0;
   height: 2px;
-  background-color: #00B956;
+  background-color: var(--green);
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
@@ -128,11 +175,11 @@ h5 {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: #333333;
+  background-color: var(--content);
   -webkit-transform: translateY(-50%);
           transform: translateY(-50%);
   cursor: pointer;
-  fill: #FFFFFF;
+  fill: var(--base);
 }
 @media screen and (max-width: 1023px) {
   .mfui-tabs__arrow {
@@ -206,7 +253,7 @@ h5 {
           justify-content: center;
 }
 .mfui-tabs_h-align_center .mfui-tabs__tab {
-  border-bottom: 1px solid #D8D8D8;
+  border-bottom: 1px solid var(--stcWhite);
 }
 .mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
   position: relative;
@@ -218,7 +265,7 @@ h5 {
   left: 0;
   width: 100%;
   height: 1px;
-  background-color: #D8D8D8;
+  background-color: var(--spbSky2);
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
   .mfui-tabs_indents .mfui-tabs__swiper {
@@ -238,37 +285,37 @@ h5 {
   right: 0;
   left: 0;
   z-index: 100;
-  background-color: #FFFFFF;
+  background-color: var(--base);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
   left: 0;
-  background: -webkit-gradient(linear, left top, right top, from(#00B956), to(transparent));
-  background: linear-gradient(to right, #00B956, transparent);
+  background: -webkit-gradient(linear, left top, right top, from(var(--green)), to(transparent));
+  background: linear-gradient(to right, var(--green), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
   right: 0;
-  background: -webkit-gradient(linear, right top, left top, from(#00B956), to(transparent));
-  background: linear-gradient(to left, #00B956, transparent);
+  background: -webkit-gradient(linear, right top, left top, from(var(--green)), to(transparent));
+  background: linear-gradient(to left, var(--green), transparent);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
-  border-color: rgba(237, 237, 237, 0.5);
+  border-color: var(--stcBlack5);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
-  color: #FFFFFF80;
-  fill: #FFFFFF80;
+  color: var(--stcWhite50);
+  fill: var(--stcWhite50);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
-  color: #FFFFFF;
-  fill: #FFFFFF;
+  color: var(--stcWhite);
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
-  background-color: #FFFFFF;
+  background-color: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
-  background-color: #FFFFFF;
-  fill: #00B956;
+  background-color: var(--stcWhite);
+  fill: var(--green);
 }

package/dist/es/components/Tabs/Tabs.js

@@ -96,36 +96,41 @@ var Tabs = function Tabs(_ref) {
 
   var _React$useState9 = React.useState(0),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      underlineWidth = _React$useState10[0],
-      setUnderlineWidth = _React$useState10[1];
+      activeTabWidth = _React$useState10[0],
+      setActiveTabWidth = _React$useState10[1];
 
   var _React$useState11 = React.useState(0),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      underlineTranslate = _React$useState12[0],
-      setUnderlineTranslate = _React$useState12[1];
+      underlineWidth = _React$useState12[0],
+      setUnderlineWidth = _React$useState12[1];
 
-  var _React$useState13 = React.useState('none'),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      underlineTransition = _React$useState14[0],
-      setUnderlineTransition = _React$useState14[1];
+      underlineTranslate = _React$useState14[0],
+      setUnderlineTranslate = _React$useState14[1];
 
-  var _React$useState15 = React.useState('auto'),
+  var _React$useState15 = React.useState('none'),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      tabListHeight = _React$useState16[0],
-      setTabListHeight = _React$useState16[1];
+      underlineTransition = _React$useState16[0],
+      setUnderlineTransition = _React$useState16[1];
 
-  var _React$useState17 = React.useState(false),
+  var _React$useState17 = React.useState('auto'),
       _React$useState18 = _slicedToArray(_React$useState17, 2),
-      isSticky = _React$useState18[0],
-      setSticky = _React$useState18[1];
+      tabListHeight = _React$useState18[0],
+      setTabListHeight = _React$useState18[1];
 
-  var _React$useState19 = React.useState({
+  var _React$useState19 = React.useState(false),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      isSticky = _React$useState20[0],
+      setSticky = _React$useState20[1];
+
+  var _React$useState21 = React.useState({
     left: 0,
     right: 0
   }),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      stickyOffset = _React$useState20[0],
-      setStickyOffset = _React$useState20[1];
+      _React$useState22 = _slicedToArray(_React$useState21, 2),
+      stickyOffset = _React$useState22[0],
+      setStickyOffset = _React$useState22[1];
 
   var setTabRef = React.useCallback(function (tab) {
     tab && tabsRef.current.push(tab);
@@ -135,12 +140,6 @@ var Tabs = function Tabs(_ref) {
       return;
     }
 
-    var tabNodeChild = tabsRef.current[currentIndex].firstElementChild;
-
-    var _ref2 = tabNodeChild || {},
-        _ref2$clientWidth = _ref2.clientWidth,
-        clientWidth = _ref2$clientWidth === void 0 ? 0 : _ref2$clientWidth;
-
     var translate = _toConsumableArray(tabsRef.current).splice(0, currentIndex).reduce(function (accWidth, node) {
       var _node$getBoundingClie = node.getBoundingClientRect(),
           width = _node$getBoundingClie.width;
@@ -148,9 +147,9 @@ var Tabs = function Tabs(_ref) {
       return accWidth + width;
     }, 0);
 
-    setUnderlineWidth(clientWidth);
+    setUnderlineWidth(activeTabWidth);
     setUnderlineTranslate(translate);
-  }, [currentIndex]);
+  }, [currentIndex, activeTabWidth]);
   var calculateSticky = React.useCallback(function () {
     if (!sticky || !rootRef.current || !tabListRef.current) {
       return;
@@ -247,12 +246,12 @@ var Tabs = function Tabs(_ref) {
   }, []);
   React.useEffect(function () {
     var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref3) {
-        var isIntersecting = _ref3.isIntersecting,
-            _ref3$boundingClientR = _ref3.boundingClientRect,
-            top = _ref3$boundingClientR.top,
-            left = _ref3$boundingClientR.left,
-            right = _ref3$boundingClientR.right;
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
 
         if (!sticky || !rootRef.current || !tabListRef.current) {
           return;
@@ -294,10 +293,20 @@ var Tabs = function Tabs(_ref) {
   }, [calculateSticky]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
-      calculateUnderline();
       calculateSticky();
     }, 300);
+    var activeTabNode = tabsRef.current[currentIndex];
+    var resizeObserver = new ResizeObserver(function (entries) {
+      if (!entries.length || !entries[0]) {
+        return;
+      }
+
+      var width = entries[0].contentRect.width;
+      setActiveTabWidth(width);
+      calculateUnderline();
+    });
     calculateUnderline();
+    resizeObserver.observe(activeTabNode);
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);