@splunk/react-ui 4.27.0 → 4.28.1

package/ButtonSimple.js

@@ -70,12 +70,12 @@
     const i = require("prop-types");
     var t =  r.n(i);
     // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
-    const s = require("@splunk/ui-utils/i18n");
+    const l = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "@splunk/themes"
-    const l = require("@splunk/themes");
+    const n = require("@splunk/themes");
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const n = require("@splunk/react-ui/ScreenReaderContent");
-    var c =  r.n(n);
+    const s = require("@splunk/react-ui/ScreenReaderContent");
+    var c =  r.n(s);
     // CONCATENATED MODULE: external "styled-components"
     const d = require("styled-components");
     var b =  r.n(d);
@@ -83,7 +83,7 @@
     const v = require("@splunk/react-ui/Clickable");
     var u =  r.n(v);
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var p = (0, d.css)([ "", " cursor:pointer;position:relative;border-radius:", ";&:focus,&:hover{z-index:3;}" ], l.mixins.reset("block"), l.variables.borderRadius);
+    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;" ]);
@@ -91,58 +91,54 @@
         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{", "}}" ], p, (0, 
-    l.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "font-weight:", ";" ], l.variables.fontWeightSemiBold),
-        prismaDefault: (0, d.css)([ "border:1px solid ", ";font-weight:", ";" ], l.variables.interactiveColorBorder, l.variables.fontWeightSemiBold),
-        prismaToggle: (0, d.css)([ "border:1px solid ", ";font-weight:normal;" ], l.variables.interactiveColorBorder)
-    }), f, l.variables.contentColorActive, l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
-    l.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
-        prismaDefault: (0, d.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
+    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)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "background-color:", ";border-color:", ";&:hover{background-color:", ";}" ], l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorBorderDisabled, l.mixins.overlayColors(l.variables.interactiveColorOverlaySelected, l.variables.interactiveColorOverlayHover));
+        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));
     }), (function(r) {
         var e = r.$error;
-        return e && (0, d.css)([ "border-color:", ";&:hover{border-color:", ";}" ], l.variables.accentColorNegative, l.variables.accentColorNegative);
-    }), l.variables.interactiveColorOverlayActive, l.variables.interactiveColorOverlayHover, l.variables.interactiveColorOverlayActive, l.variables.interactiveColorBorderDisabled, l.variables.contentColorDisabled, (function(r) {
+        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) {
         var e = r.$selected;
-        return e && (0, d.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
-    }), (0, l.pickVariant)("$variant", {
-        prismaSecondary: (0, d.css)([ "box-shadow:", ";" ], l.variables.focusShadow),
-        prismaDefault: (0, d.css)([ "box-shadow:", ";" ], l.variables.focusShadow),
-        prismaToggle: (0, d.css)([ "border-color:", ";" ], l.variables.interactiveColorPrimary)
+        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));
     }));
-    var y = (0, d.css)([ "&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";background-color:", ";cursor:not-allowed;", "}" ], l.variables.interactiveColorBorderDisabled, l.variables.contentColorDisabled, l.variables.interactiveColorBackgroundDisabled, (function(r) {
-        return r && (0, d.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, l.variables.fontWeightSemiBold, l.variables.borderRadius, f, l.variables.contentColorInverted, (0, 
-    l.pickVariant)("$selected", {
-        false: (0, l.pickVariant)("$variant", {
-            prismaPrimary: l.variables.interactiveColorPrimary,
-            prismaDestructive: l.variables.accentColorNegative
+    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, l.pickVariant)("$variant", {
-            prismaPrimary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlaySelected),
-            prismaDestructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlaySelected)
+        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)
         })
-    }), (0, l.pickVariant)("$variant", {
-        prismaPrimary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
-        prismaDestructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover)
-    }), l.variables.hoverShadow, (0, l.pickVariant)("$variant", {
-        prismaPrimary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayActive),
-        prismaDestructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayActive)
-    }), l.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, l.variables.fontWeightSemiBold, l.variables.borderRadius, f, l.variables.contentColorActive, l.variables.interactiveColorBackground, (function(r) {
-        return r && (0, d.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected));
-    }), l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover), l.variables.hoverShadow, l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayActive), l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover), l.variables.focusShadow, y);
+    }), (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);
     // 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 x = (0, d.css)([ "", " border-radius:", ";cursor:pointer;position:relative;&:focus{z-index:3;}" ], l.mixins.reset("block"), l.variables.borderRadius);
+        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 e = r.$append;
         return e && (0, d.css)([ "border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;" ]);
@@ -153,129 +149,129 @@
     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, 
-    l.pick)({
-        light: (0, d.css)([ "1px solid ", "" ], l.variables.gray60),
-        dark: l.variables.border
-    }), w, (0, l.pickVariant)("$variant", {
+    n.pick)({
+        light: (0, d.css)([ "1px solid ", "" ], n.variables.gray60),
+        dark: n.variables.border
+    }), w, (0, n.pickVariant)("$variant", {
         enterpriseDefault: "normal",
-        enterpriseSecondary: 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)({
+        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 ", ";" ], l.variables.gray30)
+        dark: (0, d.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], n.variables.gray30)
     }), (function(r) {
         var e = r.$selected;
         return e && (0, d.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], (0, 
-        l.pick)({
+        n.pick)({
             light: O,
-            dark: (0, d.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
+            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
         }));
-    }), (0, l.pick)({
+    }), (0, n.pick)({
         light: "#ebeeef",
-        dark: l.variables.gray30
-    }), (0, l.pick)({
+        dark: n.variables.gray30
+    }), (0, n.pick)({
         light: S,
-        dark: (0, d.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, d.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray22)
+        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)
     }), (function(r) {
         var e = r.$append;
-        return e && (0, d.css)([ "box-shadow:", ",", ",inset -1px 0 0 ", ";" ], (0, l.pick)({
+        return e && (0, d.css)([ "box-shadow:", ",", ",inset -1px 0 0 ", ";" ], (0, n.pick)({
             light: S,
-            dark: (0, d.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray30)
-        }), l.variables.focusShadow, l.variables.borderColor);
+            dark: (0, d.css)([ "inset 0 -1px 0 ", "" ], n.variables.gray30)
+        }), n.variables.focusShadow, n.variables.borderColor);
     }), (function(r) {
         var e = r.$append, o = r.$selected;
-        return e && o && (0, l.pick)({
-            light: (0, d.css)([ "box-shadow:", ",", ",", ",inset -1px 0 0 ", ";" ], S, O, l.variables.focusShadow, l.variables.borderColor),
-            dark: (0, d.css)([ "box-shadow:inset 0 1px 0 ", ",", ",inset -1px 0 0 ", ";" ], l.variables.black, l.variables.focusShadow, l.variables.borderColor)
+        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)
         });
-    }), (0, l.pick)({
+    }), (0, n.pick)({
         light: S,
-        dark: (0, d.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
+        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
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, l.pick)({
-            light: (0, d.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], O, l.variables.gray92, l.variables.gray80),
-            dark: (0, d.css)([ "box-shadow:inset 0 1px 0 ", ";background-color:", ";border-color:", ";" ], l.variables.black, l.variables.gray22, l.variables.gray20)
+        return e && (0, n.pick)({
+            light: (0, 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)
         });
     }));
     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, l.variables.fontWeightSemiBold, w, m, l.variables.white, $, (function(r) {
+    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 e = r.$selected;
         return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, C);
     }), (function(r) {
         var e = r.$prepend;
         return e && (0, d.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) {
+    }), n.variables.brandColorD50, n.variables.brandColorD30, n.variables.brandColorD30, $, n.variables.focusShadow, n.variables.brandColorL30, n.variables.brandColorL10, (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, l.variables.brandColorD20);
+        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, n.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, l.variables.fontWeightSemiBold, w, l.variables.errorColorD10, l.variables.white, $, (function(r) {
+    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 e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, l.variables.errorColorD30);
+        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, n.variables.errorColorD30);
     }), (function(r) {
         var e = r.$prepend;
-        return e && (0, d.css)([ "border-left:1px solid ", ";" ], l.variables.errorColorD30);
-    }), l.variables.errorColorD30, l.variables.errorColorD40, l.variables.errorColorD40, $, l.variables.focusShadow, l.variables.errorColorL10, l.variables.errorColorD10, (function(r) {
+        return e && (0, 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) {
         var e = r.$selected;
-        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, l.variables.errorColorD40);
+        return e && (0, d.css)([ "box-shadow:", ";background-color:", ";" ], P, n.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, 
-    l.pick)({
-        light: l.variables.gray45,
-        dark: l.variables.white
+    n.pick)({
+        light: n.variables.gray45,
+        dark: n.variables.white
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, d.css)([ "border-color:", ";" ], l.variables.accentColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), l.variables.backgroundColorHover, (0, l.pick)({
-        light: l.variables.gray60,
-        dark: l.variables.borderColor
+        return e && (0, 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
     }), (function(r) {
         var e = r.$error;
-        return e && (0, d.css)([ "&,&:hover{color:", ";}" ], l.variables.errorColor);
-    }), (0, l.pick)({
-        light: l.variables.linkColor,
-        dark: l.variables.white
-    }), (0, l.pick)({
-        light: l.variables.gray92,
-        dark: l.variables.gray22
-    }), l.variables.focusShadow, l.variables.textDisabledColor, (function(r) {
+        return e && (0, 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) {
         var e = r.$selected;
-        return e && (0, d.css)([ "border-color:", ";" ], l.variables.borderLightColor);
+        return e && (0, d.css)([ "border-color:", ";" ], n.variables.borderLightColor);
     }));
     // CONCATENATED MODULE: ./src/ButtonSimple/ButtonSimpleStyles.ts
     var _ = b()(u()).withConfig({
         displayName: "ButtonSimpleStyles__StyledClickable",
         componentId: "vlarwe-0"
-    })([ "", "" ], (0, l.pickVariant)("$variant", {
+    })([ "", "" ], (0, n.pickVariant)("$variant", {
         enterpriseDefault: D,
         enterpriseSecondary: D,
         enterprisePrimary: B,
@@ -303,8 +299,8 @@
         }
         return R(r);
     }
-    function V() {
-        V = Object.assign || function(r) {
+    function A() {
+        A = Object.assign || function(r) {
             for (var e = 1; e < arguments.length; e++) {
                 var o = arguments[e];
                 for (var a in o) {
@@ -315,11 +311,11 @@
             }
             return r;
         };
-        return V.apply(this, arguments);
+        return A.apply(this, arguments);
     }
-    function A(r, e) {
+    function E(r, e) {
         if (r == null) return {};
-        var o = E(r, e);
+        var o = H(r, e);
         var a, i;
         if (Object.getOwnPropertySymbols) {
             var t = Object.getOwnPropertySymbols(r);
@@ -332,7 +328,7 @@
         }
         return o;
     }
-    function E(r, e) {
+    function H(r, e) {
         if (r == null) return {};
         var o = {};
         var a = Object.keys(r);
@@ -344,12 +340,12 @@
         }
         return o;
     }
-    function H(r, e) {
+    function N(r, e) {
         if (!(r instanceof e)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function N(r, e) {
+    function V(r, e) {
         for (var o = 0; o < e.length; o++) {
             var a = e[o];
             a.enumerable = a.enumerable || false;
@@ -359,8 +355,8 @@
         }
     }
     function q(r, e, o) {
-        if (e) N(r.prototype, e);
-        if (o) N(r, o);
+        if (e) V(r.prototype, e);
+        if (o) V(r, o);
         return r;
     }
     function W(r, e) {
@@ -492,7 +488,7 @@
         var e = L(o);
         function o() {
             var r;
-            H(this, o);
+            N(this, o);
             for (var a = arguments.length, i = new Array(a), t = 0; t < a; t++) {
                 i[t] = arguments[t];
             }
@@ -515,31 +511,33 @@
         }, {
             key: "render",
             value: function r() {
-                var e = this.props, o = e.appearance, i = e.append, t = e.children, l = e.disabled, n = e.error, d = e.prepend, b = e.selected, v = e.splunkTheme, u = A(e, [ "appearance", "append", "children", "disabled", "error", "prepend", "selected", "splunkTheme" ]);
-                var p = o;
-                if (v.isEnterprise) {
-                    p = n ? "destructive" : o;
+                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;
                 }
                 
-                return a().createElement(_, V({
-                    "aria-disabled": l === "dimmed" || undefined,
-                    "aria-invalid": n,
+                return a().createElement(_, A({
+                    "aria-disabled": s === "dimmed" || undefined,
+                    "aria-invalid": d,
                     "data-test": "button-simple",
-                    disabled: l === true,
+                    disabled: s === true,
                     ref: this.handleMount,
-                    $variant: U(p, v.family),
+                    $variant: U(f, u.family),
                     $append: i,
-                    $prepend: d,
-                    $selected: b,
-                    $error: n
-                }, u), t, b &&  a().createElement(c(), null, (0, s._)("Selected")));
+                    $prepend: b,
+                    $selected: v,
+                    $error: d
+                }, p, {
+                    onClick: n && !s ? n : undefined
+                }), t, v &&  a().createElement(c(), null, (0, l._)("Selected")));
             }
         } ]);
         return o;
     }(o.Component);
     J(X, "defaultProps", Q);
     J(X, "propTypes", K);
-    var Y = (0, l.withSplunkTheme)(X);
+    var Y = (0, n.withSplunkTheme)(X);
     Y.propTypes = X.propTypes;
     /* harmony default export */    const Z = Y;
     // CONCATENATED MODULE: ./src/ButtonSimple/index.ts

package/CHANGELOG.md

@@ -1,15 +1,49 @@
 Change Log
 ============
 
-4.27.0 - TBD
+4.28.1 - March 21, 2024
+----------
+Bug Fixes:
+* Fixed `CollapsiblePanel` not calling its `onRequestOpen` and `onRequestClose` callbacks (SUI-6146).
+* Fixed documentation issues and discrepancies between the `onChange` callbacks of `CollapsiblePanel` and `SingleOpenPanelGroup` (SUI-6145).
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both always provide the `panelId` to their `onChange` callback.
+    * `CollapsiblePanel` and `SingleOpenPanelGroup` will both provide an `action="open"|"closed"` value to the `onChange` callback.
+
+4.28.0 - March 20, 2024
+----------
+New Features:
+* `JSONTree` now supports tree view interactions improving keyboard accessibility (SUI-5749).
+    * Up and down arrow keys navigate to previous and next visible tree nodes.
+    * Right arrow key opens a closed node or moves focus to first child node.
+    * Left arrow key closes an open node or moves focus to parent node.
+    * Home and End keys nagivate to first and last nodes in the tree respectively.
+* `Paginator` now has two additional appearances (SUI-5848).
+    * `Paginator.PageControl` provides a page dropdown and previous/next buttons.
+    * `Paginator.Compact` provides a customizable label and previous/next buttons.
+
+Bug Fixes:
+* `TabBar` keyboard navigation now works correctly when the `elementRef` prop is passed to `TabBar.Tab` (SUI-5409).
+* `TextArea` renders the correct icon in Enterprise themes when the `canClear` prop is present (SUI-6104).
+* `Markdown`'s renderers can now be styled with `styled-components` (SUI-6071).
+* `Multiselect` now announces selections to screen readers (SUI-2013).
+* `Table.HeadDropdownCell` does not shift horizontally when dropdown content is clicked (SUI-5457).
+* `Button`'s focus style for `appearance=toggle` has been replaced with `@splunk/theme`'s `focusShadow` in Prisma themes to have a visible focus indicator (WCAG SC 2.4.7) (SUI-3081).
+    * This change also affects `Select` component.
+* `Select` error state is now visible when inputs are focused (SUI-5327).
+
+Typescript:
+* `Paginator's `elementRef` is now a `React.Ref<HTMLElement>` due to the underlying HTML element changing from a `div` to a `nav` (SUi-6134).
+
+4.27.0 - March 5, 2024
 ----------
 New Features:
-* `CollapsiblePanel` now supports functionalities of `Accordion` (SUI-5719):
+* `CollapsiblePanel` now supports the functionalities of `Accordion` (SUI-5719):
     * The new `SingleOpenPanelGroup` component can be used wrap multiple `CollapsiblePanel` to replicate the   expand/collapse behavior of `Accordion`.
     * `CollapsiblePanel` supports a new `inset` prop with similar functionality as the same prop in `Accordion`.
     * A new `onChange` prop consolidates the callback behavior of the `onRequestClose` and `onRequestOpen` props.
     * The separate `onRequestClose` and `onRequestOpen` props have been deprecated and will be removed in the next major version.
 * `ControlGroup` now supports `data-test-required` test hook. (SUI-6067).
+* `Modal`'s `returnFocus` prop can now accept either a ref or a callback function. Use a callback function for manually setting focus when a ref cannot be used (SUI-6094).
 
 Bug Fixes:
 * `Text`'s focus style has been replaced with `@splunk/theme`'s `focusShadow` in Prisma themes to have a visible focus indicator (WCAG SC 2.4.7) (SUI-5321).