@splunk/react-ui 4.32.0 → 4.34.0

package/ButtonSimple.js

@@ -61,7 +61,7 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        default: () => /* reexport */ lr
+        default: () => /* reexport */ vr
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
@@ -69,41 +69,36 @@
     // CONCATENATED MODULE: external "prop-types"
     const i = require("prop-types");
     var t =  r.n(i);
-    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const n = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const s = require("@splunk/react-ui/ScreenReaderContent");
-    var c =  r.n(s);
+    const l = require("@splunk/themes");
     // CONCATENATED MODULE: external "styled-components"
-    const d = require("styled-components");
-    var v =  r.n(d);
+    const n = require("styled-components");
+    var s =  r.n(n);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const b = require("@splunk/react-ui/Clickable");
-    var u =  r.n(b);
+    const c = require("@splunk/react-ui/Clickable");
+    var d =  r.n(c);
     // CONCATENATED MODULE: external "lodash/merge"
-    const p = require("lodash/merge");
-    var f =  r.n(p);
+    const v = require("lodash/merge");
+    var b =  r.n(v);
     // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
-    function g(r) {
+    function u(r) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            g = function r(e) {
+            u = function r(e) {
                 return typeof e;
             };
         } else {
-            g = function r(e) {
+            u = function r(e) {
                 return e && typeof Symbol === "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
             };
         }
-        return g(r);
+        return u(r);
     }
-    var y = [ "primary", "secondary", "destructive", "ghost" ];
+    var p = [ "primary", "secondary", "destructive", "subtle" ];
     /**
  * These enterprise... values don't exist in Enterprise @splunk/themes
  * They're provided here for TypeScript compatibility
- */    var k = {
+ */    var f = {
         active: {
             dark: "rgba(0, 0, 0, 0.2)",
             light: "rgba(0, 0, 0, 0.07)"
@@ -117,124 +112,126 @@
             light: "rgba(0, 0, 0, 0.04)"
         }
     };
-    var h = {
+    var g = {
         dark: "#272a2f",
         light: "#eeeeee"
     };
-    var m = {
+    var y = {
         dark: "rgba(255, 255, 255, 0.15)",
         light: "rgba(0, 0, 0, 0.1)"
     };
-    function C(r) {
+    function h(r) {
         var e = "transparent";
         var a = "transparent";
-        var o = (0, n.pick)({
-            enterprise: m,
-            prisma: n.variables.interactiveColorBackgroundDisabled
+        var o = (0, l.pick)({
+            enterprise: y,
+            prisma: l.variables.interactiveColorBackgroundDisabled
         });
-        var i = (0, n.pick)({
+        var i = (0, l.pick)({
             enterprise: {
-                dark: n.mixins.overlayColors(m.dark, k.selected.dark),
-                light: n.mixins.overlayColors(m.light, k.selected.light)
+                dark: l.mixins.overlayColors(y.dark, f.selected.dark),
+                light: l.mixins.overlayColors(y.light, f.selected.light)
             },
-            prisma: n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected)
+            prisma: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
         });
         var t = "transparent";
-        var l = "transparent";
+        var n = "transparent";
         var s;
         var c;
-        var d = n.variables.contentColorActive;
-        var v = n.variables.contentColorDisabled;
+        var d = l.variables.contentColorActive;
+        var v = l.variables.contentColorDisabled;
         switch (r) {
           case "primary":
             {
-                e = n.variables.interactiveColorPrimary;
-                a = (0, n.pick)({
+                e = l.variables.interactiveColorPrimary;
+                a = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.active.light),
-                        dark: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.active.dark)
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.active.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.active.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayActive)
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayActive)
                 });
-                t = (0, n.pick)({
+                t = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.hover.light),
-                        dark: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.hover.dark)
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.hover.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.hover.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover)
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover)
                 });
-                l = (0, n.pick)({
+                n = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.selected.light),
-                        dark: n.mixins.overlayColors(n.variables.interactiveColorPrimary, k.selected.dark)
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.selected.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.selected.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlaySelected)
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlaySelected)
                 });
-                d = n.variables.contentColorInverted;
+                d = l.variables.contentColorInverted;
                 break;
             }
 
           case "destructive":
             {
-                e = n.variables.accentColorNegative;
-                a = (0, n.pick)({
+                e = l.variables.accentColorNegative;
+                a = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.accentColorNegative, k.active.light),
-                        dark: n.mixins.overlayColors(n.variables.accentColorNegative, k.active.dark)
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.active.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.active.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayActive)
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayActive)
                 });
-                t = (0, n.pick)({
+                t = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.accentColorNegative, k.hover.light),
-                        dark: n.mixins.overlayColors(n.variables.accentColorNegative, k.hover.dark)
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.hover.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.hover.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover)
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover)
                 });
-                l = (0, n.pick)({
+                n = (0, l.pick)({
                     enterprise: {
-                        light: n.mixins.overlayColors(n.variables.accentColorNegative, k.selected.light),
-                        dark: n.mixins.overlayColors(n.variables.accentColorNegative, k.selected.dark)
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.selected.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.selected.dark)
                     },
-                    prisma: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlaySelected)
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlaySelected)
                 });
-                d = n.variables.contentColorInverted;
+                d = l.variables.contentColorInverted;
                 break;
             }
 
           case "secondary":
-            s = n.variables.interactiveColorBorder;
-            c = n.variables.interactiveColorBorderDisabled;
-            e = (0, n.pick)({
-                enterprise: h,
-                prisma: n.variables.interactiveColorBackground
+            s = l.variables.interactiveColorBorder;
+            c = l.variables.interactiveColorBorderDisabled;
+            e = (0, l.pick)({
+                enterprise: g,
+                prisma: l.variables.interactiveColorBackground
             });
-            a = (0, n.pick)({
-                enterprise: k.active,
-                prisma: n.variables.interactiveColorOverlayActive
+            a = (0, l.pick)({
+                enterprise: f.active,
+                prisma: l.variables.interactiveColorOverlayActive
             });
-            t = (0, n.pick)({
-                enterprise: k.hover,
-                prisma: n.variables.interactiveColorOverlayHover
+            t = (0, l.pick)({
+                enterprise: f.hover,
+                prisma: l.variables.interactiveColorOverlayHover
             });
-            l = (0, n.pick)({
-                enterprise: k.selected,
-                prisma: n.variables.interactiveColorOverlaySelected
+            n = (0, l.pick)({
+                enterprise: f.selected,
+                prisma: l.variables.interactiveColorOverlaySelected
             });
             break;
 
-          case "ghost":
-            a = (0, n.pick)({
-                enterprise: k.active,
-                prisma: n.variables.interactiveColorOverlayActive
+          case "subtle":
+            // TODO: SUI-6304 this should be interactiveColorAccent once that variable is introduced in SUI 5
+            d = l.variables.interactiveColorPrimary;
+            a = (0, l.pick)({
+                enterprise: f.active,
+                prisma: l.variables.interactiveColorOverlayActive
             });
-            t = (0, n.pick)({
-                enterprise: k.hover,
-                prisma: n.variables.interactiveColorOverlayHover
+            t = (0, l.pick)({
+                enterprise: f.hover,
+                prisma: l.variables.interactiveColorOverlayHover
             });
-            l = (0, n.pick)({
-                enterprise: k.selected,
-                prisma: n.variables.interactiveColorOverlaySelected
+            n = (0, l.pick)({
+                enterprise: f.selected,
+                prisma: l.variables.interactiveColorOverlaySelected
             });
             break;
 
@@ -246,7 +243,7 @@
             backgroundDisabled: o,
             backgroundDisabledSelected: i,
             backgroundHover: t,
-            backgroundSelected: l,
+            backgroundSelected: n,
             borderColor: s,
             borderColorDisabled: c,
             color: d,
@@ -254,248 +251,270 @@
         };
         return b;
     }
-    function x(r, e) {
-        var a = typeof r === "string" && y.includes(r) ? r : undefined;
+    function k(r, e) {
+        var a = typeof r === "string" && p.includes(r) ? r : undefined;
         var o = {};
         if (a && e !== undefined) {
             o = e;
-        } else if (a === undefined && g(r) === "object" && e === undefined) {
+        } else if (a === undefined && u(r) === "object" && e === undefined) {
             o = r;
         }
-        var i = C(a);
-        var t = f()(i, o), l = t.background, s = t.backgroundActive, c = t.backgroundDisabled, v = t.backgroundDisabledSelected, b = t.backgroundHover, u = t.backgroundSelected, p = t.borderColor, k = t.borderColorDisabled, h = t.color, m = t.colorDisabled;
-        var x = l != null && l !== "transparent";
+        var i = h(a);
+        var t = b()(i, o), s = t.background, c = t.backgroundActive, d = t.backgroundDisabled, v = t.backgroundDisabledSelected, f = t.backgroundHover, g = t.backgroundSelected, y = t.borderColor, k = t.borderColorDisabled, m = t.color, C = t.colorDisabled;
+        var x = s != null && s !== "transparent";
         return function() {
-            return (0, d.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;}", "}&:focus{box-shadow:", ";}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], n.variables.borderRadius, (function() {
-                return p && (0, d.css)([ "border:1px solid ", ";" ], p);
+            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 y && (0, n.css)([ "border:1px solid ", ";" ], y);
             }), (function(r) {
                 var e = r.$append;
-                return e && (0, d.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
+                return e && (0, n.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, d.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
-            }), l, h, b, s, (function(r) {
+                return e && (0, n.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
+            }), s, m, f, c, (function(r) {
                 var e = r.$selected;
-                return e && (0, d.css)([ "background-color:", ";" ], u);
-            }), n.variables.focusShadow, k, m, (function(r) {
-                return x && (0, d.css)([ "background-color:", ";" ], r ? v
-                /* TODO: this isn't defined in SUI 5 themes yet */ : c);
+                return e && (0, n.css)([ "background-color:", ";" ], g);
+            }), l.variables.focusShadow, k, C, (function(r) {
+                return x && (0, n.css)([ "background-color:", ";" ], r ? v
+                /* TODO: this isn't defined in SUI 5 themes yet */ : d);
             }));
         };
     }
-    /* harmony default export */    const w = x;
+    /* harmony default export */    const m = k;
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var S = (0, d.css)([ "", " &:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}&[disabled],&[aria-disabled='true']{", "}" ], (0, 
-    n.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "", " font-weight:", ";" ], w("ghost"), n.variables.fontWeightSemiBold),
-        prismaDefault: (0, d.css)([ "", " font-weight:", ";" ], w("secondary", {
-            background: "transparent"
-        }), n.variables.fontWeightSemiBold),
-        prismaToggle: (0, d.css)([ "", " font-weight:normal;" ], w("secondary", {
-            background: "transparent"
-        }))
-    }), n.variables.interactiveColorOverlayHover, n.variables.interactiveColorBorderHover, (0, 
-    n.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "box-shadow:", ";" ], n.variables.hoverShadow),
-        prismaDefault: (0, d.css)([ "box-shadow:", ";" ], n.variables.hoverShadow)
+    var C = (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)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "border-color:", ";&:hover{background-color:", ";}" ], n.variables.interactiveColorBorderDisabled, n.mixins.overlayColors(n.variables.interactiveColorOverlaySelected, n.variables.interactiveColorOverlayHover));
+        return e && (0, n.css)([ "border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
     }), (function(r) {
         var e = r.$error;
-        return e && (0, d.css)([ "border-color:", ";&:hover{border-color:", ";}" ], n.variables.accentColorNegative, n.variables.accentColorNegative);
+        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:", ";" ], m("subtle", {
+            color: l.variables.contentColorActive
+        }), l.variables.fontWeightSemiBold),
+        subtle: (0, n.css)([ "", " font-weight:", ";" ], m("subtle", {
+            color: l.variables.contentColorActive
+        }), l.variables.fontWeightSemiBold),
+        default: (0, n.css)([ "", " font-weight:", ";" ], m("secondary", {
+            background: "transparent"
+        }), l.variables.fontWeightSemiBold),
+        toggle: (0, n.css)([ "", " font-weight:normal;" ], m("secondary", {
+            background: "transparent"
+        }))
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "background-color:", ";" ], n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected));
+        return e && (0, n.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
     }));
-    var O = (0, d.css)([ "", " font-weight:", ";&:focus{background-color:", ";}&:hover{box-shadow:", ";}" ], (0, 
-    n.pickVariant)("$variant", {
-        prismaPrimary: w("primary"),
-        prismaDestructive: w("destructive")
-    }), n.variables.fontWeightSemiBold, (0, n.pickVariant)("$variant", {
-        prismaPrimary: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayHover),
-        prismaDestructive: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayHover)
-    }), n.variables.hoverShadow);
-    var D = (0, d.css)([ "", " font-weight:", ";&:hover{box-shadow:", ";}&:focus{background-color:", ";}" ], w({
-        // this is intentional - the background had always been applying the $selected style
-        // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-        background: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected),
-        backgroundActive: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayActive),
-        backgroundHover: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover),
-        backgroundSelected: n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected)
-    }), n.variables.fontWeightSemiBold, n.variables.hoverShadow, n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover));
+    var x = (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", {
+        primary: m("primary"),
+        destructive: m("destructive"),
+        flat: m({
+            // 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),
+            backgroundHover: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover),
+            backgroundSelected: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected)
+        })
+    }), l.variables.fontWeightSemiBold);
     // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
-    var P = "#1A8929";
+    var w = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
-        var $ = "#235823";
+        var S = "#235823";
  // SUI-2439 to meet WCAG AA compliance
-        var j = (0, d.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], n.variables.borderRadius);
-    var B = (0, d.css)([ "", " ", "" ], (function(r) {
+        var O = (0, n.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], l.variables.borderRadius);
+    var $ = (0, n.css)([ "", " ", "" ], (function(r) {
         var e = r.$append;
-        return e && (0, d.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
+        return e && (0, n.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, d.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
+        return e && (0, n.css)([ "border-top-left-radius:0;border-bottom-left-radius:0;" ]);
     }));
-    var N = "inset 0 -1px 0 rgba(0, 0, 0, 0.1)";
-    var T = "inset 0 1px 0 rgba(0, 0, 0, 0.1)";
-    var H = (0, d.css)([ "", ";border:", ";", ";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:", ";box-shadow:", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], j, (0, 
-    n.pick)({
-        light: (0, d.css)([ "1px solid ", "" ], n.variables.gray60),
-        dark: n.variables.border
-    }), B, (0, n.pickVariant)("$variant", {
-        enterpriseDefault: "normal",
-        enterpriseSecondary: 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, d.css)([ "box-shadow:", ";" ], N),
-        dark: (0, d.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray30)
+    var D = "inset 0 -1px 0 rgba(0, 0, 0, 0.1)";
+    var P = "inset 0 1px 0 rgba(0, 0, 0, 0.1)";
+    var j = (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:", ";", "}" ], O, (0, 
+    l.pick)({
+        light: l.variables.gray60,
+        dark: l.variables.borderColor
+    }), $, (0, l.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:", ";" ], D),
+        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray30)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], (0, 
-        n.pick)({
-            light: T,
-            dark: (0, d.css)([ "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
+        return e && (0, n.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
+        l.pick)({
+            light: (0, n.css)([ "box-shadow:", ";" ], P),
+            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
         }));
-    }), (0, n.pick)({
+    }), (0, l.pick)({
         light: "#ebeeef",
-        dark: n.variables.gray30
-    }), (0, n.pick)({
-        light: N,
-        dark: (0, d.css)([ "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, d.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray22)
+        dark: l.variables.gray30
+    }), (0, l.pick)({
+        light: (0, n.css)([ "box-shadow:", ";" ], D),
+        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)
     }), (function(r) {
         var e = r.$append;
-        return e && (0, d.css)([ "box-shadow:", ",", ",inset -1px 0 0 ", ";" ], (0, n.pick)({
-            light: N,
-            dark: (0, d.css)([ "inset 0 -1px 0 ", "" ], n.variables.gray30)
-        }), n.variables.focusShadow, n.variables.borderColor);
+        return e && (0, l.pick)({
+            light: (0, n.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], D, 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)
+        });
     }), (function(r) {
         var e = r.$append, a = r.$selected;
-        return e && a && (0, n.pick)({
-            light: (0, d.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], N, T, n.variables.focusShadow, n.variables.borderColor),
-            dark: (0, d.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], n.variables.black, n.variables.focusShadow, n.variables.borderColor)
+        return e && a && (0, l.pick)({
+            light: (0, n.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], D, P, 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)
         });
-    }), (0, n.pick)({
-        light: N,
-        dark: (0, d.css)([ "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
+    }), (0, l.pick)({
+        light: (0, n.css)([ "box-shadow:", ",", ";" ], D, 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
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.pick)({
-            light: (0, d.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], T, n.variables.gray92, n.variables.gray80),
-            dark: (0, d.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], n.variables.black, n.variables.gray22, n.variables.gray20)
+        return e && (0, l.pick)({
+            light: (0, n.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], P, 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)
         });
     }));
-    var _ = "inset 0 -2px 0 rgba(0, 0, 0, 0.1)";
-    var A = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
-    var R = (0, d.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;", "}" ], j, n.variables.fontWeightSemiBold, B, P, n.variables.white, _, (function(r) {
+    var A = "inset 0 -2px 0 rgba(0, 0, 0, 0.1)";
+    var B = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
+    var N = (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;", "}" ], O, l.variables.fontWeightSemiBold, $, w, l.variables.white, A, (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], A, $);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, S);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, d.css)([ "border-left:1px solid ", ";" ], P);
-    }), n.variables.brandColorD50, n.variables.brandColorD30, n.variables.brandColorD30, _, n.variables.focusShadow, n.variables.brandColorL30, n.variables.brandColorL10, (function(r) {
+        return e && (0, n.css)([ "border-left:1px solid ", ";" ], w);
+    }), l.variables.brandColorD50, l.variables.brandColorD30, l.variables.brandColorD30, A, l.variables.focusShadow, l.variables.brandColorL30, l.variables.brandColorL10, (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], A, n.variables.brandColorD20);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, l.variables.brandColorD20);
     }));
-    var E = (0, d.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;", "}" ], j, n.variables.fontWeightSemiBold, B, n.variables.errorColorD10, n.variables.white, _, (function(r) {
+    var H = (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;", "}" ], O, l.variables.fontWeightSemiBold, $, l.variables.errorColorD10, l.variables.white, A, (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], A, n.variables.errorColorD30);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, l.variables.errorColorD30);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, d.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) {
+        return e && (0, n.css)([ "border-left:1px solid ", ";" ], l.variables.errorColorD30);
+    }), l.variables.errorColorD30, l.variables.errorColorD40, l.variables.errorColorD40, A, l.variables.focusShadow, l.variables.errorColorL10, l.variables.errorColorD10, (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], A, n.variables.errorColorD40);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, l.variables.errorColorD40);
     }));
-    var q = (0, d.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;", "}" ], j, (0, 
-    n.pick)({
-        light: n.variables.gray45,
-        dark: n.variables.white
+    var _ = (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;", "}" ], O, (0, 
+    l.pick)({
+        light: l.variables.gray45,
+        dark: l.variables.white
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.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
+        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
     }), (function(r) {
         var e = r.$error;
-        return e && (0, d.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) {
+        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) {
         var e = r.$selected;
-        return e && (0, d.css)([ "border-color:", ";" ], n.variables.borderLightColor);
+        return e && (0, n.css)([ "border-color:", ";" ], l.variables.borderLightColor);
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
-    var V = v()(u()).withConfig({
+    var T = s()(d()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
-    })([ "", " ", "" ], n.mixins.reset("block"), (0, n.pick)({
-        enterprise: (0, n.pickVariant)("$variant", {
-            enterpriseDefault: H,
-            enterpriseSecondary: H,
-            enterprisePrimary: R,
-            enterpriseError: E,
-            enterpriseDestructive: E,
-            enterprisePill: q
+    })([ "", " ", "" ], (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", {
+            // the four main styles
+            primary: N,
+            secondary: j,
+            destructive: H,
+            subtle: _,
+            // same as "secondary"
+            default: j,
+            // "pill" is an Enterprise-only style
+            pill: _,
+            // fallbacks for styles unsupported by Enterprise
+            toggle: j,
+            flat: j
         }),
-        prisma: (0, n.pickVariant)("$variant", {
-            prismaDefault: S,
-            prismaDestructive: O,
-            prismaPrimary: O,
-            prismaSecondary: S,
-            prismaToggle: S,
-            prismaFlat: D
+        prisma: (0, l.pickVariant)("$variant", {
+            // the four main styles
+            primary: x,
+            secondary: C,
+            destructive: x,
+            subtle: C,
+            // same as "secondary"
+            default: C,
+            // "toggle" and "flat" are Prisma-only styles
+            toggle: C,
+            flat: x,
+            // fallback for "pill" which is not supported by Prisma
+            pill: C
         })
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
-    function W(r) {
+    function I(r) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            W = function r(e) {
+            I = function r(e) {
                 return typeof e;
             };
         } else {
-            W = function r(e) {
+            I = function r(e) {
                 return e && typeof Symbol === "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
             };
         }
-        return W(r);
+        return I(r);
     }
-    function I() {
-        I = Object.assign || function(r) {
+    function R() {
+        R = Object.assign || function(r) {
             for (var e = 1; e < arguments.length; e++) {
                 var a = arguments[e];
                 for (var o in a) {
@@ -506,11 +525,11 @@
             }
             return r;
         };
-        return I.apply(this, arguments);
+        return R.apply(this, arguments);
     }
-    function L(r, e) {
+    function V(r, e) {
         if (r == null) return {};
-        var a = M(r, e);
+        var a = W(r, e);
         var o, i;
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(r);
@@ -523,7 +542,7 @@
         }
         return a;
     }
-    function M(r, e) {
+    function W(r, e) {
         if (r == null) return {};
         var a = {};
         var o = Object.keys(r);
@@ -535,12 +554,12 @@
         }
         return a;
     }
-    function z(r, e) {
+    function q(r, e) {
         if (!(r instanceof e)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function F(r, e) {
+    function E(r, e) {
         for (var a = 0; a < e.length; a++) {
             var o = e[a];
             o.enumerable = o.enumerable || false;
@@ -549,12 +568,12 @@
             Object.defineProperty(r, o.key, o);
         }
     }
-    function G(r, e, a) {
-        if (e) F(r.prototype, e);
-        if (a) F(r, a);
+    function M(r, e, a) {
+        if (e) E(r.prototype, e);
+        if (a) E(r, a);
         return r;
     }
-    function J(r, e) {
+    function L(r, e) {
         if (typeof e !== "function" && e !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -565,41 +584,41 @@
                 configurable: true
             }
         });
-        if (e) K(r, e);
+        if (e) z(r, e);
     }
-    function K(r, e) {
-        K = Object.setPrototypeOf || function r(e, a) {
+    function z(r, e) {
+        z = Object.setPrototypeOf || function r(e, a) {
             e.__proto__ = a;
             return e;
         };
-        return K(r, e);
+        return z(r, e);
     }
-    function Q(r) {
-        var e = Y();
+    function U(r) {
+        var e = J();
         return function a() {
-            var o = Z(r), i;
+            var o = K(r), i;
             if (e) {
-                var t = Z(this).constructor;
+                var t = K(this).constructor;
                 i = Reflect.construct(o, arguments, t);
             } else {
                 i = o.apply(this, arguments);
             }
-            return U(this, i);
+            return F(this, i);
         };
     }
-    function U(r, e) {
-        if (e && (W(e) === "object" || typeof e === "function")) {
+    function F(r, e) {
+        if (e && (I(e) === "object" || typeof e === "function")) {
             return e;
         }
-        return X(r);
+        return G(r);
     }
-    function X(r) {
+    function G(r) {
         if (r === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return r;
     }
-    function Y() {
+    function J() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -610,13 +629,13 @@
             return false;
         }
     }
-    function Z(r) {
-        Z = Object.setPrototypeOf ? Object.getPrototypeOf : function r(e) {
+    function K(r) {
+        K = Object.setPrototypeOf ? Object.getPrototypeOf : function r(e) {
             return e.__proto__ || Object.getPrototypeOf(e);
         };
-        return Z(r);
+        return K(r);
     }
-    function rr(r, e, a) {
+    function Q(r, e, a) {
         if (e in r) {
             Object.defineProperty(r, e, {
                 value: a,
@@ -629,9 +648,41 @@
         }
         return r;
     }
-    var er = {
+    function X(r) {
+        return er(r) || rr(r) || Z(r) || Y();
+    }
+    function Y() {
+        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+    function Z(r, e) {
+        if (!r) return;
+        if (typeof r === "string") return ar(r, e);
+        var a = Object.prototype.toString.call(r).slice(8, -1);
+        if (a === "Object" && r.constructor) a = r.constructor.name;
+        if (a === "Map" || a === "Set") return Array.from(r);
+        if (a === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)) return ar(r, e);
+    }
+    function rr(r) {
+        if (typeof Symbol !== "undefined" && Symbol.iterator in Object(r)) return Array.from(r);
+    }
+    function er(r) {
+        if (Array.isArray(r)) return ar(r);
+    }
+    function ar(r, e) {
+        if (e == null || e > r.length) e = r.length;
+        for (var a = 0, o = new Array(e); a < e; a++) {
+            o[a] = r[a];
+        }
+        return o;
+    }
+    var or = [ "default", "secondary", "primary", "destructive", "subtle" ];
+    var ir = [].concat(or, [ "pill" ]);
+    var tr = [].concat(or, [ "toggle", "flat" ]);
+ // Array.from(new Set... is used to de-duplicate the appearances
+        var lr = Array.from(new Set([].concat(X(ir), X(tr))));
+    var nr = {
         action: t().string,
-        appearance: t().oneOf([ "default", "secondary", "primary", "destructive", "pill", "toggle", "flat" ]),
+        appearance: t().oneOf([ "default", "secondary", "primary", "destructive", "subtle", "pill", "toggle", "flat" ]),
         append: t().bool,
         children: t().node,
         disabled: t().oneOfType([ t().bool, t().oneOf([ "dimmed" ]) ]),
@@ -644,57 +695,32 @@
         splunkTheme: t().object,
         to: t().string
     };
-    var ar = {
+    var sr = {
         appearance: "default",
         append: false,
         disabled: false,
         error: false,
         inline: true,
         openInNewContext: false,
-        prepend: false,
-        selected: false
+        prepend: false
     };
-    var or = function r(e, a) {
-        var o = {
-            default: "enterpriseDefault",
-            destructive: "enterpriseError",
-            primary: "enterprisePrimary",
-            secondary: "enterpriseSecondary",
-            pill: "enterprisePill",
-            toggle: "enterpriseDefault",
-            flat: "enterpriseDefault"
-        };
-        var i = {
-            default: "prismaDefault",
-            destructive: "prismaDestructive",
-            primary: "prismaPrimary",
-            secondary: "prismaSecondary",
-            pill: "prismaSecondary",
-            toggle: "prismaToggle",
-            flat: "prismaFlat"
-        };
-        if (a === "enterprise") {
-            return o[e];
-        }
-        return i[e];
-    };
-    var ir =  function(r) {
-        J(a, r);
-        var e = Q(a);
+    var cr =  function(r) {
+        L(a, r);
+        var e = U(a);
         function a() {
             var r;
-            z(this, a);
+            q(this, a);
             for (var o = arguments.length, i = new Array(o), t = 0; t < o; t++) {
                 i[t] = arguments[t];
             }
             r = e.call.apply(e, [ this ].concat(i));
-            rr(X(r), "component", null);
-            rr(X(r), "handleMount", (function(e) {
+            Q(G(r), "component", null);
+            Q(G(r), "handleMount", (function(e) {
                 r.component = e;
             }));
             return r;
         }
-        G(a, [ {
+        M(a, [ {
             key: "focus",
             /**
      * Places focus on the button.
@@ -704,37 +730,46 @@
                 (e = this.component) === null || e === void 0 ? void 0 : e.focus();
             }
         }, {
-            key: "render",
+            key: "getVariant",
             value: function r() {
-                var e = this.props, a = e.appearance, i = e.append, t = e.children, n = e.onClick, s = e.disabled, d = e.error, v = e.prepend, b = e.selected, u = e.splunkTheme, p = L(e, [ "appearance", "append", "children", "onClick", "disabled", "error", "prepend", "selected", "splunkTheme" ]);
-                var f = a;
-                if (u.isEnterprise) {
-                    f = d ? "destructive" : a;
+                var e = this.props, a = e.appearance, o = e.error, i = e.splunkTheme;
+                var t = a;
+                if (i.family === "enterprise") {
+                    if (o) {
+                        t = "destructive";
+                    } else if (!ir.includes(a)) {
+                        t = "default";
+                    }
+                } else if (i.family === "prisma" && !tr.includes(a)) {
+                    t = "secondary";
                 }
+                return t;
+            }
+        }, {
+            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 = V(e, [ "append", "children", "error", "prepend", "selected" ]);
                 
-                return o().createElement(V, I({
-                    "aria-disabled": s === "dimmed" || undefined,
-                    "aria-invalid": d,
+                return o().createElement(T, R({
+                    "aria-invalid": t,
+                    "aria-pressed": n,
                     "data-test": "button-simple",
-                    disabled: s === true,
                     ref: this.handleMount,
-                    $variant: or(f, u.family),
-                    $append: i,
-                    $prepend: v,
-                    $selected: b,
-                    $error: d
-                }, p, {
-                    onClick: n && !s ? n : undefined
-                }), t, b &&  o().createElement(c(), null, (0, l._)("Selected")));
+                    $variant: this.getVariant(),
+                    $append: a,
+                    $prepend: l,
+                    $selected: n || false,
+                    $error: t
+                }, s), i);
             }
         } ]);
         return a;
     }(a.Component);
-    rr(ir, "defaultProps", ar);
-    rr(ir, "propTypes", er);
-    var tr = (0, n.withSplunkTheme)(ir);
-    tr.propTypes = ir.propTypes;
-    /* harmony default export */    const lr = tr;
+    Q(cr, "defaultProps", sr);
+    Q(cr, "propTypes", nr);
+    var dr = (0, l.withSplunkTheme)(cr);
+    dr.propTypes = cr.propTypes;
+    /* harmony default export */    const vr = dr;
     // CONCATENATED MODULE: ./src/ButtonSimple/index.ts
     module.exports = e;
     /******/})();