@cleartrip/talos-button 1.2.0-beta-260730-3.0 → 1.2.0-beta-260730-4.0

package/dist/talos-button.umd.js

@@ -17689,7 +17689,9 @@
     var getStyledSegmentButtonStyles = function (_a) {
       var theme = _a.theme,
         isActive = _a.isActive,
-        isDisabled = _a.isDisabled;
+        isDisabled = _a.isDisabled,
+        index = _a.index;
+      var isFirstTab = index === 0;
       return {
         background: 'transparent',
         color: isActive ? theme.color.text.primary : theme.color.text.subHeading,
@@ -17700,7 +17702,9 @@
         borderRadius: '60px',
         cursor: 'pointer',
         width: '100%',
-        opacity: isDisabled ? theme.opacity['0.5'] : 1
+        opacity: isDisabled ? theme.opacity['0.5'] : 1,
+        paddingRight: isActive && !isFirstTab ? '8px' : '0px',
+        paddingLeft: isActive && isFirstTab ? '8px' : '0px'
       };
     };
     var getStyledAnimatedContainerBlock = function () {
@@ -17714,17 +17718,19 @@
     var getStyledAnimatedBlock = function (_a) {
       var activeIndex = _a.activeIndex,
         _b = _a.animationLength,
-        animationLength = _b === void 0 ? '1s' : _b;
+        animationLength = _b === void 0 ? '1s' : _b,
+        optionsCount = _a.optionsCount;
       var isFirstTab = activeIndex === 0;
       var offsetLeft = isFirstTab ? 4 : -4;
+      var sliderWidth = 100 / optionsCount;
       return {
         position: 'absolute',
-        width: 'calc(100% - 50%)',
+        width: "".concat(sliderWidth, "%"),
         height: '32px',
         borderRadius: '60px',
         backgroundColor: '#fff',
         top: '2.5px',
-        left: "calc(".concat(activeIndex ? 50 : 0, "% + ").concat(offsetLeft, "px)"),
+        left: "calc(".concat(activeIndex * sliderWidth, "% + ").concat(offsetLeft, "px)"),
         transition: "left ".concat(animationLength),
         animationDuration: animationLength,
         animationFillMode: 'forwards'
@@ -17754,12 +17760,14 @@
       var theme = _a.theme,
         isActive = _a.isActive,
         isDisabled = _a.isDisabled,
+        index = _a.index,
         _b = _a.css,
         css = _b === void 0 ? {} : _b;
       return __assign$4(__assign$4({}, getStyledSegmentButtonStyles({
         theme: theme,
         isActive: isActive,
-        isDisabled: isDisabled
+        isDisabled: isDisabled,
+        index: index
       })), css);
     });
     _default.div(function (_a) {
@@ -17769,10 +17777,14 @@
     });
     _default.div(function (_a) {
       var activeIndex = _a.activeIndex,
+        animationLength = _a.animationLength,
+        optionsCount = _a.optionsCount,
         _b = _a.css,
         css = _b === void 0 ? {} : _b;
       return __assign$4(__assign$4({}, getStyledAnimatedBlock({
-        activeIndex: activeIndex
+        activeIndex: activeIndex,
+        animationLength: animationLength,
+        optionsCount: optionsCount
       })), css);
     });