@splunk/react-ui 4.43.0 → 5.0.0-beta.2

package/ButtonSimple.js

@@ -9,26 +9,26 @@
     /******/    (() => {
         /******/ // getDefaultExport function for compatibility with non-harmony modules
         /******/ r.n = e => {
-            /******/ var a = e && e.__esModule ? 
+            /******/ var o = e && e.__esModule ? 
             /******/ () => e["default"]
             /******/ : () => e
             /******/;
-            r.d(a, {
-                a
+            r.d(o, {
+                a: o
             });
-            /******/            return a;
+            /******/            return o;
             /******/        };
         /******/    })();
     /******/
     /******/ /* webpack/runtime/define property getters */
     /******/    (() => {
         /******/ // define getter functions for harmony exports
-        /******/ r.d = (e, a) => {
-            /******/ for (var o in a) {
-                /******/ if (r.o(a, o) && !r.o(e, o)) {
-                    /******/ Object.defineProperty(e, o, {
+        /******/ r.d = (e, o) => {
+            /******/ for (var a in o) {
+                /******/ if (r.o(o, a) && !r.o(e, a)) {
+                    /******/ Object.defineProperty(e, a, {
                         enumerable: true,
-                        get: a[o]
+                        get: o[a]
                     });
                     /******/                }
                 /******/            }
@@ -61,25 +61,26 @@
         r.r(e);
     // EXPORTS
         r.d(e, {
-        default: () => /* reexport */ br
+        buttonMixin: () => /* reexport */ C,
+        default: () => /* reexport */ E
     });
     // CONCATENATED MODULE: external "react"
-    const a = require("react");
-    var o =  r.n(a);
+    const o = require("react");
+    var a =  r.n(o);
     // CONCATENATED MODULE: external "prop-types"
-    const i = require("prop-types");
-    var t =  r.n(i);
-    // CONCATENATED MODULE: external "@splunk/themes"
-    const l = require("@splunk/themes");
+    const t = require("prop-types");
+    var n =  r.n(t);
     // CONCATENATED MODULE: external "styled-components"
-    const n = require("styled-components");
-    var s =  r.n(n);
+    const i = require("styled-components");
+    var c =  r.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const c = require("@splunk/react-ui/Clickable");
-    var b =  r.n(c);
+    const l = require("@splunk/react-ui/Clickable");
+    var s =  r.n(l);
+    // CONCATENATED MODULE: external "@splunk/themes"
+    const d = require("@splunk/themes");
     // CONCATENATED MODULE: external "lodash/merge"
-    const d = require("lodash/merge");
-    var v =  r.n(d);
+    const v = require("lodash/merge");
+    var b =  r.n(v);
     // CONCATENATED MODULE: ./src/ButtonSimple/mixin.ts
     function u(r) {
         "@babel/helpers - typeof";
@@ -89,655 +90,288 @@
             return r && "function" == typeof Symbol && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
         }, u(r);
     }
-    var p = [ "primary", "secondary", "destructive", "subtle" ];
-    function f(r) {
+    var p = [ "primary", "secondary", "destructive", "destructiveSecondary", "subtle" ];
+    function y(r) {
         var e = "transparent";
+        var o = "transparent";
         var a = "transparent";
-        var o = (0, l.pick)({
-            enterprise: {
-                light: l.variables.gray96,
-                dark: l.variables.gray30
-            },
-            prisma: l.variables.interactiveColorBackgroundDisabled
-        });
-        var i = (0, l.pick)({
-            enterprise: {
-                dark: l.variables.gray22,
-                light: l.variables.gray92
-            },
-            prisma: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
-        });
         var t = "transparent";
         var n = "transparent";
-        var s;
+        var i;
         var c;
-        var b = l.variables.contentColorActive;
-        var d = l.variables.contentColorDisabled;
+        var l;
+        var s = d.variables.contentColorActive;
+        var v;
+        var b = d.variables.contentColorDisabled;
+        var u;
         switch (r) {
           case "primary":
             {
-                e = (0, l.pick)({
-                    enterprise: "#1A8929",
-                    prisma: l.variables.interactiveColorPrimary
-                });
-                a = (0, l.pick)({
-                    enterprise: l.variables.brandColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayActive)
-                });
-                t = (0, l.pick)({
-                    enterprise: l.variables.brandColorD50,
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover)
-                });
-                n = (0, l.pick)({
-                    enterprise: "#235823",
-                    prisma: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlaySelected)
-                });
-                b = l.variables.contentColorInverted;
+                e = d.variables.actionColorBackgroundPrimary;
+                o = d.variables.actionColorBackgroundPrimaryActive;
+                a = d.variables.actionColorBackgroundPrimaryDisabled;
+                t = d.variables.actionColorBackgroundPrimaryHover;
+                s = d.variables.contentColorInverted;
+                b = d.variables.contentColorInverted;
                 break;
             }
 
           case "destructive":
             {
-                e = l.variables.accentColorNegative;
-                a = (0, l.pick)({
-                    enterprise: l.variables.errorColorD40,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayActive)
-                });
-                t = (0, l.pick)({
-                    enterprise: l.variables.errorColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover)
-                });
-                n = (0, l.pick)({
-                    enterprise: l.variables.errorColorD30,
-                    prisma: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlaySelected)
-                });
-                b = l.variables.contentColorInverted;
+                e = d.variables.actionColorBackgroundDestructive;
+                o = d.variables.actionColorBackgroundDestructiveActive;
+                a = d.variables.actionColorBackgroundDestructiveDisabled;
+                t = d.variables.actionColorBackgroundDestructiveHover;
+                s = d.variables.contentColorInverted;
+                b = d.variables.contentColorInverted;
+                break;
+            }
+
+          case "destructiveSecondary":
+            {
+                n = d.variables.actionColorBorderDestructiveSecondary;
+                i = d.variables.actionColorBorderDestructiveSecondaryActive;
+                c = d.variables.actionColorBorderDestructiveSecondaryDisabled;
+                l = d.variables.actionColorBorderDestructiveSecondaryHover;
+                e = d.variables.actionColorBackgroundDestructiveSecondary;
+                o = d.variables.actionColorBackgroundDestructiveSecondaryActive;
+                a = d.variables.actionColorBackgroundDestructiveSecondaryDisabled;
+                t = d.variables.actionColorBackgroundDestructiveSecondaryHover;
+                s = d.variables.contentColorNegative;
+                b = d.variables.contentColorNegativeWeak;
                 break;
             }
 
           case "secondary":
-            s = l.variables.interactiveColorBorder;
-            c = l.variables.interactiveColorBorderDisabled;
-            e = (0, l.pick)({
-                enterprise: {
-                    light: l.variables.gray98,
-                    dark: l.variables.gray45
-                },
-                prisma: l.variables.interactiveColorBackground
-            });
-            a = (0, l.pick)({
-                enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
-                },
-                prisma: l.variables.interactiveColorOverlayActive
-            });
-            t = (0, l.pick)({
-                enterprise: {
-                    light: "#ebeeef",
-                    dark: l.variables.gray30
-                },
-                prisma: l.variables.interactiveColorOverlayHover
-            });
-            n = (0, l.pick)({
-                enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
-                },
-                prisma: l.variables.interactiveColorOverlaySelected
-            });
+            n = d.variables.actionColorBorderSecondary;
+            i = d.variables.actionColorBorderSecondaryActive;
+            c = d.variables.actionColorBorderSecondaryDisabled;
+            l = d.variables.actionColorBorderSecondaryHover;
+            e = d.variables.actionColorBackgroundSecondary;
+            o = d.variables.actionColorBackgroundSecondaryActive;
+            t = d.variables.actionColorBackgroundSecondaryHover;
             break;
 
           case "subtle":
-            // TODO: SUI-6304 this should be interactiveColorAccent once that variable is introduced in SUI 5
-            b = l.variables.interactiveColorPrimary;
-            a = (0, l.pick)({
-                enterprise: {
-                    light: l.variables.gray92,
-                    dark: l.variables.gray22
-                },
-                prisma: l.variables.interactiveColorOverlayActive
-            });
-            t = (0, l.pick)({
-                enterprise: {
-                    light: l.variables.linkColor,
-                    dark: l.variables.white
-                },
-                prisma: l.variables.interactiveColorOverlayHover
-            });
-            n = (0, l.pick)({
-                enterprise: "transparent",
-                prisma: l.variables.interactiveColorOverlaySelected
-            });
+            s = d.variables.contentColorAccent;
+            v = d.variables.contentColorAccentStrong;
+            b = d.variables.contentColorAccentWeak;
+            u = d.variables.contentColorAccentStrong;
+            e = d.variables.actionColorBackgroundSubtle;
+            o = d.variables.actionColorBackgroundSubtleActive;
+            t = d.variables.actionColorBackgroundSubtleHover;
             break;
 
           default:
         }
-        var v = {
+        var p = {
             background: e,
-            backgroundActive: a,
-            backgroundDisabled: o,
-            backgroundDisabledSelected: i,
+            backgroundActive: o,
+            backgroundDisabled: a,
             backgroundHover: t,
-            backgroundSelected: n,
-            borderColor: s,
+            borderColor: n,
+            borderColorActive: i,
             borderColorDisabled: c,
-            color: b,
-            colorDisabled: d
+            borderColorHover: l,
+            color: s,
+            colorActive: v,
+            colorDisabled: b,
+            colorHover: u
         };
-        return v;
+        return p;
     }
-    function g(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;
+    function f(r, e) {
+        var o = typeof r === "string" && p.includes(r) ? r : undefined;
+        var a = {};
+        if (o && e !== undefined) {
+            a = e;
+        } else if (o === undefined && u(r) === "object" && e === undefined) {
+            a = r;
         }
-        var i = f(a);
-        var t = v()(i, o), s = t.background, c = t.backgroundActive, b = t.backgroundDisabled, d = t.backgroundDisabledSelected, g = t.backgroundHover, y = t.backgroundSelected, k = t.borderColor, h = t.borderColorDisabled, m = t.color, C = t.colorDisabled;
-        var w = s != null && s !== "transparent";
+        var t = y(o);
+        var n = b()(t, a), c = n.background, l = n.backgroundActive, s = n.backgroundDisabled, v = n.backgroundDisabledSelected, f = n.backgroundHover, C = n.borderColor, g = n.borderColorActive, m = n.borderColorDisabled, k = n.borderColorHover, S = n.color, O = n.colorActive, B = n.colorDisabled, D = n.colorHover;
+        var A = c != null && c !== "transparent";
         return function() {
-            return (0, n.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], l.variables.borderRadius, (function() {
-                return k && (0, n.css)([ "border:1px solid ", ";" ], k);
-            }), (function(r) {
+            return (0, i.css)([ "border:1px solid ", ";border-radius:", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:focus{box-shadow:", ";}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";border-color:", ";color:", ";}&:active{background-color:", ";border-color:", ";color:", ";transition:none;}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], C, d.variables.borderRadius, (function(r) {
                 var e = r.$append;
-                return e && (0, n.css)([ "border-top-right-radius:0.1px;border-bottom-right-radius:0.1px;border-right:none;" ]);
+                return e && (0, i.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, g, c, (function(r) {
+                return e && (0, i.css)([ "border-top-left-radius:0.1px;border-bottom-left-radius:0.1px;" ]);
+            }), d.variables.focusShadow, c, S, f, k, D, l, g, O, m, B, (function(r) {
                 var e = r.$selected;
-                return e && (0, n.css)([ "background-color:", ";" ], y);
-            }), l.variables.focusShadow, h, C, (function(r) {
-                var e = r.$selected;
-                return w && (0, n.css)([ "background-color:", ";" ], e ? d : b);
+                return A && (0, i.css)([ "background-color:", ";" ], e ? v : s);
             }));
         };
     }
-    /* harmony default export */    const y = g;
-    // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var k = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
-    l.pickVariant)("$variant", {
-        secondary: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        default: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        subtle: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
-    }), (function(r) {
-        var e = r.$error;
-        return e && (0, n.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
-    }), (0, l.pickVariant)("$variant", {
-        secondary: (0, n.css)([ "", " font-weight:", ";" ], y("subtle", {
-            color: l.variables.contentColorActive
-        }), l.variables.fontWeightSemiBold),
-        subtle: (0, n.css)([ "", " font-weight:", ";" ], y("subtle", {
-            color: l.variables.contentColorActive
-        }), l.variables.fontWeightSemiBold),
-        default: (0, n.css)([ "", " font-weight:", ";" ], y("secondary", {
-            background: "transparent"
-        }), l.variables.fontWeightSemiBold),
-        toggle: (0, n.css)([ "", " font-weight:normal;" ], y("secondary", {
-            background: "transparent"
-        }))
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
-    }));
-    var h = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0, 
-    l.pickVariant)("$variant", {
-        primary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
-        destructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover),
-        flat: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover)
-    }), l.variables.hoverShadow, (0, l.pickVariant)("$variant", {
-        primary: y("primary", {
-            // this is intentional - the disabled background had always been applying the $selected style
-            // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
-        }),
-        destructive: y("destructive", {
-            // this is intentional - the disabled background had always been applying the $selected style
-            // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected)
-        }),
-        flat: y({
-            // this is intentional - the background had always been applying the $selected style
-            // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            background: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected),
-            backgroundActive: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayActive),
-            // this is intentional - the disabled background had always been applying the $selected style
-            // since beccfde78f787861217353e9149ce213bee0270 so keeping this for visual consistency
-            backgroundDisabled: l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected),
-            backgroundHover: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover),
-            backgroundSelected: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected)
-        })
-    }), l.variables.fontWeightSemiBold);
-    // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
-    var m = "#1A8929";
- // SUI-2439 to meet WCAG AA compliance
-        var C = "#235823";
- // SUI-2439 to meet WCAG AA compliance
-        var w = (0, n.css)([ "border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], l.variables.borderRadius);
-    var x = (0, n.css)([ "", " ", "" ], (function(r) {
-        var e = r.$append;
-        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, 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, n.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], w, (0, 
-    l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.borderColor
-    }), x, (0, l.pickVariant)("$variant", {
-        default: "normal",
-        secondary: l.variables.fontWeightSemiBold
-    }), (0, l.pick)({
-        light: l.variables.gray98,
-        dark: l.variables.gray45
-    }), (0, l.pick)({
-        light: l.variables.gray45,
-        dark: l.variables.white
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ";" ], S),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray30)
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
-        l.pick)({
-            light: (0, n.css)([ "box-shadow:", ";" ], O),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";" ], l.variables.black)
-        }), (0, l.pick)({
-            light: l.variables.gray92,
-            dark: l.variables.gray22
-        }), (0, l.pick)({
-            light: l.variables.gray60,
-            dark: l.variables.gray20
-        }));
-    }), (0, l.pick)({
-        light: "#ebeeef",
-        dark: l.variables.gray30
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ";" ], S),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray25)
-    }), (0, l.pick)({
-        light: l.variables.gray92,
-        dark: l.variables.gray22
-    }), (0, l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.gray20
-    }), (0, l.pick)({
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray22)
-    }), (function(r) {
-        var e = r.$append;
-        return e && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], S, l.variables.focusShadow, l.variables.borderColor),
-            dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], l.variables.gray30, l.variables.focusShadow, l.variables.borderColor)
-        });
-    }), (function(r) {
-        var e = r.$append, a = r.$selected;
-        return e && a && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, l.variables.focusShadow, l.variables.borderColor),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], l.variables.black, l.variables.focusShadow, l.variables.borderColor)
-        });
-    }), (0, l.pick)({
-        light: (0, n.css)([ "box-shadow:", ",", ";" ], S, l.variables.focusShadow),
-        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], l.variables.gray30, l.variables.focusShadow)
-    }), l.variables.textDisabledColor, (0, l.pick)({
-        light: l.variables.gray96,
-        dark: l.variables.gray30
-    }), (0, l.pick)({
-        light: l.variables.borderLightColor,
-        dark: l.variables.gray30
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, l.pick)({
-            light: (0, n.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], O, l.variables.gray92, l.variables.gray80),
-            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], l.variables.black, l.variables.gray22, l.variables.gray20)
-        });
-    }));
-    var $ = "inset 0 -2px 0 rgba(0, 0, 0, 0.1)";
-    var j = "inset 0 2px 0 rgba(0, 0, 0, 0.1)";
-    var B = (0, n.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";cursor:not-allowed;", "}" ], w, l.variables.fontWeightSemiBold, x, m, l.variables.white, $, (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, C);
-    }), (function(r) {
-        var e = r.$prepend;
-        return e && (0, n.css)([ "border-left:1px solid ", ";" ], m);
-    }), l.variables.brandColorD50, l.variables.brandColorD30, l.variables.brandColorD30, $, l.variables.focusShadow, l.variables.brandColorL30, l.variables.brandColorL10, (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.brandColorD20);
-    }));
-    var P = (0, n.css)([ "", ";font-weight:", ";", " &:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";box-shadow:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " ", " &:hover{background-color:", ";}&:active{background-color:", ";transition:none;}&:focus{&:active{background-color:", ";transition:none;}}}&:not([disabled]){&:focus{box-shadow:", ",", ";}}&[disabled],&[aria-disabled='true']{color:", ";background-color:", ";cursor:not-allowed;", "}" ], w, l.variables.fontWeightSemiBold, x, l.variables.errorColorD10, l.variables.white, $, (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.errorColorD30);
-    }), (function(r) {
-        var e = r.$prepend;
-        return e && (0, n.css)([ "border-left:1px solid ", ";" ], l.variables.errorColorD30);
-    }), l.variables.errorColorD30, l.variables.errorColorD40, l.variables.errorColorD40, $, l.variables.focusShadow, l.variables.errorColorL10, l.variables.errorColorD10, (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";" ], j, l.variables.errorColorD40);
-    }));
-    var A = (0, n.css)([ "", ";color:", ";border:1px solid transparent;&:not([disabled],[aria-disabled='true']){transition:background-color 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", " &:hover{color:", ";background-color:", ";border-color:", ";}", " &:focus{color:", ";}&:active,&[aria-expanded='true']{background-color:", ";transition:none;}}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{color:", ";cursor:not-allowed;", "}" ], w, (0, 
-    l.pick)({
-        light: l.variables.gray45,
-        dark: l.variables.white
-    }), (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";" ], l.variables.accentColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), l.variables.backgroundColorHover, (0, l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.borderColor
-    }), (function(r) {
-        var e = r.$error;
-        return e && (0, n.css)([ "&,&:hover{color:", ";}" ], l.variables.errorColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), (0, l.pick)({
-        light: l.variables.gray92,
-        dark: l.variables.gray22
-    }), l.variables.focusShadow, l.variables.textDisabledColor, (function(r) {
-        var e = r.$selected;
-        return e && (0, n.css)([ "border-color:", ";" ], l.variables.borderLightColor);
-    }));
+    /* harmony default export */    const C = f;
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
-    var H = s()(b()).withConfig({
-        displayName: "ButtonSimpleStyles__StyledClickable",
-        componentId: "vlarwe-0"
-    })([ "", " ", "" ], (function(r) {
-        var e = r.to;
-        return e ? (0, n.css)([ "", " align-items:center;justify-content:center;" ], l.mixins.reset("flex")) : (0, 
-        n.css)([ "", "" ], l.mixins.reset("block"));
-    }), (0, l.pick)({
-        enterprise: (0, l.pickVariant)("$variant", {
-            // the four main styles
-            primary: B,
-            secondary: D,
-            destructive: P,
-            subtle: A,
-            // same as "secondary"
-            default: D,
-            // "pill" is an Enterprise-only style
-            pill: A,
-            // fallbacks for styles unsupported by Enterprise
-            toggle: D,
-            flat: D
-        }),
-        prisma: (0, l.pickVariant)("$variant", {
-            // the four main styles
-            primary: h,
-            secondary: k,
-            destructive: h,
-            subtle: k,
-            // same as "secondary"
-            default: k,
-            // "toggle" and "flat" are Prisma-only styles
-            toggle: k,
-            flat: h,
-            // fallback for "pill" which is not supported by Prisma
-            pill: k
-        })
-    }));
-    // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
-    function T(r) {
+    function g(r) {
         "@babel/helpers - typeof";
-        return T = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(r) {
+        return g = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(r) {
             return typeof r;
         } : function(r) {
             return r && "function" == typeof Symbol && r.constructor === Symbol && r !== Symbol.prototype ? "symbol" : typeof r;
-        }, T(r);
+        }, g(r);
     }
-    function _() {
-        return _ = Object.assign ? Object.assign.bind() : function(r) {
-            for (var e = 1; e < arguments.length; e++) {
-                var a = arguments[e];
-                for (var o in a) {
-                    ({}).hasOwnProperty.call(a, o) && (r[o] = a[o]);
-                }
-            }
-            return r;
-        }, _.apply(null, arguments);
-    }
-    function N(r, e) {
-        if (null == r) return {};
-        var a, o, i = I(r, e);
+    function m(r, e) {
+        var o = Object.keys(r);
         if (Object.getOwnPropertySymbols) {
-            var t = Object.getOwnPropertySymbols(r);
-            for (o = 0; o < t.length; o++) {
-                a = t[o], e.includes(a) || {}.propertyIsEnumerable.call(r, a) && (i[a] = r[a]);
-            }
-        }
-        return i;
-    }
-    function I(r, e) {
-        if (null == r) return {};
-        var a = {};
-        for (var o in r) {
-            if ({}.hasOwnProperty.call(r, o)) {
-                if (e.includes(o)) continue;
-                a[o] = r[o];
-            }
+            var a = Object.getOwnPropertySymbols(r);
+            e && (a = a.filter((function(e) {
+                return Object.getOwnPropertyDescriptor(r, e).enumerable;
+            }))), o.push.apply(o, a);
         }
-        return a;
-    }
-    function V(r, e) {
-        if (!(r instanceof e)) throw new TypeError("Cannot call a class as a function");
+        return o;
     }
-    function E(r, e) {
-        for (var a = 0; a < e.length; a++) {
-            var o = e[a];
-            o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), 
-            Object.defineProperty(r, J(o.key), o);
+    function k(r) {
+        for (var e = 1; e < arguments.length; e++) {
+            var o = null != arguments[e] ? arguments[e] : {};
+            e % 2 ? m(Object(o), !0).forEach((function(e) {
+                S(r, e, o[e]);
+            })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(r, Object.getOwnPropertyDescriptors(o)) : m(Object(o)).forEach((function(e) {
+                Object.defineProperty(r, e, Object.getOwnPropertyDescriptor(o, e));
+            }));
         }
-    }
-    function W(r, e, a) {
-        return e && E(r.prototype, e), a && E(r, a), Object.defineProperty(r, "prototype", {
-            writable: !1
-        }), r;
-    }
-    function q(r, e) {
-        if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
-        r.prototype = Object.create(e && e.prototype, {
-            constructor: {
-                value: r,
-                writable: !0,
-                configurable: !0
-            }
-        }), Object.defineProperty(r, "prototype", {
-            writable: !1
-        }), e && M(r, e);
-    }
-    function M(r, e) {
-        return M = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(r, e) {
-            return r.__proto__ = e, r;
-        }, M(r, e);
-    }
-    function R(r) {
-        var e = U();
-        return function() {
-            var a, o = F(r);
-            if (e) {
-                var i = F(this).constructor;
-                a = Reflect.construct(o, arguments, i);
-            } else a = o.apply(this, arguments);
-            return L(this, a);
-        };
-    }
-    function L(r, e) {
-        if (e && ("object" == T(e) || "function" == typeof e)) return e;
-        if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
-        return z(r);
-    }
-    function z(r) {
-        if (void 0 === r) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         return r;
     }
-    function U() {
-        try {
-            var r = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], (function() {})));
-        } catch (r) {}
-        return (U = function e() {
-            return !!r;
-        })();
-    }
-    function F(r) {
-        return F = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(r) {
-            return r.__proto__ || Object.getPrototypeOf(r);
-        }, F(r);
-    }
-    function G(r, e, a) {
-        return (e = J(e)) in r ? Object.defineProperty(r, e, {
-            value: a,
+    function S(r, e, o) {
+        return (e = O(e)) in r ? Object.defineProperty(r, e, {
+            value: o,
             enumerable: !0,
             configurable: !0,
             writable: !0
-        }) : r[e] = a, r;
+        }) : r[e] = o, r;
     }
-    function J(r) {
-        var e = K(r, "string");
-        return "symbol" == T(e) ? e : e + "";
+    function O(r) {
+        var e = B(r, "string");
+        return "symbol" == g(e) ? e : e + "";
     }
-    function K(r, e) {
-        if ("object" != T(r) || !r) return r;
-        var a = r[Symbol.toPrimitive];
-        if (void 0 !== a) {
-            var o = a.call(r, e || "default");
-            if ("object" != T(o)) return o;
+    function B(r, e) {
+        if ("object" != g(r) || !r) return r;
+        var o = r[Symbol.toPrimitive];
+        if (void 0 !== o) {
+            var a = o.call(r, e || "default");
+            if ("object" != g(a)) return a;
             throw new TypeError("@@toPrimitive must return a primitive value.");
         }
         return ("string" === e ? String : Number)(r);
     }
-    function Q(r) {
-        return rr(r) || Z(r) || Y(r) || X();
-    }
-    function X() {
-        throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    var D = {
+        borderColor: d.variables.interactiveColorAccentError,
+        borderColorActive: d.variables.interactiveColorAccentError,
+        borderColorHover: d.mixins.overlayColors(d.variables.interactiveColorAccentError, d.variables.interactiveColorBorderHover)
+    };
+    var A = {
+        background: d.variables.interactiveColorBackground,
+        backgroundActive: d.variables.interactiveColorOverlayActive,
+        backgroundHover: d.variables.interactiveColorOverlayHover,
+        borderColor: d.variables.transparent,
+        borderColorActive: d.variables.transparent,
+        borderColorDisabled: d.variables.transparent,
+        borderColorHover: d.variables.transparent,
+        color: d.variables.contentColorActive,
+        colorActive: d.variables.contentColorActive,
+        colorDisable: d.variables.contentColorDisabled,
+        colorHover: d.variables.contentColorActive
+    };
+    var h = {
+        background: d.variables.interactiveColorBackground,
+        backgroundActive: d.variables.interactiveColorOverlayActive,
+        backgroundHover: d.variables.interactiveColorOverlayHover,
+        borderColor: d.variables.interactiveColorBorder,
+        borderColorActive: d.variables.interactiveColorBorderActive,
+        borderColorDisabled: d.variables.interactiveColorBorderDisabled,
+        borderColorHover: d.variables.interactiveColorBorderHover
+    };
+    var j = c()(s()).withConfig({
+        displayName: "ButtonSimpleStyles__StyledClickable",
+        componentId: "vlarwe-0"
+    })([ "", " align-items:center;justify-content:center;&:not([disabled],[aria-disabled='true']){", "}", "" ], d.mixins.reset("flex"), (function(r) {
+        var e = r.$error, o = r.$isMenu;
+        return e && (0, i.css)([ "", "" ], (0, d.pickVariant)("$variant", {
+            default: o ? C("secondary", k(k({}, h), D)) : C("secondary", D),
+            secondary: C("secondary", D),
+            subtle: o ? C("secondary", k(k({}, A), D)) : C("subtle", D)
+        }));
+    }), (function(r) {
+        var e = r.$isMenu;
+        return (0, d.pickVariant)("$variant", {
+            default: e ? C("secondary", h) : C("secondary"),
+            primary: C("primary"),
+            secondary: C("secondary"),
+            subtle: e ? C("secondary", A) : C("subtle"),
+            destructive: C("destructive"),
+            destructiveSecondary: C("destructiveSecondary")
+        });
+    }));
+    // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimple.tsx
+    function w() {
+        return w = Object.assign ? Object.assign.bind() : function(r) {
+            for (var e = 1; e < arguments.length; e++) {
+                var o = arguments[e];
+                for (var a in o) {
+                    ({}).hasOwnProperty.call(o, a) && (r[a] = o[a]);
+                }
+            }
+            return r;
+        }, w.apply(null, arguments);
     }
-    function Y(r, e) {
-        if (r) {
-            if ("string" == typeof r) return er(r, e);
-            var a = {}.toString.call(r).slice(8, -1);
-            return "Object" === a && r.constructor && (a = r.constructor.name), "Map" === a || "Set" === a ? Array.from(r) : "Arguments" === a || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a) ? er(r, e) : void 0;
+    function H(r, e) {
+        if (null == r) return {};
+        var o, a, t = P(r, e);
+        if (Object.getOwnPropertySymbols) {
+            var n = Object.getOwnPropertySymbols(r);
+            for (a = 0; a < n.length; a++) {
+                o = n[a], e.includes(o) || {}.propertyIsEnumerable.call(r, o) && (t[o] = r[o]);
+            }
         }
+        return t;
     }
-    function Z(r) {
-        if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
-    }
-    function rr(r) {
-        if (Array.isArray(r)) return er(r);
-    }
-    function er(r, e) {
-        (null == e || e > r.length) && (e = r.length);
-        for (var a = 0, o = Array(e); a < e; a++) {
-            o[a] = r[a];
+    function P(r, e) {
+        if (null == r) return {};
+        var o = {};
+        for (var a in r) {
+            if ({}.hasOwnProperty.call(r, a)) {
+                if (e.includes(a)) continue;
+                o[a] = r[a];
+            }
         }
         return o;
     }
-    var ar = [ "default", "secondary", "primary", "destructive", "subtle" ];
-    var or = [].concat(ar, [ "pill" ]);
-    var ir = [].concat(ar, [ "toggle", "flat" ]);
-    // Array.from(new Set... is used to de-duplicate the appearances
-        var tr = Array.from(new Set([].concat(Q(or), Q(ir))));
-    var lr = {
-        action: t().string,
-        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" ]) ]),
-        elementRef: t().oneOfType([ t().func, t().object ]),
-        error: t().bool,
-        inline: t().bool,
-        openInNewContext: t().bool,
-        prepend: t().bool,
-        selected: t().bool,
-        splunkTheme: t().object,
-        to: t().string
-    };
-    var nr = {
-        appearance: "default",
-        append: false,
-        disabled: false,
-        error: false,
-        inline: true,
-        openInNewContext: false,
-        prepend: false
+    var x = [ "default", "secondary", "primary", "destructive", "destructiveSecondary", "subtle" ];
+    var $ = {
+        action: n().string,
+        appearance: n().oneOf([ "default", "secondary", "primary", "destructive", "subtle" ]),
+        append: n().bool,
+        children: n().node,
+        disabled: n().oneOfType([ n().bool, n().oneOf([ "dimmed", "disabled" ]) ]),
+        elementRef: n().oneOfType([ n().func, n().object ]),
+        error: n().bool,
+        isMenu: n().bool,
+        openInNewContext: n().bool,
+        prepend: n().bool,
+        to: n().string
     };
-    var sr =  function(r) {
-        q(a, r);
-        var e = R(a);
-        function a() {
-            var r;
-            V(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));
-            G(z(r), "component", null);
-            G(z(r), "handleMount", (function(e) {
-                r.component = e;
-            }));
-            return r;
-        }
- // @docs-props-type ButtonSimplePropsBase
-                W(a, [ {
-            key: "focus",
-            /**
-     * Places focus on the button.
-     */
-            // eslint-disable-next-line react/no-unused-class-component-methods
-            value: function r() {
-                var e;
-                (e = this.component) === null || e === void 0 ? void 0 : e.focus();
-            }
-        }, {
-            key: "getVariant",
-            value: function r() {
-                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 (!or /* the readonly string[] cast is needed due to https://github.com/microsoft/TypeScript/issues/26255 */ .includes(a)) {
-                        t = "default";
-                    }
-                } else if (i.family === "prisma" && !ir /* the readonly string[] cast is needed due to https://github.com/microsoft/TypeScript/issues/26255 */ .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 = N(e, [ "append", "children", "error", "prepend", "selected" ]);
-                
-                return o().createElement(H, _({
-                    "aria-invalid": t,
-                    "aria-pressed": n,
-                    "data-test": "button-simple",
-                    ref: this.handleMount,
-                    $variant: this.getVariant(),
-                    $append: a,
-                    $prepend: l,
-                    $selected: n || false,
-                    $error: t
-                }, s), i);
-            }
-        } ]);
-        return a;
-    }(a.Component);
-    G(sr, "defaultProps", nr);
-    G(sr, "propTypes", lr);
-    var cr = (0, l.withSplunkTheme)(sr);
-    cr.propTypes = sr.propTypes;
-    /* harmony default export */    const br = cr;
+    var M =  a().forwardRef((function(r, e) {
+        var o = r.appearance, t = o === void 0 ? "default" : o, n = r.append, i = r.children, c = r.disabled, l = r.error, s = r.isMenu, d = r.prepend, v = H(r, [ "appearance", "append", "children", "disabled", "error", "isMenu", "prepend" ]);
+        // @docs-props-type ButtonSimplePropsBase
+                var b = x.includes(t) ? t : "default";
+        
+        return a().createElement(j, w({
+            "aria-invalid": l,
+            "data-test": "button-simple",
+            disabled: c,
+            $variant: b,
+            $append: n,
+            $prepend: d,
+            $error: l,
+            $isMenu: s,
+            ref: e
+        }, v), i);
+    }));
+    M.propTypes = $;
+    /* harmony default export */    const E = M;
     // only for styled-components that wrap ButtonSimple
         // CONCATENATED MODULE: ./src/ButtonSimple/index.ts
     module.exports = e;