@yosgo/swap-ui 1.0.130 → 1.0.132

package/README.md

@@ -1,4 +1,4 @@
-<img src="https://raw.githubusercontent.com/yosgo-open-source/swap-ui/master/src/SWAPLogo/SWAP_LOGO_01.svg" width="150" />
+<img src="https://blog.swap.work/wp-content/uploads/2021/02/cropped-SWAP_web-logo-01-2.png" width="150" />
 
 # 關於 SWAP-UI
 

package/build/index.esm.js

@@ -177,46 +177,42 @@ var templateObject_1;
 
 var SWAPSpace = function (_a) {
     var size = _a.size;
-    return (React__default.createElement("div", null,
-        React__default.createElement(SWAPSpaceWrap, { size: size })));
-};
-var SWAPSpaceWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  height: ", "px;\n"], ["\n  height: ",
-    "px;\n"])), function (_a) {
-    var size = _a.size;
-    if (size === "xxs") {
-        return 4;
-    }
-    else if (size === "xs") {
-        return 8;
-    }
-    else if (size === "s") {
-        return 12;
-    }
-    else if (size === "m") {
-        return 16;
-    }
-    else if (size === "l") {
-        return 24;
-    }
-    else if (size === "xl") {
-        return 32;
-    }
-    else if (size === "2xl") {
-        return 40;
-    }
-    else if (size === "3xl") {
-        return 48;
-    }
-    else if (size === "4xl") {
-        return 56;
-    }
-    else if (typeof size === "number") {
-        return size;
-    }
-    else
-        return 16;
-});
-var templateObject_1$1;
+    var height = function () {
+        if (size === "xxs") {
+            return 4;
+        }
+        else if (size === "xs") {
+            return 8;
+        }
+        else if (size === "s") {
+            return 12;
+        }
+        else if (size === "m") {
+            return 16;
+        }
+        else if (size === "l") {
+            return 24;
+        }
+        else if (size === "xl") {
+            return 32;
+        }
+        else if (size === "2xl") {
+            return 40;
+        }
+        else if (size === "3xl") {
+            return 48;
+        }
+        else if (size === "4xl") {
+            return 56;
+        }
+        else if (typeof size === "number") {
+            return size;
+        }
+        else
+            return 16;
+    };
+    return React__default.createElement("div", { style: { height: height() + "px" } });
+};
 
 var SWAPAppBar = function (_a) {
     var logo = _a.logo, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, navigations = _a.navigations;
@@ -272,8 +268,8 @@ var SWAPAppBar = function (_a) {
                                                 primaryButton.title.length > 0 ? (React__default.createElement(MenuItem$1, { disabled: primaryButton.disabled, onClick: function () { return primaryButton.onClick(); } }, primaryButton.title)) : null))))),
                         React__default.createElement(SWAPSpace, { size: "s" })))))));
 };
-var SWAPAppBarWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"], ["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"])));
-var templateObject_1$2;
+var SWAPAppBarWrap = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"], ["\n  .mobile_hide {\n    @media screen and (max-width: 960px) {\n      display: none;\n    }\n  }\n  .mobile_show {\n    display: none;\n    @media screen and (max-width: 960px) {\n      display: block;\n    }\n  }\n"])));
+var templateObject_1$1;
 
 var ElementId = function (title) { return "swap_banner_" + title; };
 var SWAPBanner = function (_a) {
@@ -315,8 +311,8 @@ var SWAPBanner = function (_a) {
                                 React__default.createElement(Button$1, { variant: "text", onClick: function () { return secondaryButton.onClick(); }, disabled: secondaryButton.disabled }, secondaryButton.title))) : null)) : null,
                         React__default.createElement(SWAPSpace, { size: "l" })))))));
 };
-var SWAPBannerWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"], ["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"])));
-var templateObject_1$3;
+var SWAPBannerWrap = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"], ["\n  .swap_banner {\n    position: relative;\n    overflow: hidden;\n    .banner_anchor {\n      position: absolute;\n      top: -36px;\n      left: 0;\n      width: 0;\n      height: 0;\n    }\n    .bar {\n      height: 12px;\n      &.s_bar {\n        background: #3f51b5;\n      }\n      &.w_bar {\n        background: #ffb11b;\n      }\n      &.c_bar {\n        background: rgb(220, 0, 78);\n      }\n    }\n  }\n"])));
+var templateObject_1$2;
 
 function unwrapExports (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -615,8 +611,8 @@ var SWAPCopyField = function (_a) {
                                     React__default.createElement("small", null, copyButtonText)))))),
                 } }))));
 };
-var SWAPCopyFieldWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"], ["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"])));
-var templateObject_1$4;
+var SWAPCopyFieldWrap = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"], ["\n  .cpy_btn_element {\n    width: auto;\n    min-width: 72px;\n    text-align: right;\n  }\n"])));
+var templateObject_1$3;
 
 var SWAPDialog = function (_a) {
     var open = _a.open, title = _a.title, helpText = _a.helpText, children = _a.children, primaryButton = _a.primaryButton, secondaryButton = _a.secondaryButton, status = _a.status;
@@ -654,8 +650,8 @@ var SWAPDialog = function (_a) {
                                         React__default.createElement(Grid, { item: true }, primaryButton && primaryButton.title ? (React__default.createElement(Button$1, { size: "large", onClick: function () { return primaryButton.onClick(); }, disabled: primaryButton.disabled }, primaryButton.title)) : null)),
                                     React__default.createElement(SWAPSpace, { size: "s" }))))))))));
 };
-var SWAPDialogWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"])));
-var templateObject_1$5;
+var SWAPDialogWrap = styled.div(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"], ["\n  box-sizing: border-box;\n  position: relative;\n  .bar {\n    position: absolute;\n    height: 12px;\n    top: 0;\n    left: 0;\n    width: 100%;\n    &.s_bar {\n      background: #3f51b5;\n    }\n    &.w_bar {\n      background: #ffb11b;\n    }\n    &.c_bar {\n      background: rgb(220, 0, 78);\n    }\n  }\n  .dialog_inner {\n    margin-top: 12px;\n  }\n"])));
+var templateObject_1$4;
 
 var ModalOpenEffect = function (props) {
     return (React__default.createElement(React__default.Fragment, null, props.sm ? (React__default.createElement(Slide, { in: props.in, direction: "up", mountOnEnter: true, unmountOnExit: true, timeout: { enter: 300, exit: 300 } },
@@ -780,8 +776,8 @@ var SWAPModal = function (_a) {
                                             React__default.createElement(Button$1, { variant: "text", size: sm ? "medium" : "large", onClick: function () { return handleStepButton("next"); } }, steps[stepIndex].nextStepText || "下一步"))))),
                                 React__default.createElement(SWAPSpace, { size: "m" })))))))));
 };
-var SWAPModalWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
-var templateObject_1$6;
+var SWAPModalWrap = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"], ["\n  outline: 0px;\n  position: absolute;\n  height: 100vh;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  .modal_inner {\n    border-radius: 9px;\n    overflow: hidden;\n    position: relative;\n    width: 48vw;\n    z-index: 2;\n    .modal_inner_header {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      top: 0;\n      background: white;\n      z-index: 1;\n    }\n    .modal_inner_body {\n      position: relative;\n      overflow-y: auto;\n      z-index: 1;\n    }\n    .modal_inner_bottom {\n      position: absolute;\n      width: 100%;\n      left: 0;\n      bottom: 0;\n      background: white;\n      z-index: 1;\n    }\n  }\n  @media screen and (max-width: 960px) {\n    align-items: flex-end;\n    .modal_inner {\n      border-bottom-left-radius: 0px;\n      border-bottom-right-radius: 0px;\n      width: 100vw;\n    }\n  }\n"])));
+var templateObject_1$5;
 
 function objectToGetParams(object) {
     var params = Object.entries(object)
@@ -1366,8 +1362,8 @@ var SWAPShare = function (_a) {
         },
     ].map(function (item, index) { return (React__default.createElement("div", { key: "share_btn_" + index }, item.el)); })));
 };
-var SWAPShareWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"], ["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"])));
-var templateObject_1$7;
+var SWAPShareWrap = styled.div(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"], ["\n  height: 40px;\n  position: relative;\n  .swap_share_icon {\n    cursor: pointer;\n  }\n"])));
+var templateObject_1$6;
 
 var SWAPTaxField = function (_a) {
     var onChange = _a.onChange, taxDescription = _a.taxDescription;
@@ -1533,7 +1529,7 @@ var SWAPTaxField = function (_a) {
                                             }
                                         })()))) })) }))))));
 };
-var SWAPTaxFieldWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"], ["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"])));
+var SWAPTaxFieldWrap = styled.div(templateObject_1$7 || (templateObject_1$7 = __makeTemplateObject(["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"], ["\n  .option_item::-webkit-scrollbar {\n    width: 0 !important;\n    height: 0 !important;\n  }\n"])));
 var typeOptions = [
     ["文字", "1"],
     ["設計", "2"],
@@ -1823,7 +1819,7 @@ var SWAPTaxDescription = function (incomeCode, expenseCode) {
         return "";
     }
 };
-var templateObject_1$8;
+var templateObject_1$7;
 /**
  * 邏輯設定
  * 1. 所得類別為 9A, 9B 時，費用類別為必填
@@ -2160,8 +2156,8 @@ var Styles = function (_a) {
                 " ",
                 copySuccess ? "已複製！" : null))));
 };
-var StylesWrap = styled.div(templateObject_1$9 || (templateObject_1$9 = __makeTemplateObject([""], [""])));
-var templateObject_1$9;
+var StylesWrap = styled.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject([""], [""])));
+var templateObject_1$8;
 
 var Typography = function (_a) {
     var variant = _a.variant, children = _a.children, mode = _a.mode, color = _a.color, style = _a.style;
@@ -2970,6 +2966,439 @@ var SegmentedTab = function (props) {
     return (React__default.createElement(MaterialTab, __assign({}, other, { disableRipple: true, classes: { textColorInherit: classes.text }, className: classes.root })));
 };
 
+var smoothscroll = createCommonjsModule(function (module, exports) {
+/* smoothscroll v0.4.4 - 2019 - Dustan Kasten, Jeremias Menichelli - MIT License */
+(function () {
+
+  // polyfill
+  function polyfill() {
+    // aliases
+    var w = window;
+    var d = document;
+
+    // return if scroll behavior is supported and polyfill is not forced
+    if (
+      'scrollBehavior' in d.documentElement.style &&
+      w.__forceSmoothScrollPolyfill__ !== true
+    ) {
+      return;
+    }
+
+    // globals
+    var Element = w.HTMLElement || w.Element;
+    var SCROLL_TIME = 468;
+
+    // object gathering original scroll methods
+    var original = {
+      scroll: w.scroll || w.scrollTo,
+      scrollBy: w.scrollBy,
+      elementScroll: Element.prototype.scroll || scrollElement,
+      scrollIntoView: Element.prototype.scrollIntoView
+    };
+
+    // define timing method
+    var now =
+      w.performance && w.performance.now
+        ? w.performance.now.bind(w.performance)
+        : Date.now;
+
+    /**
+     * indicates if a the current browser is made by Microsoft
+     * @method isMicrosoftBrowser
+     * @param {String} userAgent
+     * @returns {Boolean}
+     */
+    function isMicrosoftBrowser(userAgent) {
+      var userAgentPatterns = ['MSIE ', 'Trident/', 'Edge/'];
+
+      return new RegExp(userAgentPatterns.join('|')).test(userAgent);
+    }
+
+    /*
+     * IE has rounding bug rounding down clientHeight and clientWidth and
+     * rounding up scrollHeight and scrollWidth causing false positives
+     * on hasScrollableSpace
+     */
+    var ROUNDING_TOLERANCE = isMicrosoftBrowser(w.navigator.userAgent) ? 1 : 0;
+
+    /**
+     * changes scroll position inside an element
+     * @method scrollElement
+     * @param {Number} x
+     * @param {Number} y
+     * @returns {undefined}
+     */
+    function scrollElement(x, y) {
+      this.scrollLeft = x;
+      this.scrollTop = y;
+    }
+
+    /**
+     * returns result of applying ease math function to a number
+     * @method ease
+     * @param {Number} k
+     * @returns {Number}
+     */
+    function ease(k) {
+      return 0.5 * (1 - Math.cos(Math.PI * k));
+    }
+
+    /**
+     * indicates if a smooth behavior should be applied
+     * @method shouldBailOut
+     * @param {Number|Object} firstArg
+     * @returns {Boolean}
+     */
+    function shouldBailOut(firstArg) {
+      if (
+        firstArg === null ||
+        typeof firstArg !== 'object' ||
+        firstArg.behavior === undefined ||
+        firstArg.behavior === 'auto' ||
+        firstArg.behavior === 'instant'
+      ) {
+        // first argument is not an object/null
+        // or behavior is auto, instant or undefined
+        return true;
+      }
+
+      if (typeof firstArg === 'object' && firstArg.behavior === 'smooth') {
+        // first argument is an object and behavior is smooth
+        return false;
+      }
+
+      // throw error when behavior is not supported
+      throw new TypeError(
+        'behavior member of ScrollOptions ' +
+          firstArg.behavior +
+          ' is not a valid value for enumeration ScrollBehavior.'
+      );
+    }
+
+    /**
+     * indicates if an element has scrollable space in the provided axis
+     * @method hasScrollableSpace
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function hasScrollableSpace(el, axis) {
+      if (axis === 'Y') {
+        return el.clientHeight + ROUNDING_TOLERANCE < el.scrollHeight;
+      }
+
+      if (axis === 'X') {
+        return el.clientWidth + ROUNDING_TOLERANCE < el.scrollWidth;
+      }
+    }
+
+    /**
+     * indicates if an element has a scrollable overflow property in the axis
+     * @method canOverflow
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function canOverflow(el, axis) {
+      var overflowValue = w.getComputedStyle(el, null)['overflow' + axis];
+
+      return overflowValue === 'auto' || overflowValue === 'scroll';
+    }
+
+    /**
+     * indicates if an element can be scrolled in either axis
+     * @method isScrollable
+     * @param {Node} el
+     * @param {String} axis
+     * @returns {Boolean}
+     */
+    function isScrollable(el) {
+      var isScrollableY = hasScrollableSpace(el, 'Y') && canOverflow(el, 'Y');
+      var isScrollableX = hasScrollableSpace(el, 'X') && canOverflow(el, 'X');
+
+      return isScrollableY || isScrollableX;
+    }
+
+    /**
+     * finds scrollable parent of an element
+     * @method findScrollableParent
+     * @param {Node} el
+     * @returns {Node} el
+     */
+    function findScrollableParent(el) {
+      while (el !== d.body && isScrollable(el) === false) {
+        el = el.parentNode || el.host;
+      }
+
+      return el;
+    }
+
+    /**
+     * self invoked function that, given a context, steps through scrolling
+     * @method step
+     * @param {Object} context
+     * @returns {undefined}
+     */
+    function step(context) {
+      var time = now();
+      var value;
+      var currentX;
+      var currentY;
+      var elapsed = (time - context.startTime) / SCROLL_TIME;
+
+      // avoid elapsed times higher than one
+      elapsed = elapsed > 1 ? 1 : elapsed;
+
+      // apply easing to elapsed time
+      value = ease(elapsed);
+
+      currentX = context.startX + (context.x - context.startX) * value;
+      currentY = context.startY + (context.y - context.startY) * value;
+
+      context.method.call(context.scrollable, currentX, currentY);
+
+      // scroll more if we have not reached our destination
+      if (currentX !== context.x || currentY !== context.y) {
+        w.requestAnimationFrame(step.bind(w, context));
+      }
+    }
+
+    /**
+     * scrolls window or element with a smooth behavior
+     * @method smoothScroll
+     * @param {Object|Node} el
+     * @param {Number} x
+     * @param {Number} y
+     * @returns {undefined}
+     */
+    function smoothScroll(el, x, y) {
+      var scrollable;
+      var startX;
+      var startY;
+      var method;
+      var startTime = now();
+
+      // define scroll context
+      if (el === d.body) {
+        scrollable = w;
+        startX = w.scrollX || w.pageXOffset;
+        startY = w.scrollY || w.pageYOffset;
+        method = original.scroll;
+      } else {
+        scrollable = el;
+        startX = el.scrollLeft;
+        startY = el.scrollTop;
+        method = scrollElement;
+      }
+
+      // scroll looping over a frame
+      step({
+        scrollable: scrollable,
+        method: method,
+        startTime: startTime,
+        startX: startX,
+        startY: startY,
+        x: x,
+        y: y
+      });
+    }
+
+    // ORIGINAL METHODS OVERRIDES
+    // w.scroll and w.scrollTo
+    w.scroll = w.scrollTo = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.scroll.call(
+          w,
+          arguments[0].left !== undefined
+            ? arguments[0].left
+            : typeof arguments[0] !== 'object'
+              ? arguments[0]
+              : w.scrollX || w.pageXOffset,
+          // use top prop, second argument if present or fallback to scrollY
+          arguments[0].top !== undefined
+            ? arguments[0].top
+            : arguments[1] !== undefined
+              ? arguments[1]
+              : w.scrollY || w.pageYOffset
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        w,
+        d.body,
+        arguments[0].left !== undefined
+          ? ~~arguments[0].left
+          : w.scrollX || w.pageXOffset,
+        arguments[0].top !== undefined
+          ? ~~arguments[0].top
+          : w.scrollY || w.pageYOffset
+      );
+    };
+
+    // w.scrollBy
+    w.scrollBy = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0])) {
+        original.scrollBy.call(
+          w,
+          arguments[0].left !== undefined
+            ? arguments[0].left
+            : typeof arguments[0] !== 'object' ? arguments[0] : 0,
+          arguments[0].top !== undefined
+            ? arguments[0].top
+            : arguments[1] !== undefined ? arguments[1] : 0
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        w,
+        d.body,
+        ~~arguments[0].left + (w.scrollX || w.pageXOffset),
+        ~~arguments[0].top + (w.scrollY || w.pageYOffset)
+      );
+    };
+
+    // Element.prototype.scroll and Element.prototype.scrollTo
+    Element.prototype.scroll = Element.prototype.scrollTo = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        // if one number is passed, throw error to match Firefox implementation
+        if (typeof arguments[0] === 'number' && arguments[1] === undefined) {
+          throw new SyntaxError('Value could not be converted');
+        }
+
+        original.elementScroll.call(
+          this,
+          // use left prop, first number argument or fallback to scrollLeft
+          arguments[0].left !== undefined
+            ? ~~arguments[0].left
+            : typeof arguments[0] !== 'object' ? ~~arguments[0] : this.scrollLeft,
+          // use top prop, second argument or fallback to scrollTop
+          arguments[0].top !== undefined
+            ? ~~arguments[0].top
+            : arguments[1] !== undefined ? ~~arguments[1] : this.scrollTop
+        );
+
+        return;
+      }
+
+      var left = arguments[0].left;
+      var top = arguments[0].top;
+
+      // LET THE SMOOTHNESS BEGIN!
+      smoothScroll.call(
+        this,
+        this,
+        typeof left === 'undefined' ? this.scrollLeft : ~~left,
+        typeof top === 'undefined' ? this.scrollTop : ~~top
+      );
+    };
+
+    // Element.prototype.scrollBy
+    Element.prototype.scrollBy = function() {
+      // avoid action when no arguments are passed
+      if (arguments[0] === undefined) {
+        return;
+      }
+
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.elementScroll.call(
+          this,
+          arguments[0].left !== undefined
+            ? ~~arguments[0].left + this.scrollLeft
+            : ~~arguments[0] + this.scrollLeft,
+          arguments[0].top !== undefined
+            ? ~~arguments[0].top + this.scrollTop
+            : ~~arguments[1] + this.scrollTop
+        );
+
+        return;
+      }
+
+      this.scroll({
+        left: ~~arguments[0].left + this.scrollLeft,
+        top: ~~arguments[0].top + this.scrollTop,
+        behavior: arguments[0].behavior
+      });
+    };
+
+    // Element.prototype.scrollIntoView
+    Element.prototype.scrollIntoView = function() {
+      // avoid smooth behavior if not required
+      if (shouldBailOut(arguments[0]) === true) {
+        original.scrollIntoView.call(
+          this,
+          arguments[0] === undefined ? true : arguments[0]
+        );
+
+        return;
+      }
+
+      // LET THE SMOOTHNESS BEGIN!
+      var scrollableParent = findScrollableParent(this);
+      var parentRects = scrollableParent.getBoundingClientRect();
+      var clientRects = this.getBoundingClientRect();
+
+      if (scrollableParent !== d.body) {
+        // reveal element inside parent
+        smoothScroll.call(
+          this,
+          scrollableParent,
+          scrollableParent.scrollLeft + clientRects.left - parentRects.left,
+          scrollableParent.scrollTop + clientRects.top - parentRects.top
+        );
+
+        // reveal parent in viewport unless is fixed
+        if (w.getComputedStyle(scrollableParent).position !== 'fixed') {
+          w.scrollBy({
+            left: parentRects.left,
+            top: parentRects.top,
+            behavior: 'smooth'
+          });
+        }
+      } else {
+        // reveal element in viewport
+        w.scrollBy({
+          left: clientRects.left,
+          top: clientRects.top,
+          behavior: 'smooth'
+        });
+      }
+    };
+  }
+
+  {
+    // commonjs
+    module.exports = { polyfill: polyfill };
+  }
+
+}());
+});
+var smoothscroll_1 = smoothscroll.polyfill;
+
 var useStyles$5 = makeStyles$1(function (theme) { return ({
     root: function (props) { return ({
         width: props.width,
@@ -3008,6 +3437,7 @@ var SegmentedTabs = function (_a) {
     var classes = useStyles$5(styleProps);
     var tabsRef = useRef(null);
     useEffect(function () {
+        smoothscroll.polyfill();
         if (tabsRef &&
             tabsRef.current &&
             other.variant &&
@@ -3018,8 +3448,8 @@ var SegmentedTabs = function (_a) {
                 setTimeout(function () {
                     el_1.scrollIntoView({
                         behavior: "smooth",
-                        block: "end",
-                        inline: "nearest",
+                        block: "nearest",
+                        inline: "center",
                     });
                 }, 1000);
             }