@splunk/react-ui 5.4.0 → 5.5.0

package/TabBar.js

@@ -61,8 +61,8 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ ne,
-        default: () => /* reexport */ je
+        Tab: () => /* reexport */ ae,
+        default: () => /* reexport */ Ee
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
@@ -83,146 +83,143 @@
     const f = require("@splunk/react-ui/Dropdown");
     var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const b = require("@splunk/react-ui/Popover");
-    var p =  e.n(b);
+    const p = require("@splunk/react-ui/Popover");
+    var b =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
     const m = require("@splunk/react-ui/ScreenReaderContent");
     var g =  e.n(m);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const y = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const h = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const y = require("@splunk/ui-utils/i18n");
+    const S = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const h = require("@splunk/ui-utils/id");
+    const w = require("@splunk/ui-utils/id");
     // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var S = function e() {
+    var O = function e() {
         return undefined;
     };
-    var w =  (0, n.createContext)({
+    var C =  (0, n.createContext)({
         isMenuOpen: false,
-        onMenuOpen: S,
-        onMenuClose: S,
-        registerTab: S
+        onMenuOpen: O,
+        onMenuClose: O,
+        registerTab: O
     });
-    w.displayName = "TabBar";
-    /* harmony default export */    const C = w;
+    C.displayName = "TabBar";
+    /* harmony default export */    const x = C;
     // CONCATENATED MODULE: external "styled-components"
-    const O = require("styled-components");
-    var x =  e.n(O);
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const I = require("@splunk/react-ui/Clickable");
+    const I = require("styled-components");
     var k =  e.n(I);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const T = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Badge"
+    const T = require("@splunk/react-ui/Badge");
+    var j =  e.n(T);
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const P = require("@splunk/react-ui/Clickable");
+    var E =  e.n(P);
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var j = (0, O.css)([ "color:", ";" ], T.variables.contentColorActive);
-    var P = "2px";
-    var E = (0, T.pickVariant)("$layout", {
-        horizontal: (0, O.css)([ "background:", ";height:", ";" ], T.variables.contentColorAccentWeak, P),
-        vertical: (0, O.css)([ "background:", ";width:", ";" ], T.variables.contentColorAccentWeak, P)
+    var M = (0, I.css)([ "color:", ";" ], y.variables.contentColorActive);
+    var $ = "2px";
+    var A = (0, y.pickVariant)("$layout", {
+        horizontal: (0, I.css)([ "background:", ";height:", ";" ], y.variables.contentColorAccentWeak, $),
+        vertical: (0, I.css)([ "background:", ";width:", ";" ], y.variables.contentColorAccentWeak, $)
     });
-    var M = function e(t) {
+    var _ = function e(t) {
         var n = t.$hasIcon, r = t.$hasMenu, a = t.$iconPosition;
         if (a === "above" && n && r) {
-            return (0, O.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space content menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall, T.variables.spacingXSmall);
+            return (0, I.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space content menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], y.variables.spacingXSmall, y.variables.spacingXSmall);
         }
         if (a === "above" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon' 'content' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], T.variables.spacingXSmall);
+            return (0, I.css)([ "grid-template-areas:'icon' 'content' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], y.variables.spacingXSmall);
         }
         if (a === "left" && n && r) {
-            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space icon content menu' 'underline underline underline underline';grid-template-columns:", " min-content 1fr min-content;" ], T.variables.spacingXSmall);
+            return (0, I.css)([ "grid-template-areas:'menu-counter-neg-space icon content menu' 'underline underline underline underline';grid-template-columns:", " min-content 1fr min-content;" ], y.variables.spacingXSmall);
         }
         if (a === "left" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon content' 'underline underline';grid-template-columns:min-content 1fr;" ]);
+            return (0, I.css)([ "grid-template-areas:'icon content' 'underline underline';grid-template-columns:min-content 1fr;" ]);
         }
         if (r) {
-            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space content menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], T.variables.spacingXSmall);
+            return (0, I.css)([ "grid-template-areas:'menu-counter-neg-space content menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], y.variables.spacingXSmall);
         }
-        return (0, O.css)([ "grid-template-areas:'content' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
+        return (0, I.css)([ "grid-template-areas:'content' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
     };
-    var $ = function e(t) {
+    var z = function e(t) {
         var n = t.$hasIcon, r = t.$iconPosition;
         if (r === "above" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon gutter underline' 'content gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+            return (0, I.css)([ "grid-template-areas:'icon gutter underline' 'content gutter underline';grid-template-columns:1fr ", " ", ";" ], y.variables.spacingXSmall, $);
         }
         if (r === "left" && n) {
-            return (0, O.css)([ "grid-template-areas:'icon content gutter underline';grid-template-columns:min-content 1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+            return (0, I.css)([ "grid-template-areas:'icon content gutter underline';grid-template-columns:min-content 1fr ", " ", ";" ], y.variables.spacingXSmall, $);
         }
-        return (0, O.css)([ "grid-template-areas:'content gutter underline';grid-template-columns:1fr ", " ", ";" ], T.variables.spacingXSmall, P);
+        return (0, I.css)([ "grid-template-areas:'content gutter underline';grid-template-columns:1fr ", " ", ";" ], y.variables.spacingXSmall, $);
     };
-    var A = x()(k()).withConfig({
+    var D = k()(E()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
-    })([ "color:", ";column-gap:", ";display:grid;justify-content:center;align-items:baseline;min-height:", ";position:relative;", " ", " ", ";&[aria-selected='true']{cursor:default;color:", ";font-weight:", ";}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";color:", ";}" ], T.variables.contentColorDefault, T.variables.spacingXSmall, T.variables.inputHeight, (function(e) {
+    })([ "color:", ";column-gap:", ";display:grid;justify-content:center;align-items:baseline;min-height:", ";position:relative;", " ", " ", ";&[aria-selected='true']{cursor:default;color:", ";font-weight:", ";}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";color:", ";}" ], y.variables.contentColorDefault, y.variables.spacingXSmall, y.variables.inputHeight, (function(e) {
         var t = e.$maxTabWidth;
-        return t && (0, O.css)([ "max-width:", "px;" ], t);
+        return t && (0, I.css)([ "max-width:", "px;" ], t);
     }), (function(e) {
         var t = e.$hasIcon, n = e.$hasMenu, r = e.$iconPosition, a = e.$layout;
         if (a === "vertical") {
-            return $({
+            return z({
                 $hasIcon: t,
                 $iconPosition: r
             });
         }
-        return M({
+        return _({
             $hasIcon: t,
             $hasMenu: n,
             $iconPosition: r
         });
-    }), (0, T.pickVariant)("$layout", {
-        horizontal: (0, O.css)([ "margin-bottom:1px;" ]),
-        vertical: (0, O.css)([ "align-items:center;right:1px;" ])
-    }), T.variables.contentColorActive, T.variables.fontWeightBold, T.variables.fontWeightSemiBold, j, j, T.variables.focusShadow, T.variables.contentColorActive);
-    var z = x().div.withConfig({
+    }), (0, y.pickVariant)("$layout", {
+        horizontal: (0, I.css)([ "margin-bottom:1px;" ]),
+        vertical: (0, I.css)([ "align-items:center;right:1px;" ])
+    }), y.variables.contentColorActive, y.variables.fontWeightBold, y.variables.fontWeightSemiBold, M, M, y.variables.focusShadow, y.variables.contentColorActive);
+    var N = k().div.withConfig({
         displayName: "TabStyles__StyledUnderline",
         componentId: "sc-1ry8mzj-1"
     })([ "grid-area:underline;position:absolute;", ";[aria-selected='true'] > &&{background-color:", ";", ";}", ":hover:not([disabled]):not([aria-selected='true']) > &&{", ";}[aria-selected='false'][aria-haspopup='true'] > &&{", "}" ], (0, 
-    T.pickVariant)("$layout", {
-        horizontal: (0, O.css)([ "bottom:-1px;height:0;width:100%;transition:height 0.2s;" ]),
-        vertical: (0, O.css)([ "width:1px;height:100%;right:-1px;transition:width 0.2s;" ])
-    }), T.variables.contentColorAccent, (0, T.pickVariant)("$layout", {
-        horizontal: (0, O.css)([ "height:", ";" ], P),
-        vertical: (0, O.css)([ "width:", ";" ], P)
-    }), /* sc-sel */ A, E, E);
-    var _ = x().span.withConfig({
+    y.pickVariant)("$layout", {
+        horizontal: (0, I.css)([ "bottom:-1px;height:0;width:100%;transition:height 0.2s;" ]),
+        vertical: (0, I.css)([ "width:1px;height:100%;right:-1px;transition:width 0.2s;" ])
+    }), y.variables.contentColorAccent, (0, y.pickVariant)("$layout", {
+        horizontal: (0, I.css)([ "height:", ";" ], $),
+        vertical: (0, I.css)([ "width:", ";" ], $)
+    }), /* sc-sel */ D, A, A);
+    var R = k().span.withConfig({
         displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
-    })([ "display:inline-block;grid-area:menu;margin-left:4px;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{background-color:", ";border-color:", ";}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], T.variables.borderRadius, (0, 
-    T.pickVariant)("$active", {
-        false: (0, O.css)([ "visibility:hidden;" ])
-    }), T.variables.interactiveColorOverlayHover, T.variables.interactiveColorBorderHover, /* sc-sel */ A, /* sc-sel */ A, /* sc-sel */ A);
-    var D = x().span.withConfig({
+    })([ "display:inline-block;grid-area:menu;margin-left:4px;> svg{transform:translateY(-1px);}border-radius:", ";cursor:pointer;", " &:hover{background-color:", ";border-color:", ";}", "[aria-haspopup='true'] &,", ":hover &,", ":focus &{visibility:visible;}" ], y.variables.borderRadius, (0, 
+    y.pickVariant)("$active", {
+        false: (0, I.css)([ "visibility:hidden;" ])
+    }), y.variables.interactiveColorOverlayHover, y.variables.interactiveColorBorderHover, /* sc-sel */ D, /* sc-sel */ D, /* sc-sel */ D);
+    var q = k().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "grid-area:icon;", "" ], (0, T.pickVariant)("$iconPosition", {
-        above: (0, O.css)([ "display:flex;justify-content:center;" ]),
-        left: (0, O.css)([ "> svg{transform:translateY(-1px);}" ])
+    })([ "grid-area:icon;", "" ], (0, y.pickVariant)("$iconPosition", {
+        above: (0, I.css)([ "display:flex;justify-content:center;" ]),
+        left: (0, I.css)([ "> svg{transform:translateY(-1px);}" ])
     }));
-    var N = x().div.withConfig({
+    var V = k().div.withConfig({
         displayName: "TabStyles__StyledContent",
         componentId: "sc-1ry8mzj-4"
     })([ "display:inline-flex;align-items:baseline;grid-area:content;min-width:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", "" ], (function(e) {
         var t = e.$iconPosition;
-        return t === "above" && (0, O.css)([ "justify-content:center;text-align:center;" ]);
+        return t === "above" && (0, I.css)([ "justify-content:center;text-align:center;" ]);
     }));
-    var R = x().div.withConfig({
+    var B = k().div.withConfig({
         displayName: "TabStyles__StyledLabel",
         componentId: "sc-1ry8mzj-5"
-    })([ "&::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;white-space:nowrap;}" ], T.variables.fontWeightBold);
-    var q = x().span.withConfig({
-        displayName: "TabStyles__StyledCount",
+    })([ "&::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;white-space:nowrap;}" ], y.variables.fontWeightBold);
+    var W = k()(j()).withConfig({
+        displayName: "TabStyles__StyledBadge",
         componentId: "sc-1ry8mzj-6"
-    })([ "background:", ";border-radius:18px;color:", ";display:inline-block;font-size:", ";line-height:10px;margin-inline-start:0.3em;padding:0.4em 0.6em;&[disabled]{color:", ";}" ], T.variables.neutral100, T.variables.contentColorDefault, T.variables.fontSizeSmall, T.variables.contentColorDisabled);
-    var V = x().div.withConfig({
+    })([ "line-height:10px;margin-inline-start:0.3em;padding:0.4em 0.6em;" ]);
+    var X = k().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-7"
-    })([ "padding:8px;font-size:", ";" ], T.variables.fontSizeSmall);
-    // CONCATENATED MODULE: ./src/utils/getCountValue.ts
-    // A utility for max count
-    var W = function e(t, n) {
-        if (t > n) {
-            return "".concat(n, "+");
-        }
-        return t;
-    };
+    })([ "padding:8px;font-size:", ";" ], y.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -230,7 +227,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function X(e, t) {
+    function L(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -243,8 +240,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function B() {
-        return B = Object.assign ? Object.assign.bind() : function(e) {
+    function F() {
+        return F = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -252,29 +249,29 @@
                 }
             }
             return e;
-        }, B.apply(null, arguments);
+        }, F.apply(null, arguments);
     }
-    function F(e, t) {
-        return Y(e) || K(e, t) || H(e, t) || L();
+    function H(e, t) {
+        return J(e) || G(e, t) || K(e, t) || U();
     }
-    function L() {
+    function U() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function H(e, t) {
+    function K(e, t) {
         if (e) {
-            if ("string" == typeof e) return U(e, t);
+            if ("string" == typeof e) return Y(e, t);
             var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? U(e, t) : void 0;
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? Y(e, t) : void 0;
         }
     }
-    function U(e, t) {
+    function Y(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var n = 0, r = Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function K(e, t) {
+    function G(e, t) {
         var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != n) {
             var r, a, i, o, l = [], u = !0, c = !1;
@@ -296,12 +293,12 @@
             return l;
         }
     }
-    function Y(e) {
+    function J(e) {
         if (Array.isArray(e)) return e;
     }
-    function G(e, t) {
+    function Q(e, t) {
         if (null == e) return {};
-        var n, r, a = J(e, t);
+        var n, r, a = Z(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -310,7 +307,7 @@
         }
         return a;
     }
-    function J(e, t) {
+    function Z(e, t) {
         if (null == e) return {};
         var n = {};
         for (var r in e) {
@@ -321,7 +318,7 @@
         }
         return n;
     }
-    var Q = {
+    var ee = {
         ariaControls: i().string,
         count: i().number,
         disabled: i().bool,
@@ -347,170 +344,174 @@
    */
         index: i().number
     };
-    var Z = {
+    var te = {
         tension: 400
     };
-    var ee = [ "offScreen", "escapeKey" ];
-    var te = function e(t) {
-        var a = t.ariaControls, i = t.count, o = t.disabled, l = t.elementRef, u = t.icon, s = t.label, f = t.maxCount, b = t.tabId, m = t.to, S = t.tooltip, w = t.menu, O = t.index, x = G(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
+    var ne = [ "offScreen", "escapeKey" ];
+    var re = function e(t) {
+        var a = t.ariaControls, i = t.count, o = t.disabled, l = t.elementRef, u = t.icon, s = t.label, f = t.maxCount, p = t.tabId, m = t.to, O = t.tooltip, C = t.menu, I = t.index, k = Q(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
         // @docs-props-type TabPropsBase
-                var I = (0, n.useState)(false), k = F(I, 2), T = k[0], j = k[1];
-        var P = (0, n.useState)(null), E = F(P, 2), M = E[0], $ = E[1];
-        var L = (0, n.useContext)(C), H = L.activeTabId, U = L.disabled, K = L.focusedTabId, Y = L.iconPosition, J = Y === void 0 ? "above" : Y, Q = L.isMenuOpen, te = L.layout, ne = te === void 0 ? "horizontal" : te, re = L.maxTabWidth, ae = L.onClick, ie = L.onFocus, oe = L.onMenuOpen, le = L.onMenuClose, ue = L.registerTab;
-        var ce = (0, n.useState)((0, h.createDOMID)("aria-id")), se = F(ce, 1), de = se[0];
-        var fe = (0, n.useState)((0, h.createDOMID)("menu-description")), ve = F(fe, 1), be = ve[0];
-        var pe = (0, n.useState)((0, h.createDOMID)("popover")), me = F(pe, 1), ge = me[0];
-        var ye = (0, n.useMemo)((function() {
-            return b || (0, h.createGUID)();
-        }), [ b ]);
-        var he = U || o ? "disabled" : false;
-        var Se = s ? s.toString() : "";
-        var we = H === ye;
+                var T = (0, n.useState)(false), j = H(T, 2), P = j[0], E = j[1];
+        var M = (0, n.useState)(null), $ = H(M, 2), A = $[0], _ = $[1];
+        var z = (0, n.useContext)(x), U = z.activeTabId, K = z.disabled, Y = z.focusedTabId, G = z.iconPosition, J = G === void 0 ? "above" : G, Z = z.isMenuOpen, ee = z.layout, re = ee === void 0 ? "horizontal" : ee, ae = z.maxTabWidth, ie = z.onClick, oe = z.onFocus, le = z.onMenuOpen, ue = z.onMenuClose, ce = z.registerTab;
+        var se = (0, n.useState)((0, w.createDOMID)("aria-id")), de = H(se, 1), fe = de[0];
+        var ve = (0, n.useState)((0, w.createDOMID)("menu-description")), pe = H(ve, 1), be = pe[0];
+        var me = (0, n.useState)((0, w.createDOMID)("popover")), ge = H(me, 1), ye = ge[0];
+        var he = (0, n.useMemo)((function() {
+            return p || (0, w.createGUID)();
+        }), [ p ]);
+        var Se = K || o ? "disabled" : false;
+        var we = s ? s.toString() : "";
+        var Oe = U === he;
         // title is used for CSS styling in TabStyles. labelValue and countValue needs to be included in the title.
                 var Ce = (0, n.useMemo)((function() {
             // SUI-6877: if the label isn't a string, don't attempt to do this since it'll just be wrong
-            return s && typeof s === "string" ? Se : "";
-        }), [ s, Se ]);
-        var Oe = (0, n.useCallback)((function() {
-            M === null || M === void 0 ? void 0 : M.focus();
-        }), [ M ]);
-        var xe = (0, n.useCallback)((function(e) {
-            $(e);
-            X(l, e);
+            return s && typeof s === "string" ? we : "";
+        }), [ s, we ]);
+        var xe = (0, n.useCallback)((function() {
+            A === null || A === void 0 ? void 0 : A.focus();
+        }), [ A ]);
+        var Ie = (0, n.useCallback)((function(e) {
+            _(e);
+            L(l, e);
             // Register with index, assert index is defined as it's injected by TabBar
-                        ue({
-                tabId: ye,
+                        ce({
+                tabId: he,
                 element: e,
-                index: O
+                index: I
             });
-        }), [ l, ue, ye, O ]);
-        var Ie = (0, n.useCallback)((function() {
-            j(true);
-        }), []);
+        }), [ l, ce, he, I ]);
         var ke = (0, n.useCallback)((function() {
-            j(false);
+            E(true);
+        }), []);
+        var Te = (0, n.useCallback)((function() {
+            E(false);
         }), []);
-        var Te = (0, n.useCallback)((function(e) {
+        var je = (0, n.useCallback)((function(e) {
             // 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 (!we) {
-                ae === null || ae === void 0 ? void 0 : ae(e, {
-                    tabId: ye
+            if (!Oe) {
+                ie === null || ie === void 0 ? void 0 : ie(e, {
+                    tabId: he
                 });
             }
-            if (m == null || m != null && we) {
+            if (m == null || m != null && Oe) {
                 e.preventDefault();
             }
-        }), [ we, ae, ye, m ]);
-        var je = (0, n.useCallback)((function(e) {
-            Ie();
-            ie === null || ie === void 0 ? void 0 : ie(e, {
-                tabId: ye
+        }), [ Oe, ie, he, m ]);
+        var Pe = (0, n.useCallback)((function(e) {
+            ke();
+            oe === null || oe === void 0 ? void 0 : oe(e, {
+                tabId: he
             });
-        }), [ Ie, ie, ye ]);
-        var Pe = (0, n.useCallback)((function() {
-            Oe();
-        }), [ Oe ]);
+        }), [ ke, oe, he ]);
         var Ee = (0, n.useCallback)((function() {
-            ke();
-        }), [ ke ]);
-        var Me = (0, n.useCallback)((function(e) {
+            xe();
+        }), [ xe ]);
+        var Me = (0, n.useCallback)((function() {
+            Te();
+        }), [ Te ]);
+        var $e = (0, n.useCallback)((function(e) {
             // prevent clicking on the menu icon from changing the active tab
             e.stopPropagation();
-            oe(ye);
-        }), [ oe, ye ]);
-        var $e = K === ye && Q && !!w;
-        var Ae =  r().createElement(_, {
-            $active: we,
+            le(he);
+        }), [ le, he ]);
+        var Ae = Y === he && Z && !!C;
+        var _e =  r().createElement(R, {
+            $active: Oe,
             "data-test": "menu-toggle",
             tabIndex: -1,
-            onFocus: Pe
+            onFocus: Ee
         },  r().createElement(d(), null));
         var ze = function e(t) {
             
             return r().createElement(r().Fragment, null, t,  r().createElement(v(), {
-                toggle: Ae,
+                toggle: _e,
                 align: "center",
-                onRequestOpen: Me,
-                onRequestClose: le,
-                open: $e
-            }, w));
+                onRequestOpen: $e,
+                onRequestClose: ue,
+                open: Ae
+            }, C));
         };
-        var _e = x["data-title"];
-        var De =  r().createElement(N, {
+        var De = k["data-title"];
+        var Ne =  r().createElement(V, {
             "data-test": "label",
             $iconPosition: J
-        },  r().createElement(R, {
-            "data-title": _e || Ce
-        }, s), !w && (i === 0 || i) &&  r().createElement(r().Fragment, null,  r().createElement(g(), null, " "),  r().createElement(q, {
+        },  r().createElement(B, {
+            "data-title": De || Ce
+        }, s), !C && (i === 0 || i) &&  r().createElement(W, {
             "data-test": "count",
-            disabled: !!he
-        }, f ? W(i, f) : i)), !!w &&  r().createElement(g(), {
+            foregroundColor: Se ? y.variables.contentColorDisabled : undefined,
+            label: f ? (0, h.truncateNumber)({
+                number: i,
+                max: f
+            }) : "".concat(i)
+        }), !!C &&  r().createElement(g(), {
             "aria-hidden": true,
             id: be
-        }, (0, y._)("Press Shift + F10 to open the tab’s menu")));
+        }, (0, S._)("Press Shift + F10 to open the tab’s menu")));
         
         // TODO: Fix the ts error: https://splunk.atlassian.net/browse/SUI-5569
         // eslint-disable-next-line
         // @ts-ignore-next-line
-        return r().createElement(A, B({
+        return r().createElement(D, F({
             $hasIcon: !!u,
-            $hasMenu: !!w,
+            $hasMenu: !!C,
             $iconPosition: J,
-            $layout: ne,
-            $maxTabWidth: re,
+            $layout: re,
+            $maxTabWidth: ae,
             "aria-controls": a,
-            "aria-selected": we,
-            "aria-labelledby": de,
-            "aria-describedby": w ? be : undefined,
-            "aria-haspopup": $e,
+            "aria-selected": Oe,
+            "aria-labelledby": fe,
+            "aria-describedby": C ? be : undefined,
+            "aria-haspopup": Ae,
             "data-test": "tab",
-            "data-test-tab-id": ye,
-            "data-test-popover-id": S ? ge : undefined,
-            "data-test-disabled": he || undefined,
-            disabled: he,
-            elementRef: xe,
-            onClick: Te,
-            onFocus: je,
-            onMouseEnter: Ie,
-            onBlur: Ee,
-            onMouseLeave: ke,
+            "data-test-tab-id": he,
+            "data-test-popover-id": O ? ye : undefined,
+            "data-test-disabled": Se || undefined,
+            disabled: Se,
+            elementRef: Ie,
+            onClick: je,
+            onFocus: Pe,
+            onMouseEnter: ke,
+            onBlur: Me,
+            onMouseLeave: Te,
             role: "tab",
-            tabIndex: we ? undefined : -1,
+            tabIndex: Oe ? undefined : -1,
             to: m
-        }, c()(x, "elementRef")), u &&  r().createElement(D, {
+        }, c()(k, "elementRef")), u &&  r().createElement(q, {
             $iconPosition: J
-        }, u), w && ne === "horizontal" ? ze(De) : De,  r().createElement(z, {
-            $layout: ne
-        }), !o && S &&  r().createElement(p(), {
+        }, u), C && re === "horizontal" ? ze(Ne) : Ne,  r().createElement(N, {
+            $layout: re
+        }), !o && O &&  r().createElement(b(), {
             role: "tooltip",
-            anchor: M,
-            animationConfig: Z,
-            closeReasons: ee,
-            defaultPlacement: ne === "vertical" ? "right" : "above",
-            id: ge,
-            open: !!M && T,
+            anchor: A,
+            animationConfig: te,
+            closeReasons: ne,
+            defaultPlacement: re === "vertical" ? "right" : "above",
+            id: ye,
+            open: !!A && P,
             align: "center"
-        },  r().createElement(V, null, S)), S &&  r().createElement(g(), {
+        },  r().createElement(X, null, O)), O &&  r().createElement(g(), {
             "aria-hidden": "true",
-            id: de
-        }, S));
+            id: fe
+        }, O));
     };
-    te.propTypes = Q;
-    te.as = "Tab";
-    /* harmony default export */    const ne = te;
+    re.propTypes = ee;
+    re.as = "Tab";
+    /* harmony default export */    const ae = re;
     // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var re = x().div.withConfig({
+    var ie = k().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 ", ";}", ";" ], T.mixins.reset("flex"), T.variables.neutral300, (0, 
-    T.pickVariant)("$layout", {
-        horizontal: (0, O.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], T.variables.spacingXLarge),
-        vertical: (0, O.css)([ "display:inline-flex;flex-direction:column;row-gap:", ";&::before{border-right-width:1px;}" ], T.variables.spacingXLarge)
+    })([ "", " position:relative;&::before{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;border:0 solid ", ";}", ";" ], y.mixins.reset("flex"), y.variables.neutral300, (0, 
+    y.pickVariant)("$layout", {
+        horizontal: (0, I.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], y.variables.spacingXLarge),
+        vertical: (0, I.css)([ "display:inline-flex;flex-direction:column;row-gap:", ";&::before{border-right-width:1px;}" ], y.variables.spacingXLarge)
     }));
     // CONCATENATED MODULE: ./src/TabBar/tabBarUtils.tsx
     // A utility for keyboard navigation for TabBar
-    function ae(e, t, n) {
+    function oe(e, t, n) {
         for (var r = 0; r < e.length; r += 1) {
             var a = (r + n) % e.length;
             var i = e[a].element;
@@ -520,7 +521,7 @@
         }
         return e[t];
     }
-    function ie(e, t, n) {
+    function le(e, t, n) {
         for (var r = e.length; r > 0; r -= 1) {
             var a = (r + n) % e.length;
             var i = e[a].element;
@@ -531,36 +532,36 @@
         return e[t];
     }
     // CONCATENATED MODULE: ./src/utils/useDeprecate.tsx
-    var oe = "is deprecated and will be removed in the next major version.";
-    var le = function e(t) {
+    var ue = "is deprecated and will be removed in the next major version.";
+    var ce = function e(t) {
         var n = t.additionalMessage, r = n === void 0 ? "" : n, a = t.componentName;
         useEffect((function() {
             if (false) {}
         }), [ r, a ]);
     };
-    var ue = function e(t) {
+    var se = function e(t) {
         var r = t.additionalMessage, a = r === void 0 ? "" : r, i = t.componentName, o = t.propName, l = t.propValue;
         (0, n.useEffect)((function() {
             if (false) {}
         }), [ a, i, o, l ]);
     };
-    var ce = function e(t) {
+    var de = function e(t) {
         var n = t.additionalMessage, r = n === void 0 ? "" : n, a = t.componentName, i = t.deprecatedPropValue, o = t.propName, l = t.propValue;
         useEffect((function() {
             if (false) {}
         }), [ r, a, o, l, i ]);
     };
     // CONCATENATED MODULE: ./src/TabBar/TabBar.tsx
-    function se(e) {
+    function fe(e) {
         "@babel/helpers - typeof";
-        return se = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
+        return fe = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(e) {
             return typeof e;
         } : function(e) {
             return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
-        }, se(e);
+        }, fe(e);
     }
-    function de() {
-        return de = Object.assign ? Object.assign.bind() : function(e) {
+    function ve() {
+        return ve = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -568,11 +569,11 @@
                 }
             }
             return e;
-        }, de.apply(null, arguments);
+        }, ve.apply(null, arguments);
     }
-    function fe(e, t) {
+    function pe(e, t) {
         if (null == e) return {};
-        var n, r, a = ve(e, t);
+        var n, r, a = be(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -581,7 +582,7 @@
         }
         return a;
     }
-    function ve(e, t) {
+    function be(e, t) {
         if (null == e) return {};
         var n = {};
         for (var r in e) {
@@ -592,7 +593,7 @@
         }
         return n;
     }
-    function be(e, t) {
+    function me(e, t) {
         var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -602,60 +603,60 @@
         }
         return n;
     }
-    function pe(e) {
+    function ge(e) {
         for (var t = 1; t < arguments.length; t++) {
             var n = null != arguments[t] ? arguments[t] : {};
-            t % 2 ? be(Object(n), !0).forEach((function(t) {
-                me(e, t, n[t]);
-            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : be(Object(n)).forEach((function(t) {
+            t % 2 ? me(Object(n), !0).forEach((function(t) {
+                ye(e, t, n[t]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : me(Object(n)).forEach((function(t) {
                 Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
             }));
         }
         return e;
     }
-    function me(e, t, n) {
-        return (t = ge(t)) in e ? Object.defineProperty(e, t, {
+    function ye(e, t, n) {
+        return (t = he(t)) in e ? Object.defineProperty(e, t, {
             value: n,
             enumerable: !0,
             configurable: !0,
             writable: !0
         }) : e[t] = n, e;
     }
-    function ge(e) {
-        var t = ye(e, "string");
-        return "symbol" == se(t) ? t : t + "";
+    function he(e) {
+        var t = Se(e, "string");
+        return "symbol" == fe(t) ? t : t + "";
     }
-    function ye(e, t) {
-        if ("object" != se(e) || !e) return e;
+    function Se(e, t) {
+        if ("object" != fe(e) || !e) return e;
         var n = e[Symbol.toPrimitive];
         if (void 0 !== n) {
             var r = n.call(e, t || "default");
-            if ("object" != se(r)) return r;
+            if ("object" != fe(r)) return r;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === t ? String : Number)(e);
     }
-    function he(e, t) {
-        return xe(e) || Oe(e, t) || we(e, t) || Se();
+    function we(e, t) {
+        return ke(e) || Ie(e, t) || Ce(e, t) || Oe();
     }
-    function Se() {
+    function Oe() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function we(e, t) {
+    function Ce(e, t) {
         if (e) {
-            if ("string" == typeof e) return Ce(e, t);
+            if ("string" == typeof e) return xe(e, t);
             var n = {}.toString.call(e).slice(8, -1);
-            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? Ce(e, t) : void 0;
+            return "Object" === n && e.constructor && (n = e.constructor.name), "Map" === n || "Set" === n ? Array.from(e) : "Arguments" === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n) ? xe(e, t) : void 0;
         }
     }
-    function Ce(e, t) {
+    function xe(e, t) {
         (null == t || t > e.length) && (t = e.length);
         for (var n = 0, r = Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function Oe(e, t) {
+    function Ie(e, t) {
         var n = null == e ? null : "undefined" != typeof Symbol && e[Symbol.iterator] || e["@@iterator"];
         if (null != n) {
             var r, a, i, o, l = [], u = !0, c = !1;
@@ -677,11 +678,11 @@
             return l;
         }
     }
-    function xe(e) {
+    function ke(e) {
         if (Array.isArray(e)) return e;
     }
     /** @public */
-    /** @public */    var Ie = {
+    /** @public */    var Te = {
         autoActivate: i().bool,
         activeTabId: i().string,
         children: i().node,
@@ -693,31 +694,31 @@
         maxTabWidth: i().number,
         onChange: i().func
     };
-    var ke = function e(t) {
+    var je = function e(t) {
         return Array.from(t.entries()).sort((function(e, t) {
-            var n = he(e, 2), r = n[1].index;
-            var a = he(t, 2), i = a[1].index;
+            var n = we(e, 2), r = n[1].index;
+            var a = we(t, 2), i = a[1].index;
             return r - i;
         })).map((function(e) {
-            var t = he(e, 2), n = t[0], r = t[1];
-            return pe({
+            var t = we(e, 2), n = t[0], r = t[1];
+            return ge({
                 tabId: n
             }, r);
         }));
     };
-    function Te(e) {
+    function Pe(e) {
         var t;
-        var a = e.activeTabId, i = e.autoActivate, o = e.children, u = e.disabled, c = u === void 0 ? false : u, s = e.elementRef, d = e.iconPosition, f = d === void 0 ? "left" : d, v = e.layout, b = v === void 0 ? "horizontal" : v, p = e.maxTabWidth, m = e.onChange, g = fe(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "maxTabWidth", "onChange" ]);
+        var a = e.activeTabId, i = e.autoActivate, o = e.children, u = e.disabled, c = u === void 0 ? false : u, s = e.elementRef, d = e.iconPosition, f = d === void 0 ? "left" : d, v = e.layout, p = v === void 0 ? "horizontal" : v, b = e.maxTabWidth, m = e.onChange, g = pe(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "maxTabWidth", "onChange" ]);
         // @docs-props-type TabBarPropsBase
         // eslint-disable-next-line prefer-rest-params
                 var y = (t = arguments[0]) === null || t === void 0 ? void 0 : t.iconPosition;
-        ue({
+        se({
             componentName: "TabBar and TabLayout",
             propName: "iconPosition",
             propValue: y
         });
-        var h = (0, n.useState)(false), S = he(h, 2), w = S[0], O = S[1];
-        var x = (0, n.useState)(a), I = he(x, 2), k = I[0], T = I[1];
+        var h = (0, n.useState)(false), S = we(h, 2), w = S[0], O = S[1];
+        var C = (0, n.useState)(a), I = we(C, 2), k = I[0], T = I[1];
  // need to keep track of the focused tabId in a ref to avoid re-generating registerTab
         // because every time `registerTab` changes, it calls `ref` on all tabs
                 var j = (0, n.useRef)(a);
@@ -730,17 +731,17 @@
         if (!M.current) {
             M.current = new Map;
         }
-        var $ = b === "vertical" ? "ArrowDown" : "ArrowRight";
-        var A = b === "vertical" ? "ArrowUp" : "ArrowLeft";
+        var $ = p === "vertical" ? "ArrowDown" : "ArrowRight";
+        var A = p === "vertical" ? "ArrowUp" : "ArrowLeft";
         // focus the tab belonging to the given tabId
-                var z = (0, n.useCallback)((function(e) {
+                var _ = (0, n.useCallback)((function(e) {
             var t;
             if (!e) {
                 return;
             }
             var n = (t = M.current) === null || t === void 0 ? void 0 : t.get(e);
             if (!n) {
-                var r = ke(M.current);
+                var r = je(M.current);
                 var a = r[0];
                 if (a) {
                     var i;
@@ -752,7 +753,7 @@
             T(e);
             n.element.focus();
         }), []);
-        var _ = (0, n.useCallback)((function(e) {
+        var z = (0, n.useCallback)((function(e) {
             var t = e.tabId, n = e.element, r = e.index;
             if (n) {
                 var a;
@@ -771,7 +772,7 @@
         }), []);
         var D = (0, n.useCallback)((function(e) {
             E.current = e;
-            X(s, e);
+            L(s, e);
         }), [ s, E ]);
         // callback to handle focus event sent from a Tab
                 var N = (0, n.useCallback)((function(e, t) {
@@ -780,26 +781,26 @@
                 // tab already focused, no need to continue
                 return;
             }
-            z(n);
+            _(n);
             if (i && a !== n) {
                 m === null || m === void 0 ? void 0 : m(e, {
                     selectedTabId: n
                 });
             }
-        }), [ a, i, k, z, m ]);
+        }), [ a, i, k, _, m ]);
         var R = (0, n.useCallback)((function(e, t) {
             var n = t.tabId;
-            z(n);
+            _(n);
             m === null || m === void 0 ? void 0 : m(e, {
                 selectedTabId: n
             });
-        }), [ z, m ]);
+        }), [ _, m ]);
         var q = (0, n.useCallback)((function(e) {
             // if command key on Mac was pressed ignore
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = ke(M.current);
+            var t = je(M.current);
             var n = k ? t.findIndex((function(e) {
                 return e.tabId === k;
             })) : -1;
@@ -810,14 +811,14 @@
             var i = e.key;
             var o;
             if (i === $) {
-                o = ae(t, a, a + 1);
+                o = oe(t, a, a + 1);
             } else if (i === A) {
-                o = ie(t, a, a - 1);
+                o = le(t, a, a - 1);
             } else if (i === "Home") {
-                o = ae(t, a, 0);
+                o = oe(t, a, 0);
             } else if (i === "End") {
-                o = ie(t, a, r.length - 1);
-            } else if (b === "horizontal" && e.shiftKey && i === "F10") {
+                o = le(t, a, r.length - 1);
+            } else if (p === "horizontal" && e.shiftKey && i === "F10") {
                 O((function(e) {
                     if (e) {
                         var t = r[a];
@@ -825,42 +826,42 @@
                     }
                     return !e;
                 }));
-            } else if (b === "horizontal" && i === "ArrowDown") {
+            } else if (p === "horizontal" && i === "ArrowDown") {
                 O(true);
             }
             if (o) {
-                z(o.tabId);
+                _(o.tabId);
                 e.preventDefault();
             }
-        }), [ k, z, b, $, A ]);
+        }), [ k, _, p, $, A ]);
         var V = (0, n.useCallback)((function(e) {
-            z(e);
+            _(e);
  // in case they clicked on a menu of tab they were not even focused on yet
                         O(true);
-        }), [ z ]);
-        var W = (0, n.useCallback)((function(e) {
+        }), [ _ ]);
+        var B = (0, n.useCallback)((function(e) {
             var t = e.event;
             // prevent content clicks/enter key from changing the active tab
                         t === null || t === void 0 ? void 0 : t.stopPropagation();
             O(false);
         }), []);
-        var B = (0, n.useMemo)((function() {
+        var W = (0, n.useMemo)((function() {
             return {
                 disabled: c,
                 focusedTabId: k,
                 iconPosition: f,
-                layout: b,
-                maxTabWidth: p,
+                layout: p,
+                maxTabWidth: b,
                 onClick: R,
                 onFocus: N,
                 onMenuOpen: V,
-                onMenuClose: W,
+                onMenuClose: B,
                 isMenuOpen: w,
-                registerTab: _,
+                registerTab: z,
                 activeTabId: a
             };
-        }), [ c, k, f, b, R, N, p, V, W, w, _, a ]);
-        var F = (0, n.useMemo)((function() {
+        }), [ c, k, f, p, R, N, b, V, B, w, z, a ]);
+        var X = (0, n.useMemo)((function() {
             return n.Children.toArray(o).filter(n.isValidElement).map((function(e, t) {
                 if (e.type.as === "Tab") {
                     
@@ -871,12 +872,12 @@
                 return e;
             }));
         }), [ o ]);
-        var L = l()(F);
+        var F = l()(X);
         (0, n.useEffect)((function() {
             // if the focused tab is removed, focus the next tab
-            if (L !== F) {
+            if (F !== X) {
                 var e;
-                var t = ke(M.current);
+                var t = je(M.current);
                 if (t.find((function(e) {
                     return e.tabId === j.current;
                 }))) {
@@ -886,26 +887,26 @@
                 var n = Math.min((e = P.current) !== null && e !== void 0 ? e : 0, t.length - 1);
                 var r = t[n];
                 if (r) {
-                    z(r.tabId);
+                    _(r.tabId);
                 }
             }
-        }), [ F, z, L ]);
+        }), [ X, _, F ]);
         
-        return r().createElement(re, de({
-            "data-tab-layout": b,
+        return r().createElement(ie, ve({
+            "data-tab-layout": p,
             "data-test-active-tab-id": a,
             "data-test": "tab-bar",
             role: "tablist",
             ref: D,
-            $layout: b,
+            $layout: p,
             onKeyDown: q
-        }, g),  r().createElement(C.Provider, {
-            value: B
-        }, F));
+        }, g),  r().createElement(x.Provider, {
+            value: W
+        }, X));
     }
-    Te.propTypes = Ie;
-    Te.Tab = ne;
-    /* harmony default export */    const je = Te;
+    Pe.propTypes = Te;
+    Pe.Tab = ae;
+    /* harmony default export */    const Ee = Pe;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;
     /******/})();