@splunk/react-ui 5.1.0 → 5.3.0

package/Menu.js

@@ -61,10 +61,10 @@
         e.r(t);
     // EXPORTS
         e.d(t, {
-        Divider: () => /* reexport */ $,
+        Divider: () => /* reexport */ R,
         Heading: () => /* reexport */ Z,
         Item: () => /* reexport */ Se,
-        MenuContext: () => /* reexport */ A,
+        MenuContext: () => /* reexport */ N,
         default: () => /* reexport */ qe
     });
     // CONCATENATED MODULE: external "react"
@@ -86,11 +86,11 @@
     var v =  e.n(d);
     // CONCATENATED MODULE: external "@splunk/themes"
     const p = require("@splunk/themes");
-    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const f = require("@splunk/react-ui/Clickable");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Checkbox"
+    const f = require("@splunk/react-ui/Checkbox");
     var m =  e.n(f);
-    // CONCATENATED MODULE: external "@splunk/react-ui/NonInteractiveCheckbox"
-    const b = require("@splunk/react-ui/NonInteractiveCheckbox");
+    // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
+    const b = require("@splunk/react-ui/Clickable");
     var g =  e.n(b);
     // CONCATENATED MODULE: ./src/Menu/ItemStyles.ts
     var y = (0, c.css)([ "", " overflow:inherit;white-space:inherit;text-overflow:inherit;" ], p.mixins.typography("smallBody"));
@@ -103,42 +103,43 @@
         componentId: "sc-4kc053-1"
     })([ "", ";display:flex;align-self:flex-start;align-items:center;float:right;padding-left:", ";max-width:50%;min-height:20px;text-align:right;" ], y, p.variables.spacingLarge);
     var w = (0, c.css)([ "", " flex:0 0 auto;& > svg{height:20px;}" ], p.mixins.reset("inline-flex"));
-    var k = u().div.withConfig({
+    var O = u().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedAdornment",
         componentId: "sc-4kc053-2"
     })([ "", ";padding-left:", ";align-items:flex-start;color:", ";" ], w, p.variables.spacingLarge, p.variables.contentColorActive);
-    var O = u().span.withConfig({
+    var k = u().span.withConfig({
         displayName: "ItemStyles__StyledItemAdornment",
         componentId: "sc-4kc053-3"
     })([ "", ";", " padding-right:", ";align-items:center;color:", ";" ], w, (function(e) {
         var t = e.endAdornment;
         return t && (0, c.css)([ "padding-left:", ";" ], p.variables.spacingSmall);
     }), p.variables.spacingSmall, p.variables.contentColorMuted);
-    var x = u()(g()).withConfig({
-        displayName: "ItemStyles__StyledNonInteractiveCheckbox",
+    var x = u()(m()).withConfig({
+        displayName: "ItemStyles__StyledCheckbox",
         componentId: "sc-4kc053-4"
     })([ "min-height:0;padding-right:", ";" ], p.variables.spacingSmall);
-    var C = u()(m()).withConfig({
+    var C = u()(g()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-5"
-    })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;min-height:", ";padding:", " ", ";line-height:20px;", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}&:active{background:", ";}", "}&:focus{outline:0;box-shadow:", ";background:", ";}&[disabled],&[aria-disabled='true']{color:", ";", ",", ",", ",", "{color:", ";}}" ], p.variables.contentColorActive, p.variables.inputHeight, p.variables.spacingXSmall, p.variables.spacingLarge, (function(e) {
+    })([ "line-height:", ";display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;min-height:", ";padding:", " ", ";", " ", " ", " &:not([disabled],[aria-disabled='true']){&:hover{background:", ";", "}&:active{background:", ";}", "}&:focus{outline:0;box-shadow:", ";background:", ";}&[disabled],&[aria-disabled='true']{color:", ";", ",", ",", ",", "{color:", ";}}" ], p.variables.lineHeightSpacious, p.variables.contentColorActive, p.variables.inputHeight, p.variables.spacingXSmall, p.variables.spacingLarge, (function(e) {
         var t = e.$active, r = e.$preventFocus;
         return t && !r && (0, c.css)([ "box-shadow:", ";" ], p.variables.focusShadowInset);
     }), (function(e) {
         var t = e.$active;
-        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.neutral100, p.variables.fontWeightBold);
+        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlayActive, p.variables.fontWeightBold);
     }), (function(e) {
         var t = e.$isSelectable, r = e.$selectableAppearance, n = e.$selected;
         return t && !n && r === "checkmark" && // Adds whitespace to right to reserve space for checkmark for selectable Items
         // spacingLarge x 3 = padding-left + icon size + padding-right
         (0, c.css)([ "padding-right:calc(", " * 3);" ], p.variables.spacingLarge);
     }), p.variables.interactiveColorOverlayHover, (function(e) {
-        var t = e.$selected;
-        return t && (0, c.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlaySelected, p.variables.interactiveColorOverlayHover));
+        var t = e.$active;
+        return t && (0, c.css)([ "background:", ";" ], p.mixins.overlayColors(p.variables.interactiveColorOverlayActive, p.variables.interactiveColorOverlayHover));
     }), p.variables.interactiveColorOverlayActive, (function(e) {
-        var t = e.$selected;
-        return t && (0, c.css)([ "background:", ";font-weight:", ";" ], p.variables.interactiveColorOverlaySelected, p.variables.fontWeightSemiBold);
-    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ k, /* sc-sel */ O, p.variables.contentColorDisabled);
+        var t = e.$selected, r = e.$active;
+        return t && (0, c.css)([ "font-weight:", ";", "" ], p.variables.fontWeightSemiBold, r && (0, 
+        c.css)([ "font-weight:", ";" ], p.variables.fontWeightBold));
+    }), p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, p.variables.contentColorDisabled, /* sc-sel */ h, /* sc-sel */ S, /* sc-sel */ O, /* sc-sel */ k, p.variables.contentColorDisabled);
     var I = u().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
@@ -170,7 +171,7 @@
     })([ "float:right;padding-left:", ";color:", ";" ], p.variables.spacingSmall, p.variables.contentColorDefault);
     // CONCATENATED MODULE: ./src/Menu/DividerStyles.ts
     // Adds margin if direct sibling is a Menu.Item to provide spacing between Divider and Item
-    var N = u()(v()).withConfig({
+    var A = u()(v()).withConfig({
         displayName: "DividerStyles__Styled",
         componentId: "l3zfh3-0"
     })([ "", " + &,& + ", "{margin-block-start:", ";}" ], C, C, p.variables.spacingSmall);
@@ -179,7 +180,7 @@
         role: "menu",
         preventFocus: false
     });
-    /* harmony default export */    const A = D;
+    /* harmony default export */    const N = D;
     // CONCATENATED MODULE: ./src/Menu/Divider.tsx
     function T() {
         return T = Object.assign ? Object.assign.bind() : function(e) {
@@ -195,23 +196,22 @@
     var q = {};
     /**
  * A non-interactive menu item used to visually separate groups of items in the menu.
- */    function R(e) {
+ */    function $(e) {
         var t = T({}, e);
-        // @docs-props-type DividerPropsBase
-                var a = (0, r.useContext)(A), i = a.role;
+        var a = (0, r.useContext)(N), i = a.role;
         
-        return n().createElement(N, T({
+        return n().createElement(A, T({
             "aria-hidden": i === "listbox",
             "data-test": "divider",
             role: "separator"
         }, t));
     }
-    R.propTypes = q;
-    /* Remove the item if it is the first item after filtering */    R.filterFirst = true;
-    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    R.filterConsecutive = true;
-    /* Remove the item if it is the last item after filtering. */    R.filterLast = true;
-    /* Tag the item as Divider */    R.as = "Divider";
-    /* harmony default export */    const $ = R;
+    $.propTypes = q;
+    /* Remove the item if it is the first item after filtering */    $.filterFirst = true;
+    /* Remove consecutive items with filterConsecutive = true (Dividers and Headings) */    $.filterConsecutive = true;
+    /* Remove the item if it is the last item after filtering. */    $.filterLast = true;
+    /* Tag the item as Divider */    $.as = "Divider";
+    /* harmony default export */    const R = $;
     // CONCATENATED MODULE: external "@splunk/react-ui/Heading"
     const H = require("@splunk/react-ui/Heading");
     var F =  e.n(H);
@@ -293,7 +293,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -303,7 +303,7 @@
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
@@ -318,7 +318,8 @@
  * A non-interactive `Menu` item used to separate and label groups of `Menu` items.
  */    function Y(e) {
         var t = e.children, a = e.outerStyle, i = e.title, o = J(e, [ "children", "outerStyle", "title" ]);
-        var l = (0, r.useContext)(A), s = l.role;
+        // @docs-props-type HeadingPropsBase
+                var l = (0, r.useContext)(N), s = l.role;
         var c = (0, r.useMemo)((function() {
             return z(z({}, a), {}, {
                 margin: 0
@@ -388,7 +389,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -398,7 +399,7 @@
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
@@ -435,11 +436,12 @@
     };
     var ye = (0, se._)("(Opens new window)");
     function he(e) {
-        var t = e.active, a = e.children, o = e.description, l = e.descriptionPosition, s = l === void 0 ? "bottom" : l, c = e.disabled, u = e.endAdornment, d = e.elementRef, v = e.hasSubmenu, p = e.itemKey, f = e.matchRanges, m = e.onClick, b = e.onFocus, g = e.openInNewContext, y = e.role, w = e.selectable, N = e.selectableAppearance, D = N === void 0 ? "checkmark" : N, T = e.selected, q = e.startAdornment, R = e.to, $ = e.truncate, H = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
-        var F = (0, r.useContext)(A), M = F.preventFocus;
+        var t = e.active, a = e.children, o = e.description, l = e.descriptionPosition, s = l === void 0 ? "bottom" : l, c = e.disabled, u = e.endAdornment, d = e.elementRef, v = e.hasSubmenu, p = e.itemKey, f = e.matchRanges, m = e.onClick, b = e.onFocus, g = e.openInNewContext, y = e.role, w = e.selectable, A = e.selectableAppearance, D = A === void 0 ? "checkmark" : A, T = e.selected, q = e.startAdornment, $ = e.to, R = e.truncate, H = me(e, [ "active", "children", "description", "descriptionPosition", "disabled", "endAdornment", "elementRef", "hasSubmenu", "itemKey", "matchRanges", "onClick", "onFocus", "openInNewContext", "role", "selectable", "selectableAppearance", "selected", "startAdornment", "to", "truncate" ]);
+        // @docs-props-type ItemPropsBase
+                var F = (0, r.useContext)(N), M = F.preventFocus;
         (0, r.useEffect)((function() {
             if (false) {}
-        }), [ $, s, f, a ]);
+        }), [ R, s, f, a, T, w, D ]);
         var L = (0, r.useCallback)((function(e) {
             b === null || b === void 0 ? void 0 : b(e, {
                 itemKey: p
@@ -490,7 +492,7 @@
         }
         var G = o && s === "right";
         var J = o && !G;
-        var Q = T && D === "checkmark" &&  n().createElement(k, null,  n().createElement(ne(), {
+        var Q = T && D === "checkmark" &&  n().createElement(O, null,  n().createElement(ne(), {
             "data-test": "selected-checkmark",
             inline: true
         }));
@@ -518,22 +520,23 @@
             openInNewContext: U,
             role: V,
             tabIndex: M ? -1 : undefined,
-            to: R,
-            title: $ && te()(a) ? a : undefined
+            to: $,
+            title: R && te()(a) ? a : undefined
         }, X, i()(H, "onFocus")), v &&  n().createElement(j, null,  n().createElement(ie(), null)),  n().createElement(I, null, w && D === "checkbox" &&  n().createElement(x, {
+            checked: T === "some" ? "indeterminate" : T,
             disabled: !!c,
-            selected: T
-        }), q &&  n().createElement(O, null, q),  n().createElement(E, {
+            inert: true
+        }), q &&  n().createElement(k, null, q),  n().createElement(E, {
             $descriptionBottom: !!J,
-            $truncate: $ !== null && $ !== void 0 ? $ : false
+            $truncate: R !== null && R !== void 0 ? R : false
         },  n().createElement(_, {
-            $truncate: $ !== null && $ !== void 0 ? $ : false,
+            $truncate: R !== null && R !== void 0 ? R : false,
             "data-test": "label"
         }, B, g &&  n().createElement(n().Fragment, null,  n().createElement(pe, null),  n().createElement(le(), null, Y))), J &&  n().createElement(h, {
             "data-test": "description"
         }, o), G &&  n().createElement(S, {
             "data-test": "description"
-        }, o)), u &&  n().createElement(O, {
+        }, o)), u &&  n().createElement(k, {
             endAdornment: u
         }, u), Q));
     }
@@ -543,18 +546,18 @@
     // only for styled components using Item
         // CONCATENATED MODULE: external "@splunk/react-ui/Scroll"
     const we = require("@splunk/react-ui/Scroll");
-    var ke =  e.n(we);
+    var Oe =  e.n(we);
     // CONCATENATED MODULE: ./src/Menu/MenuStyles.ts
-    var Oe = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
-    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, Oe);
+    var ke = (0, c.css)([ "border-top:1px solid ", ";" ], p.variables.borderColor);
+    var xe = (0, c.css)([ "", ";background-color:", ";border-radius:", ";min-width:60px;overflow:auto;position:relative;padding:", " 0;&:focus{outline:0;box-shadow:", ";background:", ";}& + &{", "}" ], p.mixins.reset("block"), p.variables.backgroundColorPopup, p.variables.borderRadius, p.variables.spacingSmall, p.variables.focusShadowInset, p.variables.interactiveColorOverlayHover, ke);
     var Ce = u().div.withConfig({
         displayName: "MenuStyles__Styled",
         componentId: "sc-1olffp9-0"
     })([ "", "" ], xe);
-    var Ie = u()(ke()).withConfig({
+    var Ie = u()(Oe()).withConfig({
         displayName: "MenuStyles__StyledScroll",
         componentId: "sc-1olffp9-1"
-    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, Oe);
+    })([ "", " ", " + &,& + ", "{", "}" ], xe, /* sc-sel */ Ce, /* sc-sel */ Ce, ke);
     // CONCATENATED MODULE: ./src/utils/updateReactRef.ts
     /**
  * Updates a React ref. Callback refs and object refs (from `createRef` and `useRef`) are supported.
@@ -592,7 +595,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (n = 0; n < i.length; n++) {
-                r = i[n], t.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = i[n], -1 === t.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -602,13 +605,13 @@
         var r = {};
         for (var n in e) {
             if ({}.hasOwnProperty.call(e, n)) {
-                if (t.includes(n)) continue;
+                if (-1 !== t.indexOf(n)) continue;
                 r[n] = e[n];
             }
         }
         return r;
     }
-    var Ne = {
+    var Ae = {
         children: l().node,
         elementRef: l().oneOfType([ l().func, l().object ]),
         focusMode: l().oneOf([ "roving", "normal", "never" ]),
@@ -623,7 +626,7 @@
             enableHomeEnd: true
         };
     };
-    var Ae = function e(t) {
+    var Ne = function e(t) {
         var r = t.key;
  // Handle special case for tab navigation
                 if (r === "Tab" && (0, s.isTabKey)(t)) {
@@ -634,7 +637,7 @@
     function Te(e) {
         var t = e.children, a = e.elementRef, o = e.focusMode, l = o === void 0 ? "roving" : o, c = e.stopScrollPropagation, u = Pe(e, [ "children", "elementRef", "focusMode", "stopScrollPropagation" ]);
         // @docs-props-type MenuPropsBase
-                var d = (0, r.useContext)(A), v = d.role, p = v === void 0 ? "menu" : v;
+                var d = (0, r.useContext)(N), v = d.role, p = v === void 0 ? "menu" : v;
         var f = (0, r.useRef)(null);
         var m = r.Children.toArray(t).filter(r.isValidElement).reduce((function(e, t, r, n) {
             /* Filter out initial Dividers
@@ -669,7 +672,7 @@
             if (e.nativeEvent.metaKey) {
                 return;
             }
-            var t = Ae(e);
+            var t = Ne(e);
             var r = t === "Tab" || t === "tabShift";
             var n = t === "Enter";
             // Allow default behavior for the enter key.
@@ -708,13 +711,13 @@
             stopScrollPropagation: true
         }, i()(u, "tagName")), m) :  n().createElement(Ce, _e({}, w, {
             ref: b
-        }, u),  n().createElement(A.Provider, {
+        }, u),  n().createElement(N.Provider, {
             value: h()
         }, m));
     }
-    Te.propTypes = Ne;
+    Te.propTypes = Ae;
     Te.Item = Se;
-    Te.Divider = $;
+    Te.Divider = R;
     Te.Heading = Z;
     /* harmony default export */    const qe = Te;
     // CONCATENATED MODULE: ./src/Menu/index.ts

package/Message.js

@@ -96,28 +96,28 @@
     const S = require("@splunk/react-ui/Button");
     var O =  e.n(S);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const C = require("@splunk/themes");
+    const x = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/Message/MessageStyles.ts
-    var _ = {
-        info: C.variables.notificationColorInfo,
-        success: C.variables.notificationColorPositive,
-        warning: C.variables.notificationColorCaution,
-        error: C.variables.notificationColorNegative
+    var C = {
+        info: x.variables.notificationColorInfo,
+        success: x.variables.notificationColorPositive,
+        warning: x.variables.notificationColorCaution,
+        error: x.variables.notificationColorNegative
     };
-    var x = w().div.withConfig({
+    var _ = w().div.withConfig({
         displayName: "MessageStyles__StyledTitle",
         componentId: "eg66af-0"
-    })([ "", ";" ], C.mixins.typography("title4"));
+    })([ "", ";" ], x.mixins.typography("title4"));
     var k = w().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-1"
-    })([ "", ";grid-row:1 / -1;grid-column:content;max-width:", ";word-wrap:break-word;&:not(:has(> ", ")){", ";}" ], C.mixins.typography("body"), C.variables.lineLength, x, C.mixins.typography("body", {
+    })([ "", ";grid-row:1 / -1;grid-column:content;max-width:", ";word-wrap:break-word;&:not(:has(> ", ")){", ";}" ], x.mixins.typography("body"), x.variables.lineLength, _, x.mixins.typography("body", {
         color: "active"
     }));
     var R = w().span.withConfig({
         displayName: "MessageStyles__StyledIcon",
         componentId: "eg66af-2"
-    })([ "fill:", ";grid-row:1;height:20px;width:20px;" ], (0, C.pickVariant)("$type", _));
+    })([ "fill:", ";grid-row:1;height:20px;width:20px;" ], (0, x.pickVariant)("$type", C));
     var q = w()(O()).withConfig({
         displayName: "MessageStyles__StyledRemove",
         componentId: "eg66af-3"
@@ -125,14 +125,14 @@
     var I = w().div.withConfig({
         displayName: "MessageStyles__Styled",
         componentId: "eg66af-4"
-    })([ "", ";grid-template-rows:1lh auto;align-items:center;padding:", ";", ";", "" ], C.mixins.reset("grid"), C.variables.spacingSmall, (function(e) {
+    })([ "", ";grid-template-rows:1lh auto;align-items:center;padding:", ";", ";", "" ], x.mixins.reset("grid"), x.variables.spacingSmall, (function(e) {
         var n = e.$hasRemoveIcon;
-        return (0, h.css)([ "grid-template-columns:[icon] 20px ", " [content] auto ", " [remove] min-content;" ], C.variables.spacingSmall, n ? C.variables.spacingSmall : "0");
+        return (0, h.css)([ "grid-template-columns:[icon] 20px ", " [content] auto ", " [remove] min-content;" ], x.variables.spacingSmall, n ? x.variables.spacingSmall : "0");
     }), (function(e) {
         var n = e.$appearance, r = e.$hasRemoveIcon, t = e.$type;
-        var a = _[t];
-        return n === "fill" && (0, h.css)([ "background-color:", ";border-left:8px solid ", ";border-radius:", ";box-shadow:", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ");padding-inline:", ";", "" ], C.variables.backgroundColorPopup, a, C.variables.borderRadius, C.variables.embossShadow, C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingMedium, r && (0, 
-        h.css)([ "grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [remove] min-content;" ], C.variables.spacingSmall, C.variables.lineLength, C.variables.spacingSmall));
+        var a = C[t];
+        return n === "fill" && (0, h.css)([ "background-color:", ";border-left:8px solid ", ";border-radius:", ";box-shadow:", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ");padding-inline:", ";", "" ], x.variables.backgroundColorPopup, a, x.variables.borderRadius, x.variables.embossShadow, x.variables.spacingSmall, x.variables.lineLength, x.variables.spacingMedium, r && (0, 
+        h.css)([ "grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [remove] min-content;" ], x.variables.spacingSmall, x.variables.lineLength, x.variables.spacingSmall));
     }));
     // CONCATENATED MODULE: ./src/Message/Title.tsx
     function j(e, n) {
@@ -141,7 +141,7 @@
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (t = 0; t < o.length; t++) {
-                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = o[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -151,7 +151,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }
@@ -166,7 +166,7 @@
         var n = e.children, r = j(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return t().createElement(x, r, n);
+        return t().createElement(_, r, n);
     }
     M.propTypes = E;
     /* harmony default export */    const $ = M;
@@ -188,7 +188,7 @@
         if (Object.getOwnPropertySymbols) {
             var o = Object.getOwnPropertySymbols(e);
             for (t = 0; t < o.length; t++) {
-                r = o[t], n.includes(r) || {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
+                r = o[t], -1 === n.indexOf(r) && {}.propertyIsEnumerable.call(e, r) && (a[r] = e[r]);
             }
         }
         return a;
@@ -198,7 +198,7 @@
         var r = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (n.includes(t)) continue;
+                if (-1 !== n.indexOf(t)) continue;
                 r[t] = e[t];
             }
         }

package/MessageBar.js

@@ -98,15 +98,15 @@
     // CONCATENATED MODULE: external "@splunk/themes"
     const k = require("@splunk/themes");
     // CONCATENATED MODULE: ./src/MessageBar/MessageBarStyles.ts
-    var q = h().div.withConfig({
+    var O = h().div.withConfig({
         displayName: "MessageBarStyles__MessageBarContent",
         componentId: "sc-1uyhzza-0"
     })([ "", ";", ";grid-column:content;grid-row:1 / -1;max-width:", ";word-wrap:break-word;" ], k.mixins.reset("inline"), k.mixins.typography("body"), k.variables.lineLength);
-    var _ = h()(S()).withConfig({
+    var q = h()(S()).withConfig({
         displayName: "MessageBarStyles__StyledCloseButton",
         componentId: "sc-1uyhzza-1"
     })([ "grid-column:close;" ]);
-    var O = h().span.withConfig({
+    var _ = h().span.withConfig({
         displayName: "MessageBarStyles__StyledIcon",
         componentId: "sc-1uyhzza-2"
     })([ "width:20px;height:20px;margin-left:auto;fill:", ";grid-row:1;grid-column:icon;" ], (0, 
@@ -116,7 +116,7 @@
         warning: k.variables.notificationColorCaution,
         error: k.variables.notificationColorNegative
     }));
-    var I = h().div.withConfig({
+    var x = h().div.withConfig({
         displayName: "MessageBarStyles__MessageBarWrapper",
         componentId: "sc-1uyhzza-3"
     })([ "", ";grid-template-columns:[icon] 20px ", " [content] fit-content(", ") minmax(", ",1fr) [close] min-content;grid-template-rows:1lh auto;align-items:center;border:1px solid ", ";border-radius:", ";background-color:", ";padding:", " ", ";width:100%;" ], k.mixins.reset("grid"), k.variables.spacingSmall, k.variables.lineLength, k.variables.spacingSmall, (0, 
@@ -132,8 +132,8 @@
         error: k.variables.notificationColorNegativeWeak
     }), k.variables.spacingSmall, k.variables.spacingMedium);
     // CONCATENATED MODULE: ./src/MessageBar/MessageBar.tsx
-    function x() {
-        return x = Object.assign ? Object.assign.bind() : function(e) {
+    function I() {
+        return I = Object.assign ? Object.assign.bind() : function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var n = arguments[r];
                 for (var t in n) {
@@ -141,7 +141,7 @@
                 }
             }
             return e;
-        }, x.apply(null, arguments);
+        }, I.apply(null, arguments);
     }
     function P(e, r) {
         if (null == e) return {};
@@ -149,7 +149,7 @@
         if (Object.getOwnPropertySymbols) {
             var i = Object.getOwnPropertySymbols(e);
             for (t = 0; t < i.length; t++) {
-                n = i[t], r.includes(n) || {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
+                n = i[t], -1 === r.indexOf(n) && {}.propertyIsEnumerable.call(e, n) && (a[n] = e[n]);
             }
         }
         return a;
@@ -159,7 +159,7 @@
         var n = {};
         for (var t in e) {
             if ({}.hasOwnProperty.call(e, t)) {
-                if (r.includes(t)) continue;
+                if (-1 !== r.indexOf(t)) continue;
                 n[t] = e[t];
             }
         }
@@ -188,22 +188,22 @@
                 var s = E[i];
         var l = M[i];
         
-        return t().createElement(I, x({
+        return t().createElement(x, I({
             ref: n,
             $type: i,
             "data-test": "message-bar",
             "data-test-type": i
         }, o, {
             role: "region"
-        }),  t().createElement(O, {
+        }),  t().createElement(_, {
             as: s,
             $type: i,
             variant: "filled",
             "aria-hidden": true,
             "data-test": "icon"
-        }),  t().createElement(y(), null, l),  t().createElement(q, {
+        }),  t().createElement(y(), null, l),  t().createElement(O, {
             "data-test": "content"
-        }, r), a &&  t().createElement(_, {
+        }, r), a &&  t().createElement(q, {
             appearance: "subtle",
             onClick: a
         },  t().createElement(c(), null),  t().createElement(y(), null, (0, b._)("Close"))));