@splunk/react-ui 4.29.0 → 4.31.0

package/Message.js

@@ -61,8 +61,8 @@
         e.r(r);
     // EXPORTS
         e.d(r, {
-        Link: () => /* reexport */ X,
-        default: () => /* reexport */ oe
+        Link: () => /* reexport */ z,
+        default: () => /* reexport */ pe
     });
     // CONCATENATED MODULE: external "react"
     const a = require("react");
@@ -78,10 +78,10 @@
     var l =  e.n(c);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Close"
     const p = require("@splunk/react-icons/enterprise/Close");
-    var v =  e.n(p);
+    var u =  e.n(p);
     // CONCATENATED MODULE: external "@splunk/react-icons/ExclamationCircle"
-    const u = require("@splunk/react-icons/ExclamationCircle");
-    var d =  e.n(u);
+    const v = require("@splunk/react-icons/ExclamationCircle");
+    var d =  e.n(v);
     // CONCATENATED MODULE: external "@splunk/react-icons/InformationCircle"
     const b = require("@splunk/react-icons/InformationCircle");
     var g =  e.n(b);
@@ -103,23 +103,28 @@
     // CONCATENATED MODULE: external "@splunk/react-ui/MessageBar"
     const j = require("@splunk/react-ui/MessageBar");
     var q =  e.n(j);
+    // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
+    const _ = require("@splunk/react-ui/ScreenReaderContent");
+    var E =  e.n(_);
     // CONCATENATED MODULE: external "@splunk/themes"
-    const E = require("@splunk/themes");
+    const P = require("@splunk/themes");
+    // CONCATENATED MODULE: external "@splunk/ui-utils/i18n"
+    const I = require("@splunk/ui-utils/i18n");
     // CONCATENATED MODULE: external "styled-components"
-    const P = require("styled-components");
-    var I =  e.n(P);
+    const R = require("styled-components");
+    var L =  e.n(R);
     // CONCATENATED MODULE: external "@splunk/react-ui/Link"
-    const L = require("@splunk/react-ui/Link");
-    var R =  e.n(L);
+    const T = require("@splunk/react-ui/Link");
+    var $ =  e.n(T);
     // CONCATENATED MODULE: ./src/Message/LinkStyles.ts
-    var T = I()(R()).withConfig({
+    var M = L()($()).withConfig({
         displayName: "LinkStyles__StyledLink",
         componentId: "w06zjv-0"
     })([ "" ]);
     // CONCATENATED MODULE: ./src/Message/Link.tsx
-    function $(e, r) {
+    function A(e, r) {
         if (e == null) return {};
-        var a = _(e, r);
+        var a = N(e, r);
         var i, n;
         if (Object.getOwnPropertySymbols) {
             var s = Object.getOwnPropertySymbols(e);
@@ -132,7 +137,7 @@
         }
         return a;
     }
-    function _(e, r) {
+    function N(e, r) {
         if (e == null) return {};
         var a = {};
         var i = Object.keys(e);
@@ -144,7 +149,7 @@
         }
         return a;
     }
-    var M = {
+    var W = {
         children: s().node,
         elementRef: s().oneOfType([ s().func, s().object ]),
         openInNewContext: s().bool,
@@ -154,168 +159,168 @@
  * @deprecated `Message.Link` is deprecated and will be removed in a future major version. Use `Link` instead.
  *
  * A `Link` styled to work with `Message`'s `banner` appearance.
- */    function N(e) {
-        var r = e.children, a = $(e, [ "children" ]);
+ */    function X(e) {
+        var r = e.children, a = A(e, [ "children" ]);
         // @docs-props-type LinkPropsBase
                 if (false) {}
         
-        return i().createElement(T, a, r);
+        return i().createElement(M, a, r);
     }
-    N.propTypes = M;
-    /* harmony default export */    const X = N;
+    X.propTypes = W;
+    /* harmony default export */    const z = X;
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const A = require("@splunk/react-ui/Box");
-    var W =  e.n(A);
+    const V = require("@splunk/react-ui/Box");
+    var B =  e.n(V);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const V = require("@splunk/react-ui/Clickable");
-    var z =  e.n(V);
+    const D = require("@splunk/react-ui/Clickable");
+    var H =  e.n(D);
     // CONCATENATED MODULE: ./src/Message/TitleStyles.ts
-    var B = I().p.withConfig({
+    var F = L().p.withConfig({
         displayName: "TitleStyles__StyledTitle",
         componentId: "sc-6gbjha-0"
-    })([ "", " ", "" ], E.mixins.reset("block"), (0, E.pick)({
-        prisma: (0, P.css)([ "font-size:14px;line-height:20px;" ])
+    })([ "", " ", "" ], P.mixins.reset("block"), (0, P.pick)({
+        prisma: (0, R.css)([ "font-size:14px;line-height:20px;" ])
     }));
     // CONCATENATED MODULE: ./src/Message/MessageStyles.ts
-    var D = I().div.withConfig({
+    var G = L().div.withConfig({
         displayName: "MessageStyles__StyledContent",
         componentId: "eg66af-0"
-    })([ "display:flex;align-items:baseline;flex:1;", ";", " ", ";" ], (0, E.pick)({
-        prisma: (0, P.css)([ "padding:", " 0;color:", ";" ], E.variables.spacingMedium, E.variables.contentColorActive),
-        enterprise: (0, P.css)([ "padding:12px 0;" ])
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "padding-left:", ";" ], E.variables.spacingXSmall),
-        enterprise: (0, P.css)([ "padding-left:15px;" ])
+    })([ "display:flex;align-items:baseline;flex:1;", ";", " ", ";" ], (0, P.pick)({
+        prisma: (0, R.css)([ "padding:", " 0;color:", ";" ], P.variables.spacingMedium, P.variables.contentColorActive),
+        enterprise: (0, R.css)([ "padding:12px 0;" ])
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "padding-left:", ";" ], P.variables.spacingXSmall),
+        enterprise: (0, R.css)([ "padding-left:15px;" ])
     }), (function(e) {
         var r = e.$fillStyle;
-        return r && (0, E.pick)({
-            prisma: (0, P.css)([ "padding-left:", ";" ], E.variables.spacingMedium)
+        return r && (0, P.pick)({
+            prisma: (0, R.css)([ "padding-left:", ";" ], P.variables.spacingMedium)
         });
     }));
-    var H = I()(z()).withConfig({
+    var J = L()(H()).withConfig({
         displayName: "MessageStyles__StyledRemove",
         componentId: "eg66af-1"
-    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";border:", ";color:", ";}&:active{", ";}", "" ], E.mixins.reset("flex"), (0, 
-    E.pick)({
+    })([ "", ";border:1px solid transparent;border-radius:", ";color:", ";", ";cursor:pointer;position:absolute;", " padding:8px;&:hover,&:focus{background:", ";border:", ";color:", ";}&:active{", ";}", "" ], P.mixins.reset("flex"), (0, 
+    P.pick)({
         prisma: "50%",
-        enterprise: E.variables.borderRadius
-    }), (0, E.pick)({
-        prisma: E.variables.contentColorMuted,
+        enterprise: P.variables.borderRadius
+    }), (0, P.pick)({
+        prisma: P.variables.contentColorMuted,
         enterprise: {
-            dark: E.variables.gray96,
-            light: E.variables.gray45
+            dark: P.variables.gray96,
+            light: P.variables.gray45
         }
     }), (function(e) {
         var r = e.$appearance;
-        return r === "banner" && (0, E.pick)({
-            prisma: (0, P.css)([ "color:", ";" ], E.variables.contentColorInverted)
+        return r === "banner" && (0, P.pick)({
+            prisma: (0, R.css)([ "color:", ";" ], P.variables.contentColorInverted)
         });
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "top:3px;right:2px;" ]),
-        enterprise: (0, P.css)([ "top:8px;right:8px;" ])
-    }), (0, E.pick)({
-        prisma: E.variables.interactiveColorOverlayHover,
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "top:3px;right:2px;" ]),
+        enterprise: (0, R.css)([ "top:8px;right:8px;" ])
+    }), (0, P.pick)({
+        prisma: P.variables.interactiveColorOverlayHover,
         enterprise: {
-            dark: E.variables.gray30,
-            light: E.variables.gray92
+            dark: P.variables.gray30,
+            light: P.variables.gray92
         }
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "1px solid inherit" ]),
-        enterprise: (0, P.css)([ "1px solid ", "" ], E.variables.gray80)
-    }), (0, E.pick)({
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "1px solid inherit" ]),
+        enterprise: (0, R.css)([ "1px solid ", "" ], P.variables.gray80)
+    }), (0, P.pick)({
         enterprise: {
-            dark: E.variables.gray96,
-            light: E.variables.linkColor
+            dark: P.variables.gray96,
+            light: P.variables.linkColor
         },
-        prisma: E.variables.contentColorActive
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "background:", ";" ], E.variables.interactiveColorOverlayActive),
-        enterprise: (0, P.css)([ "box-shadow:", ";" ], E.variables.focusShadow)
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "&:focus{box-shadow:0 0 0 3px ", ";}" ], E.variables.focusColor)
+        prisma: P.variables.contentColorActive
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "background:", ";" ], P.variables.interactiveColorOverlayActive),
+        enterprise: (0, R.css)([ "box-shadow:", ";" ], P.variables.focusShadow)
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "&:focus{box-shadow:0 0 0 3px ", ";}" ], P.variables.focusColor)
     }));
-    var F = I().span.withConfig({
+    var K = L().span.withConfig({
         displayName: "MessageStyles__StyledIconWrapper",
         componentId: "eg66af-2"
     })([ "position:relative;min-width:", ";text-align:center;color:", ";", " ", "" ], (0, 
-    E.pick)({
-        prisma: E.variables.spacingXLarge,
+    P.pick)({
+        prisma: P.variables.spacingXLarge,
         enterprise: "25px"
-    }), E.variables.white, (0, E.pick)({
-        enterprise: (0, P.css)([ "top:-2px;" ]),
-        prisma: (0, P.css)([ "top:-1.8px;" ])
-    }), (0, E.pickVariant)("$type", {
-        info: (0, P.css)([ "color:", ";" ], (0, E.pick)({
-            prisma: E.variables.contentColorMuted,
-            enterprise: E.variables.infoColor
+    }), P.variables.white, (0, P.pick)({
+        enterprise: (0, R.css)([ "top:-2px;" ]),
+        prisma: (0, R.css)([ "top:-1.8px;" ])
+    }), (0, P.pickVariant)("$type", {
+        info: (0, R.css)([ "color:", ";" ], (0, P.pick)({
+            prisma: P.variables.contentColorMuted,
+            enterprise: P.variables.infoColor
         })),
-        success: (0, P.css)([ "color:", ";" ], E.variables.accentColorPositive),
-        warning: (0, P.css)([ "color:", ";" ], E.variables.accentColorWarning),
-        error: (0, P.css)([ "color:", ";" ], E.variables.accentColorNegative)
+        success: (0, R.css)([ "color:", ";" ], P.variables.accentColorPositive),
+        warning: (0, R.css)([ "color:", ";" ], P.variables.accentColorWarning),
+        error: (0, R.css)([ "color:", ";" ], P.variables.accentColorNegative)
     }));
-    var G = I()(W()).withConfig({
+    var Q = L()(B()).withConfig({
         displayName: "MessageStyles__StyledBox",
         componentId: "eg66af-3"
-    })([ "", ";align-items:baseline;position:relative;border-radius:", ";margin-bottom:", ";", " word-wrap:break-word;", " ", "" ], E.mixins.reset("flex"), (0, 
-    E.pick)({
-        prisma: E.variables.borderRadius,
+    })([ "", ";align-items:baseline;position:relative;border-radius:", ";margin-bottom:", ";", " word-wrap:break-word;", " ", "" ], P.mixins.reset("flex"), (0, 
+    P.pick)({
+        prisma: P.variables.borderRadius,
         enterprise: "5px"
-    }), E.variables.spacingSmall, (0, E.pickVariant)("$hasRemoveIcon", {
+    }), P.variables.spacingSmall, (0, P.pickVariant)("$hasRemoveIcon", {
         true: {
-            prisma: (0, P.css)([ "padding-right:", ";" ], E.variables.spacingXXXLarge),
-            enterprise: (0, P.css)([ "padding-right:40px;" ])
+            prisma: (0, R.css)([ "padding-right:", ";" ], P.variables.spacingXXXLarge),
+            enterprise: (0, R.css)([ "padding-right:40px;" ])
         },
         false: {
-            prisma: (0, P.css)([ "padding-right:", ";" ], E.variables.spacingSmall),
-            enterprise: (0, P.css)([ "padding-right:", ";" ], E.variables.spacingHalf)
+            prisma: (0, R.css)([ "padding-right:", ";" ], P.variables.spacingSmall),
+            enterprise: (0, R.css)([ "padding-right:", ";" ], P.variables.spacingHalf)
         }
     }), (function(e) {
         var r = e.$fillStyle;
-        return r && (0, E.pick)({
-            enterprise: (0, P.css)([ "& > ", "{left:", ";}", "" ], 
+        return r && (0, P.pick)({
+            enterprise: (0, R.css)([ "& > ", "{left:", ";}", "" ], 
             /* sc-sel */
-            F, E.variables.spacingXSmall, (0, E.pickVariant)("$type", {
-                info: (0, P.css)([ "", "" ], (0, E.pick)({
-                    light: (0, P.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.infoColorL50, E.variables.infoColor),
-                    dark: (0, P.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.infoColor, .5))
+            K, P.variables.spacingXSmall, (0, P.pickVariant)("$type", {
+                info: (0, R.css)([ "", "" ], (0, P.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], P.variables.infoColorL50, P.variables.infoColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], P.mixins.colorWithAlpha(P.variables.infoColor, .5))
                 })),
-                success: (0, P.css)([ "", "" ], (0, E.pick)({
-                    light: (0, P.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.successColorL50, E.variables.successColor),
-                    dark: (0, P.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.successColor, .5))
+                success: (0, R.css)([ "", "" ], (0, P.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], P.variables.successColorL50, P.variables.successColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], P.mixins.colorWithAlpha(P.variables.successColor, .5))
                 })),
-                warning: (0, P.css)([ "", "" ], (0, E.pick)({
-                    light: (0, P.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.warningColorL50, E.variables.warningColor),
-                    dark: (0, P.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.warningColor, .5))
+                warning: (0, R.css)([ "", "" ], (0, P.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], P.variables.warningColorL50, P.variables.warningColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], P.mixins.colorWithAlpha(P.variables.warningColor, .5))
                 })),
-                error: (0, P.css)([ "", "" ], (0, E.pick)({
-                    light: (0, P.css)([ "background-color:", ";border:1px solid ", ";" ], E.variables.errorColorL50, E.variables.errorColor),
-                    dark: (0, P.css)([ "background-color:", ";" ], E.mixins.colorWithAlpha(E.variables.errorColor, .5))
+                error: (0, R.css)([ "", "" ], (0, P.pick)({
+                    light: (0, R.css)([ "background-color:", ";border:1px solid ", ";" ], P.variables.errorColorL50, P.variables.errorColor),
+                    dark: (0, R.css)([ "background-color:", ";" ], P.mixins.colorWithAlpha(P.variables.errorColor, .5))
                 }))
             })),
-            prisma: (0, P.css)([ "background:linear-gradient( to right,", " ", " ", ",", " 100% );box-shadow:", ";& > ", "{color:", ";}" ], (0, 
-            E.pickVariant)("$type", {
-                info: (0, P.css)([ "", " 0,", " ", "," ], E.variables.contentColorActive, E.variables.contentColorActive, E.variables.spacingXLarge),
-                success: (0, P.css)([ "", " 0,", " ", "," ], E.variables.accentColorPositive, E.variables.accentColorPositive, E.variables.spacingXLarge),
-                warning: (0, P.css)([ "", " 0,", " ", "," ], E.variables.accentColorWarning, E.variables.accentColorWarning, E.variables.spacingXLarge),
-                error: (0, P.css)([ "", " 0,", " ", "," ], E.variables.accentColorNegative, E.variables.accentColorNegative, E.variables.spacingXLarge)
-            }), E.variables.backgroundColorPopup, E.variables.spacingXLarge, E.variables.backgroundColorPopup, E.variables.embossShadow, 
+            prisma: (0, R.css)([ "background:linear-gradient( to right,", " ", " ", ",", " 100% );box-shadow:", ";& > ", "{color:", ";}" ], (0, 
+            P.pickVariant)("$type", {
+                info: (0, R.css)([ "", " 0,", " ", "," ], P.variables.contentColorActive, P.variables.contentColorActive, P.variables.spacingXLarge),
+                success: (0, R.css)([ "", " 0,", " ", "," ], P.variables.accentColorPositive, P.variables.accentColorPositive, P.variables.spacingXLarge),
+                warning: (0, R.css)([ "", " 0,", " ", "," ], P.variables.accentColorWarning, P.variables.accentColorWarning, P.variables.spacingXLarge),
+                error: (0, R.css)([ "", " 0,", " ", "," ], P.variables.accentColorNegative, P.variables.accentColorNegative, P.variables.spacingXLarge)
+            }), P.variables.backgroundColorPopup, P.variables.spacingXLarge, P.variables.backgroundColorPopup, P.variables.embossShadow, 
             /* sc-sel */
-            F, E.variables.backgroundColorPopup)
+            K, P.variables.backgroundColorPopup)
         });
-    }), (0, E.pick)({
-        prisma: (0, P.css)([ "& ", "{color:", ";}" ], 
+    }), (0, P.pick)({
+        prisma: (0, R.css)([ "& ", "{color:", ";}" ], 
         /* sc-sel */
-        B, (0, E.pickVariant)("$type", {
-            info: E.variables.contentColorActive,
-            warning: E.variables.accentColorWarning,
-            error: E.variables.accentColorNegative,
-            success: E.variables.accentColorPositive
+        F, (0, P.pickVariant)("$type", {
+            info: P.variables.contentColorActive,
+            warning: P.variables.accentColorWarning,
+            error: P.variables.accentColorNegative,
+            success: P.variables.accentColorPositive
         }))
     }));
     // CONCATENATED MODULE: ./src/Message/Title.tsx
-    function J(e, r) {
+    function U(e, r) {
         if (e == null) return {};
-        var a = K(e, r);
+        var a = Y(e, r);
         var i, n;
         if (Object.getOwnPropertySymbols) {
             var s = Object.getOwnPropertySymbols(e);
@@ -328,7 +333,7 @@
         }
         return a;
     }
-    function K(e, r) {
+    function Y(e, r) {
         if (e == null) return {};
         var a = {};
         var i = Object.keys(e);
@@ -340,22 +345,22 @@
         }
         return a;
     }
-    var Q = {
+    var Z = {
         children: s().node
     };
     /**
  * A title component for use in `Message`.
- */    function U(e) {
-        var r = e.children, a = J(e, [ "children" ]);
+ */    function ee(e) {
+        var r = e.children, a = U(e, [ "children" ]);
         // @docs-props-type TitleProps
                 
-        return i().createElement(B, a, r);
+        return i().createElement(F, a, r);
     }
-    U.propTypes = Q;
-    /* harmony default export */    const Y = U;
+    ee.propTypes = Z;
+    /* harmony default export */    const re = ee;
     // CONCATENATED MODULE: ./src/Message/Message.tsx
-    function Z() {
-        Z = Object.assign || function(e) {
+    function ae() {
+        ae = Object.assign || function(e) {
             for (var r = 1; r < arguments.length; r++) {
                 var a = arguments[r];
                 for (var i in a) {
@@ -366,11 +371,11 @@
             }
             return e;
         };
-        return Z.apply(this, arguments);
+        return ae.apply(this, arguments);
     }
-    function ee(e, r) {
+    function ie(e, r) {
         if (e == null) return {};
-        var a = re(e, r);
+        var a = ne(e, r);
         var i, n;
         if (Object.getOwnPropertySymbols) {
             var s = Object.getOwnPropertySymbols(e);
@@ -383,7 +388,7 @@
         }
         return a;
     }
-    function re(e, r) {
+    function ne(e, r) {
         if (e == null) return {};
         var a = {};
         var i = Object.keys(e);
@@ -395,29 +400,35 @@
         }
         return a;
     }
-    var ae = {
+    var se = {
         appearance: s().oneOf([ "default", "fill", "banner" ]),
         children: s().node,
         elementRef: s().oneOfType([ s().func, s().object ]),
         onRequestRemove: s().func,
         type: s().oneOf([ "info", "success", "warning", "error" ])
     };
-    var ie = Object.freeze({
+    var oe = Object.freeze({
+        info: (0, I._)("Info"),
+        warning: (0, I._)("Warning"),
+        error: (0, I._)("Alert"),
+        success: (0, I._)("Success")
+    });
+    var te = Object.freeze({
         info: C(),
         warning: S(),
         error: k(),
         success: w()
     });
-    var ne = Object.freeze({
+    var ce = Object.freeze({
         info: g(),
         warning: m(),
         error: d(),
         success: t()
     });
-    function se(e) {
-        var r = e.appearance, n = r === void 0 ? "default" : r, s = e.children, o = e.type, t = o === void 0 ? "warning" : o, c = e.onRequestRemove, p = ee(e, [ "appearance", "children", "type", "onRequestRemove" ]);
+    function le(e) {
+        var r = e.appearance, n = r === void 0 ? "default" : r, s = e.children, o = e.type, t = o === void 0 ? "warning" : o, c = e.onRequestRemove, p = ie(e, [ "appearance", "children", "type", "onRequestRemove" ]);
         // @docs-props-type MessagePropsBase
-                var u = (0, E.useSplunkTheme)(), d = u.isEnterprise;
+                var v = (0, P.useSplunkTheme)(), d = v.isEnterprise;
         if (false) {}
  // double check this can only be button
                 var b = (0, a.useCallback)((function(e) {
@@ -425,25 +436,25 @@
         }), [ c ]);
         if (n === "banner") {
             
-            return i().createElement(q(), Z({
+            return i().createElement(q(), ae({
                 type: t,
                 "data-test": "banner",
                 onRequestClose: b
             }, p), s);
         }
-        var g = d ? ie : ne;
+        var g = d ? te : ce;
         var f = g[t];
         var m = n === "fill";
         var y = n === "default" || n === "fill";
         
-        return i().createElement(G, Z({
+        return i().createElement(Q, ae({
             $appearance: n,
             $fillStyle: m,
             $hasRemoveIcon: !!c,
             $type: t,
             "data-test-type": t,
             "data-test": "message"
-        }, p), y &&  i().createElement(F, {
+        }, p), y &&  i().createElement(K, {
             $fillStyle: m,
             $type: t
         }, d ?  i().createElement(f, {
@@ -453,14 +464,14 @@
             screenReaderText: null
         }) :  i().createElement(f, {
             variant: "filled"
-        })),  i().createElement(D, {
+        }),  i().createElement(E(), null, oe[t])),  i().createElement(G, {
             "data-test": "content",
             $fillStyle: m
-        }, s), c &&  i().createElement(H, {
+        }, s), c &&  i().createElement(J, {
             "data-test": "remove",
             onClick: b,
             $appearance: n
-        }, d ?  i().createElement(v(), {
+        }, d ?  i().createElement(u(), {
             height: "12px",
             hideDefaultTooltip: true,
             screenReaderText: null,
@@ -470,10 +481,10 @@
             width: "20px"
         })));
     }
-    se.propTypes = ae;
-    se.Title = Y;
-    se.Link = X;
-    /* harmony default export */    const oe = se;
+    le.propTypes = se;
+    le.Title = re;
+    le.Link = z;
+    /* harmony default export */    const pe = le;
     // CONCATENATED MODULE: ./src/Message/index.ts
     module.exports = r;
     /******/})();

package/ModalLayer.js

@@ -262,6 +262,7 @@
             R(k(o), "renderLayer", (function() {
                 var e = o.props, t = e.getDefaultMotionStyle, n = e.getMotionStyle, i = e.renderModal, c = e.scrim;
                 var l = o.props.open || o.state.animating;
+                var u = l && c !== "hidden";
                 
                 return r().createElement(a.Spring, {
                     from: m(m({}, t === null || t === void 0 ? void 0 : t()), {}, {
@@ -277,7 +278,7 @@
                     
                     return r().createElement("div", null, 
                     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-                    i(e), l && (c === "visible" || "interactive") &&  r().createElement(d, {
+                    i(e), u &&  r().createElement(d, {
                         "data-test": "modal-overlay",
                         onMouseDown: c === "interactive" ? o.handleClickAway : undefined,
                         key: "clickAway",

package/Multiselect.js

@@ -686,7 +686,7 @@
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, Ae.pick)({
         prisma: (0, Le.css)([ "right:16px;" ]),
-        enterprise: (0, Le.css)([ "top:5px;right:3px;left:8px;" ])
+        enterprise: (0, Le.css)([ "right:3px;left:8px;" ])
     }), (0, Ae.pick)({
         prisma: Ae.variables.contentColorActive,
         enterprise: Ae.variables.accentColorL10
@@ -807,7 +807,7 @@
     var et = Fe().span.withConfig({
         displayName: "ItemStyles__StyledTitleAndDescriptionWrapper",
         componentId: "sc-4kc053-7"
-    })([ "max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
+    })([ "display:flex;flex-wrap:wrap;flex-direction:column;max-width:100%;width:100%;align-self:center;word-break:break-word;white-space:normal;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Le.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
@@ -1449,6 +1449,7 @@
             Jt($t(a), "firstSelectedEnabledOption", null);
             Jt($t(a), "firstSelectedOptionIndex", void 0);
             Jt($t(a), "menuId", void 0);
+            Jt($t(a), "menuListboxId", void 0);
             Jt($t(a), "previousActiveIndex", null);
             Jt($t(a), "selectedOptionCount", void 0);
             Jt($t(a), "optionRefsByKey", void 0);
@@ -1763,7 +1764,6 @@
                     "aria-describedby": p,
                     "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(j),
                     "aria-labelledby": y ? undefined : b,
-                    "aria-multiselectable": m || undefined,
                     "aria-required": w,
                     "data-select-appearance": l,
                     "data-test": m ? "multiselect" : "select",
@@ -2053,6 +2053,7 @@
             if (false) {}
             o.validateAppearance(e);
             a.menuId = (0, be.createDOMID)("menu");
+            a.menuListboxId = (0, be.createDOMID)("menu-listbox");
             a.activeItemId = (0, be.createDOMID)("active-item");
             return a;
         }
@@ -2181,8 +2182,9 @@
                     placeholder: (0, u._)("filter"),
                     role: "combobox",
                     "aria-expanded": "true",
+                    "aria-controls": this.menuListboxId,
                     "aria-label": (0, u._)("Filter"),
-                    "aria-activedescendant": this.activeItemId,
+                    "aria-activedescendant": this.state.textHasFocus && n ? this.activeItemId : undefined,
                     inputRef: s,
                     inputId: l,
                     canClear: true,
@@ -2225,7 +2227,8 @@
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
                         "data-test": "results-menu",
                         isLoading: o.props.isLoadingOptions,
-                        id: o.menuId
+                        id: o.menuId,
+                        menuId: o.menuListboxId
                     }, pe()(o.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll")), {}, {
                         style: l,
                         tabIndex: s
@@ -3626,7 +3629,7 @@
         useClickawayOverlay: false
     };
     function Fr(e) {
-        return e && e.compact === true;
+        return (e === null || e === void 0 ? void 0 : e.compact) === true;
     }
     var Kr =  function(e) {
         Ar(n, e);