@splunk/react-ui 4.31.0 → 4.33.0

package/ButtonSimple.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ r.n = e => {
-            /******/ var o = e && e.__esModule ? 
+            /******/ var a = e && e.__esModule ? 
             /******/ () => e["default"]
             /******/ : () => e
             /******/;
-            r.d(o, {
-                a: o
+            r.d(a, {
+                a
             });
-            /******/            return o;
+            /******/            return a;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ r.d = (e, o) => {
-            /******/ for (var a in o) {
-                /******/ if (r.o(o, a) && !r.o(e, a)) {
-                    /******/ Object.defineProperty(e, a, {
+        /******/ r.d = (e, a) => {
+            /******/ for (var o in a) {
+                /******/ if (r.o(a, o) && !r.o(e, o)) {
+                    /******/ Object.defineProperty(e, o, {
                         enumerable: true,
-                        get: o[a]
+                        get: a[o]
                     });
                     /******/                }
                 /******/            }
@@ -61,305 +61,520 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        default: () => /* reexport */ Z
+        default: () => /* reexport */ vr
     });
     // CONCATENATED MODULE: external "react"
-    const o = require("react");
-    var a =  r.n(o);
+    const a = require("react");
+    var o =  r.n(a);
     // 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 b =  r.n(d);
+    const n = require("styled-components");
+    var s =  r.n(n);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const v = require("@splunk/react-ui/Clickable");
-    var u =  r.n(v);
+    const c = require("@splunk/react-ui/Clickable");
+    var d =  r.n(c);
+    // CONCATENATED MODULE: external "lodash/merge"
+    const v = require("lodash/merge");
+    var b =  r.n(v);
+    // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
+    function u(r) {
+        "@babel/helpers - typeof";
+        if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+            u = function r(e) {
+                return typeof e;
+            };
+        } else {
+            u = function r(e) {
+                return e && typeof Symbol === "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
+            };
+        }
+        return u(r);
+    }
+    var p = [ "primary", "secondary", "destructive", "subtle" ];
+    /**
+ * These enterprise... values don't exist in Enterprise @splunk/themes
+ * They're provided here for TypeScript compatibility
+ */    var f = {
+        active: {
+            dark: "rgba(0, 0, 0, 0.2)",
+            light: "rgba(0, 0, 0, 0.07)"
+        },
+        hover: {
+            dark: "rgba(255, 255, 255, 0.05)",
+            light: "rgba(0, 0, 0, 0.03)"
+        },
+        selected: {
+            dark: "rgba(255, 255, 255, 0.1)",
+            light: "rgba(0, 0, 0, 0.04)"
+        }
+    };
+    var g = {
+        dark: "#272a2f",
+        light: "#eeeeee"
+    };
+    var y = {
+        dark: "rgba(255, 255, 255, 0.15)",
+        light: "rgba(0, 0, 0, 0.1)"
+    };
+    function h(r) {
+        var e = "transparent";
+        var a = "transparent";
+        var o = (0, l.pick)({
+            enterprise: y,
+            prisma: l.variables.interactiveColorBackgroundDisabled
+        });
+        var i = (0, l.pick)({
+            enterprise: {
+                dark: l.mixins.overlayColors(y.dark, f.selected.dark),
+                light: l.mixins.overlayColors(y.light, f.selected.light)
+            },
+            prisma: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
+        });
+        var t = "transparent";
+        var n = "transparent";
+        var s;
+        var c;
+        var d = l.variables.contentColorActive;
+        var v = l.variables.contentColorDisabled;
+        switch (r) {
+          case "primary":
+            {
+                e = l.variables.interactiveColorPrimary;
+                a = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.active.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.active.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayActive)
+                });
+                t = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.hover.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.hover.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover)
+                });
+                n = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.selected.light),
+                        dark: l.mixins.overlayColors(l.variables.interactiveColorPrimary, f.selected.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlaySelected)
+                });
+                d = l.variables.contentColorInverted;
+                break;
+            }
+
+          case "destructive":
+            {
+                e = l.variables.accentColorNegative;
+                a = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.active.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.active.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayActive)
+                });
+                t = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.hover.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.hover.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover)
+                });
+                n = (0, l.pick)({
+                    enterprise: {
+                        light: l.mixins.overlayColors(l.variables.accentColorNegative, f.selected.light),
+                        dark: l.mixins.overlayColors(l.variables.accentColorNegative, f.selected.dark)
+                    },
+                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlaySelected)
+                });
+                d = l.variables.contentColorInverted;
+                break;
+            }
+
+          case "secondary":
+            s = l.variables.interactiveColorBorder;
+            c = l.variables.interactiveColorBorderDisabled;
+            e = (0, l.pick)({
+                enterprise: g,
+                prisma: l.variables.interactiveColorBackground
+            });
+            a = (0, l.pick)({
+                enterprise: f.active,
+                prisma: l.variables.interactiveColorOverlayActive
+            });
+            t = (0, l.pick)({
+                enterprise: f.hover,
+                prisma: l.variables.interactiveColorOverlayHover
+            });
+            n = (0, l.pick)({
+                enterprise: f.selected,
+                prisma: l.variables.interactiveColorOverlaySelected
+            });
+            break;
+
+          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, l.pick)({
+                enterprise: f.hover,
+                prisma: l.variables.interactiveColorOverlayHover
+            });
+            n = (0, l.pick)({
+                enterprise: f.selected,
+                prisma: l.variables.interactiveColorOverlaySelected
+            });
+            break;
+
+          default:
+        }
+        var b = {
+            background: e,
+            backgroundActive: a,
+            backgroundDisabled: o,
+            backgroundDisabledSelected: i,
+            backgroundHover: t,
+            backgroundSelected: n,
+            borderColor: s,
+            borderColorDisabled: c,
+            color: d,
+            colorDisabled: v
+        };
+        return b;
+    }
+    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 && u(r) === "object" && e === undefined) {
+            o = r;
+        }
+        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, 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;}", "}&: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, 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, 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, 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 m = k;
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var p = (0, d.css)([ "", " cursor:pointer;position:relative;border-radius:", ";&:focus,&:hover{z-index:3;}" ], n.mixins.reset("block"), n.variables.borderRadius);
-    /* Setting border-radius to 0.1px creates a rounded shadow, */    var f = (0, d.css)([ "", " ", "" ], (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;" ]);
-    }), (function(r) {
-        var e = r.$prepend;
-        return e && (0, d.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
-    }));
-    var g = (0, d.css)([ "", " ", " ", " &:not([disabled],[aria-disabled='true']){color:", ";transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";", "}", " ", " &:active{background-color:", ";transition:none;}&:focus{background-color:", ";&:active{background-color:", ";}}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}&:not([disabled]){&:focus{box-shadow:", ";}}" ], p, (0, 
-    n.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "font-weight:", ";" ], n.variables.fontWeightSemiBold),
-        prismaDefault: (0, d.css)([ "border:1px solid ", ";font-weight:", ";" ], n.variables.interactiveColorBorder, n.variables.fontWeightSemiBold),
-        prismaToggle: (0, d.css)([ "border:1px solid ", ";font-weight:normal;" ], n.variables.interactiveColorBorder)
-    }), f, n.variables.contentColorActive, 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']{", "}" ], (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"
+        }))
+    }), 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)([ "background-color:", ";border-color:", ";&:hover{background-color:", ";}" ], n.variables.interactiveColorOverlaySelected, 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);
-    }), n.variables.interactiveColorOverlayActive, n.variables.interactiveColorOverlayHover, n.variables.interactiveColorOverlayActive, n.variables.interactiveColorBorderDisabled, n.variables.contentColorDisabled, (function(r) {
+        return e && (0, n.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
+    }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "background-color:", ";" ], n.mixins.overlayColors(n.variables.interactiveColorBackgroundDisabled, n.variables.interactiveColorOverlaySelected));
-    }), n.variables.focusShadow);
-    var y = (0, d.css)([ "&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";background-color:", ";cursor:not-allowed;", "}" ], n.variables.interactiveColorBorderDisabled, n.variables.contentColorDisabled, n.variables.interactiveColorBackgroundDisabled, (function(r) {
-        return r && (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 h = (0, d.css)([ "", " font-weight:", ";border-radius:", ";", " &:not([disabled],[aria-disabled='true']){color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;background-color:", ";&:hover,&:focus{background-color:", ";}&:hover{box-shadow:", ";}&:active{background-color:", ";transition:none;}}&:not([disabled]){&:focus{box-shadow:", ";}}", "" ], p, n.variables.fontWeightSemiBold, n.variables.borderRadius, f, n.variables.contentColorInverted, (0, 
-    n.pickVariant)("$selected", {
-        false: (0, n.pickVariant)("$variant", {
-            prismaPrimary: n.variables.interactiveColorPrimary,
-            prismaDestructive: n.variables.accentColorNegative
-        }),
-        true: (0, n.pickVariant)("$variant", {
-            prismaPrimary: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlaySelected),
-            prismaDestructive: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlaySelected)
+    var x = (0, n.css)([ "", " font-weight:", ";&:focus{background-color:", ";}&:hover{box-shadow:", ";}" ], (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)
         })
-    }), (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, (0, n.pickVariant)("$variant", {
-        prismaPrimary: n.mixins.overlayColors(n.variables.interactiveColorPrimary, n.variables.interactiveColorOverlayActive),
-        prismaDestructive: n.mixins.overlayColors(n.variables.accentColorNegative, n.variables.interactiveColorOverlayActive)
-    }), n.variables.focusShadow, y);
-    var k = (0, d.css)([ "", " font-weight:", ";border-radius:", ";", " &:not([disabled],[aria-disabled='true']){color:", ";background-color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{background-color:", ";box-shadow:", ";}&:active{background-color:", ";transition:none;}&:focus{background-color:", ";}}&:not([disabled]){&:focus{box-shadow:", ";}}", "" ], p, n.variables.fontWeightSemiBold, n.variables.borderRadius, f, n.variables.contentColorActive, n.variables.interactiveColorBackground, (function(r) {
-        return r && (0, d.css)([ "background-color:", ";" ], n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlaySelected));
-    }), n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover), n.variables.hoverShadow, n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayActive), n.mixins.overlayColors(n.variables.interactiveColorBackground, n.variables.interactiveColorOverlayHover), n.variables.focusShadow, y);
+    }), l.variables.fontWeightSemiBold, (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);
     // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
-    var m = "#1A8929";
+    var w = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
-        var C = "#235823";
+        var S = "#235823";
  // SUI-2439 to meet WCAG AA compliance
-        var x = (0, d.css)([ "", " border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], n.mixins.reset("block"), n.variables.borderRadius);
-    var w = (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 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, 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:", ";", "}" ], x, (0, 
-    n.pick)({
-        light: (0, d.css)([ "1px solid ", "" ], n.variables.gray60),
-        dark: n.variables.border
-    }), w, (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:", ";" ], S),
-        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:", ";", ";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:", ";", "}" ], O, (0, 
+    l.pick)({
+        light: (0, n.css)([ "1px solid ", "" ], l.variables.gray60),
+        dark: l.variables.border
+    }), $, (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: O,
-            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)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], (0, 
+        l.pick)({
+            light: P,
+            dark: (0, n.css)([ "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: S,
-        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: D,
+        dark: (0, n.css)([ "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: S,
-            dark: (0, d.css)([ "inset 0 -1px 0 ", "" ], n.variables.gray30)
-        }), n.variables.focusShadow, n.variables.borderColor);
+        return e && (0, n.css)([ "box-shadow:", ",", ",inset -1px 0 0 ", ";" ], (0, l.pick)({
+            light: D,
+            dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray30)
+        }), l.variables.focusShadow, l.variables.borderColor);
     }), (function(r) {
-        var e = r.$append, o = r.$selected;
-        return e && o && (0, n.pick)({
-            light: (0, d.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, 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)
+        var e = r.$append, a = r.$selected;
+        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: S,
-        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: D,
+        dark: (0, n.css)([ "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:", ";" ], O, 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 P = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
-    var B = (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;", "}" ], x, n.variables.fontWeightSemiBold, w, m, 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:", ";" ], P, C);
+        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 ", ";" ], m);
-    }), 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:", ";" ], P, n.variables.brandColorD20);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, l.variables.brandColorD20);
     }));
-    var j = (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;", "}" ], x, n.variables.fontWeightSemiBold, w, 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:", ";" ], P, 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:", ";" ], P, n.variables.errorColorD40);
+        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], B, l.variables.errorColorD40);
     }));
-    var T = (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;", "}" ], x, (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 _ = b()(u()).withConfig({
+    var T = s()(d()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
-    })([ "", "" ], (0, n.pickVariant)("$variant", {
-        enterpriseDefault: D,
-        enterpriseSecondary: D,
-        enterprisePrimary: B,
-        enterpriseError: j,
-        enterpriseDestructive: j,
-        enterprisePill: T,
-        prismaDefault: g,
-        prismaDestructive: h,
-        prismaPrimary: h,
-        prismaSecondary: g,
-        prismaToggle: g,
-        prismaFlat: k
+    })([ "", " ", "" ], (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, 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 R(r) {
+    function I(r) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            R = function r(e) {
+            I = function r(e) {
                 return typeof e;
             };
         } else {
-            R = function r(e) {
+            I = function r(e) {
                 return e && typeof Symbol === "function" && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e;
             };
         }
-        return R(r);
+        return I(r);
     }
-    function A() {
-        A = Object.assign || function(r) {
+    function R() {
+        R = Object.assign || function(r) {
             for (var e = 1; e < arguments.length; e++) {
-                var o = arguments[e];
-                for (var a in o) {
-                    if (Object.prototype.hasOwnProperty.call(o, a)) {
-                        r[a] = o[a];
+                var a = arguments[e];
+                for (var o in a) {
+                    if (Object.prototype.hasOwnProperty.call(a, o)) {
+                        r[o] = a[o];
                     }
                 }
             }
             return r;
         };
-        return A.apply(this, arguments);
+        return R.apply(this, arguments);
     }
-    function E(r, e) {
+    function V(r, e) {
         if (r == null) return {};
-        var o = H(r, e);
-        var a, i;
+        var a = W(r, e);
+        var o, i;
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(r);
             for (i = 0; i < t.length; i++) {
-                a = t[i];
-                if (e.indexOf(a) >= 0) continue;
-                if (!Object.prototype.propertyIsEnumerable.call(r, a)) continue;
-                o[a] = r[a];
+                o = t[i];
+                if (e.indexOf(o) >= 0) continue;
+                if (!Object.prototype.propertyIsEnumerable.call(r, o)) continue;
+                a[o] = r[o];
             }
         }
-        return o;
+        return a;
     }
-    function H(r, e) {
+    function W(r, e) {
         if (r == null) return {};
-        var o = {};
-        var a = Object.keys(r);
+        var a = {};
+        var o = Object.keys(r);
         var i, t;
-        for (t = 0; t < a.length; t++) {
-            i = a[t];
+        for (t = 0; t < o.length; t++) {
+            i = o[t];
             if (e.indexOf(i) >= 0) continue;
-            o[i] = r[i];
+            a[i] = r[i];
         }
-        return o;
+        return a;
     }
-    function N(r, e) {
+    function q(r, e) {
         if (!(r instanceof e)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function V(r, e) {
-        for (var o = 0; o < e.length; o++) {
-            var a = e[o];
-            a.enumerable = a.enumerable || false;
-            a.configurable = true;
-            if ("value" in a) a.writable = true;
-            Object.defineProperty(r, a.key, a);
+    function E(r, e) {
+        for (var a = 0; a < e.length; a++) {
+            var o = e[a];
+            o.enumerable = o.enumerable || false;
+            o.configurable = true;
+            if ("value" in o) o.writable = true;
+            Object.defineProperty(r, o.key, o);
         }
     }
-    function q(r, e, o) {
-        if (e) V(r.prototype, e);
-        if (o) V(r, o);
+    function M(r, e, a) {
+        if (e) E(r.prototype, e);
+        if (a) E(r, a);
         return r;
     }
-    function W(r, e) {
+    function L(r, e) {
         if (typeof e !== "function" && e !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -370,41 +585,41 @@
                 configurable: true
             }
         });
-        if (e) I(r, e);
+        if (e) z(r, e);
     }
-    function I(r, e) {
-        I = Object.setPrototypeOf || function r(e, o) {
-            e.__proto__ = o;
+    function z(r, e) {
+        z = Object.setPrototypeOf || function r(e, a) {
+            e.__proto__ = a;
             return e;
         };
-        return I(r, e);
+        return z(r, e);
     }
-    function L(r) {
-        var e = F();
-        return function o() {
-            var a = G(r), i;
+    function U(r) {
+        var e = J();
+        return function a() {
+            var o = K(r), i;
             if (e) {
-                var t = G(this).constructor;
-                i = Reflect.construct(a, arguments, t);
+                var t = K(this).constructor;
+                i = Reflect.construct(o, arguments, t);
             } else {
-                i = a.apply(this, arguments);
+                i = o.apply(this, arguments);
             }
-            return M(this, i);
+            return F(this, i);
         };
     }
-    function M(r, e) {
-        if (e && (R(e) === "object" || typeof e === "function")) {
+    function F(r, e) {
+        if (e && (I(e) === "object" || typeof e === "function")) {
             return e;
         }
-        return z(r);
+        return G(r);
     }
-    function z(r) {
+    function G(r) {
         if (r === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return r;
     }
-    function F() {
+    function J() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -415,28 +630,60 @@
             return false;
         }
     }
-    function G(r) {
-        G = 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 G(r);
+        return K(r);
     }
-    function J(r, e, o) {
+    function Q(r, e, a) {
         if (e in r) {
             Object.defineProperty(r, e, {
-                value: o,
+                value: a,
                 enumerable: true,
                 configurable: true,
                 writable: true
             });
         } else {
-            r[e] = o;
+            r[e] = a;
         }
         return r;
     }
-    var K = {
+    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" ]) ]),
@@ -449,57 +696,32 @@
         splunkTheme: t().object,
         to: t().string
     };
-    var Q = {
+    var sr = {
         appearance: "default",
         append: false,
         disabled: false,
         error: false,
         inline: true,
         openInNewContext: false,
-        prepend: false,
-        selected: false
+        prepend: false
     };
-    var U = function r(e, o) {
-        var a = {
-            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 (o === "enterprise") {
-            return a[e];
-        }
-        return i[e];
-    };
-    var X =  function(r) {
-        W(o, r);
-        var e = L(o);
-        function o() {
+    var cr =  function(r) {
+        L(a, r);
+        var e = U(a);
+        function a() {
             var r;
-            N(this, o);
-            for (var a = arguments.length, i = new Array(a), t = 0; t < a; t++) {
+            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));
-            J(z(r), "component", null);
-            J(z(r), "handleMount", (function(e) {
+            Q(G(r), "component", null);
+            Q(G(r), "handleMount", (function(e) {
                 r.component = e;
             }));
             return r;
         }
-        q(o, [ {
+        M(a, [ {
             key: "focus",
             /**
      * Places focus on the button.
@@ -509,37 +731,46 @@
                 (e = this.component) === null || e === void 0 ? void 0 : e.focus();
             }
         }, {
-            key: "render",
+            key: "getVariant",
             value: function r() {
-                var e = this.props, o = e.appearance, i = e.append, t = e.children, n = e.onClick, s = e.disabled, d = e.error, b = e.prepend, v = e.selected, u = e.splunkTheme, p = E(e, [ "appearance", "append", "children", "onClick", "disabled", "error", "prepend", "selected", "splunkTheme" ]);
-                var f = o;
-                if (u.isEnterprise) {
-                    f = d ? "destructive" : o;
+                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 a().createElement(_, A({
-                    "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: U(f, u.family),
-                    $append: i,
-                    $prepend: b,
-                    $selected: v,
-                    $error: d
-                }, p, {
-                    onClick: n && !s ? n : undefined
-                }), t, v &&  a().createElement(c(), null, (0, l._)("Selected")));
+                    $variant: this.getVariant(),
+                    $append: a,
+                    $prepend: l,
+                    $selected: n || false,
+                    $error: t
+                }, s), i);
             }
         } ]);
-        return o;
-    }(o.Component);
-    J(X, "defaultProps", Q);
-    J(X, "propTypes", K);
-    var Y = (0, n.withSplunkTheme)(X);
-    Y.propTypes = X.propTypes;
-    /* harmony default export */    const Z = Y;
+        return a;
+    }(a.Component);
+    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;
     /******/})();