@splunk/react-ui 4.21.0 → 4.21.1

package/TabBar.js

@@ -1,698 +1,744 @@
-/******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	// The require scope
-/******/ 	var __webpack_require__ = {};
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/compat get default export */
-/******/ 	(() => {
-/******/ 		// getDefaultExport function for compatibility with non-harmony modules
-/******/ 		__webpack_require__.n = (module) => {
-/******/ 			var getter = module && module.__esModule ?
-/******/ 				() => (module['default']) :
-/******/ 				() => (module);
-/******/ 			__webpack_require__.d(getter, { a: getter });
-/******/ 			return getter;
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-var __webpack_exports__ = {};
-// ESM COMPAT FLAG
-__webpack_require__.r(__webpack_exports__);
-
-// EXPORTS
-__webpack_require__.d(__webpack_exports__, {
-  Tab: () => (/* reexport */ TabBar_Tab),
-  "default": () => (/* reexport */ TabBar_TabBar)
-});
-
-;// CONCATENATED MODULE: external "react"
-const external_react_namespaceObject = require("react");
-var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_namespaceObject);
-;// CONCATENATED MODULE: external "prop-types"
-const external_prop_types_namespaceObject = require("prop-types");
-var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/ui-utils/keyboard"
-const keyboard_namespaceObject = require("@splunk/ui-utils/keyboard");
-;// CONCATENATED MODULE: external "styled-components"
-const external_styled_components_namespaceObject = require("styled-components");
-var external_styled_components_default = /*#__PURE__*/__webpack_require__.n(external_styled_components_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/themes"
-const themes_namespaceObject = require("@splunk/themes");
-;// CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-
-
-var Styled = external_styled_components_default().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_namespaceObject.mixins.reset('flex'), (0,themes_namespaceObject.pick)({
-  enterprise: themes_namespaceObject.variables.borderLightColor,
-  prisma: themes_namespaceObject.variables.neutral200
-}), (0,themes_namespaceObject.pickVariant)('$layout', {
-  horizontal: {
-    prisma: (0,themes_namespaceObject.pickVariant)('$withUnderline', {
-      /* context appearance is only supported for Prisma */
-      "true": (0,external_styled_components_namespaceObject.css)(["&::before{border-bottom-width:1px;}"])
-    }),
-    enterprise: (0,external_styled_components_namespaceObject.css)(["&::before{border-bottom-width:1px;}"])
-  },
-  vertical: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["display:inline-block;&::before{border-right-width:1px;}"]),
-    prisma: (0,external_styled_components_namespaceObject.css)(["display:inline-block;&::before{border-right-width:1px;}"])
-  }
-}));
-
-;// CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-const Popover_namespaceObject = require("@splunk/react-ui/Popover");
-var Popover_default = /*#__PURE__*/__webpack_require__.n(Popover_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-const ScreenReaderContent_namespaceObject = require("@splunk/react-ui/ScreenReaderContent");
-var ScreenReaderContent_default = /*#__PURE__*/__webpack_require__.n(ScreenReaderContent_namespaceObject);
-;// CONCATENATED MODULE: external "@splunk/ui-utils/id"
-const id_namespaceObject = require("@splunk/ui-utils/id");
-;// CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-const Clickable_namespaceObject = require("@splunk/react-ui/Clickable");
-var Clickable_default = /*#__PURE__*/__webpack_require__.n(Clickable_namespaceObject);
-;// CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-
-
-
-var StyledClickable = external_styled_components_default()((Clickable_default())).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,themes_namespaceObject.pick)({
-  enterprise: '24px',
-  prisma: '20px'
-}), themes_namespaceObject.variables.contentColorDefault, (0,themes_namespaceObject.pickVariant)('$layout', {
-  horizontal: (0,external_styled_components_namespaceObject.css)(["padding:", ";margin-bottom:1px;"], (0,themes_namespaceObject.pick)({
-    enterprise: '3px 20px',
-    prisma: {
-      comfortable: '0 20px',
-      compact: '0 16px'
-    }
-  })),
-  vertical: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["width:100%;text-align:left;right:1px;padding:10px 20px;", ""], function (_ref) {
-      var $icon = _ref.$icon;
-      return $icon && (0,external_styled_components_namespaceObject.css)(["text-align:center;"]);
-    }),
-    prisma: (0,external_styled_components_namespaceObject.css)(["width:100%;right:1px;padding:", ";"], (0,themes_namespaceObject.pick)({
-      comfortable: '0 20px',
-      compact: '0 16px'
-    }))
-  }
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["font-weight:", ";"], themes_namespaceObject.variables.fontWeightBold),
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";font-weight:", ";"], themes_namespaceObject.variables.contentColorActive, themes_namespaceObject.variables.fontWeightBold)
-}), (0,themes_namespaceObject.pick)({
-  enterprise: 'normal',
-  prisma: themes_namespaceObject.variables.fontWeightSemiBold
-}), (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["&::after{display:block;content:attr(title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}"], themes_namespaceObject.variables.fontWeightBold)
-}), (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.contentColorActive)
-}), themes_namespaceObject.variables.focusShadowInset, (0,themes_namespaceObject.pick)({
-  prisma: (0,external_styled_components_namespaceObject.css)(["color:", ";"], themes_namespaceObject.variables.contentColorActive)
-}));
-var StyledUnderline = external_styled_components_default().div.withConfig({
-  displayName: "TabStyles__StyledUnderline",
-  componentId: "sc-1ry8mzj-1"
-})(["position:absolute;", " ", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]) > &&{", ";}"], (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.borderLightColor)
-}), (0,themes_namespaceObject.pickVariant)('$layout', {
-  horizontal: (0,external_styled_components_namespaceObject.css)(["height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;"], (0,themes_namespaceObject.pick)({
-    enterprise: (0,external_styled_components_namespaceObject.css)(["calc(100% - 20px * 2)"]),
-    prisma: {
-      comfortable: (0,external_styled_components_namespaceObject.css)(["calc(100% - 20px * 2)"]),
-      compact: (0,external_styled_components_namespaceObject.css)(["calc(100% - 16px * 2)"])
-    }
-  }), (0,themes_namespaceObject.pick)({
-    enterprise: (0,external_styled_components_namespaceObject.css)(["bottom:-1px;"])
-  })),
-  vertical: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["width:0;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;"]),
-    prisma: (0,external_styled_components_namespaceObject.css)(["width:1px;height:calc(100% - 10px * 2);top:10px;right:-1px;transition:width 0.2s;box-sizing:border-box;"])
-  }
-}), (0,themes_namespaceObject.pick)({
-  enterprise: themes_namespaceObject.variables.accentColor,
-  prisma: themes_namespaceObject.variables.contentColorActive
-}), (0,themes_namespaceObject.pickVariant)('$layout', {
-  horizontal: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["height:3px;"]),
-    prisma: (0,themes_namespaceObject.pickVariant)('$withUnderline', {
-      // context appearance is only supported for Prisma
-      "true": (0,external_styled_components_namespaceObject.css)(["height:1px;"])
-    })
-  },
-  vertical: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["width:3px;"]),
-    prisma: (0,external_styled_components_namespaceObject.css)(["width:1px;"])
-  }
-}), StyledClickable, (0,themes_namespaceObject.pickVariant)('$layout', {
-  horizontal: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["height:3px;"])
-  },
-  vertical: {
-    enterprise: (0,external_styled_components_namespaceObject.css)(["width:3px;"])
-  }
-}));
-var StyledIcon = external_styled_components_default().span.withConfig({
-  displayName: "TabStyles__StyledIcon",
-  componentId: "sc-1ry8mzj-2"
-})(["", ";"], (0,themes_namespaceObject.pickVariant)('$iconSize', {
-  inline: (0,external_styled_components_namespaceObject.css)(["", " text-align:left;padding-right:", ";> svg{transform:translateY(-1px);}"], (0,themes_namespaceObject.pick)({
-    prisma: (0,external_styled_components_namespaceObject.css)(["display:inline-block;width:16px;height:16px;"])
-  }), (0,themes_namespaceObject.pick)({
-    enterprise: '0.4em',
-    prisma: '8px'
-  })),
-  small: (0,external_styled_components_namespaceObject.css)(["font-size:24px;height:24px;text-align:center;display:block;padding:4px 0;"]),
-  large: (0,external_styled_components_namespaceObject.css)(["font-size:48px;height:48px;text-align:center;display:block;padding:8px 0 0;"])
-}));
-var StyledLabel = external_styled_components_default().div.withConfig({
-  displayName: "TabStyles__StyledLabel",
-  componentId: "sc-1ry8mzj-3"
-})(["overflow:hidden;text-overflow:ellipsis;min-width:10px;margin:", ";"], (0,themes_namespaceObject.pick)({
-  enterprise: '0',
-  prisma: {
-    comfortable: '16px 0',
-    compact: '10px 0'
-  }
-}));
-var StyledCount = external_styled_components_default().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_namespaceObject.mixins.reset('inlne-block'), themes_namespaceObject.variables.contentColorDefault, (0,themes_namespaceObject.pick)({
-  enterprise: 'inherit',
-  prisma: '10px'
-}), (0,themes_namespaceObject.pick)({
-  enterprise: '0',
-  prisma: '8px'
-}), (0,themes_namespaceObject.pick)({
-  enterprise: (0,external_styled_components_namespaceObject.css)(["&::before{content:'(';}&::after{content:')';}"]),
-  prisma: (0,external_styled_components_namespaceObject.css)(["background:", ";"], themes_namespaceObject.variables.neutral100)
-}), themes_namespaceObject.variables.interactiveColorBackgroundDisabled, themes_namespaceObject.variables.contentColorDisabled);
-var StyledTooltipContent = external_styled_components_default().div.withConfig({
-  displayName: "TabStyles__StyledTooltipContent",
-  componentId: "sc-1ry8mzj-5"
-})(["padding:8px;font-size:", ";"], themes_namespaceObject.variables.fontSizeSmall);
-
-;// CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-
-var TabBarContext = /*#__PURE__*/(0,external_react_namespaceObject.createContext)({});
-TabBarContext.displayName = 'TabBar';
-/* harmony default export */ const 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;
-};
-;// CONCATENATED MODULE: ./src/utils/updateReactRef.ts
-/**
+/******/ (() => {
+    // 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
+                        }
+        }
     }
-  }
-}
-
-
-;// 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()).bool,
-  ariaControls: (external_prop_types_default()).string,
-  count: (external_prop_types_default()).number,
-  disabled: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  icon: (external_prop_types_default()).node,
-  id: (external_prop_types_default()).string,
-  label: external_prop_types_default().oneOfType([(external_prop_types_default()).string, (external_prop_types_default()).element]),
-
-  /** @private Maximum count number in tab label */
-  maxCount: (external_prop_types_default()).number,
-  tabId: (external_prop_types_default()).string,
-
-  /** @private. The internal key of the tab */
-  tabKey: (external_prop_types_default()).number,
-  to: (external_prop_types_default()).string,
-  tooltip: (external_prop_types_default()).node
-};
-var defaultProps = {
-  active: false
-};
-
-var 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
-      });
-
-      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
+    // 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);
+    }
+    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);
+    }
+    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 = (0,id_namespaceObject.createDOMID)('popover');
-    _this.ariaId = (0,id_namespaceObject.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().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().createElement(StyledLabel, {
-          "data-test": "label",
-          $withUnderline: appearance === 'navigation'
-        }, icon && /*#__PURE__*/external_react_default().createElement(StyledIcon, {
-          $iconSize: iconSizeValue
-        }, icon), label, (count === 0 || count) && /*#__PURE__*/external_react_default().createElement((external_react_default()).Fragment, null, /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), null, "\xA0"), /*#__PURE__*/external_react_default().createElement(StyledCount, {
-          "data-test": "count",
-          disabled: disabledValue
-        }, maxCount ? maxCountValue(count, maxCount) : count))), /*#__PURE__*/external_react_default().createElement(StyledUnderline, {
-          $layout: layoutValue,
-          $withUnderline: appearance === 'navigation'
-        }), !disabled && tooltip && /*#__PURE__*/external_react_default().createElement((Popover_default()), {
-          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().createElement(StyledTooltipContent, null, tooltip)), tooltip && /*#__PURE__*/external_react_default().createElement((ScreenReaderContent_default()), {
-          "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_namespaceObject.Component);
-
-_defineProperty(Tab, "propTypes", propTypes);
-
-_defineProperty(Tab, "defaultProps", defaultProps);
-
-_defineProperty(Tab, "contextType", TabBar_TabBarContext);
-
-/* harmony default export */ const TabBar_Tab = (Tab);
-;// CONCATENATED MODULE: ./src/utils/navigateList.ts
-// 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 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);
+        };
     }
-  }
-
-  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 K(e, t) {
+        if (t && (T(t) === "object" || typeof t === "function")) {
+            return t;
+        }
+        return V(e);
     }
-  }
-
-  return refs[currentIndex];
-}
-
-
-;// 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()).bool,
-  activeTabId: (external_prop_types_default()).string,
-  appearance: external_prop_types_default().oneOf(['navigation', 'context']),
-  children: (external_prop_types_default()).node,
-
-  /** @private */
-  disabled: (external_prop_types_default()).bool,
-  elementRef: external_prop_types_default().oneOfType([(external_prop_types_default()).func, (external_prop_types_default()).object]),
-  iconSize: external_prop_types_default().oneOf(['inline', 'small', 'large']),
-  layout: external_prop_types_default().oneOf(['horizontal', 'vertical']),
-  onChange: (external_prop_types_default()).func,
-  tabWidth: (external_prop_types_default()).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 = (0,external_react_namespaceObject.useRef)(0);
-  var tabRefs = [];
-  var nextTabKey = (0,external_react_namespaceObject.useMemo)(function () {
-    return layout === 'vertical' ? 'down' : 'right';
-  }, [layout]);
-  var previousTabKey = (0,external_react_namespaceObject.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 V(e) {
+        if (e === void 0) {
+            throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+        }
+        return e;
     }
-
-    if (autoActivate) {
-      onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-        selectedTabId: data.tabId
-      });
+    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 tabOnClick = function tabOnClick(e, data) {
-    onChange === null || onChange === void 0 ? void 0 : onChange(e, {
-      selectedTabId: data.tabId
-    });
-  };
-
-  var tabKeyCounter = 0;
-  var clonedChildren = external_react_namespaceObject.Children.toArray(children).filter(external_react_namespaceObject.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 B(e) {
+        B = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+            return t.__proto__ || Object.getPrototypeOf(t);
+        };
+        return B(e);
     }
-
-    var ref = /*#__PURE__*/external_react_default().createRef();
-    tabRefs.push(ref);
-    var childProps = {
-      active: activeTabId === child.props.tabId,
-      tabKey: tabKeyCounter,
-      ref: ref
+    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__*/(0,external_react_namespaceObject.cloneElement)(child, childProps);
-  });
-  var widthContext = tabWidth && tabWidth > minTabWidth ? tabWidth : null;
-
-  var handleOnKeyDown = function handleOnKeyDown(e) {
-    var key = (0,keyboard_namespaceObject.keycode)(e.nativeEvent);
-    var tabToFocusRef;
-
-    if (key === nextTabKey) {
-      tabToFocusRef = getNextListItem(tabRefs, focusedTabIndex.current, focusedTabIndex.current + 1);
-    } else if (key === previousTabKey) {
-      tabToFocusRef = getPrevListItem(tabRefs, focusedTabIndex.current, focusedTabIndex.current - 1);
-    } else if (key === 'home') {
-      tabToFocusRef = getNextListItem(tabRefs, focusedTabIndex.current, 0);
-    } else if (key === 'end') {
-      tabToFocusRef = 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];
+    }
+    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];
     }
-
-    if (tabToFocusRef != null) {
-      var _tabToFocusRef$curren;
-
-      (_tabToFocusRef$curren = tabToFocusRef.current) === null || _tabToFocusRef$curren === void 0 ? void 0 : _tabToFocusRef$curren.focus();
-      e.preventDefault();
+    // 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);
     }
-  };
-
-  return /*#__PURE__*/external_react_default().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().createElement(TabBar_TabBarContext.Provider, {
-    value: {
-      appearance: appearance,
-      disabled: disabled,
-      iconSize: iconSize,
-      layout: layout,
-      onClick: tabOnClick,
-      onFocus: tabOnFocus,
-      width: widthContext
+    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;
+    }
+    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));
     }
-  }, clonedChildren));
-}
-
-TabBar.propTypes = TabBar_propTypes;
-TabBar.Tab = TabBar_Tab;
-/* harmony default export */ const TabBar_TabBar = (TabBar);
-
-;// CONCATENATED MODULE: ./src/TabBar/index.ts
-
-
-module.exports = __webpack_exports__;
-/******/ })()
-;
+    ee.propTypes = Z;
+    ee.Tab = L;
+    /* harmony default export */    const te = ee;
+    // CONCATENATED MODULE: ./src/TabBar/index.ts
+    module.exports = t;
+    /******/})();