@splunk/react-ui 4.33.0 → 4.34.0

package/Button.js

@@ -85,7 +85,7 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const m = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Button/ButtonStyles.ts
-    var v = u().span.withConfig({
+    var y = u().span.withConfig({
         displayName: "ButtonStyles__StyledIcon",
         componentId: "eqxqs2-0"
     })([ "display:flex;align-items:center;flex-shrink:0;font-size:", ";", "" ], (0, 
@@ -101,7 +101,7 @@
             prisma: (0, p.css)([ "padding-right:8px;" ])
         }
     }));
-    var y = u()(d()).withConfig({
+    var v = u()(d()).withConfig({
         displayName: "ButtonStyles__StyledButtonSimple",
         componentId: "eqxqs2-1"
     })([ "text-decoration:none;white-space:nowrap;flex-grow:1;min-width:0;max-width:100%;line-height:", ";min-height:", ";padding:", ";", " ", " &[data-inline]{:where(:not(a)){display:inline-block;}:where(a){display:inline-flex;}vertical-align:middle;", "}[data-inline] + &&[data-inline]{margin-bottom:0;", "}" ], m.variables.lineHeight, m.variables.inputHeight, (0, 
@@ -125,15 +125,15 @@
         return !t && !n && !r && (0, p.css)([ "width:100%;" ]);
     }), (function(e) {
         var t = e.$isIconOnly;
-        return t && (0, p.css)([ "box-sizing:border-box;padding:", ";width:", ";min-width:", ";" ], (0, 
+        return t && (0, p.css)([ "box-sizing:border-box;", ";width:", ";min-width:", ";" ], (0, 
         m.pick)({
             enterprise: {
-                comfortable: "0 5px",
-                compact: "0 2px"
+                comfortable: (0, p.css)([ "padding:0 5px;" ]),
+                compact: (0, p.css)([ "padding:0 2px;" ])
             },
             prisma: {
-                comfortable: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight),
-                compact: (0, p.css)([ "0px calc(", " / 2 - 1px)" ], m.variables.inputHeight)
+                comfortable: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight),
+                compact: (0, p.css)([ "padding:0 calc(", " / 2 - 1px);" ], m.variables.inputHeight)
             }
         }), m.variables.inputHeight, m.variables.inputHeight);
     }), (function(e) {
@@ -141,10 +141,7 @@
         return t ? null : (0, p.css)([ "width:auto;" ]);
     }), (function(e) {
         var t = e.prepend;
-        return !t && (0, p.css)([ "margin-left:", ";" ], (0, m.pick)({
-            enterprise: m.variables.spacingHalf,
-            prisma: m.variables.spacingSmall
-        }));
+        return !t && (0, p.css)([ "margin-left:", ";" ], m.variables.spacingSmall);
     }));
     var b = u().span.withConfig({
         displayName: "ButtonStyles__StyledContentWrapper",
@@ -201,9 +198,9 @@
                 true: (0, p.css)([ "color:", ";" ], m.variables.contentColorInverted),
                 false: (0, p.css)([ "color:", ";", ":hover > * > &,", ":active > * > &,{color:", ";}" ], m.variables.contentColorDefault, 
                 /* sc-sel */
-                y, 
+                v, 
                 /* sc-sel */
-                y, m.variables.contentColorDefault)
+                v, m.variables.contentColorDefault)
             })
         }
     }));
@@ -211,13 +208,13 @@
     const g = require("@splunk/react-icons/CaretSmallDown");
     var w =  e.n(g);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
-    const k = require("@splunk/react-icons/enterprise/Caret");
-    var S =  e.n(k);
+    const S = require("@splunk/react-icons/enterprise/Caret");
+    var k =  e.n(S);
     // CONCATENATED MODULE: ./src/Button/icons/CaretSmallDown.tsx
     var O = function e() {
         var t = (0, m.useSplunkTheme)(), n = t.isEnterprise, i = t.isCompact;
         var a = i ? "20px" : "24px";
-        return n ?  r().createElement(S(), {
+        return n ?  r().createElement(k(), {
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
@@ -435,16 +432,16 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, s = t.classNamePrivate, p = t.disabled, u = t.error, f = t.icon, d = t.inline, m = t.isMenu, g = t.onClick, w = t.openInNewContext, k = t.prepend, S = t.to, O = t.value;
+                var t = this.props, n = t.action, i = t.appearance, a = t.append, o = t.className, s = t.classNamePrivate, p = t.disabled, u = t.error, f = t.icon, d = t.inline, m = t.isMenu, g = t.onClick, w = t.openInNewContext, S = t.prepend, k = t.to, O = t.value;
                 var q = this.props, $ = q.children, _ = q.label;
                 if (!_ && l()($)) {
                     _ = $;
                     $ = null;
                 }
                 var I = !!(f && !_ && !m && !$);
-                var E = S && w || m || !!f;
+                var E = k && w || m || !!f;
                 
-                return r().createElement(y, T({
+                return r().createElement(v, T({
                     "aria-haspopup": m || undefined,
                     "aria-invalid": u || undefined,
                     "data-test": "button"
@@ -454,7 +451,7 @@
                     "data-inline": d || null,
                     disabled: p,
                     append: a,
-                    prepend: k,
+                    prepend: S,
                     $inline: d,
                     $hasPrismaIcon: E,
                     $isIconOnly: I,
@@ -467,7 +464,7 @@
                 }),  r().createElement(b, {
                     $appearance: i,
                     $error: u
-                }, f &&  r().createElement(v, {
+                }, f &&  r().createElement(y, {
                     $isStartIcon: !I
                 }, f), _ &&  r().createElement(h, {
                     "data-test": "label",
@@ -475,7 +472,7 @@
                 }, _), $, m &&  r().createElement(x, {
                     $disabled: p,
                     $primary: i === "primary"
-                },  r().createElement(C, null)), w &&  r().createElement(v, {
+                },  r().createElement(C, null)), w &&  r().createElement(y, {
                     $isStartIcon: false
                 },  r().createElement(N, null))));
             }

package/ButtonGroup.js

@@ -68,23 +68,20 @@
     var n =  e.n(t);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var i =  e.n(o);
+    var l =  e.n(o);
     // CONCATENATED MODULE: external "styled-components"
-    const a = require("styled-components");
-    var l =  e.n(a);
+    const i = require("styled-components");
+    var a =  e.n(i);
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
     const u = require("@splunk/react-ui/Box");
     var p =  e.n(u);
     // CONCATENATED MODULE: external "@splunk/themes"
     const c = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroupStyles.ts
-    var s = l()(p()).withConfig({
+    var s = a()(p()).withConfig({
         displayName: "ButtonGroupStyles__StyledBox",
         componentId: "sc-14fs2xs-0"
-    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], (0, c.pick)({
-        enterprise: c.variables.spacingHalf,
-        prisma: c.variables.spacingSmall
-    }));
+    })([ "position:relative;[data-inline] + &{margin-left:", ";}" ], c.variables.spacingSmall);
     // CONCATENATED MODULE: ./src/ButtonGroup/ButtonGroup.tsx
     function f() {
         f = Object.assign || function(e) {
@@ -102,12 +99,12 @@
     }
     function d(e, r) {
         if (e == null) return {};
-        var t = v(e, r);
+        var t = y(e, r);
         var n, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                n = i[o];
+            var l = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < l.length; o++) {
+                n = l[o];
                 if (r.indexOf(n) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, n)) continue;
                 t[n] = e[n];
@@ -115,28 +112,28 @@
         }
         return t;
     }
-    function v(e, r) {
+    function y(e, r) {
         if (e == null) return {};
         var t = {};
         var n = Object.keys(e);
-        var o, i;
-        for (i = 0; i < n.length; i++) {
-            o = n[i];
+        var o, l;
+        for (l = 0; l < n.length; l++) {
+            o = n[l];
             if (r.indexOf(o) >= 0) continue;
             t[o] = e[o];
         }
         return t;
     }
-    var y = {
-        children: i().node,
-        elementRef: i().oneOfType([ i().func, i().object ]),
+    var v = {
+        children: l().node,
+        elementRef: l().oneOfType([ l().func, l().object ]),
         /** @private */
-        flex: i().bool
+        flex: l().bool
     };
     function b(e) {
         var r = e.children, o = d(e, [ "children" ]);
         // @docs-props-type ButtonGroupPropsBase
-                var i = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
+                var l = t.Children.toArray(r).filter(t.isValidElement).map((function(e, r, n) {
             var o = n.length;
             
             return (0, t.cloneElement)(e, {
@@ -152,9 +149,9 @@
             flex: true,
             "data-test": "button-group",
             role: "menubar"
-        }, o), i);
+        }, o), l);
     }
-    b.propTypes = y;
+    b.propTypes = v;
     /* harmony default export */    const m = b;
     // CONCATENATED MODULE: ./src/ButtonGroup/index.ts
     module.exports = r;

package/ButtonSimple.js

@@ -263,7 +263,7 @@
         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 (0, n.css)([ "border-radius:", ";", ";", " ", " cursor:pointer;position:relative;&:focus,&:hover{z-index:3;}&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-color 0.2s,box-shadow 0.2s,text-decoration 0.2s;&:hover{background-color:", ";}&:active{background-color:", ";transition:none;}", "}&:not([disabled]){&:focus{box-shadow:", ";}}&[disabled],&[aria-disabled='true']{border-color:", ";color:", ";cursor:not-allowed;", "}" ], l.variables.borderRadius, (function() {
                 return y && (0, n.css)([ "border:1px solid ", ";" ], y);
             }), (function(r) {
                 var e = r.$append;
@@ -282,8 +282,18 @@
     }
     /* harmony default export */    const m = k;
     // CONCATENATED MODULE: ./src/ButtonSimple/prismaStyles.ts
-    var C = (0, n.css)([ "", " &:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}&[disabled],&[aria-disabled='true']{", "}" ], (0, 
+    var C = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{border-color:", ";", "}", " ", "}", " &[disabled],&[aria-disabled='true']{", "}" ], l.variables.interactiveColorOverlayHover, l.variables.interactiveColorBorderHover, (0, 
     l.pickVariant)("$variant", {
+        secondary: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
+        default: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow),
+        subtle: (0, n.css)([ "box-shadow:", ";" ], l.variables.hoverShadow)
+    }), (function(r) {
+        var e = r.$selected;
+        return e && (0, 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:", ";" ], m("subtle", {
             color: l.variables.contentColorActive
         }), l.variables.fontWeightSemiBold),
@@ -296,23 +306,16 @@
         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, 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);
     }), (function(r) {
         var e = r.$selected;
         return e && (0, n.css)([ "background-color:", ";" ], l.mixins.overlayColors(l.variables.interactiveColorBackgroundDisabled, l.variables.interactiveColorOverlaySelected));
     }));
-    var x = (0, n.css)([ "", " font-weight:", ";&:focus{background-color:", ";}&:hover{box-shadow:", ";}" ], (0, 
+    var x = (0, n.css)([ "&:not([disabled],[aria-disabled='true']){&:focus{background-color:", ";}&:hover{box-shadow:", ";}}", " font-weight:", ";" ], (0, 
     l.pickVariant)("$variant", {
+        primary: l.mixins.overlayColors(l.variables.interactiveColorPrimary, l.variables.interactiveColorOverlayHover),
+        destructive: l.mixins.overlayColors(l.variables.accentColorNegative, l.variables.interactiveColorOverlayHover),
+        flat: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover)
+    }), l.variables.hoverShadow, (0, l.pickVariant)("$variant", {
         primary: m("primary"),
         destructive: m("destructive"),
         flat: m({
@@ -323,11 +326,7 @@
             backgroundHover: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlayHover),
             backgroundSelected: l.mixins.overlayColors(l.variables.interactiveColorBackground, l.variables.interactiveColorOverlaySelected)
         })
-    }), 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);
+    }), l.variables.fontWeightSemiBold);
     // CONCATENATED MODULE: ./src/ButtonSimple/enterpriseStyles.ts
     var w = "#1A8929";
  // SUI-2439 to meet WCAG AA compliance
@@ -343,10 +342,10 @@
     }));
     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, 
+    var j = (0, n.css)([ "", ";border:1px solid;border-color:", ";", ";font-weight:", ";&:not([disabled],[aria-disabled='true']){background-color:", ";color:", ";transition:background-image 0.2s,border 0.2s,box-shadow 0.2s,text-decoration 0.2s;", ";", " &:hover{background-color:", ";", ";}&:active{transition:none;background-color:", ";border-color:", ";", ";}&:focus{", " ", "}}&:not([disabled]){&:focus{", "}}&[disabled],&[aria-disabled='true']{cursor:not-allowed;color:", ";background-color:", ";border-color:", ";", "}" ], O, (0, 
     l.pick)({
-        light: (0, n.css)([ "1px solid ", "" ], l.variables.gray60),
-        dark: l.variables.border
+        light: l.variables.gray60,
+        dark: l.variables.borderColor
     }), $, (0, l.pickVariant)("$variant", {
         default: "normal",
         secondary: l.variables.fontWeightSemiBold
@@ -361,10 +360,10 @@
         dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray30)
     }), (function(r) {
         var e = r.$selected;
-        return e && (0, n.css)([ "box-shadow:", ";background-color:", ";border-color:", ";" ], (0, 
+        return e && (0, n.css)([ "", ";background-color:", ";border-color:", ";" ], (0, 
         l.pick)({
-            light: P,
-            dark: (0, n.css)([ "inset 0 1px 0 ", "" ], l.variables.black)
+            light: (0, n.css)([ "box-shadow:", ";" ], P),
+            dark: (0, n.css)([ "box-shadow:inset 0 1px 0 ", ";" ], l.variables.black)
         }), (0, l.pick)({
             light: l.variables.gray92,
             dark: l.variables.gray22
@@ -376,8 +375,8 @@
         light: "#ebeeef",
         dark: l.variables.gray30
     }), (0, l.pick)({
-        light: D,
-        dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray25)
+        light: (0, n.css)([ "box-shadow:", ";" ], D),
+        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray25)
     }), (0, l.pick)({
         light: l.variables.gray92,
         dark: l.variables.gray22
@@ -388,10 +387,10 @@
         dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ";" ], l.variables.gray22)
     }), (function(r) {
         var e = r.$append;
-        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);
+        return e && (0, l.pick)({
+            light: (0, n.css)([ "box-shadow:", " ", ",inset -1px 0 0 ", ";" ], D, l.variables.focusShadow, l.variables.borderColor),
+            dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", " ", ",inset -1px 0 0 ", ";" ], l.variables.gray30, l.variables.focusShadow, l.variables.borderColor)
+        });
     }), (function(r) {
         var e = r.$append, a = r.$selected;
         return e && a && (0, l.pick)({
@@ -399,9 +398,9 @@
             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: D,
-        dark: (0, n.css)([ "inset 0 -1px 0 ", "" ], l.variables.gray30)
-    }), l.variables.focusShadow, l.variables.textDisabledColor, (0, l.pick)({
+        light: (0, n.css)([ "box-shadow:", ",", ";" ], D, l.variables.focusShadow),
+        dark: (0, n.css)([ "box-shadow:inset 0 -1px 0 ", ",", ";" ], l.variables.gray30, l.variables.focusShadow)
+    }), l.variables.textDisabledColor, (0, l.pick)({
         light: l.variables.gray96,
         dark: l.variables.gray30
     }), (0, l.pick)({

package/CHANGELOG.md

@@ -1,6 +1,36 @@
 Change Log
 ============
 
+4.34.0 - August 7, 2024
+----------
+New Features:
+* `RadioBar` supports new prop `role` for either `radiogroup` (default) or `menubar` (SUI-6335).
+* `CollapsiblePanel` has a new `actions` prop for rendering the toggle button and interactive elements separate from `title`, reserving the `title` prop for text only (SUI-5999).
+    * If using the new `actions` prop, the toggle button supports `aria-labelledby` with the title and the panel body supports `role='region'`.
+* `Select` now supports `appearance="subtle"` with the same visual appearance as the Enterprise `"pill"` and Prisma `"secondary"` appearances (SUI-6440).
+* `Card` has a new `actions` prop for rendering card actions. This should be used to add unambiguous labels to the secondary actions, see the migration guide for details (SUI-5881).
+* `Card` has a new `tag` prop for overriding the default HTML tag (SUI-5881).
+
+Bug Fixes:
+* `CollapsiblePanel` now correctly announces its expanded state to a11y tools in Firefox (SUI-5999).
+* `RadioBar` no longer warns about the deprecated `appearance` prop when the default value is used.
+* `Button` now shows focus styling when hovered (SUI-6357).
+* `Button`s with an `appearance` of `primary` or `destructive` no longer have incorrect background colors on focus when `disabled="dimmed"` (SUI-6357).
+* `JSONTree's` active border has been removed to avoid a layout shift (SUI-6324).
+* `CollapsiblePanel`'s focus shadow has been updated to improve contrast (SUI-6340).
+* `Search`'s `role` has been changed from `"textbox"` to `"searchbox"`. 
+* `Search`'s default labels have been removed to avoid redundant screen reader output (SUI-6332).
+* `CollapsiblePanel`'s Enterprise dark theme toggle button is now visible when `disabled` (SUI-6425).
+* `Popover` no longer moves focus to the container when no focusable children exist to ensure the focus indicator remains visible (SUI-6446).
+* `Card` uses the `article` tag instead of `div` by default (SUI-5881).
+* `Menu` no longer takes focus when all `Menu.Item` children are disabled (SUI-6268).
+* `Color`'s textbox swatch in the popover palette is now focusable in Enterprise themes (SUI-6401).
+* `Menu`s last `Item` no longer has an incorrect border radius on hover when a `footerMessage` is set (SUI-6450).
+
+Deprecations:
+* `CollapsiblePanel`'s `titleWithActions` prop has been deprecated and will be removed in the next major version. Use the new `actions` prop instead to render the toggle button and interactive elements separate from `title` (SUI-5999).
+* `Select`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version. See the migration guide for details (SUI-6440).
+
 4.33.0 - July 8, 2024
 ----------
 New Features:
@@ -17,6 +47,7 @@ Bug Fixes:
 * `Button`'s text is now centered correctly when combining the `icon` and `to` props (SUI-6331).
 * `Button`'s external icon now has the same size as an icon rendered by the `icon` prop (SUI-6255).
 * `Select` now constructs `aria-label` out of the `Option`-s `label`s rather than `children` (SUI-6316).
+* `Search` now allows provided `aria-label` value to override the default `aria-label` value (SUI-6332).
 
 Deprecations:
 * `Button`'s `"flat"`, `"pill"`, and `"toggle"` values of the `appearance` prop have been deprecated and will be removed in the next major version (SUI-6501).

package/Card.js

@@ -87,7 +87,7 @@
     })([ "flex:1 1 auto;overflow:auto;height:100%;", ";", "" ], (function(e) {
         var r = e.$inset;
         return r ? (0, a.css)([ "", "" ], (0, u.pick)({
-            enterprise: (0, a.css)([ "padding:", ";&:not(:first-child){padding-top:0;}" ], u.variables.spacing),
+            enterprise: (0, a.css)([ "padding:", ";&:not(:first-child){padding-top:0;}" ], u.variables.spacingLarge),
             prisma: {
                 comfortable: (0, a.css)([ "padding:12px 24px;&:first-child{padding-top:28px;}&:last-child{padding-bottom:28px;}" ]),
                 compact: (0, a.css)([ "padding:8px 24px;&:first-child{padding-top:20px;}&:last-child{padding-bottom:20px;}" ])
@@ -164,7 +164,7 @@
         displayName: "FooterStyles__StyledBox",
         componentId: "sc-1yu3r4s-0"
     })([ "", ";text-align:right;color:", ";", "" ], (0, u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";&:first-child{border-top:none;}" ], u.variables.spacing),
+        enterprise: (0, a.css)([ "padding:", ";&:first-child{border-top:none;}" ], u.variables.spacingLarge),
         prisma: {
             comfortable: (0, a.css)([ "padding:24px;" ]),
             compact: "padding: 18px 24px"
@@ -242,19 +242,19 @@
     var P =  e.n(C);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/MoreVertical"
     const _ = require("@splunk/react-icons/enterprise/MoreVertical");
-    var T =  e.n(_);
+    var E =  e.n(_);
     // CONCATENATED MODULE: external "@splunk/react-ui/Anchor"
-    const E = require("@splunk/react-ui/Anchor");
-    var B =  e.n(E);
+    const T = require("@splunk/react-ui/Anchor");
+    var B =  e.n(T);
     // CONCATENATED MODULE: external "@splunk/react-ui/Dropdown"
     const R = require("@splunk/react-ui/Dropdown");
     var I =  e.n(R);
     // CONCATENATED MODULE: external "@splunk/react-ui/Tooltip"
     const q = require("@splunk/react-ui/Tooltip");
-    var H =  e.n(q);
+    var N =  e.n(q);
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
-    const N = require("@splunk/react-ui/Button");
-    var $ =  e.n(N);
+    const H = require("@splunk/react-ui/Button");
+    var $ =  e.n(H);
     // CONCATENATED MODULE: ./src/Card/HeaderStyles.ts
     var A = l().div.withConfig({
         displayName: "HeaderStyles__StyledTitle",
@@ -282,10 +282,7 @@
         A, 
         /* sc-sel */
         W);
-    }), (0, u.pick)({
-        enterprise: u.variables.spacingHalf,
-        prisma: u.variables.spacingSmall
-    }));
+    }), u.variables.spacingSmall);
     var M = l().div.withConfig({
         displayName: "HeaderStyles__StyledActionContainer",
         componentId: "eqi6uk-3"
@@ -300,12 +297,12 @@
         displayName: "HeaderStyles__StyledSecondaryAction",
         componentId: "eqi6uk-4"
     })([ "margin-left:10px;" ]);
-    var z = l()(s()).withConfig({
+    var L = l()(s()).withConfig({
         displayName: "HeaderStyles__StyledBox",
         componentId: "eqi6uk-5"
     })([ "align-items:start;display:flex;flex:0 0 auto;justify-content:space-between;position:relative;min-height:30px;", " ", " >:not(", "):not(", "){flex:1 0 auto;}" ], (0, 
     u.pick)({
-        enterprise: (0, a.css)([ "padding:", ";" ], u.variables.spacing),
+        enterprise: (0, a.css)([ "padding:", ";" ], u.variables.spacingLarge),
         prisma: {
             comfortable: (0, a.css)([ "padding:16px 24px;&:last-child{padding-bottom:32px;}" ]),
             compact: (0, a.css)([ "padding:12px 24px;&:last-child{padding-bottom:24px;}" ])
@@ -318,7 +315,7 @@
     /* sc-sel */
     M);
     // CONCATENATED MODULE: ./src/Card/Header.tsx
-    function L(e, r) {
+    function z(e, r) {
         if (e == null) return {};
         var t = V(e, r);
         var n, o;
@@ -369,6 +366,10 @@
         title: i().node,
         truncateTitle: i().bool
     };
+ // The order of the interfaces is necessary to maintain proper error messages: HeaderWithActions then HeaderWithActionsRenderProp
+    // If the actions comes first the error will report that actions should be undefined
+    // when we want actions to be the intended use case
+    // type HeaderProps = ComponentProps<HeaderPropsBase, 'div'>;
     // `forwardRef` is used to enable focus on toggle when Dropdown is closing
         var J =  n().forwardRef((function(e, r) {
         var t = (0, u.useSplunkTheme)(), o = t.family, i = t.isCompact;
@@ -376,9 +377,9 @@
         var l = o === "prisma" ?  n().createElement(P(), {
             height: a,
             width: a
-        }) :  n().createElement(T(), null);
+        }) :  n().createElement(E(), null);
         
-        return n().createElement(H(), G({
+        return n().createElement(N(), G({
             content: (0, j._)("Actions"),
             contentRelationship: "label"
         }, e),  n().createElement(F, {
@@ -391,21 +392,28 @@
     /**
  * A styled container for `Card` header content.
  */    function K(e) {
-        var r = e.actionPrimary, t = e.actionsSecondary, o = e.anchor, i = e.children, a = e.subtitle, l = e.title, c = e.truncateTitle, s = c === void 0 ? true : c, p = L(e, [ "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
+        var r = e.actions, t = e.actionPrimary, o = e.actionsSecondary, i = e.anchor, a = e.children, l = e.subtitle, c = e.title, s = e.truncateTitle, p = s === void 0 ? true : s, d = z(e, [ "actions", "actionPrimary", "actionsSecondary", "anchor", "children", "subtitle", "title", "truncateTitle" ]);
         // @docs-props-type HeaderPropsBase
-                var d = (0, u.useSplunkTheme)(), f = d.family;
-        var b = f === "prisma" ? "right" : "below";
+                var f = (0, u.useSplunkTheme)(), b = f.family;
+        var v = b === "prisma" ? "right" : "below";
+        if (false) {}
+        var y;
+        if (r) {
+            y = r();
+        } else if (t || o) {
+            y =  n().createElement(n().Fragment, null, t, o &&  n().createElement(I(), {
+                defaultPlacement: v,
+                toggle:  n().createElement(J, null)
+            }, o));
+        }
         
-        return n().createElement(z, G({
+        return n().createElement(L, G({
             "data-test": "header"
-        }, p), (l || a) &&  n().createElement(D, {
-            $truncateTitle: s
-        }, l &&  n().createElement(A, null, o ?  n().createElement(B(), {
-            name: o
-        }, l) : l), a &&  n().createElement(W, null, a)), i, (r || t) &&  n().createElement(M, null, r, t &&  n().createElement(I(), {
-            defaultPlacement: b,
-            toggle:  n().createElement(J, null)
-        }, t)));
+        }, d), (c || l) &&  n().createElement(D, {
+            $truncateTitle: p
+        }, c &&  n().createElement(A, null, i ?  n().createElement(B(), {
+            name: i
+        }, c) : c), l &&  n().createElement(W, null, l)), a, y &&  n().createElement(M, null, y));
     }
     K.propTypes = U;
     /* harmony default export */    const Q = K;
@@ -414,7 +422,7 @@
     var Y =  e.n(X);
     // CONCATENATED MODULE: ./src/Card/CardStyles.ts
     var Z = "0.2s";
-    var ee = l().div.withConfig({
+    var ee = l().article.withConfig({
         displayName: "CardStyles__Styled",
         componentId: "ola3x0-0"
     })([ "", ";flex-direction:column;align-items:stretch;min-width:100px;flex:1;vertical-align:top;", " transition:height ", ",width ", ",min-width ", ",max-width ", ",margin ", ",box-shadow ", ",border-color ", ";", " &[data-clickable='true']{cursor:pointer;", " &:hover{", "}&:focus{", "}}" ], u.mixins.reset("inline-flex"), (0, 
@@ -691,7 +699,8 @@
         selected: i().bool,
         showBorder: i().bool,
         to: i().string,
-        value: i().any
+        value: i().any,
+        tag: i().oneOf([ "article", "div", "aside", "section" ])
     };
     var Pe = {
         openInNewContext: false,
@@ -700,7 +709,7 @@
     function _e(e) {
         return !!e.onClick || !!e.to;
     }
-    function Te(e) {
+    function Ee(e) {
         var r = e.margin, t = e.maxWidth, n = e.minWidth, o = e.showBorder, i = e.style, a = ke(e, [ "margin", "maxWidth", "minWidth", "showBorder", "style" ]);
         var l = xe({
             minWidth: n,
@@ -714,7 +723,7 @@
         };
         return [ c, a ];
     }
-    var Ee =  function(e) {
+    var Te =  function(e) {
         be(t, e);
         var r = ye(t);
         function t() {
@@ -738,7 +747,7 @@
             key: "render",
             value: function e() {
                 if (_e(this.props)) {
-                    var r = Te(this.props), t = ie(r, 2), o = t[0], i = t[1];
+                    var r = Ee(this.props), t = ie(r, 2), o = t[0], i = t[1];
                     var a = o.showBorder;
                     var l = i.children, c = i.elementRef, s = i.onClick, u = i.openInNewContext, p = i.selected, d = i.to, f = ke(i, [ "children", "elementRef", "onClick", "openInNewContext", "selected", "to" ]);
                     
@@ -753,25 +762,28 @@
                         to: d || undefined
                     }),  n().createElement(te, null, l));
                 }
-                var b = Te(this.props), v = ie(b, 2), y = v[0], m = v[1];
+                var b = Ee(this.props), v = ie(b, 2), y = v[0], m = v[1];
                 var h = y.showBorder;
-                var g = m.children, w = m.elementRef, O = ke(m, [ "children", "elementRef" ]);
+                var g = m.children, w = m.elementRef, O = m.tag, x = ke(m, [ "children", "elementRef", "tag" ]);
                 
                 return n().createElement(ee, oe({
                     $selected: false,
                     $cardHasBorder: h,
-                    ref: w
-                }, y, O), g);
+                    ref: w,
+                    as: O
+                }, y, x, {
+                    onClick: undefined
+                }), g);
             }
         } ]);
         return t;
     }(t.Component);
-    Se(Ee, "propTypes", Ce);
-    Se(Ee, "defaultProps", Pe);
-    Se(Ee, "Header", Q);
-    Se(Ee, "Body", m);
-    Se(Ee, "Footer", k);
-    /* harmony default export */    const Be = Ee;
+    Se(Te, "propTypes", Ce);
+    Se(Te, "defaultProps", Pe);
+    Se(Te, "Header", Q);
+    Se(Te, "Body", m);
+    Se(Te, "Footer", k);
+    /* harmony default export */    const Be = Te;
     // CONCATENATED MODULE: ./src/Card/index.ts
     module.exports = r;
     /******/})();