@splunk/react-ui 4.42.0 → 4.44.0

package/ButtonSimple.js

@@ -70,10 +70,10 @@
     const i = require("prop-types");
     var t =  r.n(i);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const l = require("@splunk/themes");
+    const n = require("@splunk/themes");
     // CONCATENATED MODULE: external "styled-components"
-    const n = require("styled-components");
-    var s =  r.n(n);
+    const l = require("styled-components");
+    var s =  r.n(l);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
     const c = require("@splunk/react-ui/Clickable");
     var b =  r.n(c);
@@ -93,121 +93,121 @@
     function f(r) {
         var e = "transparent";
         var a = "transparent";
-        var o = (0, l.pick)({
+        var o = (0, n.pick)({
             enterprise: {
-                light: l.variables.gray96,
-                dark: l.variables.gray30
+                light: n.variables.gray96,
+                dark: n.variables.gray30
             },
-            prisma: l.variables.interactiveColorBackgroundDisabled
+            prisma: n.variables.interactiveColorBackgroundDisabled
         });
-        var i = (0, l.pick)({
+        var i = (0, n.pick)({
             enterprise: {
-                dark: l.variables.gray22,
-                light: l.variables.gray92
+                dark: n.variables.gray22,
+                light: n.variables.gray92
             },
-            prisma: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
+            prisma: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
         });
         var t = "transparent";
-        var n = "transparent";
+        var l = "transparent";
         var s;
         var c;
-        var b = l.variables.contentColorActive;
-        var d = l.variables.contentColorDisabled;
+        var b = n.variables.contentColorActive;
+        var d = n.variables.contentColorDisabled;
         switch (r) {
           case "primary":
             {
-                e = (0, l.pick)({
+                e = (0, n.pick)({
                     enterprise: "#1A8929",
-                    prisma: l.variables.interactiveColorPrimary
+                    prisma: n.variables.interactiveColorPrimary
                 });
-                a = (0, l.pick)({
-                    enterprise: l.variables.brandColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayActive)
+                a = (0, n.pick)({
+                    enterprise: n.variables.brandColorD30,
+                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayActive)
                 });
-                t = (0, l.pick)({
-                    enterprise: l.variables.brandColorD50,
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover)
+                t = (0, n.pick)({
+                    enterprise: n.variables.brandColorD50,
+                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover)
                 });
-                n = (0, l.pick)({
+                l = (0, n.pick)({
                     enterprise: "#235823",
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlaySelected)
+                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlaySelected)
                 });
-                b = l.variables.contentColorInverted;
+                b = n.variables.contentColorInverted;
                 break;
             }
 
           case "destructive":
             {
-                e = l.variables.accentColorNegative;
-                a = (0, l.pick)({
-                    enterprise: l.variables.errorColorD40,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayActive)
+                e = n.variables.accentColorNegative;
+                a = (0, n.pick)({
+                    enterprise: n.variables.errorColorD40,
+                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayActive)
                 });
-                t = (0, l.pick)({
-                    enterprise: l.variables.errorColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover)
+                t = (0, n.pick)({
+                    enterprise: n.variables.errorColorD30,
+                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover)
                 });
-                n = (0, l.pick)({
-                    enterprise: l.variables.errorColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlaySelected)
+                l = (0, n.pick)({
+                    enterprise: n.variables.errorColorD30,
+                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlaySelected)
                 });
-                b = l.variables.contentColorInverted;
+                b = n.variables.contentColorInverted;
                 break;
             }
 
           case "secondary":
-            s = l.variables.interactiveColorBorder;
-            c = l.variables.interactiveColorBorderDisabled;
-            e = (0, l.pick)({
+            s = n.variables.interactiveColorBorder;
+            c = n.variables.interactiveColorBorderDisabled;
+            e = (0, n.pick)({
                 enterprise: {
-                    light: l.variables.gray98,
-                    dark: l.variables.gray45
+                    light: n.variables.gray98,
+                    dark: n.variables.gray45
                 },
-                prisma: l.variables.interactiveColorBackground
+                prisma: n.variables.interactiveColorBackground
             });
-            a = (0, l.pick)({
+            a = (0, n.pick)({
                 enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
+                    light: n.variables.gray92,
+                    dark: n.variables.gray22
                 },
-                prisma: l.variables.interactiveColorOverlayActive
+                prisma: n.variables.interactiveColorOverlayActive
             });
-            t = (0, l.pick)({
+            t = (0, n.pick)({
                 enterprise: {
                     light: "#ebeeef",
-                    dark: l.variables.gray30
+                    dark: n.variables.gray30
                 },
-                prisma: l.variables.interactiveColorOverlayHover
+                prisma: n.variables.interactiveColorOverlayHover
             });
-            n = (0, l.pick)({
+            l = (0, n.pick)({
                 enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
+                    light: n.variables.gray92,
+                    dark: n.variables.gray22
                 },
-                prisma: l.variables.interactiveColorOverlaySelected
+                prisma: n.variables.interactiveColorOverlaySelected
             });
             break;
 
           case "subtle":
             // TODO: SUI-6304 this should be interactiveColorAccent once that variable is introduced in SUI 5
-            b = l.variables.interactiveColorPrimary;
-            a = (0, l.pick)({
+            b = n.variables.interactiveColorPrimary;
+            a = (0, n.pick)({
                 enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
+                    light: n.variables.gray92,
+                    dark: n.variables.gray22
                 },
-                prisma: l.variables.interactiveColorOverlayActive
+                prisma: n.variables.interactiveColorOverlayActive
             });
-            t = (0, l.pick)({
+            t = (0, n.pick)({
                 enterprise: {
-                    light: l.variables.linkColor,
-                    dark: l.variables.white
+                    light: n.variables.linkColor,
+                    dark: n.variables.white
                 },
-                prisma: l.variables.interactiveColorOverlayHover
+                prisma: n.variables.interactiveColorOverlayHover
             });
-            n = (0, l.pick)({
+            l = (0, n.pick)({
                 enterprise: "transparent",
-                prisma: l.variables.interactiveColorOverlaySelected
+                prisma: n.variables.interactiveColorOverlaySelected
             });
             break;
 
@@ -219,7 +219,7 @@
             backgroundDisabled: o,
             backgroundDisabledSelected: i,
             backgroundHover: t,
-            backgroundSelected: n,
+            backgroundSelected: l,
             borderColor: s,
             borderColorDisabled: c,
             color: b,
@@ -237,216 +237,216 @@
         }
         var i = f(a);
         var t = v()(i, o), s = t.background, c = t.backgroundActive, b = t.backgroundDisabled, d = t.backgroundDisabledSelected, g = t.backgroundHover, y = t.backgroundSelected, k = t.borderColor, h = t.borderColorDisabled, m = t.color, C = t.colorDisabled;
-        var w = s != null && s !== "transparent";
+        var x = s != null && s !== "transparent";
         return function() {
-            return (0, n.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], l.variables.borderRadius, (function() {
-                return k && (0, n.css)([ "border:1px solid ", ";" ], k);
+            return (0, l.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";", "}" ], n.variables.borderRadius, (function() {
+                return k && (0, l.css)([ "border:1px solid ", ";" ], k);
             }), (function(r) {
                 var e = r.$append;
-                return e && (0, n.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
+                return e && (0, l.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
             }), (function(r) {
                 var e = r.$prepend;
-                return e && (0, n.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
+                return e && (0, l.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
             }), s, m, g, c, (function(r) {
                 var e = r.$selected;
-                return e && (0, n.css)([ "background-color:", ";" ], y);
-            }), l.variables.focusShadow, h, C, (function(r) {
+                return e && (0, l.css)([ "background-color:", ";" ], y);
+            }), n.variables.focusShadow, h, C, (function(r) {
                 var e = r.$selected;
-                return w && (0, n.css)([ "background-color:", ";" ], e ? d : b);
+                return x && (0, l.css)([ "background-color:", ";" ], e ? d : b);
             }));
         };
     }
     /* harmony default export */    const y = g;
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var k = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
-    l.pickVariant)("$variant", {
-        secondary: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        default: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        subtle: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
+    var k = (0, l.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], n.variables.interactiveColorOverlayHover, n.variables.interactiveColorBorderHover, (0, 
+    n.pickVariant)("$variant", {
+        secondary: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow),
+        default: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow),
+        subtle: (0, l.css)([ "box-shadow:", ";" ], n.variables.hoverShadow)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
+        return e && (0, l.css)([ "border-color:", ";&:hover{background-color:", ";}" ], n.variables.interactiveColorBorderDisabled, n.mixins.overlayColors(n.variables.interactiveColorOverlaySelected, n.variables.interactiveColorOverlayHover));
     }), (function(r) {
         var e = r.$error;
-        return e && (0, n.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
-    }), (0, l.pickVariant)("$variant", {
-        secondary: (0, n.css)([ "", " font-weight:", ";" ], y("subtle", {
-            color: l.variables.contentColorActive
-        }), l.variables.fontWeightSemiBold),
-        subtle: (0, n.css)([ "", " font-weight:", ";" ], y("subtle", {
-            color: l.variables.contentColorActive
-        }), l.variables.fontWeightSemiBold),
-        default: (0, n.css)([ "", " font-weight:", ";" ], y("secondary", {
+        return e && (0, l.css)([ "border-color:", ";&:hover{border-color:", ";}" ], n.variables.accentColorNegative, n.variables.accentColorNegative);
+    }), (0, n.pickVariant)("$variant", {
+        secondary: (0, l.css)([ "", " font-weight:", ";" ], y("subtle", {
+            color: n.variables.contentColorActive
+        }), n.variables.fontWeightSemiBold),
+        subtle: (0, l.css)([ "", " font-weight:", ";" ], y("subtle", {
+            color: n.variables.contentColorActive
+        }), n.variables.fontWeightSemiBold),
+        default: (0, l.css)([ "", " font-weight:", ";" ], y("secondary", {
             background: "transparent"
-        }), l.variables.fontWeightSemiBold),
-        toggle: (0, n.css)([ "", " font-weight:normal;" ], y("secondary", {
+        }), n.variables.fontWeightSemiBold),
+        toggle: (0, l.css)([ "", " font-weight:normal;" ], y("secondary", {
             background: "transparent"
         }))
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
+        return e && (0, l.css)([ "background-color:", ";" ], n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected));
     }));
-    var h = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0, 
-    l.pickVariant)("$variant", {
-        primary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
-        destructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover),
-        flat: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover)
-    }), l.variables.hoverShadow, (0, l.pickVariant)("$variant", {
+    var h = (0, l.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0, 
+    n.pickVariant)("$variant", {
+        primary: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover),
+        destructive: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover),
+        flat: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover)
+    }), n.variables.hoverShadow, (0, n.pickVariant)("$variant", {
         primary: y("primary", {
             // this is intentional - the disabled background had always been applying the $selected style
             // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
+            backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
         }),
         destructive: y("destructive", {
             // this is intentional - the disabled background had always been applying the $selected style
             // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
+            backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
         }),
         flat: y({
             // this is intentional - the background had always been applying the $selected style
             // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            background: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected),
-            backgroundActive: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayActive),
+            background: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected),
+            backgroundActive: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayActive),
             // this is intentional - the disabled background had always been applying the $selected style
             // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected),
-            backgroundHover: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover),
-            backgroundSelected: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected)
+            backgroundDisabled: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected),
+            backgroundHover: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover),
+            backgroundSelected: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected)
         })
-    }), l.variables.fontWeightSemiBold);
+    }), n.variables.fontWeightSemiBold);
     // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
     var m = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
         var C = "#235823";
  // SUI-2439 to meet WCAG AA compliance
-        var w = (0, n.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], l.variables.borderRadius);
-    var x = (0, n.css)([ "", " ", "" ], (function(r) {
+        var x = (0, l.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], n.variables.borderRadius);
+    var w = (0, l.css)([ "", " ", "" ], (function(r) {
         var e = r.$append;
-        return e && (0, n.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return e && (0, l.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, n.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return e && (0, l.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }));
     var S = "inset 0 -1px 0 rgba(0, 0, 0, 0.1)";
     var O = "inset 0 1px 0 rgba(0, 0, 0, 0.1)";
-    var D = (0, n.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], w, (0, 
-    l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.borderColor
-    }), x, (0, l.pickVariant)("$variant", {
+    var D = (0, l.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";border-color:", ";", "}" ], x, (0, 
+    n.pick)({
+        light: n.variables.gray60,
+        dark: n.variables.borderColor
+    }), w, (0, n.pickVariant)("$variant", {
         default: "normal",
-        secondary: l.variables.fontWeightSemiBold
-    }), (0, l.pick)({
-        light: l.variables.gray98,
-        dark: l.variables.gray45
-    }), (0, l.pick)({
-        light: l.variables.gray45,
-        dark: l.variables.white
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ";" ], S),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray30)
+        secondary: n.variables.fontWeightSemiBold
+    }), (0, n.pick)({
+        light: n.variables.gray98,
+        dark: n.variables.gray45
+    }), (0, n.pick)({
+        light: n.variables.gray45,
+        dark: n.variables.white
+    }), (0, n.pick)({
+        light: (0, l.css)([ "box-shadow:", ";" ], S),
+        dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray30)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
-        l.pick)({
-            light: (0, n.css)([ "box-shadow:", ";" ], O),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";" ], l.variables.black)
-        }), (0, l.pick)({
-            light: l.variables.gray92,
-            dark: l.variables.gray22
-        }), (0, l.pick)({
-            light: l.variables.gray60,
-            dark: l.variables.gray20
+        return e && (0, l.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
+        n.pick)({
+            light: (0, l.css)([ "box-shadow:", ";" ], O),
+            dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ";" ], n.variables.black)
+        }), (0, n.pick)({
+            light: n.variables.gray92,
+            dark: n.variables.gray22
+        }), (0, n.pick)({
+            light: n.variables.gray60,
+            dark: n.variables.gray20
         }));
-    }), (0, l.pick)({
+    }), (0, n.pick)({
         light: "#ebeeef",
-        dark: l.variables.gray30
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ";" ], S),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray25)
-    }), (0, l.pick)({
-        light: l.variables.gray92,
-        dark: l.variables.gray22
-    }), (0, l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.gray20
-    }), (0, l.pick)({
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray22)
+        dark: n.variables.gray30
+    }), (0, n.pick)({
+        light: (0, l.css)([ "box-shadow:", ";" ], S),
+        dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray25)
+    }), (0, n.pick)({
+        light: n.variables.gray92,
+        dark: n.variables.gray22
+    }), (0, n.pick)({
+        light: n.variables.gray60,
+        dark: n.variables.gray20
+    }), (0, n.pick)({
+        dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray22)
     }), (function(r) {
         var e = r.$append;
-        return e && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], S, l.variables.focusShadow, l.variables.borderColor),
-            dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], l.variables.gray30, l.variables.focusShadow, l.variables.borderColor)
+        return e && (0, n.pick)({
+            light: (0, l.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], S, n.variables.focusShadow, n.variables.borderColor),
+            dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], n.variables.gray30, n.variables.focusShadow, n.variables.borderColor)
         });
     }), (function(r) {
         var e = r.$append, a = r.$selected;
-        return e && a && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, l.variables.focusShadow, l.variables.borderColor),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], l.variables.black, l.variables.focusShadow, l.variables.borderColor)
+        return e && a && (0, n.pick)({
+            light: (0, l.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, n.variables.focusShadow, n.variables.borderColor),
+            dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], n.variables.black, n.variables.focusShadow, n.variables.borderColor)
         });
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ",", ";" ], S, l.variables.focusShadow),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], l.variables.gray30, l.variables.focusShadow)
-    }), l.variables.textDisabledColor, (0, l.pick)({
-        light: l.variables.gray96,
-        dark: l.variables.gray30
-    }), (0, l.pick)({
-        light: l.variables.borderLightColor,
-        dark: l.variables.gray30
+    }), (0, n.pick)({
+        light: (0, l.css)([ "box-shadow:", ",", ";" ], S, n.variables.focusShadow),
+        dark: (0, l.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], n.variables.gray30, n.variables.focusShadow)
+    }), n.variables.textDisabledColor, (0, n.pick)({
+        light: n.variables.gray96,
+        dark: n.variables.gray30
+    }), (0, n.pick)({
+        light: n.variables.borderLightColor,
+        dark: n.variables.gray30
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], O, l.variables.gray92, l.variables.gray80),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], l.variables.black, l.variables.gray22, l.variables.gray20)
+        return e && (0, n.pick)({
+            light: (0, l.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], O, n.variables.gray92, n.variables.gray80),
+            dark: (0, l.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], n.variables.black, n.variables.gray22, n.variables.gray20)
         });
     }));
     var $ = "inset 0 -2px 0 rgba(0, 0, 0, 0.1)";
     var j = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
-    var B = (0, n.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";cursor:not-allowed;", "}" ], w, l.variables.fontWeightSemiBold, x, m, l.variables.white, $, (function(r) {
+    var B = (0, l.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";", "}" ], x, n.variables.fontWeightSemiBold, w, m, n.variables.white, $, (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, C);
+        return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, C);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, n.css)([ "border-left:1px solid ", ";" ], m);
-    }), l.variables.brandColorD50, l.variables.brandColorD30, l.variables.brandColorD30, $, l.variables.focusShadow, l.variables.brandColorL30, l.variables.brandColorL10, (function(r) {
+        return e && (0, l.css)([ "border-left:1px solid ", ";" ], m);
+    }), n.variables.brandColorD50, n.variables.brandColorD30, n.variables.brandColorD30, $, n.variables.focusShadow, n.variables.brandColorL30, n.variables.brandColorL10, (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.brandColorD20);
+        return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.brandColorD20);
     }));
-    var P = (0, n.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";cursor:not-allowed;", "}" ], w, l.variables.fontWeightSemiBold, x, l.variables.errorColorD10, l.variables.white, $, (function(r) {
+    var P = (0, l.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";", "}" ], x, n.variables.fontWeightSemiBold, w, n.variables.errorColorD10, n.variables.white, $, (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.errorColorD30);
+        return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.errorColorD30);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, n.css)([ "border-left:1px solid ", ";" ], l.variables.errorColorD30);
-    }), l.variables.errorColorD30, l.variables.errorColorD40, l.variables.errorColorD40, $, l.variables.focusShadow, l.variables.errorColorL10, l.variables.errorColorD10, (function(r) {
+        return e && (0, l.css)([ "border-left:1px solid ", ";" ], n.variables.errorColorD30);
+    }), n.variables.errorColorD30, n.variables.errorColorD40, n.variables.errorColorD40, $, n.variables.focusShadow, n.variables.errorColorL10, n.variables.errorColorD10, (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.errorColorD40);
+        return e && (0, l.css)([ "box-shadow:", ";background-color:", ";" ], j, n.variables.errorColorD40);
     }));
-    var A = (0, n.css)([ "", ";color:", ";border:1px solid transparent;&:not([disabled],[aria-disabled='true']){transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{color:", ";background-color:", ";border-color:", ";}", " &:focus{color:", ";}&:active,&[aria-expanded='true']{background-color:", ";transition:none;}}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", "}" ], w, (0, 
-    l.pick)({
-        light: l.variables.gray45,
-        dark: l.variables.white
+    var A = (0, l.css)([ "", ";color:", ";border:1px solid transparent;&:not([disabled],[aria-disabled='true']){transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{color:", ";background-color:", ";border-color:", ";}", " &:focus{color:", ";}&:active,&[aria-expanded='true']{background-color:", ";transition:none;}}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{color:", ";", "}" ], x, (0, 
+    n.pick)({
+        light: n.variables.gray45,
+        dark: n.variables.white
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";" ], l.variables.accentColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), l.variables.backgroundColorHover, (0, l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.borderColor
+        return e && (0, l.css)([ "border-color:", ";" ], n.variables.accentColor);
+    }), (0, n.pick)({
+        light: n.variables.linkColor,
+        dark: n.variables.white
+    }), n.variables.backgroundColorHover, (0, n.pick)({
+        light: n.variables.gray60,
+        dark: n.variables.borderColor
     }), (function(r) {
         var e = r.$error;
-        return e && (0, n.css)([ "&,&:hover{color:", ";}" ], l.variables.errorColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), (0, l.pick)({
-        light: l.variables.gray92,
-        dark: l.variables.gray22
-    }), l.variables.focusShadow, l.variables.textDisabledColor, (function(r) {
+        return e && (0, l.css)([ "&,&:hover{color:", ";}" ], n.variables.errorColor);
+    }), (0, n.pick)({
+        light: n.variables.linkColor,
+        dark: n.variables.white
+    }), (0, n.pick)({
+        light: n.variables.gray92,
+        dark: n.variables.gray22
+    }), n.variables.focusShadow, n.variables.textDisabledColor, (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";" ], l.variables.borderLightColor);
+        return e && (0, l.css)([ "border-color:", ";" ], n.variables.borderLightColor);
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
     var H = s()(b()).withConfig({
@@ -454,10 +454,10 @@
         componentId: "vlarwe-0"
     })([ "", " ", "" ], (function(r) {
         var e = r.to;
-        return e ? (0, n.css)([ "", " align-items:center;justify-content:center;" ], l.mixins.reset("flex")) : (0, 
-        n.css)([ "", "" ], l.mixins.reset("block"));
-    }), (0, l.pick)({
-        enterprise: (0, l.pickVariant)("$variant", {
+        return e ? (0, l.css)([ "", " align-items:center;justify-content:center;" ], n.mixins.reset("flex")) : (0, 
+        l.css)([ "", "" ], n.mixins.reset("block"));
+    }), (0, n.pick)({
+        enterprise: (0, n.pickVariant)("$variant", {
             // the four main styles
             primary: B,
             secondary: D,
@@ -471,7 +471,7 @@
             toggle: D,
             flat: D
         }),
-        prisma: (0, l.pickVariant)("$variant", {
+        prisma: (0, n.pickVariant)("$variant", {
             // the four main styles
             primary: h,
             secondary: k,
@@ -646,7 +646,7 @@
     var ir = [].concat(ar, [ "toggle", "flat" ]);
     // Array.from(new Set... is used to de-duplicate the appearances
         var tr = Array.from(new Set([].concat(Q(or), Q(ir))));
-    var lr = {
+    var nr = {
         action: t().string,
         appearance: t().oneOf([ "default", "secondary", "primary", "destructive", "subtle", "pill", "toggle", "flat" ]),
         append: t().bool,
@@ -661,7 +661,7 @@
         splunkTheme: t().object,
         to: t().string
     };
-    var nr = {
+    var lr = {
         appearance: "default",
         append: false,
         disabled: false,
@@ -716,26 +716,26 @@
         }, {
             key: "render",
             value: function r() {
-                var e = this.props, a = e.append, i = e.children, t = e.error, l = e.prepend, n = e.selected, s = N(e, [ "append", "children", "error", "prepend", "selected" ]);
+                var e = this.props, a = e.append, i = e.children, t = e.error, n = e.prepend, l = e.selected, s = N(e, [ "append", "children", "error", "prepend", "selected" ]);
                 
                 return o().createElement(H, _({
                     "aria-invalid": t,
-                    "aria-pressed": n,
+                    "aria-pressed": l,
                     "data-test": "button-simple",
                     ref: this.handleMount,
                     $variant: this.getVariant(),
                     $append: a,
-                    $prepend: l,
-                    $selected: n || false,
+                    $prepend: n,
+                    $selected: l || false,
                     $error: t
                 }, s), i);
             }
         } ]);
         return a;
     }(a.Component);
-    G(sr, "defaultProps", nr);
-    G(sr, "propTypes", lr);
-    var cr = (0, l.withSplunkTheme)(sr);
+    G(sr, "defaultProps", lr);
+    G(sr, "propTypes", nr);
+    var cr = (0, n.withSplunkTheme)(sr);
     cr.propTypes = sr.propTypes;
     /* harmony default export */    const br = cr;
     // only for styled-components that wrap ButtonSimple