@splunk/react-ui 5.0.0 → 5.1.0

package/TabBar.js

@@ -61,7 +61,7 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Tab: () => /* reexport */ ne,
+        Tab: () => /* reexport */ te,
         default: () => /* reexport */ xe
     });
     // CONCATENATED MODULE: external "react"
@@ -73,156 +73,147 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/usePrevious"
     const o = require("@splunk/react-ui/usePrevious");
     var l =  e.n(o);
-    // CONCATENATED MODULE: external "styled-components"
-    const u = require("styled-components");
-    var c =  e.n(u);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const s = require("@splunk/themes");
-    // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
-    var d = 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"), s.variables.neutral300, (0, 
-    s.pickVariant)("$layout", {
-        horizontal: (0, u.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], s.variables.spacingXLarge),
-        vertical: (0, u.css)([ "display:inline-flex;flex-direction:column;row-gap:", ";&::before{border-right-width:1px;}" ], s.variables.spacingXLarge)
-    }));
     // CONCATENATED MODULE: external "lodash/omit"
-    const f = require("lodash/omit");
-    var v =  e.n(f);
+    const u = require("lodash/omit");
+    var c =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/react-icons/DotsThreeVertical"
-    const b = require("@splunk/react-icons/DotsThreeVertical");
-    var p =  e.n(b);
+    const s = require("@splunk/react-icons/DotsThreeVertical");
+    var d =  e.n(s);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
-    const m = require("@splunk/react-ui/Dropdown");
-    var g =  e.n(m);
+    const f = require("@splunk/react-ui/Dropdown");
+    var v =  e.n(f);
     // CONCATENATED MODULE: external "@splunk/react-ui/Popover"
-    const y = require("@splunk/react-ui/Popover");
-    var h =  e.n(y);
+    const b = require("@splunk/react-ui/Popover");
+    var p =  e.n(b);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const S = require("@splunk/react-ui/ScreenReaderContent");
-    var w =  e.n(S);
+    const m = require("@splunk/react-ui/ScreenReaderContent");
+    var g =  e.n(m);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const C = require("@splunk/ui-utils/i18n");
+    const y = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/ui-utils/id"
-    const O = require("@splunk/ui-utils/id");
+    const h = require("@splunk/ui-utils/id");
+    // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
+    var S = function e() {
+        return undefined;
+    };
+    var w =  (0, n.createContext)({
+        isMenuOpen: false,
+        onMenuOpen: S,
+        onMenuClose: S,
+        registerTab: S
+    });
+    w.displayName = "TabBar";
+    /* harmony default export */    const C = w;
+    // CONCATENATED MODULE: external "styled-components"
+    const O = require("styled-components");
+    var x =  e.n(O);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const x = require("@splunk/react-ui/Clickable");
-    var k =  e.n(x);
+    const k = require("@splunk/react-ui/Clickable");
+    var I =  e.n(k);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const P = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/TabBar/TabStyles.ts
-    var I = (0, u.css)([ "color:", ";" ], s.variables.contentColorActive);
-    var P = "2px";
-    var j = (0, s.pickVariant)("$layout", {
-        horizontal: (0, u.css)([ "background:", ";height:", ";" ], s.variables.contentColorAccentWeak, P),
-        vertical: (0, u.css)([ "background:", ";width:", ";" ], s.variables.contentColorAccentWeak, P)
+    var j = (0, O.css)([ "color:", ";" ], P.variables.contentColorActive);
+    var T = "2px";
+    var $ = (0, P.pickVariant)("$layout", {
+        horizontal: (0, O.css)([ "background:", ";height:", ";" ], P.variables.contentColorAccentWeak, T),
+        vertical: (0, O.css)([ "background:", ";width:", ";" ], P.variables.contentColorAccentWeak, T)
     });
-    var T = function e(t) {
+    var E = function e(t) {
         var n = t.$hasIcon, r = t.$hasMenu, a = t.$iconPosition;
         if (a === "above" && n && r) {
-            return (0, u.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space label menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], s.variables.spacingXSmall, s.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'icon icon icon' 'menu-counter-neg-space label menu' 'gutter gutter gutter' 'underline underline underline';grid-template-columns:", " 1fr min-content;grid-template-rows:repeat(2,auto) ", " auto;" ], P.variables.spacingXSmall, P.variables.spacingXSmall);
         }
         if (a === "above" && n) {
-            return (0, u.css)([ "grid-template-areas:'icon' 'label' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], s.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'icon' 'label' 'gutter' 'underline';grid-template-columns:1fr;grid-template-rows:repeat(2,auto) ", " auto;" ], P.variables.spacingXSmall);
         }
         if (a === "left" && n && r) {
-            return (0, u.css)([ "grid-template-areas:'menu-counter-neg-space icon label menu' 'underline underline underline underline';grid-template-columns:", " 16px 1fr min-content;" ], s.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space icon label menu' 'underline underline underline underline';grid-template-columns:", " 16px 1fr min-content;" ], P.variables.spacingXSmall);
         }
         if (a === "left" && n) {
-            return (0, u.css)([ "grid-template-areas:'icon label' 'underline underline';grid-template-columns:16px 1fr;" ]);
+            return (0, O.css)([ "grid-template-areas:'icon label' 'underline underline';grid-template-columns:16px 1fr;" ]);
         }
         if (r) {
-            return (0, u.css)([ "grid-template-areas:'menu-counter-neg-space label menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], s.variables.spacingXSmall);
+            return (0, O.css)([ "grid-template-areas:'menu-counter-neg-space label menu' 'underline underline underline';grid-template-columns:", " minmax(auto,min-content) min-content;" ], P.variables.spacingXSmall);
         }
-        return (0, u.css)([ "grid-template-areas:'label' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
+        return (0, O.css)([ "grid-template-areas:'label' 'underline';grid-template-columns:minmax(auto,min-content);" ]);
     };
-    var $ = function e(t) {
+    var M = function e(t) {
         var n = t.$hasIcon, r = t.$iconPosition;
         if (r === "above" && n) {
-            return (0, u.css)([ "grid-template-areas:'icon gutter underline' 'label gutter underline';grid-template-columns:1fr ", " ", ";" ], s.variables.spacingXSmall, P);
+            return (0, O.css)([ "grid-template-areas:'icon gutter underline' 'label gutter underline';grid-template-columns:1fr ", " ", ";" ], P.variables.spacingXSmall, T);
         }
         if (r === "left" && n) {
-            return (0, u.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:16px 1fr ", " ", ";" ], s.variables.spacingXSmall, P);
+            return (0, O.css)([ "grid-template-areas:'icon label gutter underline';grid-template-columns:16px 1fr ", " ", ";" ], P.variables.spacingXSmall, T);
         }
-        return (0, u.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], s.variables.spacingXSmall, P);
+        return (0, O.css)([ "grid-template-areas:'label gutter underline';grid-template-columns:1fr ", " ", ";" ], P.variables.spacingXSmall, T);
     };
-    var E = c()(k()).withConfig({
+    var A = x()(I()).withConfig({
         displayName: "TabStyles__StyledClickable",
         componentId: "sc-1ry8mzj-0"
-    })([ "color:", ";column-gap:", ";display:grid;justify-content:center;min-height:", ";position:relative;", " ", " &::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[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:", ";}" ], s.variables.contentColorDefault, s.variables.spacingXSmall, s.variables.inputHeight, (function(e) {
+    })([ "color:", ";column-gap:", ";display:grid;justify-content:center;min-height:", ";position:relative;", " ", " &::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[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:", ";}" ], P.variables.contentColorDefault, P.variables.spacingXSmall, P.variables.inputHeight, (function(e) {
         var t = e.$maxTabWidth;
-        return t && (0, u.css)([ "max-width:", "px;" ], t);
+        return t && (0, O.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 M({
                 $hasIcon: t,
                 $iconPosition: r
             });
         }
-        return T({
+        return E({
             $hasIcon: t,
             $hasMenu: n,
             $iconPosition: r
         });
-    }), s.variables.fontWeightBold, (0, s.pickVariant)("$layout", {
-        horizontal: (0, u.css)([ "margin-bottom:1px;" ]),
-        vertical: (0, u.css)([ "align-items:center;right:1px;" ])
-    }), s.variables.contentColorActive, s.variables.fontWeightBold, s.variables.fontWeightSemiBold, I, I, s.variables.focusShadow, s.variables.contentColorActive);
-    var M = c().div.withConfig({
+    }), P.variables.fontWeightBold, (0, P.pickVariant)("$layout", {
+        horizontal: (0, O.css)([ "margin-bottom:1px;" ]),
+        vertical: (0, O.css)([ "align-items:center;right:1px;" ])
+    }), P.variables.contentColorActive, P.variables.fontWeightBold, P.variables.fontWeightSemiBold, j, j, P.variables.focusShadow, P.variables.contentColorActive);
+    var z = x().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, 
-    s.pickVariant)("$layout", {
-        horizontal: (0, u.css)([ "bottom:-1px;height:0;width:100%;transition:height 0.2s;" ]),
-        vertical: (0, u.css)([ "width:1px;height:100%;right:-1px;transition:width 0.2s;" ])
-    }), s.variables.contentColorAccent, (0, s.pickVariant)("$layout", {
-        horizontal: (0, u.css)([ "height:", ";" ], P),
-        vertical: (0, u.css)([ "width:", ";" ], P)
-    }), /* sc-sel */ E, j, j);
-    var A = c().span.withConfig({
+    P.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;" ])
+    }), P.variables.contentColorAccent, (0, P.pickVariant)("$layout", {
+        horizontal: (0, O.css)([ "height:", ";" ], T),
+        vertical: (0, O.css)([ "width:", ";" ], T)
+    }), /* sc-sel */ A, $, $);
+    var D = x().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;}" ], s.variables.borderRadius, (0, 
-    s.pickVariant)("$active", {
-        false: (0, u.css)([ "visibility:hidden;" ])
-    }), s.variables.interactiveColorOverlayHover, s.variables.interactiveColorBorderHover, /* sc-sel */ E, /* sc-sel */ E, /* sc-sel */ E);
-    var z = c().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;}" ], P.variables.borderRadius, (0, 
+    P.pickVariant)("$active", {
+        false: (0, O.css)([ "visibility:hidden;" ])
+    }), P.variables.interactiveColorOverlayHover, P.variables.interactiveColorBorderHover, /* sc-sel */ A, /* sc-sel */ A, /* sc-sel */ A);
+    var _ = x().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"
-    })([ "grid-area:icon;", "" ], (0, s.pickVariant)("$iconPosition", {
-        above: (0, u.css)([ "display:flex;justify-content:center;" ]),
-        left: (0, u.css)([ "> svg{transform:translateY(-1px);}" ])
+    })([ "grid-area:icon;", "" ], (0, P.pickVariant)("$iconPosition", {
+        above: (0, O.css)([ "display:flex;justify-content:center;" ]),
+        left: (0, O.css)([ "> svg{transform:translateY(-1px);}" ])
     }));
-    var D = c().div.withConfig({
+    var R = x().div.withConfig({
         displayName: "TabStyles__StyledLabel",
         componentId: "sc-1ry8mzj-4"
     })([ "grid-area:label;min-width:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", "" ], (function(e) {
         var t = e.$iconPosition;
-        return t === "above" && (0, u.css)([ "text-align:center;" ]);
+        return t === "above" && (0, O.css)([ "text-align:center;" ]);
     }));
-    var _ = c().span.withConfig({
+    var q = x().span.withConfig({
         displayName: "TabStyles__StyledCount",
         componentId: "sc-1ry8mzj-5"
-    })([ "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:", ";}" ], s.variables.neutral100, s.variables.contentColorDefault, s.variables.fontSizeSmall, s.variables.contentColorDisabled);
-    var R = c().div.withConfig({
+    })([ "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:", ";}" ], P.variables.neutral100, P.variables.contentColorDefault, P.variables.fontSizeSmall, P.variables.contentColorDisabled);
+    var W = x().div.withConfig({
         displayName: "TabStyles__StyledTooltipContent",
         componentId: "sc-1ry8mzj-6"
-    })([ "padding:8px;font-size:", ";" ], s.variables.fontSizeSmall);
-    // CONCATENATED MODULE: ./src/TabBar/TabBarContext.tsx
-    var q = function e() {
-        return undefined;
-    };
-    var W =  (0, n.createContext)({
-        isMenuOpen: false,
-        onMenuOpen: q,
-        onMenuClose: q,
-        registerTab: q
-    });
-    W.displayName = "TabBar";
-    /* harmony default export */    const X = W;
+    })([ "padding:8px;font-size:", ";" ], P.variables.fontSizeSmall);
     // CONCATENATED MODULE: ./src/utils/getCountValue.ts
     // A utility for max count
-    var N = function e(t, n) {
+    var X = function e(t, n) {
         if (t > n) {
             return "".concat(n, "+");
         }
@@ -235,7 +226,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function V(e, t) {
+    function N(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -248,8 +239,8 @@
         }
     }
     // CONCATENATED MODULE: ./src/TabBar/Tab.tsx
-    function F() {
-        return F = Object.assign ? Object.assign.bind() : function(e) {
+    function V() {
+        return V = Object.assign ? Object.assign.bind() : function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -257,29 +248,29 @@
                 }
             }
             return e;
-        }, F.apply(null, arguments);
+        }, V.apply(null, arguments);
     }
-    function B(e, t) {
-        return Y(e) || K(e, t) || U(e, t) || L();
+    function F(e, t) {
+        return K(e) || H(e, t) || L(e, t) || B();
     }
-    function L() {
+    function B() {
         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 U(e, t) {
+    function L(e, t) {
         if (e) {
-            if ("string" == typeof e) return H(e, t);
+            if ("string" == typeof e) return U(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) ? H(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) ? U(e, t) : void 0;
         }
     }
-    function H(e, t) {
+    function U(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 H(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;
@@ -301,12 +292,12 @@
             return l;
         }
     }
-    function Y(e) {
+    function K(e) {
         if (Array.isArray(e)) return e;
     }
-    function G(e, t) {
+    function Y(e, t) {
         if (null == e) return {};
-        var n, r, a = J(e, t);
+        var n, r, a = G(e, t);
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (r = 0; r < i.length; r++) {
@@ -315,7 +306,7 @@
         }
         return a;
     }
-    function J(e, t) {
+    function G(e, t) {
         if (null == e) return {};
         var n = {};
         for (var r in e) {
@@ -326,7 +317,7 @@
         }
         return n;
     }
-    var Q = {
+    var J = {
         ariaControls: i().string,
         count: i().number,
         disabled: i().bool,
@@ -352,49 +343,49 @@
    */
         index: i().number
     };
-    var Z = {
+    var Q = {
         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, c = t.label, s = t.maxCount, d = t.tabId, f = t.to, b = t.tooltip, m = t.menu, y = t.index, S = G(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
+    var Z = [ "offScreen", "escapeKey" ];
+    var ee = 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 = Y(t, [ "ariaControls", "count", "disabled", "elementRef", "icon", "label", "maxCount", "tabId", "to", "tooltip", "menu", "index" ]);
         // @docs-props-type TabPropsBase
-                var x = (0, n.useState)(false), k = B(x, 2), I = k[0], P = k[1];
-        var j = (0, n.useState)(null), T = B(j, 2), $ = T[0], q = T[1];
-        var W = (0, n.useContext)(X), L = W.activeTabId, U = W.disabled, H = W.focusedTabId, K = W.iconPosition, Y = K === void 0 ? "above" : K, J = W.isMenuOpen, Q = W.layout, te = Q === void 0 ? "horizontal" : Q, ne = W.maxTabWidth, re = W.onClick, ae = W.onFocus, ie = W.onMenuOpen, oe = W.onMenuClose, le = W.registerTab;
-        var ue = (0, n.useState)((0, O.createDOMID)("aria-id")), ce = B(ue, 1), se = ce[0];
-        var de = (0, n.useState)((0, O.createDOMID)("menu-description")), fe = B(de, 1), ve = fe[0];
-        var be = (0, n.useState)((0, O.createDOMID)("popover")), pe = B(be, 1), me = pe[0];
+                var k = (0, n.useState)(false), I = F(k, 2), P = I[0], j = I[1];
+        var T = (0, n.useState)(null), $ = F(T, 2), E = $[0], M = $[1];
+        var B = (0, n.useContext)(C), L = B.activeTabId, U = B.disabled, H = B.focusedTabId, K = B.iconPosition, G = K === void 0 ? "above" : K, J = B.isMenuOpen, ee = B.layout, te = ee === void 0 ? "horizontal" : ee, ne = B.maxTabWidth, re = B.onClick, ae = B.onFocus, ie = B.onMenuOpen, oe = B.onMenuClose, le = B.registerTab;
+        var ue = (0, n.useState)((0, h.createDOMID)("aria-id")), ce = F(ue, 1), se = ce[0];
+        var de = (0, n.useState)((0, h.createDOMID)("menu-description")), fe = F(de, 1), ve = fe[0];
+        var be = (0, n.useState)((0, h.createDOMID)("popover")), pe = F(be, 1), me = pe[0];
         var ge = (0, n.useMemo)((function() {
-            return d || (0, O.createGUID)();
-        }), [ d ]);
+            return b || (0, h.createGUID)();
+        }), [ b ]);
         var ye = U || o ? "disabled" : false;
-        var he = c ? c.toString() : "";
+        var he = s ? s.toString() : "";
         var Se = i === 0 || i ? "".concat(i === null || i === void 0 ? void 0 : i.toString()) : "";
         var we = L === ge;
         // 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 c && typeof c === "string" ? "".concat(he, "    ").concat(Se) : "";
-        }), [ Se, c, he ]);
+            return s && typeof s === "string" ? "".concat(he, "    ").concat(Se) : "";
+        }), [ Se, s, he ]);
         var Oe = (0, n.useCallback)((function() {
-            $ === null || $ === void 0 ? void 0 : $.focus();
-        }), [ $ ]);
+            E === null || E === void 0 ? void 0 : E.focus();
+        }), [ E ]);
         var xe = (0, n.useCallback)((function(e) {
-            q(e);
-            V(l, e);
+            M(e);
+            N(l, e);
             // Register with index, assert index is defined as it's injected by TabBar
                         le({
                 tabId: ge,
                 element: e,
-                index: y
+                index: O
             });
-        }), [ l, le, ge, y ]);
+        }), [ l, le, ge, O ]);
         var ke = (0, n.useCallback)((function() {
-            P(true);
+            j(true);
         }), []);
         var Ie = (0, n.useCallback)((function() {
-            P(false);
+            j(false);
         }), []);
         var Pe = (0, n.useCallback)((function(e) {
             // preserve the previous behaviour from 2ad8e7eaf47 to avoid firing unnecessary onChange events
@@ -404,10 +395,10 @@
                     tabId: ge
                 });
             }
-            if (f == null || f != null && we) {
+            if (m == null || m != null && we) {
                 e.preventDefault();
             }
-        }), [ we, re, ge, f ]);
+        }), [ we, re, ge, m ]);
         var je = (0, n.useCallback)((function(e) {
             ke();
             ae === null || ae === void 0 ? void 0 : ae(e, {
@@ -425,51 +416,51 @@
             e.stopPropagation();
             ie(ge);
         }), [ ie, ge ]);
-        var Me = H === ge && J && !!m;
-        var Ae =  r().createElement(A, {
+        var Me = H === ge && J && !!w;
+        var Ae =  r().createElement(D, {
             $active: we,
             "data-test": "menu-toggle",
             tabIndex: -1,
             onFocus: Te
-        },  r().createElement(p(), null));
+        },  r().createElement(d(), null));
         var ze = function e(t) {
             
-            return r().createElement(r().Fragment, null, t,  r().createElement(g(), {
+            return r().createElement(r().Fragment, null, t,  r().createElement(v(), {
                 toggle: Ae,
                 align: "center",
                 onRequestOpen: Ee,
                 onRequestClose: oe,
                 open: Me
-            }, m));
+            }, w));
         };
-        var De =  r().createElement(D, {
+        var De =  r().createElement(R, {
             "data-test": "label",
-            $iconPosition: Y
-        }, c, !m && (i === 0 || i) &&  r().createElement(r().Fragment, null,  r().createElement(w(), null, " "),  r().createElement(_, {
+            $iconPosition: G
+        }, s, !w && (i === 0 || i) &&  r().createElement(r().Fragment, null,  r().createElement(g(), null, " "),  r().createElement(q, {
             "data-test": "count",
             disabled: !!ye
-        }, s ? N(i, s) : i)), !!m &&  r().createElement(w(), {
+        }, f ? X(i, f) : i)), !!w &&  r().createElement(g(), {
             "aria-hidden": true,
             id: ve
-        }, (0, C._)("Press Shift + F10 to open the tab’s menu")));
+        }, (0, y._)("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(E, F({
+        return r().createElement(A, V({
             $hasIcon: !!u,
-            $hasMenu: !!m,
-            $iconPosition: Y,
+            $hasMenu: !!w,
+            $iconPosition: G,
             $layout: te,
             $maxTabWidth: ne,
             "aria-controls": a,
             "aria-selected": we,
             "aria-labelledby": se,
-            "aria-describedby": m ? ve : undefined,
+            "aria-describedby": w ? ve : undefined,
             "aria-haspopup": Me,
             "data-test": "tab",
             "data-test-tab-id": ge,
-            "data-test-popover-id": b ? me : undefined,
+            "data-test-popover-id": S ? me : undefined,
             "data-title": Ce,
             "data-test-disabled": ye || undefined,
             disabled: ye,
@@ -481,29 +472,38 @@
             onMouseLeave: Ie,
             role: "tab",
             tabIndex: we ? undefined : -1,
-            to: f,
+            to: m,
             id: ge
-        }, v()(S, "elementRef")), u &&  r().createElement(z, {
-            $iconPosition: Y
-        }, u), m && te === "horizontal" ? ze(De) : De,  r().createElement(M, {
+        }, c()(x, "elementRef")), u &&  r().createElement(_, {
+            $iconPosition: G
+        }, u), w && te === "horizontal" ? ze(De) : De,  r().createElement(z, {
             $layout: te
-        }), !o && b &&  r().createElement(h(), {
+        }), !o && S &&  r().createElement(p(), {
             role: "tooltip",
-            anchor: $,
-            animationConfig: Z,
-            closeReasons: ee,
+            anchor: E,
+            animationConfig: Q,
+            closeReasons: Z,
             defaultPlacement: te === "vertical" ? "right" : "above",
             id: me,
-            open: !!$ && I,
+            open: !!E && P,
             align: "center"
-        },  r().createElement(R, null, b)), b &&  r().createElement(w(), {
+        },  r().createElement(W, null, S)), S &&  r().createElement(g(), {
             "aria-hidden": "true",
             id: se
-        }, b));
+        }, S));
     };
-    te.propTypes = Q;
-    te.as = "Tab";
-    /* harmony default export */    const ne = te;
+    ee.propTypes = J;
+    ee.as = "Tab";
+    /* harmony default export */    const te = ee;
+    // CONCATENATED MODULE: ./src/TabBar/TabBarStyles.ts
+    var ne = x().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 ", ";}", ";" ], P.mixins.reset("flex"), P.variables.neutral300, (0, 
+    P.pickVariant)("$layout", {
+        horizontal: (0, O.css)([ "column-gap:", ";&::before{border-bottom-width:1px;}" ], P.variables.spacingXLarge),
+        vertical: (0, O.css)([ "display:inline-flex;flex-direction:column;row-gap:", ";&::before{border-right-width:1px;}" ], P.variables.spacingXLarge)
+    }));
     // CONCATENATED MODULE: ./src/utils/navigateList.ts
     // A utility for keyboard navigation of lists
     function re(e, t) {
@@ -686,14 +686,14 @@
     };
     function Oe(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, f = e.iconPosition, v = f === void 0 ? "left" : f, b = e.layout, p = b === void 0 ? "horizontal" : b, m = e.maxTabWidth, g = e.onChange, y = ue(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, b = v === void 0 ? "horizontal" : v, p = e.maxTabWidth, m = e.onChange, g = ue(e, [ "activeTabId", "autoActivate", "children", "disabled", "elementRef", "iconPosition", "layout", "maxTabWidth", "onChange" ]);
         // @docs-props-type TabBarPropsBase
         // eslint-disable-next-line prefer-rest-params
-                var h = (t = arguments[0]) === null || t === void 0 ? void 0 : t.iconPosition;
+                var y = (t = arguments[0]) === null || t === void 0 ? void 0 : t.iconPosition;
         (0, n.useEffect)((function() {
             if (false) {}
-        }), [ h ]);
-        var S = (0, n.useState)(false), w = pe(S, 2), C = w[0], O = w[1];
+        }), [ y ]);
+        var h = (0, n.useState)(false), S = pe(h, 2), w = S[0], O = S[1];
         var x = (0, n.useState)(a), k = pe(x, 2), I = k[0], P = k[1];
  // need to keep track of the focused tab id in a ref to avoid re-generating registerTab
         // because every time `registerTab` changes, it calls `ref` on all tabs
@@ -707,8 +707,8 @@
         if (!E.current) {
             E.current = new Map;
         }
-        var M = p === "vertical" ? "ArrowDown" : "ArrowRight";
-        var A = p === "vertical" ? "ArrowUp" : "ArrowLeft";
+        var M = b === "vertical" ? "ArrowDown" : "ArrowRight";
+        var A = b === "vertical" ? "ArrowUp" : "ArrowLeft";
         // focus the tab belonging to the given tabId
                 var z = (0, n.useCallback)((function(e) {
             var t;
@@ -748,7 +748,7 @@
         }), []);
         var _ = (0, n.useCallback)((function(e) {
             $.current = e;
-            V(s, e);
+            N(s, e);
         }), [ s, $ ]);
         // callback to handle focus event sent from a Tab
                 var R = (0, n.useCallback)((function(e, t) {
@@ -759,18 +759,18 @@
             }
             z(n);
             if (i && a !== n) {
-                g === null || g === void 0 ? void 0 : g(e, {
+                m === null || m === void 0 ? void 0 : m(e, {
                     selectedTabId: n
                 });
             }
-        }), [ a, i, I, z, g ]);
+        }), [ a, i, I, z, m ]);
         var q = (0, n.useCallback)((function(e, t) {
             var n = t.tabId;
             z(n);
-            g === null || g === void 0 ? void 0 : g(e, {
+            m === null || m === void 0 ? void 0 : m(e, {
                 selectedTabId: n
             });
-        }), [ z, g ]);
+        }), [ z, m ]);
         var W = (0, n.useCallback)((function(e) {
             // if command key on Mac was pressed ignore
             if (e.nativeEvent.metaKey) {
@@ -794,7 +794,7 @@
                 o = ae(r, a, 0);
             } else if (i === "End") {
                 o = ie(r, a, r.length - 1);
-            } else if (p === "horizontal" && e.shiftKey && i === "F10") {
+            } else if (b === "horizontal" && e.shiftKey && i === "F10") {
                 O((function(e) {
                     if (e) {
                         var t = r[a];
@@ -802,42 +802,42 @@
                     }
                     return !e;
                 }));
-            } else if (p === "horizontal" && i === "ArrowDown") {
+            } else if (b === "horizontal" && i === "ArrowDown") {
                 O(true);
             }
             if (o) {
                 z(o.id);
                 e.preventDefault();
             }
-        }), [ I, z, p, M, A ]);
-        var N = (0, n.useCallback)((function(e) {
+        }), [ I, z, b, M, A ]);
+        var X = (0, n.useCallback)((function(e) {
             z(e);
  // in case they clicked on a menu of tab they were not even focused on yet
                         O(true);
         }), [ z ]);
-        var F = (0, n.useCallback)((function(e) {
+        var V = (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 F = (0, n.useMemo)((function() {
             return {
                 disabled: c,
                 focusedTabId: I,
-                iconPosition: v,
-                layout: p,
-                maxTabWidth: m,
+                iconPosition: f,
+                layout: b,
+                maxTabWidth: p,
                 onClick: q,
                 onFocus: R,
-                onMenuOpen: N,
-                onMenuClose: F,
-                isMenuOpen: C,
+                onMenuOpen: X,
+                onMenuClose: V,
+                isMenuOpen: w,
                 registerTab: D,
                 activeTabId: a
             };
-        }), [ c, I, v, p, q, R, m, N, F, C, D, a ]);
-        var L = (0, n.useMemo)((function() {
+        }), [ c, I, f, b, q, R, p, X, V, w, D, a ]);
+        var B = (0, n.useMemo)((function() {
             return n.Children.toArray(o).filter(n.isValidElement).map((function(e, t) {
                 if (e.type.as === "Tab") {
                     
@@ -848,10 +848,10 @@
                 return e;
             }));
         }), [ o ]);
-        var U = l()(L);
+        var L = l()(B);
         (0, n.useEffect)((function() {
             // if the focused tab is removed, focus the next tab
-            if (U !== L) {
+            if (L !== B) {
                 var e;
                 var t = Ce(E.current);
                 if (t.find((function(e) {
@@ -866,22 +866,22 @@
                     z(r.id);
                 }
             }
-        }), [ L, z, U ]);
+        }), [ B, z, L ]);
         
-        return r().createElement(d, le({
-            "data-tab-layout": p,
+        return r().createElement(ne, le({
+            "data-tab-layout": b,
             "data-test-active-tab-id": a,
             "data-test": "tab-bar",
             role: "tablist",
             ref: _,
-            $layout: p,
+            $layout: b,
             onKeyDown: W
-        }, y),  r().createElement(X.Provider, {
-            value: B
-        }, L));
+        }, g),  r().createElement(C.Provider, {
+            value: F
+        }, B));
     }
     Oe.propTypes = we;
-    Oe.Tab = ne;
+    Oe.Tab = te;
     /* harmony default export */    const xe = Oe;
     // CONCATENATED MODULE: ./src/TabBar/index.ts
     module.exports = t;