@splunk/react-ui 4.20.0 → 4.21.1

package/TabBar.js

@@ -1,835 +1,744 @@
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// define __esModule on exports
-/******/ 	__webpack_require__.r = function(exports) {
-/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 		}
-/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 	};
-/******/
-/******/ 	// create a fake namespace object
-/******/ 	// mode & 1: value is a module id, require it
-/******/ 	// mode & 2: merge all properties of value into the ns
-/******/ 	// mode & 4: return value when already ns object
-/******/ 	// mode & 8|1: behave like require
-/******/ 	__webpack_require__.t = function(value, mode) {
-/******/ 		if(mode & 1) value = __webpack_require__(value);
-/******/ 		if(mode & 8) return value;
-/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
-/******/ 		var ns = Object.create(null);
-/******/ 		__webpack_require__.r(ns);
-/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
-/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
-/******/ 		return ns;
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 186);
-/******/ })
-/************************************************************************/
-/******/ ({
-
-/***/ 0:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/themes");
-
-/***/ }),
-
-/***/ 1:
-/***/ (function(module, exports) {
-
-module.exports = require("prop-types");
-
-/***/ }),
-
-/***/ 10:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return updateReactRef; });
-/**
+/******/ (() => {
+    // webpackBootstrap
+    /******/ "use strict";
+    /******/ // The require scope
+    /******/    var e = {};
+    /******/
+    /************************************************************************/
+    /******/ /* webpack/runtime/compat get default export */
+    /******/    (() => {
+        /******/ // getDefaultExport function for compatibility with non-harmony modules
+        /******/ e.n = t => {
+            /******/ var r = t && t.__esModule ? 
+            /******/ () => t["default"]
+            /******/ : () => t
+            /******/;
+            e.d(r, {
+                a: r
+            });
+            /******/            return r;
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/define property getters */
+    /******/    (() => {
+        /******/ // define getter functions for harmony exports
+        /******/ e.d = (t, r) => {
+            /******/ for (var n in r) {
+                /******/ if (e.o(r, n) && !e.o(t, n)) {
+                    /******/ Object.defineProperty(t, n, {
+                        enumerable: true,
+                        get: r[n]
+                    });
+                    /******/                }
+                /******/            }
+            /******/        };
+        /******/    })();
+    /******/
+    /******/ /* webpack/runtime/hasOwnProperty shorthand */
+    /******/    (() => {
+        /******/ e.o = (e, t) => Object.prototype.hasOwnProperty.call(e, t)
+        /******/;
+    })();
+    /******/
+    /******/ /* webpack/runtime/make namespace object */
+    /******/    (() => {
+        /******/ // define __esModule on exports
+        /******/ e.r = e => {
+            /******/ if (typeof Symbol !== "undefined" && Symbol.toStringTag) {
+                /******/ Object.defineProperty(e, Symbol.toStringTag, {
+                    value: "Module"
+                });
+                /******/            }
+            /******/            Object.defineProperty(e, "__esModule", {
+                value: true
+            });
+            /******/        };
+        /******/    })();
+    /******/
+    /************************************************************************/    var t = {};
+    // ESM COMPAT FLAG
+        e.r(t);
+    // EXPORTS
+        e.d(t, {
+        Tab: () => /* reexport */ L,
+        default: () => /* reexport */ te
+    });
+    // CONCATENATED MODULE: external "react"
+    const r = require("react");
+    var n =  e.n(r);
+    // CONCATENATED MODULE: external "prop-types"
+    const i = require("prop-types");
+    var o =  e.n(i);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
+    const a = require("@splunk/ui-utils/keyboard");
+    // CONCATENATED MODULE: external "styled-components"
+    const l = require("styled-components");
+    var c =  e.n(l);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const s = require("@splunk/themes");
+    // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
+    var p = c().div.withConfig({
+        displayName: "TabBarStyles__Styled",
+        componentId: "sc-1t85fen-0"
+    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], s.mixins.reset("flex"), (0, 
+    s.pick)({
+        enterprise: s.variables.borderLightColor,
+        prisma: s.variables.neutral200
+    }), (0, s.pickVariant)("$layout", {
+        horizontal: {
+            prisma: (0, s.pickVariant)("$withUnderline", {
+                /* context appearance is only supported for Prisma */
+                true: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
+            }),
+            enterprise: (0, l.css)([ "&::before{border-bottom-width:1px;}" ])
+        },
+        vertical: {
+            enterprise: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ]),
+            prisma: (0, l.css)([ "display:inline-block;&::before{border-right-width:1px;}" ])
+        }
+    }));
+    // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
+    const u = require("@splunk/react-ui/Popover");
+    var d =  e.n(u);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const f = require("@splunk/react-ui/ScreenReaderContent");
+    var b =  e.n(f);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/id"
+    const v = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const h = require("@splunk/react-ui/Clickable");
+    var y =  e.n(h);
+    // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
+    var m = c()(y()).withConfig({
+        displayName: "TabStyles__StyledClickable",
+        componentId: "sc-1ry8mzj-0"
+    })([ "flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";", " &:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}" ], (0, 
+    s.pick)({
+        enterprise: "24px",
+        prisma: "20px"
+    }), s.variables.contentColorDefault, (0, s.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "padding:", ";margin-bottom:1px;" ], (0, s.pick)({
+            enterprise: "3px 20px",
+            prisma: {
+                comfortable: "0 20px",
+                compact: "0 16px"
+            }
+        })),
+        vertical: {
+            enterprise: (0, l.css)([ "width:100%;text-align:left;right:1px;padding:10px 20px;", "" ], (function(e) {
+                var t = e.$icon;
+                return t && (0, l.css)([ "text-align:center;" ]);
+            })),
+            prisma: (0, l.css)([ "width:100%;right:1px;padding:", ";" ], (0, s.pick)({
+                comfortable: "0 20px",
+                compact: "0 16px"
+            }))
+        }
+    }), (0, s.pick)({
+        enterprise: (0, l.css)([ "font-weight:", ";" ], s.variables.fontWeightBold),
+        prisma: (0, l.css)([ "color:", ";font-weight:", ";" ], s.variables.contentColorActive, s.variables.fontWeightBold)
+    }), (0, s.pick)({
+        enterprise: "normal",
+        prisma: s.variables.fontWeightSemiBold
+    }), (0, s.pick)({
+        prisma: (0, l.css)([ "&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}" ], s.variables.fontWeightBold)
+    }), (0, s.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
+    }), s.variables.focusShadowInset, (0, s.pick)({
+        prisma: (0, l.css)([ "color:", ";" ], s.variables.contentColorActive)
+    }));
+    var g = c().div.withConfig({
+        displayName: "TabStyles__StyledUnderline",
+        componentId: "sc-1ry8mzj-1"
+    })([ "position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}" ], (0, 
+    s.pick)({
+        enterprise: (0, l.css)([ "background:", ";" ], s.variables.borderLightColor)
+    }), (0, s.pickVariant)("$layout", {
+        horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;" ], (0, 
+        s.pick)({
+            enterprise: (0, l.css)([ "calc(100% - 20px * 2)" ]),
+            prisma: {
+                comfortable: (0, l.css)([ "calc(100% - 20px * 2)" ]),
+                compact: (0, l.css)([ "calc(100% - 16px * 2)" ])
+            }
+        }), (0, s.pick)({
+            enterprise: (0, l.css)([ "bottom:-1px;" ])
+        })),
+        vertical: {
+            enterprise: (0, l.css)([ "width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;" ]),
+            prisma: (0, l.css)([ "width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;" ])
+        }
+    }), (0, s.pick)({
+        enterprise: s.variables.accentColor,
+        prisma: s.variables.contentColorActive
+    }), (0, s.pickVariant)("$layout", {
+        horizontal: {
+            enterprise: (0, l.css)([ "height:3px;" ]),
+            prisma: (0, s.pickVariant)("$withUnderline", {
+                // context appearance is only supported for Prisma
+                true: (0, l.css)([ "height:1px;" ])
+            })
+        },
+        vertical: {
+            enterprise: (0, l.css)([ "width:3px;" ]),
+            prisma: (0, l.css)([ "width:1px;" ])
+        }
+    }), m, (0, s.pickVariant)("$layout", {
+        horizontal: {
+            enterprise: (0, l.css)([ "height:3px;" ])
+        },
+        vertical: {
+            enterprise: (0, l.css)([ "width:3px;" ])
+        }
+    }));
+    var x = c().span.withConfig({
+        displayName: "TabStyles__StyledIcon",
+        componentId: "sc-1ry8mzj-2"
+    })([ "", ";" ], (0, s.pickVariant)("$iconSize", {
+        inline: (0, l.css)([ "", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}" ], (0, 
+        s.pick)({
+            prisma: (0, l.css)([ "display:inline-block;width:16px;height:16px;" ])
+        }), (0, s.pick)({
+            enterprise: "0.4em",
+            prisma: "8px"
+        })),
+        small: (0, l.css)([ "font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;" ]),
+        large: (0, l.css)([ "font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;" ])
+    }));
+    var k = c().div.withConfig({
+        displayName: "TabStyles__StyledLabel",
+        componentId: "sc-1ry8mzj-3"
+    })([ "overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";" ], (0, 
+    s.pick)({
+        enterprise: "0",
+        prisma: {
+            comfortable: "16px 0",
+            compact: "10px 0"
+        }
+    }));
+    var w = c().div.withConfig({
+        displayName: "TabStyles__StyledCount",
+        componentId: "sc-1ry8mzj-4"
+    })([ "", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}" ], s.mixins.reset("inlne-block"), s.variables.contentColorDefault, (0, 
+    s.pick)({
+        enterprise: "inherit",
+        prisma: "10px"
+    }), (0, s.pick)({
+        enterprise: "0",
+        prisma: "8px"
+    }), (0, s.pick)({
+        enterprise: (0, l.css)([ "&::before{content:'(';}&::after{content:')';}" ]),
+        prisma: (0, l.css)([ "background:", ";" ], s.variables.neutral100)
+    }), s.variables.interactiveColorBackgroundDisabled, s.variables.contentColorDisabled);
+    var O = c().div.withConfig({
+        displayName: "TabStyles__StyledTooltipContent",
+        componentId: "sc-1ry8mzj-5"
+    })([ "padding:8px;font-size:", ";" ], s.variables.fontSizeSmall);
+    // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
+    var S =  (0, r.createContext)({});
+    S.displayName = "TabBar";
+    /* harmony default export */    const C = S;
+    // CONCATENATED MODULE: ./src/utils/getCountValue.ts
+    // A utility for max count
+    var I = function e(t, r) {
+        if (t > r) {
+            return "".concat(r, "+");
+        }
+        return t;
+    };
+    // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
+    /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
  *
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-function updateReactRef(ref, current) {
-  if (ref) {
-    if (typeof ref === 'function') {
-      ref(current);
-    } else {
-      // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
-      // the intention here is to signal "we will take care of setting 'current', not you".
-      ref.current = current; // eslint-disable-line no-param-reassign
+    function j(e, t) {
+        if (e) {
+            if (typeof e === "function") {
+                e(t);
+            } else {
+                // the public signature of this util uses React.Ref<T> to mirror the way React types refs.
+                // the intention here is to signal "we will take care of setting 'current', not you".
+                e.current = t;
+ // eslint-disable-line no-param-reassign
+                        }
+        }
     }
-  }
-}
-
-
-
-/***/ }),
-
-/***/ 12:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Clickable");
-
-/***/ }),
-
-/***/ 14:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/ScreenReaderContent");
-
-/***/ }),
-
-/***/ 186:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ TabBar_TabBar; });
-__webpack_require__.d(__webpack_exports__, "Tab", function() { return /* reexport */ TabBar_Tab; });
-
-// EXTERNAL MODULE: external "react"
-var external_react_ = __webpack_require__(2);
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
-
-// EXTERNAL MODULE: external "prop-types"
-var external_prop_types_ = __webpack_require__(1);
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/keyboard"
-var keyboard_ = __webpack_require__(7);
-
-// EXTERNAL MODULE: external "styled-components"
-var external_styled_components_ = __webpack_require__(3);
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_);
-
-// EXTERNAL MODULE: external "@splunk/themes"
-var themes_ = __webpack_require__(0);
-
-// CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-
-
-var Styled = external_styled_components_default.a.div.withConfig({
-  displayName: "TabBarStyles__Styled",
-  componentId: "sc-1t85fen-0"
-})(["", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";"], themes_["mixins"].reset('flex'), Object(themes_["pick"])({
-  enterprise: themes_["variables"].borderLightColor,
-  prisma: themes_["variables"].neutral200
-}), Object(themes_["pickVariant"])('$layout', {
-  horizontal: {
-    prisma: Object(themes_["pickVariant"])('$withUnderline', {
-      /* context appearance is only supported for Prisma */
-      "true": Object(external_styled_components_["css"])(["&::before{border-bottom-width:1px;}"])
-    }),
-    enterprise: Object(external_styled_components_["css"])(["&::before{border-bottom-width:1px;}"])
-  },
-  vertical: {
-    enterprise: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"]),
-    prisma: Object(external_styled_components_["css"])(["display:inline-block;&::before{border-right-width:1px;}"])
-  }
-}));
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Popover"
-var Popover_ = __webpack_require__(21);
-var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/ScreenReaderContent"
-var ScreenReaderContent_ = __webpack_require__(14);
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_);
-
-// EXTERNAL MODULE: external "@splunk/ui-utils/id"
-var id_ = __webpack_require__(8);
-
-// EXTERNAL MODULE: external "@splunk/react-ui/Clickable"
-var Clickable_ = __webpack_require__(12);
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_);
-
-// CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-
-
-
-var StyledClickable = external_styled_components_default()(Clickable_default.a).withConfig({
-  displayName: "TabStyles__StyledClickable",
-  componentId: "sc-1ry8mzj-0"
-})(["flex:0 1 auto;display:block;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";", " &:hover:not([disabled]){", "}}&:focus{box-shadow:", ";", "}"], Object(themes_["pick"])({
-  enterprise: '24px',
-  prisma: '20px'
-}), themes_["variables"].contentColorDefault, Object(themes_["pickVariant"])('$layout', {
-  horizontal: Object(external_styled_components_["css"])(["padding:", ";margin-bottom:1px;"], Object(themes_["pick"])({
-    enterprise: '3px 20px',
-    prisma: {
-      comfortable: '0 20px',
-      compact: '0 16px'
+    // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
+    function T(e) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            T = function e(t) {
+                return typeof t;
+            };
+        } else {
+            T = function e(t) {
+                return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
+            };
+        }
+        return T(e);
     }
-  })),
-  vertical: {
-    enterprise: Object(external_styled_components_["css"])(["width:100%;text-align:left;right:1px;padding:10px 20px;", ""], function (_ref) {
-      var $icon = _ref.$icon;
-      return $icon && Object(external_styled_components_["css"])(["text-align:center;"]);
-    }),
-    prisma: Object(external_styled_components_["css"])(["width:100%;right:1px;padding:", ";"], Object(themes_["pick"])({
-      comfortable: '0 20px',
-      compact: '0 16px'
-    }))
-  }
-}), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["font-weight:", ";"], themes_["variables"].fontWeightBold),
-  prisma: Object(external_styled_components_["css"])(["color:", ";font-weight:", ";"], themes_["variables"].contentColorActive, themes_["variables"].fontWeightBold)
-}), Object(themes_["pick"])({
-  enterprise: 'normal',
-  prisma: themes_["variables"].fontWeightSemiBold
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}"], themes_["variables"].fontWeightBold)
-}), Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
-}), themes_["variables"].focusShadowInset, Object(themes_["pick"])({
-  prisma: Object(external_styled_components_["css"])(["color:", ";"], themes_["variables"].contentColorActive)
-}));
-var StyledUnderline = external_styled_components_default.a.div.withConfig({
-  displayName: "TabStyles__StyledUnderline",
-  componentId: "sc-1ry8mzj-1"
-})(["position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}"], Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].borderLightColor)
-}), Object(themes_["pickVariant"])('$layout', {
-  horizontal: Object(external_styled_components_["css"])(["height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;"], Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["calc(100% - 20px * 2)"]),
-    prisma: {
-      comfortable: Object(external_styled_components_["css"])(["calc(100% - 20px * 2)"]),
-      compact: Object(external_styled_components_["css"])(["calc(100% - 16px * 2)"])
+    function z() {
+        z = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return z.apply(this, arguments);
     }
-  }), Object(themes_["pick"])({
-    enterprise: Object(external_styled_components_["css"])(["bottom:-1px;"])
-  })),
-  vertical: {
-    enterprise: Object(external_styled_components_["css"])(["width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;"]),
-    prisma: Object(external_styled_components_["css"])(["width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;"])
-  }
-}), Object(themes_["pick"])({
-  enterprise: themes_["variables"].accentColor,
-  prisma: themes_["variables"].contentColorActive
-}), Object(themes_["pickVariant"])('$layout', {
-  horizontal: {
-    enterprise: Object(external_styled_components_["css"])(["height:3px;"]),
-    prisma: Object(themes_["pickVariant"])('$withUnderline', {
-      // context appearance is only supported for Prisma
-      "true": Object(external_styled_components_["css"])(["height:1px;"])
-    })
-  },
-  vertical: {
-    enterprise: Object(external_styled_components_["css"])(["width:3px;"]),
-    prisma: Object(external_styled_components_["css"])(["width:1px;"])
-  }
-}), StyledClickable, Object(themes_["pickVariant"])('$layout', {
-  horizontal: {
-    enterprise: Object(external_styled_components_["css"])(["height:3px;"])
-  },
-  vertical: {
-    enterprise: Object(external_styled_components_["css"])(["width:3px;"])
-  }
-}));
-var StyledIcon = external_styled_components_default.a.span.withConfig({
-  displayName: "TabStyles__StyledIcon",
-  componentId: "sc-1ry8mzj-2"
-})(["", ";"], Object(themes_["pickVariant"])('$iconSize', {
-  inline: Object(external_styled_components_["css"])(["", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}"], Object(themes_["pick"])({
-    prisma: Object(external_styled_components_["css"])(["display:inline-block;width:16px;height:16px;"])
-  }), Object(themes_["pick"])({
-    enterprise: '0.4em',
-    prisma: '8px'
-  })),
-  small: Object(external_styled_components_["css"])(["font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;"]),
-  large: Object(external_styled_components_["css"])(["font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;"])
-}));
-var StyledLabel = external_styled_components_default.a.div.withConfig({
-  displayName: "TabStyles__StyledLabel",
-  componentId: "sc-1ry8mzj-3"
-})(["overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";"], Object(themes_["pick"])({
-  enterprise: '0',
-  prisma: {
-    comfortable: '16px 0',
-    compact: '10px 0'
-  }
-}));
-var StyledCount = external_styled_components_default.a.div.withConfig({
-  displayName: "TabStyles__StyledCount",
-  componentId: "sc-1ry8mzj-4"
-})(["", " display:inline-block;border-radius:18px;color:", ";font-size:", ";line-height:10px;padding:4px 6px;margin-left:", ";", " &[disabled]{background:", ";color:", ";}"], themes_["mixins"].reset('inlne-block'), themes_["variables"].contentColorDefault, Object(themes_["pick"])({
-  enterprise: 'inherit',
-  prisma: '10px'
-}), Object(themes_["pick"])({
-  enterprise: '0',
-  prisma: '8px'
-}), Object(themes_["pick"])({
-  enterprise: Object(external_styled_components_["css"])(["&::before{content:'(';}&::after{content:')';}"]),
-  prisma: Object(external_styled_components_["css"])(["background:", ";"], themes_["variables"].neutral100)
-}), themes_["variables"].interactiveColorBackgroundDisabled, themes_["variables"].contentColorDisabled);
-var StyledTooltipContent = external_styled_components_default.a.div.withConfig({
-  displayName: "TabStyles__StyledTooltipContent",
-  componentId: "sc-1ry8mzj-5"
-})(["padding:8px;font-size:", ";"], themes_["variables"].fontSizeSmall);
-
-// CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-
-var TabBarContext = /*#__PURE__*/Object(external_react_["createContext"])({});
-TabBarContext.displayName = 'TabBar';
-/* harmony default export */ var TabBar_TabBarContext = (TabBarContext);
-// CONCATENATED MODULE: ./src/utils/getCountValue.ts
-// A utility for max count
-var maxCountValue = function maxCountValue(count, maxCount) {
-  if (count > maxCount) {
-    return "".concat(maxCount, "+");
-  }
-
-  return count;
-};
-// EXTERNAL MODULE: ./src/utils/updateReactRef.ts
-var updateReactRef = __webpack_require__(10);
-
-// CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-
-
-
-
-
-
-
-
-
-var propTypes = {
-  /** @private. Is the tab active. */
-  active: external_prop_types_default.a.bool,
-  ariaControls: external_prop_types_default.a.string,
-  count: external_prop_types_default.a.number,
-  disabled: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  icon: external_prop_types_default.a.node,
-  id: external_prop_types_default.a.string,
-  label: external_prop_types_default.a.oneOfType([external_prop_types_default.a.string, external_prop_types_default.a.element]),
-
-  /** @private Maximum count number in tab label */
-  maxCount: external_prop_types_default.a.number,
-  tabId: external_prop_types_default.a.string,
-
-  /** @private. The internal key of the tab */
-  tabKey: external_prop_types_default.a.number,
-  to: external_prop_types_default.a.string,
-  tooltip: external_prop_types_default.a.node
-};
-var defaultProps = {
-  active: false
-};
-
-var Tab_Tab = /*#__PURE__*/function (_Component) {
-  _inherits(Tab, _Component);
-
-  var _super = _createSuper(Tab);
-
-  // @docs-props-type TabPropsBase
-  function Tab(props) {
-    var _this;
-
-    _classCallCheck(this, Tab);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "popoverId", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "ariaId", void 0);
-
-    _defineProperty(_assertThisInitialized(_this), "handleMount", function (el) {
-      _this.setState({
-        anchor: el
-      });
-
-      Object(updateReactRef["a" /* updateReactRef */])(_this.props.elementRef, el);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTooltipOpen", function () {
-      _this.setState({
-        open: true
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleTooltipClose", function () {
-      _this.setState({
-        open: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (e) {
-      var _this$props = _this.props,
-          active = _this$props.active,
-          tabId = _this$props.tabId,
-          tabKey = _this$props.tabKey,
-          to = _this$props.to;
-      var onClick = _this.context.onClick; // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
-      // while preventing the "to" prop from incorrectly triggering <Clickable>'s providedOnClick on the active tab
-
-      if (!active) {
-        onClick === null || onClick === void 0 ? void 0 : onClick(e, {
-          tabId: tabId,
-          tabKey: tabKey
+    function _(e, t) {
+        if (e == null) return {};
+        var r = E(e, t);
+        var n, i;
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
+    }
+    function E(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
+        }
+        return r;
+    }
+    function P(e, t) {
+        if (!(e instanceof t)) {
+            throw new TypeError("Cannot call a class as a function");
+        }
+    }
+    function $(e, t) {
+        for (var r = 0; r < t.length; r++) {
+            var n = t[r];
+            n.enumerable = n.enumerable || false;
+            n.configurable = true;
+            if ("value" in n) n.writable = true;
+            Object.defineProperty(e, n.key, n);
+        }
+    }
+    function R(e, t, r) {
+        if (t) $(e.prototype, t);
+        if (r) $(e, r);
+        return e;
+    }
+    function D(e, t) {
+        if (typeof t !== "function" && t !== null) {
+            throw new TypeError("Super expression must either be null or a function");
+        }
+        e.prototype = Object.create(t && t.prototype, {
+            constructor: {
+                value: e,
+                writable: true,
+                configurable: true
+            }
         });
-      }
-
-      if (to == null || to != null && active) {
-        e.preventDefault();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleFocus", function (e) {
-      _this.handleTooltipOpen();
-
-      var _this$props2 = _this.props,
-          tabId = _this$props2.tabId,
-          tabKey = _this$props2.tabKey;
-      var onFocus = _this.context.onFocus;
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(e, {
-        tabId: tabId,
-        tabKey: tabKey
-      });
-    });
-
-    _this.popoverId = Object(id_["createDOMID"])('popover');
-    _this.ariaId = Object(id_["createDOMID"])('aria-id');
-    _this.state = {
-      open: false,
-      anchor: null
-    };
-    return _this;
-  }
-
-  _createClass(Tab, [{
-    key: "focus",
-    value: function focus() {
-      var _this$state$anchor;
-
-      (_this$state$anchor = this.state.anchor) === null || _this$state$anchor === void 0 ? void 0 : _this$state$anchor.focus();
+        if (t) M(e, t);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props3 = this.props,
-          active = _this$props3.active,
-          ariaControls = _this$props3.ariaControls,
-          count = _this$props3.count,
-          disabled = _this$props3.disabled,
-          icon = _this$props3.icon,
-          label = _this$props3.label,
-          tabId = _this$props3.tabId,
-          maxCount = _this$props3.maxCount,
-          to = _this$props3.to,
-          tooltip = _this$props3.tooltip,
-          otherProps = _objectWithoutProperties(_this$props3, ["active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "to", "tooltip"]);
-
-      var _this$state = this.state,
-          anchor = _this$state.anchor,
-          open = _this$state.open;
-      var _this$context = this.context,
-          appearance = _this$context.appearance,
-          disabledContext = _this$context.disabled,
-          iconSize = _this$context.iconSize,
-          layout = _this$context.layout,
-          widthContext = _this$context.width;
-      var style = otherProps.style;
-      var disabledValue = disabledContext || disabled || false;
-      var iconSizeValue = iconSize || 'inline';
-      var layoutValue = layout || 'horizontal';
-      var styleValue = widthContext ? {
-        width: widthContext
-      } : style;
-      return (
-        /*#__PURE__*/
-        // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
-        // eslint-disable-next-line
-        // @ts-ignore-next-line
-        external_react_default.a.createElement(StyledClickable, _extends({
-          "aria-controls": ariaControls,
-          "aria-selected": active,
-          "aria-labelledby": this.ariaId,
-          "data-test": "tab",
-          "data-test-tab-id": tabId,
-          "data-test-popover-id": tooltip ? this.popoverId : undefined,
-          $layout: layoutValue,
-          $icon: icon && iconSizeValue !== 'inline' ? true : undefined,
-          disabled: disabledValue,
-          elementRef: this.handleMount,
-          style: styleValue
-        }, otherProps, {
-          onClick: this.handleClick,
-          onFocus: this.handleFocus,
-          onMouseEnter: this.handleTooltipOpen,
-          onBlur: this.handleTooltipClose,
-          onMouseLeave: this.handleTooltipClose,
-          role: "tab",
-          tabIndex: active ? undefined : -1,
-          to: to
-        }), /*#__PURE__*/external_react_default.a.createElement(StyledLabel, {
-          "data-test": "label",
-          $withUnderline: appearance === 'navigation'
-        }, icon && /*#__PURE__*/external_react_default.a.createElement(StyledIcon, {
-          $iconSize: iconSizeValue
-        }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default.a.createElement(StyledCount, {
-          "data-test": "count",
-          disabled: disabledValue
-        }, maxCount ? maxCountValue(count, maxCount) : count)), /*#__PURE__*/external_react_default.a.createElement(StyledUnderline, {
-          $layout: layoutValue,
-          $withUnderline: appearance === 'navigation'
-        }), !disabled && tooltip && /*#__PURE__*/external_react_default.a.createElement(Popover_default.a, {
-          role: "tooltip",
-          anchor: anchor // override Popover's default animation to make it faster
-          // this keeps the overall amount of time the Tooltip is on-screen the same
-          // even with the increased default closeDelay to address SUI-5116
-          ,
-          animationConfig: {
-            tension: 400
-          },
-          appearance: "inverted",
-          closeReasons: ['offScreen', 'escapeKey'],
-          defaultPlacement: layoutValue === 'vertical' ? 'right' : 'above',
-          id: this.popoverId,
-          open: !!anchor && open,
-          align: "center"
-        }, /*#__PURE__*/external_react_default.a.createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default.a.createElement(ScreenReaderContent_default.a, {
-          "aria-hidden": "true",
-          id: this.ariaId
-        }, tooltip))
-      );
+    function M(e, t) {
+        M = Object.setPrototypeOf || function e(t, r) {
+            t.__proto__ = r;
+            return t;
+        };
+        return M(e, t);
     }
-  }]);
-
-  return Tab;
-}(external_react_["Component"]);
-
-_defineProperty(Tab_Tab, "propTypes", propTypes);
-
-_defineProperty(Tab_Tab, "defaultProps", defaultProps);
-
-_defineProperty(Tab_Tab, "contextType", TabBar_TabBarContext);
-
-/* harmony default export */ var TabBar_Tab = (Tab_Tab);
-// EXTERNAL MODULE: ./src/utils/navigateList.ts
-var navigateList = __webpack_require__(60);
-
-// CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-function TabBar_extends() { TabBar_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return TabBar_extends.apply(this, arguments); }
-
-function TabBar_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = TabBar_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function TabBar_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-
-
-
-
-
-
-
-var minTabWidth = 50;
-/** @public */
-
-var TabBar_propTypes = {
-  autoActivate: external_prop_types_default.a.bool,
-  activeTabId: external_prop_types_default.a.string,
-  appearance: external_prop_types_default.a.oneOf(['navigation', 'context']),
-  children: external_prop_types_default.a.node,
-
-  /** @private */
-  disabled: external_prop_types_default.a.bool,
-  elementRef: external_prop_types_default.a.oneOfType([external_prop_types_default.a.func, external_prop_types_default.a.object]),
-  iconSize: external_prop_types_default.a.oneOf(['inline', 'small', 'large']),
-  layout: external_prop_types_default.a.oneOf(['horizontal', 'vertical']),
-  onChange: external_prop_types_default.a.func,
-  tabWidth: external_prop_types_default.a.number
-};
-
-function TabBar(_ref) {
-  var activeTabId = _ref.activeTabId,
-      autoActivate = _ref.autoActivate,
-      _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'navigation' : _ref$appearance,
-      children = _ref.children,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      elementRef = _ref.elementRef,
-      _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? 'inline' : _ref$iconSize,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
-      onChange = _ref.onChange,
-      tabWidth = _ref.tabWidth,
-      otherProps = TabBar_objectWithoutProperties(_ref, ["activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth"]);
-
-  // @docs-props-type TabBarPropsBase
-  var focusedTabIndex = Object(external_react_["useRef"])(0);
-  var tabRefs = [];
-  var nextTabKey = Object(external_react_["useMemo"])(function () {
-    return layout === 'vertical' ? 'down' : 'right';
-  }, [layout]);
-  var previousTabKey = Object(external_react_["useMemo"])(function () {
-    return layout === 'vertical' ? 'up' : 'left';
-  }, [layout]);
-
-  var tabOnFocus = function tabOnFocus(e, data) {
-    var tabKey = data.tabKey;
-
-    if (tabKey != null) {
-      focusedTabIndex.current = tabKey;
+    function q(e) {
+        var t = A();
+        return function r() {
+            var n = B(e), i;
+            if (t) {
+                var o = B(this).constructor;
+                i = Reflect.construct(n, arguments, o);
+            } else {
+                i = n.apply(this, arguments);
+            }
+            return K(this, i);
+        };
     }
-
-    if (autoActivate) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-        selectedTabId: data.tabId
-      });
+    function K(e, t) {
+        if (t && (T(t) === "object" || typeof t === "function")) {
+            return t;
+        }
+        return V(e);
     }
-  };
-
-  var tabOnClick = function tabOnClick(e, data) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-      selectedTabId: data.tabId
-    });
-  };
-
-  var tabKeyCounter = 0;
-  var clonedChildren = external_react_["Children"].toArray(children).filter(external_react_["isValidElement"]).map(function (child) {
-    // <TabBar> allows non-<Tab> children, pass them through without any modification
-    if (typeof child.type === 'string' || child.type.name !== TabBar_Tab.name) {
-      return child;
+    function V(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
+    }
+    function A() {
+        if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+        if (Reflect.construct.sham) return false;
+        if (typeof Proxy === "function") return true;
+        try {
+            Date.prototype.toString.call(Reflect.construct(Date, [], (function() {})));
+            return true;
+        } catch (e) {
+            return false;
+        }
     }
-
-    var ref = /*#__PURE__*/external_react_default.a.createRef();
-    tabRefs.push(ref);
-    var childProps = {
-      active: activeTabId === child.props.tabId,
-      tabKey: tabKeyCounter,
-      ref: ref
+    function B(e) {
+        B = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return B(e);
+    }
+    function N(e, t, r) {
+        if (t in e) {
+            Object.defineProperty(e, t, {
+                value: r,
+                enumerable: true,
+                configurable: true,
+                writable: true
+            });
+        } else {
+            e[t] = r;
+        }
+        return e;
+    }
+    var W = {
+        /** @private. Is the tab active. */
+        active: o().bool,
+        ariaControls: o().string,
+        count: o().number,
+        disabled: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        icon: o().node,
+        id: o().string,
+        label: o().oneOfType([ o().string, o().element ]),
+        /** @private Maximum count number in tab label */
+        maxCount: o().number,
+        tabId: o().string,
+        /** @private. The internal key of the tab */
+        tabKey: o().number,
+        to: o().string,
+        tooltip: o().node
+    };
+    var F = {
+        active: false
     };
-    tabKeyCounter += 1;
-    return /*#__PURE__*/Object(external_react_["cloneElement"])(child, childProps);
-  });
-  var widthContext = tabWidth && tabWidth > minTabWidth ? tabWidth : null;
-
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    var key = Object(keyboard_["keycode"])(e.nativeEvent);
-    var tabToFocusRef;
-
-    if (key === nextTabKey) {
-      tabToFocusRef = Object(navigateList["a" /* getNextListItem */])(tabRefs, focusedTabIndex.current, focusedTabIndex.current + 1);
-    } else if (key === previousTabKey) {
-      tabToFocusRef = Object(navigateList["b" /* getPrevListItem */])(tabRefs, focusedTabIndex.current, focusedTabIndex.current - 1);
-    } else if (key === 'home') {
-      tabToFocusRef = Object(navigateList["a" /* getNextListItem */])(tabRefs, focusedTabIndex.current, 0);
-    } else if (key === 'end') {
-      tabToFocusRef = Object(navigateList["b" /* getPrevListItem */])(tabRefs, focusedTabIndex.current, tabRefs.length - 1);
+    var U =  function(e) {
+        D(r, e);
+        var t = q(r);
+        // @docs-props-type TabPropsBase
+                function r(e) {
+            var n;
+            P(this, r);
+            n = t.call(this, e);
+            N(V(n), "popoverId", void 0);
+            N(V(n), "ariaId", void 0);
+            N(V(n), "handleMount", (function(e) {
+                n.setState({
+                    anchor: e
+                });
+                j(n.props.elementRef, e);
+            }));
+            N(V(n), "handleTooltipOpen", (function() {
+                n.setState({
+                    open: true
+                });
+            }));
+            N(V(n), "handleTooltipClose", (function() {
+                n.setState({
+                    open: false
+                });
+            }));
+            N(V(n), "handleClick", (function(e) {
+                var t = n.props, r = t.active, i = t.tabId, o = t.tabKey, a = t.to;
+                var l = n.context.onClick;
+ // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
+                // while preventing the "to" prop from incorrectly triggering <Clickable>'s providedOnClick on the active tab
+                                if (!r) {
+                    l === null || l === void 0 ? void 0 : l(e, {
+                        tabId: i,
+                        tabKey: o
+                    });
+                }
+                if (a == null || a != null && r) {
+                    e.preventDefault();
+                }
+            }));
+            N(V(n), "handleFocus", (function(e) {
+                n.handleTooltipOpen();
+                var t = n.props, r = t.tabId, i = t.tabKey;
+                var o = n.context.onFocus;
+                o === null || o === void 0 ? void 0 : o(e, {
+                    tabId: r,
+                    tabKey: i
+                });
+            }));
+            n.popoverId = (0, v.createDOMID)("popover");
+            n.ariaId = (0, v.createDOMID)("aria-id");
+            n.state = {
+                open: false,
+                anchor: null
+            };
+            return n;
+        }
+        R(r, [ {
+            key: "focus",
+            value: function e() {
+                var t;
+                (t = this.state.anchor) === null || t === void 0 ? void 0 : t.focus();
+            }
+        }, {
+            key: "render",
+            value: function e() {
+                var t = this.props, r = t.active, i = t.ariaControls, o = t.count, a = t.disabled, l = t.icon, c = t.label, s = t.tabId, p = t.maxCount, u = t.to, f = t.tooltip, v = _(t, [ "active", "ariaControls", "count", "disabled", "icon", "label", "tabId", "maxCount", "to", "tooltip" ]);
+                var h = this.state, y = h.anchor, S = h.open;
+                var C = this.context, j = C.appearance, T = C.disabled, E = C.iconSize, P = C.layout, $ = C.width;
+                var R = v.style;
+                var D = T || a || false;
+                var M = E || "inline";
+                var q = P || "horizontal";
+                var K = $ ? {
+                    width: $
+                } : R;
+                
+                // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
+                // eslint-disable-next-line
+                // @ts-ignore-next-line
+                return n().createElement(m, z({
+                    "aria-controls": i,
+                    "aria-selected": r,
+                    "aria-labelledby": this.ariaId,
+                    "data-test": "tab",
+                    "data-test-tab-id": s,
+                    "data-test-popover-id": f ? this.popoverId : undefined,
+                    $layout: q,
+                    $icon: l && M !== "inline" ? true : undefined,
+                    disabled: D,
+                    elementRef: this.handleMount,
+                    style: K
+                }, v, {
+                    onClick: this.handleClick,
+                    onFocus: this.handleFocus,
+                    onMouseEnter: this.handleTooltipOpen,
+                    onBlur: this.handleTooltipClose,
+                    onMouseLeave: this.handleTooltipClose,
+                    role: "tab",
+                    tabIndex: r ? undefined : -1,
+                    to: u
+                }),  n().createElement(k, {
+                    "data-test": "label",
+                    $withUnderline: j === "navigation"
+                }, l &&  n().createElement(x, {
+                    $iconSize: M
+                }, l), c, (o === 0 || o) &&  n().createElement(n().Fragment, null,  n().createElement(b(), null, " "),  n().createElement(w, {
+                    "data-test": "count",
+                    disabled: D
+                }, p ? I(o, p) : o))),  n().createElement(g, {
+                    $layout: q,
+                    $withUnderline: j === "navigation"
+                }), !a && f &&  n().createElement(d(), {
+                    role: "tooltip",
+                    anchor: y,
+                    animationConfig: {
+                        tension: 400
+                    },
+                    appearance: "inverted",
+                    closeReasons: [ "offScreen", "escapeKey" ],
+                    defaultPlacement: q === "vertical" ? "right" : "above",
+                    id: this.popoverId,
+                    open: !!y && S,
+                    align: "center"
+                },  n().createElement(O, null, f)), f &&  n().createElement(b(), {
+                    "aria-hidden": "true",
+                    id: this.ariaId
+                }, f));
+            }
+        } ]);
+        return r;
+    }(r.Component);
+    N(U, "propTypes", W);
+    N(U, "defaultProps", F);
+    N(U, "contextType", C);
+    /* harmony default export */    const L = U;
+    // CONCATENATED MODULE: ./src/utils/navigateList.ts
+    // A utility for keyboard navigation of lists
+    function Y(e, t, r) {
+        for (var n = 0; n < e.length; n += 1) {
+            var i;
+            var o = (n + r) % e.length;
+            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[o];
+            }
+        }
+        return e[t];
     }
-
-    if (tabToFocusRef != null) {
-      var _tabToFocusRef$curren;
-
-      (_tabToFocusRef$curren = tabToFocusRef.current) === null || _tabToFocusRef$curren === void 0 ? void 0 : _tabToFocusRef$curren.focus();
-      e.preventDefault();
+    function G(e, t, r) {
+        for (var n = e.length; n > 0; n -= 1) {
+            var i;
+            var o = (n + r) % e.length;
+            if (((i = e[o].current) === null || i === void 0 ? void 0 : i.props.disabled) !== true) {
+                return e[o];
+            }
+        }
+        return e[t];
     }
-  };
-
-  return /*#__PURE__*/external_react_default.a.createElement(Styled, TabBar_extends({
-    "data-tab-layout": layout,
-    "data-test-active-tab-id": activeTabId,
-    "data-test": "tab-bar",
-    role: "tablist",
-    ref: elementRef,
-    $layout: layout,
-    $withUnderline: appearance === 'navigation',
-    onKeyDown: handleOnKeyDown
-  }, otherProps), /*#__PURE__*/external_react_default.a.createElement(TabBar_TabBarContext.Provider, {
-    value: {
-      appearance: appearance,
-      disabled: disabled,
-      iconSize: iconSize,
-      layout: layout,
-      onClick: tabOnClick,
-      onFocus: tabOnFocus,
-      width: widthContext
+    // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
+    function H() {
+        H = Object.assign || function(e) {
+            for (var t = 1; t < arguments.length; t++) {
+                var r = arguments[t];
+                for (var n in r) {
+                    if (Object.prototype.hasOwnProperty.call(r, n)) {
+                        e[n] = r[n];
+                    }
+                }
+            }
+            return e;
+        };
+        return H.apply(this, arguments);
     }
-  }, clonedChildren));
-}
-
-TabBar.propTypes = TabBar_propTypes;
-TabBar.Tab = TabBar_Tab;
-/* harmony default export */ var TabBar_TabBar = (TabBar);
-
-// CONCATENATED MODULE: ./src/TabBar/index.ts
-
-
-
-/***/ }),
-
-/***/ 2:
-/***/ (function(module, exports) {
-
-module.exports = require("react");
-
-/***/ }),
-
-/***/ 21:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/react-ui/Popover");
-
-/***/ }),
-
-/***/ 3:
-/***/ (function(module, exports) {
-
-module.exports = require("styled-components");
-
-/***/ }),
-
-/***/ 60:
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getNextListItem; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return getPrevListItem; });
-// A utility for keyboard navigation of lists
-function getNextListItem(refs, currentIndex, nextIndex) {
-  for (var i = 0; i < refs.length; i += 1) {
-    var _refs$pointer$current;
-
-    var pointer = (i + nextIndex) % refs.length;
-
-    if (((_refs$pointer$current = refs[pointer].current) === null || _refs$pointer$current === void 0 ? void 0 : _refs$pointer$current.props.disabled) !== true) {
-      return refs[pointer];
+    function J(e, t) {
+        if (e == null) return {};
+        var r = Q(e, t);
+        var n, i;
+        if (Object.getOwnPropertySymbols) {
+            var o = Object.getOwnPropertySymbols(e);
+            for (i = 0; i < o.length; i++) {
+                n = o[i];
+                if (t.indexOf(n) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
+                r[n] = e[n];
+            }
+        }
+        return r;
     }
-  }
-
-  return refs[currentIndex];
-}
-
-function getPrevListItem(refs, currentIndex, prevIndex) {
-  for (var i = refs.length; i > 0; i -= 1) {
-    var _refs$pointer$current2;
-
-    var pointer = (i + prevIndex) % refs.length;
-
-    if (((_refs$pointer$current2 = refs[pointer].current) === null || _refs$pointer$current2 === void 0 ? void 0 : _refs$pointer$current2.props.disabled) !== true) {
-      return refs[pointer];
+    function Q(e, t) {
+        if (e == null) return {};
+        var r = {};
+        var n = Object.keys(e);
+        var i, o;
+        for (o = 0; o < n.length; o++) {
+            i = n[o];
+            if (t.indexOf(i) >= 0) continue;
+            r[i] = e[i];
+        }
+        return r;
+    }
+    var X = 50;
+    /** @public */    var Z = {
+        autoActivate: o().bool,
+        activeTabId: o().string,
+        appearance: o().oneOf([ "navigation", "context" ]),
+        children: o().node,
+        /** @private */
+        disabled: o().bool,
+        elementRef: o().oneOfType([ o().func, o().object ]),
+        iconSize: o().oneOf([ "inline", "small", "large" ]),
+        layout: o().oneOf([ "horizontal", "vertical" ]),
+        onChange: o().func,
+        tabWidth: o().number
+    };
+    function ee(e) {
+        var t = e.activeTabId, i = e.autoActivate, o = e.appearance, l = o === void 0 ? "navigation" : o, c = e.children, s = e.disabled, u = s === void 0 ? false : s, d = e.elementRef, f = e.iconSize, b = f === void 0 ? "inline" : f, v = e.layout, h = v === void 0 ? "horizontal" : v, y = e.onChange, m = e.tabWidth, g = J(e, [ "activeTabId", "autoActivate", "appearance", "children", "disabled", "elementRef", "iconSize", "layout", "onChange", "tabWidth" ]);
+        // @docs-props-type TabBarPropsBase
+                var x = (0, r.useRef)(0);
+        var k = [];
+        var w = (0, r.useMemo)((function() {
+            return h === "vertical" ? "down" : "right";
+        }), [ h ]);
+        var O = (0, r.useMemo)((function() {
+            return h === "vertical" ? "up" : "left";
+        }), [ h ]);
+        var S = function e(t, r) {
+            var n = r.tabKey;
+            if (n != null) {
+                x.current = n;
+            }
+            if (i) {
+                y === null || y === void 0 ? void 0 : y(t, {
+                    selectedTabId: r.tabId
+                });
+            }
+        };
+        var I = function e(t, r) {
+            y === null || y === void 0 ? void 0 : y(t, {
+                selectedTabId: r.tabId
+            });
+        };
+        var j = 0;
+        var T = r.Children.toArray(c).filter(r.isValidElement).map((function(e) {
+            // <TabBar> allows non-<Tab> children, pass them through without any modification
+            if (typeof e.type === "string" || e.type.name !== L.name) {
+                return e;
+            }
+            var i =  n().createRef();
+            k.push(i);
+            var o = {
+                active: t === e.props.tabId,
+                tabKey: j,
+                ref: i
+            };
+            j += 1;
+            
+            return (0, r.cloneElement)(e, o);
+        }));
+        var z = m && m > X ? m : null;
+        var _ = function e(t) {
+            var r = (0, a.keycode)(t.nativeEvent);
+            var n;
+            if (r === w) {
+                n = Y(k, x.current, x.current + 1);
+            } else if (r === O) {
+                n = G(k, x.current, x.current - 1);
+            } else if (r === "home") {
+                n = Y(k, x.current, 0);
+            } else if (r === "end") {
+                n = G(k, x.current, k.length - 1);
+            }
+            if (n != null) {
+                var i;
+                (i = n.current) === null || i === void 0 ? void 0 : i.focus();
+                t.preventDefault();
+            }
+        };
+        
+        return n().createElement(p, H({
+            "data-tab-layout": h,
+            "data-test-active-tab-id": t,
+            "data-test": "tab-bar",
+            role: "tablist",
+            ref: d,
+            $layout: h,
+            $withUnderline: l === "navigation",
+            onKeyDown: _
+        }, g),  n().createElement(C.Provider, {
+            value: {
+                appearance: l,
+                disabled: u,
+                iconSize: b,
+                layout: h,
+                onClick: I,
+                onFocus: S,
+                width: z
+            }
+        }, T));
     }
-  }
-
-  return refs[currentIndex];
-}
-
-
-
-/***/ }),
-
-/***/ 7:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/keyboard");
-
-/***/ }),
-
-/***/ 8:
-/***/ (function(module, exports) {
-
-module.exports = require("@splunk/ui-utils/id");
-
-/***/ })
-
-/******/ });
+    ee.propTypes = Z;
+    ee.Tab = L;
+    /* harmony default export */    const te = ee;
+    // CONCATENATED MODULE: ./src/TabBar/index.ts
+    module.exports = t;
+    /******/})();