@splunk/react-ui 4.32.0 → 4.34.0

package/Switch.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ e.n = r => {
-            /******/ var a = r && r.__esModule ? 
+            /******/ var t = r && r.__esModule ? 
             /******/ () => r["default"]
             /******/ : () => r
             /******/;
-            e.d(a, {
-                a
+            e.d(t, {
+                a: t
             });
-            /******/            return a;
+            /******/            return t;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ e.d = (r, a) => {
-            /******/ for (var t in a) {
-                /******/ if (e.o(a, t) && !e.o(r, t)) {
-                    /******/ Object.defineProperty(r, t, {
+        /******/ e.d = (r, t) => {
+            /******/ for (var a in t) {
+                /******/ if (e.o(t, a) && !e.o(r, a)) {
+                    /******/ Object.defineProperty(r, a, {
                         enumerable: true,
-                        get: a[t]
+                        get: t[a]
                     });
                     /******/                }
                 /******/            }
@@ -61,11 +61,11 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        default: () => /* reexport */ X
+        default: () => /* reexport */ Q
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var t =  e.n(a);
+    const t = require("react");
+    var a =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
     var o =  e.n(i);
@@ -87,7 +87,7 @@
         var e = (0, b.useSplunkTheme)(), r = e.family;
         if (r === "enterprise") {
             
-            return t().createElement(u(), {
+            return a().createElement(u(), {
                 inline: false,
                 size: "12px",
                 screenReaderText: null,
@@ -98,7 +98,7 @@
             });
         }
         
-        return t().createElement("svg", {
+        return a().createElement("svg", {
             width: "12",
             height: "12",
             viewBox: "-1 -2 11 10",
@@ -106,7 +106,7 @@
                 display: "block"
             },
             xmlns: "http://www.w3.org/2000/svg"
-        },  t().createElement("path", {
+        },  a().createElement("path", {
             d: "M8.70711 0.292893C9.09763 0.683417 9.09763 1.31658 8.70711 1.70711L4.32132 6.0929C3.73559 6.67862 2.78596 6.67869 2.20015 6.09305L0.292997 4.18646C-0.0975845 3.79599 -0.0976776 3.16282 0.292789 2.77224C0.683256 2.38166 1.31642 2.38157 1.707 2.77203L3.26061 4.32518L7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893Z",
             fill: "currentColor"
         }));
@@ -126,7 +126,7 @@
     var w = h()(m()).withConfig({
         displayName: "SwitchStyles__StyledBox",
         componentId: "sc-844ieu-0"
-    })([ "display:inline;position:relative;color:", ";flex-shrink:0;padding:", ";[data-inline] + &{margin-left:", ";}" ], (0, 
+    })([ "display:inline;position:relative;color:", ";flex-shrink:0;", ";[data-inline] + &{margin-left:", ";}" ], (0, 
     b.pickVariant)("$switchState", {
         error: {
             enterprise: b.variables.errorColor,
@@ -137,25 +137,25 @@
             prisma: b.variables.contentColorDisabled
         }
     }), (0, b.pick)({
-        enterprise: (0, f.css)([ "calc((", " - ", ") / 2) 0" ], b.variables.inputHeight, x),
+        enterprise: (0, f.css)([ "padding:calc((", " - ", ") / 2) 0;" ], b.variables.inputHeight, x),
         prisma: {
-            compact: "6px 0",
-            comfortable: "10px 0"
+            compact: (0, f.css)([ "padding:6px 0;" ]),
+            comfortable: (0, f.css)([ "padding:10px 0;" ])
         }
-    }), (0, b.pick)({
-        enterprise: b.variables.spacingHalf,
-        prisma: b.variables.spacingSmall
-    }));
+    }), b.variables.spacingSmall);
     var S = h()(k()).withConfig({
         displayName: "SwitchStyles__StyledCheckboxClickable",
         componentId: "sc-844ieu-1"
-    })([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0, 
+    })([ "", " position:relative;width:", ";height:", ";line-height:", ";padding:2px;border-radius:2px;cursor:pointer;flex:0 0 auto;border-color:", ";border-style:solid;border-width:", ";color:", ";", " &:focus{box-shadow:", ";}", " ", " &[disabled]{cursor:not-allowed;border-color:", ";", "}" ], b.mixins.reset("inline"), x, x, x, (0, 
     b.pick)({
         enterprise: (0, b.pick)({
-            light: (0, f.css)([ "1px solid ", "" ], b.variables.gray45),
-            dark: (0, f.css)([ "1px solid ", "" ], b.variables.gray80)
+            light: b.variables.gray45,
+            dark: b.variables.gray80
         }),
-        prisma: (0, f.css)([ "2px solid ", "" ], b.variables.contentColorMuted)
+        prisma: b.variables.contentColorMuted
+    }), (0, b.pick)({
+        enterprise: "1px",
+        prisma: "2px"
     }), (0, b.pick)({
         enterprise: (0, b.pick)({
             light: b.variables.gray45,
@@ -191,7 +191,7 @@
                     var r = e.$selected;
                     return r && (0, f.css)([ "border-color:", ";" ], b.variables.errorColor);
                 })),
-                dark: (0, f.css)([ "border-color:", ";}" ], b.variables.errorColor)
+                dark: (0, f.css)([ "border-color:", ";" ], b.variables.errorColor)
             }),
             prisma: (0, f.css)([ "&:not([disabled]){border-color:", ";", "}" ], b.variables.accentColorNegative, (function(e) {
                 var r = e.$selected;
@@ -214,16 +214,13 @@
     var $ = h().div.withConfig({
         displayName: "SwitchStyles__StyledSome",
         componentId: "sc-844ieu-2"
-    })([ "display:block;margin:", ";height:", ";width:", ";background:currentColor;border-radius:1px;" ], (0, 
+    })([ "display:block;margin:", ";", " background:currentColor;border-radius:1px;" ], (0, 
     b.pick)({
         enterprise: "2px",
         prisma: "5px 2px"
     }), (0, b.pick)({
-        enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
-        prisma: "2px"
-    }), (0, b.pick)({
-        enterprise: (0, f.css)([ "calc(", " - 10px);" ], x),
-        prisma: "8px"
+        enterprise: (0, f.css)([ "height:calc(", " - 10px);width:calc(", " - 10px);" ], x, x),
+        prisma: (0, f.css)([ "height:2px;width:8px;" ])
     }));
     var _ = h().div.withConfig({
         displayName: "SwitchStyles__StyledIndicator",
@@ -264,20 +261,20 @@
         }));
     }), (function(e) {
         var r = e.$selected;
-        return r && (0, f.css)([ "left:", ";" ], (0, b.pick)({
-            enterprise: (0, f.css)([ "calc(100% - ", " + 1px)" ], x),
-            prisma: (0, f.css)([ "calc(100% - ", " + 1px)" ], C)
+        return r && (0, f.css)([ "", ";" ], (0, b.pick)({
+            enterprise: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], x),
+            prisma: (0, f.css)([ "left:calc(100% - ", " + 1px);" ], C)
         }));
     }));
     var P = h().div.withConfig({
         displayName: "SwitchStyles__StyledToggleOutline",
         componentId: "sc-844ieu-4"
-    })([ "position:absolute;border:1px solid transparent;", ";border-radius:", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
+    })([ "position:absolute;border:1px solid transparent;", ";", ";top:-1px;right:-1px;bottom:-1px;left:-1px;z-index:1;", " ", "" ], (function(e) {
         var r = e.$delay;
         return r && (0, f.css)([ "transition:border-color ", ";" ], r);
     }), (0, b.pick)({
-        enterprise: (0, f.css)([ "calc(", " * 0.5)" ], x),
-        prisma: "15px"
+        enterprise: (0, f.css)([ "border-radius:calc(", " * 0.5);" ], x),
+        prisma: "border-radius: 15px"
     }), (0, b.pick)({
         prisma: (0, f.css)([ "margin:-6px;" ])
     }), (function(e) {
@@ -290,7 +287,7 @@
     var E = h()(k()).withConfig({
         displayName: "SwitchStyles__StyledToggleClickable",
         componentId: "sc-844ieu-5"
-    })([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;box-shadow:", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}};&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0, 
+    })([ "position:relative;", " border-radius:", ";transition:background-color ", ";flex:0 0 auto;border:1px solid ", ";", " &:not([disabled]){&:focus{outline:0;", ";", "}&:hover ", "{background-color:", ";}&:hover ", "{background-color:", ";}}&[disabled]{border:1px solid ", ";background-color:", ";", " ", "}", ";", "" ], (0, 
     b.pick)({
         enterprise: (0, b.pick)({
             light: (0, f.css)([ "width:calc(", " * 2);background-color:", ";height:", ";" ], x, b.variables.gray98, x),
@@ -308,8 +305,8 @@
     }), (0, b.pick)({
         enterprise: (0, f.css)([ "box-shadow:inset 0 2px 0 rgba(0,0,0,0.1);" ])
     }), (0, b.pick)({
-        enterprise: (0, f.css)([ "", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
-        prisma: b.variables.focusShadow
+        enterprise: (0, f.css)([ "box-shadow:", ",inset 0 2px 0 rgba(0,0,0,0.1);" ], b.variables.focusShadow),
+        prisma: (0, f.css)([ "box-shadow:", ";" ], b.variables.focusShadow)
     }), (0, b.pick)({
         enterprise: (0, f.css)([ "> ", "{border-color:", ";}" ], 
         /* sc-sel */
@@ -376,7 +373,7 @@
         componentId: "sc-844ieu-6"
     })([ "", " flex:1 1 auto;padding-left:", ";color:inherit;", ";" ], b.mixins.reset("inline-block"), (0, 
     b.pick)({
-        enterprise: (0, f.css)([ "", ";" ], b.variables.spacingQuarter),
+        enterprise: (0, f.css)([ "", ";" ], b.variables.spacingXSmall),
         prisma: "8px"
     }), (function(e) {
         var r = e.$disabled;
@@ -399,10 +396,10 @@
     function D() {
         D = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
-                var a = arguments[r];
-                for (var t in a) {
-                    if (Object.prototype.hasOwnProperty.call(a, t)) {
-                        e[t] = a[t];
+                var t = arguments[r];
+                for (var a in t) {
+                    if (Object.prototype.hasOwnProperty.call(t, a)) {
+                        e[a] = t[a];
                     }
                 }
             }
@@ -412,48 +409,48 @@
     }
     function q(e, r) {
         if (e == null) return {};
-        var a = T(e, r);
-        var t, i;
+        var t = T(e, r);
+        var a, i;
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (i = 0; i < o.length; i++) {
-                t = o[i];
-                if (r.indexOf(t) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(e, t)) continue;
-                a[t] = e[t];
+                a = o[i];
+                if (r.indexOf(a) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(e, a)) continue;
+                t[a] = e[a];
             }
         }
-        return a;
+        return t;
     }
     function T(e, r) {
         if (e == null) return {};
-        var a = {};
-        var t = Object.keys(e);
+        var t = {};
+        var a = Object.keys(e);
         var i, o;
-        for (o = 0; o < t.length; o++) {
-            i = t[o];
+        for (o = 0; o < a.length; o++) {
+            i = a[o];
             if (r.indexOf(i) >= 0) continue;
-            a[i] = e[i];
+            t[i] = e[i];
         }
-        return a;
+        return t;
     }
-    function N(e, r) {
+    function R(e, r) {
         if (!(e instanceof r)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function R(e, r) {
-        for (var a = 0; a < r.length; a++) {
-            var t = r[a];
-            t.enumerable = t.enumerable || false;
-            t.configurable = true;
-            if ("value" in t) t.writable = true;
-            Object.defineProperty(e, t.key, t);
+    function N(e, r) {
+        for (var t = 0; t < r.length; t++) {
+            var a = r[t];
+            a.enumerable = a.enumerable || false;
+            a.configurable = true;
+            if ("value" in a) a.writable = true;
+            Object.defineProperty(e, a.key, a);
         }
     }
-    function B(e, r, a) {
-        if (r) R(e.prototype, r);
-        if (a) R(e, a);
+    function B(e, r, t) {
+        if (r) N(e.prototype, r);
+        if (t) N(e, t);
         return e;
     }
     function M(e, r) {
@@ -470,38 +467,38 @@
         if (r) A(e, r);
     }
     function A(e, r) {
-        A = Object.setPrototypeOf || function e(r, a) {
-            r.__proto__ = a;
+        A = Object.setPrototypeOf || function e(r, t) {
+            r.__proto__ = t;
             return r;
         };
         return A(e, r);
     }
-    function H(e) {
-        var r = F();
-        return function a() {
-            var t = Q(e), i;
+    function W(e) {
+        var r = H();
+        return function t() {
+            var a = U(e), i;
             if (r) {
-                var o = Q(this).constructor;
-                i = Reflect.construct(t, arguments, o);
+                var o = U(this).constructor;
+                i = Reflect.construct(a, arguments, o);
             } else {
-                i = t.apply(this, arguments);
+                i = a.apply(this, arguments);
             }
-            return W(this, i);
+            return z(this, i);
         };
     }
-    function W(e, r) {
+    function z(e, r) {
         if (r && (I(r) === "object" || typeof r === "function")) {
             return r;
         }
-        return z(e);
+        return F(e);
     }
-    function z(e) {
+    function F(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function F() {
+    function H() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -512,26 +509,26 @@
             return false;
         }
     }
-    function Q(e) {
-        Q = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
+    function U(e) {
+        U = Object.setPrototypeOf ? Object.getPrototypeOf : function e(r) {
             return r.__proto__ || Object.getPrototypeOf(r);
         };
-        return Q(e);
+        return U(e);
     }
-    function U(e, r, a) {
+    function V(e, r, t) {
         if (r in e) {
             Object.defineProperty(e, r, {
-                value: a,
+                value: t,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            e[r] = a;
+            e[r] = t;
         }
         return e;
     }
-    var V = {
+    var X = {
         appearance: o().oneOf([ "checkbox", "toggle" ]),
         children: o().node,
         disabled: o().bool,
@@ -571,39 +568,39 @@
     /**
  * `Switch` is a basic form control with an on/off state.
  */    var K =  function(e) {
-        M(a, e);
-        var r = H(a);
-        B(a, null, [ {
+        M(t, e);
+        var r = W(t);
+        B(t, null, [ {
             key: "validateProps",
             // @docs-props-type SwitchPropsBase
             value: function e(r) {
-                var a = r.selected, t = r.appearance;
+                var t = r.selected, a = r.appearance;
                 if (false) {}
             }
         } ]);
-        function a(e) {
-            var t;
-            N(this, a);
-            t = r.call(this, e);
-            U(z(t), "clickableId", void 0);
-            U(z(t), "labelId", void 0);
-            U(z(t), "toggle", null);
-            U(z(t), "componentDidUpdate", a.validateProps);
-            U(z(t), "handleContainerClick", (function(e) {
-                var r, a;
-                var i = t.props, o = i.value, n = i.selected;
-                (r = (a = t.props).onClick) === null || r === void 0 ? void 0 : r.call(a, e, {
+        function t(e) {
+            var a;
+            R(this, t);
+            a = r.call(this, e);
+            V(F(a), "clickableId", void 0);
+            V(F(a), "labelId", void 0);
+            V(F(a), "toggle", null);
+            V(F(a), "componentDidUpdate", t.validateProps);
+            V(F(a), "handleContainerClick", (function(e) {
+                var r, t;
+                var i = a.props, o = i.value, n = i.selected;
+                (r = (t = a.props).onClick) === null || r === void 0 ? void 0 : r.call(t, e, {
                     value: o,
                     // @ts-expect-error - safe due to individual prop interfaces
                     selected: n
                 });
             }));
-            t.labelId = (0, d.createDOMID)("label");
-            t.clickableId = (0, d.createDOMID)("clickable");
-            a.validateProps(e);
-            return t;
+            a.labelId = (0, d.createDOMID)("label");
+            a.clickableId = (0, d.createDOMID)("clickable");
+            t.validateProps(e);
+            return a;
         }
-        B(a, [ {
+        B(t, [ {
             key: "focus",
             /**
      * Place focus on the toggle.
@@ -616,100 +613,101 @@
             key: "render",
             value: function e() {
                 var r = this;
-                var a = this.props, i = a.appearance, o = a.children, n = a.disabled, s = a.error, d = a.id, p = a.inline, u = a.interactive, b = a.labelledBy, f = a.onClick, h = a.required, g = a.selected, m = a.selectedLabel, y = a.someSelectedLabel, k = a.unselectedLabel, x = a.value, C = q(a, [ "appearance", "children", "disabled", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
-                var S = b;
+                var t = this.props, i = t.appearance, o = t.children, n = t.disabled, s = t.elementRef, d = t.error, p = t.id, u = t.inline, b = t.interactive, f = t.labelledBy, h = t.onClick, g = t.required, m = t.selected, y = t.selectedLabel, k = t.someSelectedLabel, x = t.unselectedLabel, C = t.value, S = q(t, [ "appearance", "children", "disabled", "elementRef", "error", "id", "inline", "interactive", "labelledBy", "onClick", "required", "selected", "selectedLabel", "someSelectedLabel", "unselectedLabel", "value" ]);
+                var O = f;
  // consumer defined external label
-                                var O = d;
+                                var E = p;
  // consumer defined id
                 // if has internal label defined with children....
                                 if (o) {
-                    S = this.labelId;
+                    O = this.labelId;
  // must use generated labelId
-                                        O = d || this.clickableId;
+                                        E = p || this.clickableId;
  // must have an id
                                 }
-                var E = g === "some" ? "mixed" : g;
-                var L = {
-                    true: m,
-                    false: k,
-                    some: y
-                };
+                var L = m === "some" ? "mixed" : m;
                 var I = {
+                    true: y,
+                    false: x,
+                    some: k
+                };
+                var T = {
                     disabled: n,
-                    $interactive: u,
-                    $error: s,
-                    $selected: g === "some" || g,
-                    "aria-labelledby": u ? S : undefined,
-                    "aria-checked": u ? E : undefined,
-                    "aria-invalid": s ? true : undefined,
-                    "aria-required": h,
-                    id: O,
-                    ref: function e(a) {
-                        r.toggle = a;
+                    $interactive: b,
+                    $error: d,
+                    $selected: m === "some" || m,
+                    "aria-labelledby": b ? O : undefined,
+                    "aria-checked": b ? L : undefined,
+                    "aria-invalid": d ? true : undefined,
+                    "aria-required": g,
+                    id: E,
+                    ref: function e(t) {
+                        r.toggle = t;
                     },
-                    onClick: n || !u ? undefined : this.handleContainerClick,
+                    onClick: n || !b ? undefined : this.handleContainerClick,
                     "data-test": "button",
-                    "data-selected": g
+                    "data-selected": m
                 };
-                var T = G[i];
+                var R = G[i];
                 var N = J[i];
-                var R = function e(r) {
+                var B = function e(r) {
                     return function() {
-                        var e =  t().createElement(t().Fragment, null,  t().createElement(_, {
+                        var e =  a().createElement(a().Fragment, null,  a().createElement(_, {
                             $delay: r,
                             $disabled: n,
-                            $error: !n && s,
-                            $selected: g
-                        }),  t().createElement(P, {
+                            $error: !n && d,
+                            $selected: m
+                        }),  a().createElement(P, {
                             $delay: r,
-                            $error: !n && s
+                            $error: !n && d
                         }));
-                        return u ?  t().createElement(T, D({
+                        return b ?  a().createElement(R, D({
                             role: "switch"
-                        }, I, {
+                        }, T, {
                             $delay: r
-                        }), e) :  t().createElement(N, D({}, I, {
+                        }), e) :  a().createElement(N, D({}, T, {
                             $delay: r
                         }), e);
                     };
                 };
-                var B = function e() {
-                    var r =  t().createElement(t().Fragment, null, g === true && i === "checkbox" &&  t().createElement(v, null), g === "some" && i === "checkbox" &&  t().createElement($, null));
-                    return u ?  t().createElement(T, D({
+                var M = function e() {
+                    var r =  a().createElement(a().Fragment, null, m === true && i === "checkbox" &&  a().createElement(v, null), m === "some" && i === "checkbox" &&  a().createElement($, null));
+                    return b ?  a().createElement(R, D({
                         "data-clickable": true,
                         role: i
-                    }, I), r) :  t().createElement(N, I, r);
+                    }, T), r) :  a().createElement(N, T, r);
                 };
-                var M = n && "disabled" || s && "error" || null;
-                var A = !!m || !!y || !!k;
+                var A = n && "disabled" || d && "error" || null;
+                var W = !!y || !!k || !!x;
                 
-                return t().createElement(w, D({
+                return a().createElement(w, D({
                     flex: true,
-                    inline: p,
+                    inline: u,
                     "data-test": "switch",
-                    "data-test-selected": g,
-                    "data-test-value": x,
-                    "data-test-error": s ? true : undefined,
-                    "data-error": s ? true : undefined,
+                    "data-test-selected": m,
+                    "data-test-value": C,
+                    "data-test-error": d ? true : undefined,
+                    "data-error": d ? true : undefined,
                     "data-disabled": n ? true : undefined,
-                    $switchState: M
-                }, C), i === "toggle" &&  t().createElement(l(), {
-                    on: R("200ms"),
-                    off: R()
-                }), i !== "toggle" && B(), u && A &&  t().createElement(c(), null, L["".concat(g)]), o &&  t().createElement(j, {
+                    elementRef: s,
+                    $switchState: A
+                }, S), i === "toggle" &&  a().createElement(l(), {
+                    on: B("200ms"),
+                    off: B()
+                }), i !== "toggle" && M(), b && W &&  a().createElement(c(), null, I["".concat(m)]), o &&  a().createElement(j, {
                     $disabled: n,
                     "data-test": "label",
-                    id: S,
-                    htmlFor: O,
+                    id: O,
+                    htmlFor: E,
                     "data-disabled": n || null
                 }, o));
             }
         } ]);
-        return a;
-    }(a.Component);
-    U(K, "propTypes", V);
-    U(K, "defaultProps", Z);
-    /* harmony default export */    const X = K;
+        return t;
+    }(t.Component);
+    V(K, "propTypes", X);
+    V(K, "defaultProps", Z);
+    /* harmony default export */    const Q = K;
     // CONCATENATED MODULE: ./src/Switch/index.ts
     module.exports = r;
     /******/})();

package/TabBar.js

@@ -135,7 +135,7 @@
     var z = s()(T()).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:", ";&::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";", "}" ], (0, 
+    })([ "flex:0 1 auto;display:flow-root;position:relative;line-height:", ";text-align:center;white-space:nowrap;color:", ";&::after{display:block;content:attr(data-title);font-weight:", ";height:0;color:transparent;overflow:hidden;visibility:hidden;}", ";&[aria-selected='true']{cursor:default;", "}&[aria-selected='false']{box-shadow:none;font-weight:", ";&:hover:not([disabled]){", "}&[aria-haspopup='true']{", "}}&:focus{box-shadow:", ";", "}" ], (0, 
     c.pick)({
         enterprise: "24px",
         prisma: "20px"
@@ -184,10 +184,10 @@
     }), (0, c.pickVariant)("$layout", {
         horizontal: (0, l.css)([ "height:0;box-sizing:border-box;width:", ";", " transition:height 0.2s;" ], (0, 
         c.pick)({
-            enterprise: (0, l.css)([ "calc(100% - 20px * 2)" ]),
+            enterprise: "calc(100% - 20px * 2)",
             prisma: {
-                comfortable: (0, l.css)([ "calc(100% - 20px * 2)" ]),
-                compact: (0, l.css)([ "calc(100% - 16px * 2)" ])
+                comfortable: "calc(100% - 20px * 2)",
+                compact: "calc(100% - 16px * 2)"
             }
         }), (0, c.pick)({
             enterprise: (0, l.css)([ "bottom:-1px;" ])
@@ -211,7 +211,9 @@
             enterprise: (0, l.css)([ "width:3px;" ]),
             prisma: (0, l.css)([ "width:1px;" ])
         }
-    }), z, j, j);
+    }), 
+    /* sc-sel */
+    z, j, j);
     var _ = s().span.withConfig({
         displayName: "TabStyles__StyledMenu",
         componentId: "sc-1ry8mzj-2"
@@ -228,7 +230,13 @@
             dark: c.variables.borderColor
         })),
         prisma: (0, l.css)([ "background-color:", ";border-color:", ";box-shadow:", ";" ], c.variables.interactiveColorOverlayHover, c.variables.interactiveColorBorderHover, c.variables.hoverShadow)
-    }), z, z, z);
+    }), 
+    /* sc-sel */
+    z, 
+    /* sc-sel */
+    z, 
+    /* sc-sel */
+    z);
     var E = s().span.withConfig({
         displayName: "TabStyles__StyledIcon",
         componentId: "sc-1ry8mzj-3"