@splunk/react-ui 4.27.0 → 4.28.1

package/Multiselect.js

@@ -64,17 +64,17 @@
         Divider: () => /* reexport */ p.Divider,
         Heading: () => /* reexport */ p.Heading,
         Option: () => /* reexport */ J,
-        default: () => /* reexport */ Fr
+        default: () => /* reexport */ $r
     });
     // CONCATENATED MODULE: external "react"
     const n = require("react");
     var r =  e.n(n);
     // CONCATENATED MODULE: external "prop-types"
     const o = require("prop-types");
-    var i =  e.n(o);
+    var a =  e.n(o);
     // CONCATENATED MODULE: external "lodash/has"
-    const a = require("lodash/has");
-    var l =  e.n(a);
+    const i = require("lodash/has");
+    var l =  e.n(i);
     // CONCATENATED MODULE: external "lodash/omit"
     const s = require("lodash/omit");
     var c =  e.n(s);
@@ -115,9 +115,9 @@
         var n = h(e, t);
         var r, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                r = i[o];
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
                 if (t.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
                 n[r] = e[r];
@@ -129,9 +129,9 @@
         if (e == null) return {};
         var n = {};
         var r = Object.keys(e);
-        var o, i;
-        for (i = 0; i < r.length; i++) {
-            o = r[i];
+        var o, a;
+        for (a = 0; a < r.length; a++) {
+            o = r[a];
             if (t.indexOf(o) >= 0) continue;
             n[o] = e[o];
         }
@@ -181,8 +181,8 @@
         return function n() {
             var r = k(e), o;
             if (t) {
-                var i = k(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = k(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
@@ -231,32 +231,32 @@
         }
         return e;
     }
-    var j = {
+    var _ = {
         /** @private */
-        active: i().bool,
-        children: i().node,
-        description: i().string,
-        descriptionPosition: i().oneOf([ "right", "bottom" ]),
-        disabled: i().bool,
-        hidden: i().bool,
-        icon: i().node,
-        label: i().string.isRequired,
+        active: a().bool,
+        children: a().node,
+        description: a().string,
+        descriptionPosition: a().oneOf([ "right", "bottom" ]),
+        disabled: a().bool,
+        hidden: a().bool,
+        icon: a().node,
+        label: a().string.isRequired,
         /**
    * @private Passed down from <BaseSelect>
    */
-        multiple: i().bool,
-        matchRanges: i().arrayOf(i().shape({
-            start: i().number.isRequired,
-            end: i().number.isRequired
+        multiple: a().bool,
+        matchRanges: a().arrayOf(a().shape({
+            start: a().number.isRequired,
+            end: a().number.isRequired
         })),
         /** @private */
-        onClick: i().func,
+        onClick: a().func,
         /** @private */
-        selected: i().bool,
-        truncate: i().bool,
-        value: i().oneOfType([ i().string, i().number, i().bool ]).isRequired
+        selected: a().bool,
+        truncate: a().bool,
+        value: a().oneOfType([ a().string, a().number, a().bool ]).isRequired
     };
-    var _ = {
+    var j = {
         descriptionPosition: "bottom",
         disabled: false,
         multiple: false,
@@ -273,14 +273,14 @@
         function n() {
             var e;
             b(this, n);
-            for (var r = arguments.length, o = new Array(r), i = 0; i < r; i++) {
-                o[i] = arguments[i];
+            for (var r = arguments.length, o = new Array(r), a = 0; a < r; a++) {
+                o[a] = arguments[a];
             }
             e = t.call.apply(t, [ this ].concat(o));
             I(C(e), "c", null);
             I(C(e), "handleClick", (function(t) {
-                var n = e.props, r = n.onClick, o = n.value, i = n.disabled;
-                if (!i) {
+                var n = e.props, r = n.onClick, o = n.value, a = n.disabled;
+                if (!a) {
                     r === null || r === void 0 ? void 0 : r(t, {
                         value: o
                     });
@@ -308,7 +308,7 @@
         }, {
             key: "render",
             value: function e() {
-                var t = this.props, n = t.value, o = t.children, i = t.label, a = t.multiple, l = v(t, [ "value", "children", "label", "multiple" ]);
+                var t = this.props, n = t.value, o = t.children, a = t.label, i = t.multiple, l = v(t, [ "value", "children", "label", "multiple" ]);
                 
                 return r().createElement(p.Item, d({
                     "aria-selected": this.props.selected,
@@ -317,17 +317,17 @@
                     ref: this.handleMount
                 }, l, {
                     selectable: true,
-                    selectableAppearance: a ? "checkbox" : undefined,
+                    selectableAppearance: i ? "checkbox" : undefined,
                     onClick: this.handleClick,
                     role: "option",
                     value: n.toString()
-                }), o || i);
+                }), o || a);
             }
         } ]);
         return n;
     }(n.PureComponent);
-    I(E, "propTypes", j);
-    I(E, "defaultProps", _);
+    I(E, "propTypes", _);
+    I(E, "defaultProps", j);
     I(E, "type", p.Item);
     /* harmony default export */    const M = E;
     // CONCATENATED MODULE: ./src/Multiselect/Option.tsx
@@ -363,9 +363,9 @@
         var n = R(e, t);
         var r, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                r = i[o];
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
                 if (t.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
                 n[r] = e[r];
@@ -377,20 +377,20 @@
         if (e == null) return {};
         var n = {};
         var r = Object.keys(e);
-        var o, i;
-        for (i = 0; i < r.length; i++) {
-            o = r[i];
+        var o, a;
+        for (a = 0; a < r.length; a++) {
+            o = r[a];
             if (t.indexOf(o) >= 0) continue;
             n[o] = e[o];
         }
         return n;
     }
-    function T(e, t) {
+    function D(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function D(e, t) {
+    function T(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -400,8 +400,8 @@
         }
     }
     function q(e, t, n) {
-        if (t) D(e.prototype, t);
-        if (n) D(e, n);
+        if (t) T(e.prototype, t);
+        if (n) T(e, n);
         return e;
     }
     function N(e, t) {
@@ -429,21 +429,21 @@
         return function n() {
             var r = H(e), o;
             if (t) {
-                var i = H(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = H(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
-            return K(this, o);
+            return F(this, o);
         };
     }
-    function K(e, t) {
+    function F(e, t) {
         if (t && (A(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return F(e);
+        return K(e);
     }
-    function F(e) {
+    function K(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -481,31 +481,31 @@
     }
     var W = {
         /** @private */
-        active: i().bool,
-        children: i().node,
+        active: a().bool,
+        children: a().node,
         /**
    * @private this is passed down from Multiselect.
    */
-        compact: i().bool,
-        description: i().string,
-        descriptionPosition: i().oneOf([ "right", "bottom" ]),
-        disabled: i().bool,
-        hidden: i().bool,
-        icon: i().node,
-        label: i().string.isRequired,
-        matchRanges: i().arrayOf(i().shape({
-            start: i().number.isRequired,
-            end: i().number.isRequired
+        compact: a().bool,
+        description: a().string,
+        descriptionPosition: a().oneOf([ "right", "bottom" ]),
+        disabled: a().bool,
+        hidden: a().bool,
+        icon: a().node,
+        label: a().string.isRequired,
+        matchRanges: a().arrayOf(a().shape({
+            start: a().number.isRequired,
+            end: a().number.isRequired
         })),
         /** @private */
-        onClick: i().func,
+        onClick: a().func,
         /** @private */
-        selected: i().bool,
-        selectedAppearance: i().oneOf([ "info", "success", "warning", "error" ]),
-        selectedBackgroundColor: i().string,
-        selectedForegroundColor: i().string,
-        truncate: i().bool,
-        value: i().oneOfType([ i().string, i().number, i().bool ]).isRequired
+        selected: a().bool,
+        selectedAppearance: a().oneOf([ "info", "success", "warning", "error" ]),
+        selectedBackgroundColor: a().string,
+        selectedForegroundColor: a().string,
+        truncate: a().bool,
+        value: a().oneOfType([ a().string, a().number, a().bool ]).isRequired
     };
     var U = {
         compact: false,
@@ -523,13 +523,13 @@
         var t = L(n);
         function n() {
             var e;
-            T(this, n);
-            for (var r = arguments.length, o = new Array(r), i = 0; i < r; i++) {
-                o[i] = arguments[i];
+            D(this, n);
+            for (var r = arguments.length, o = new Array(r), a = 0; a < r; a++) {
+                o[a] = arguments[a];
             }
             e = t.call.apply(t, [ this ].concat(o));
-            z(F(e), "c", null);
-            z(F(e), "handleMount", (function(t) {
+            z(K(e), "c", null);
+            z(K(e), "handleMount", (function(t) {
                 e.c = t;
             }));
             return e;
@@ -578,10 +578,10 @@
     var re =  e.n(ne);
     // CONCATENATED MODULE: external "lodash/isUndefined"
     const oe = require("lodash/isUndefined");
-    var ie =  e.n(oe);
+    var ae =  e.n(oe);
     // CONCATENATED MODULE: external "lodash/keys"
-    const ae = require("lodash/keys");
-    var le =  e.n(ae);
+    const ie = require("lodash/keys");
+    var le =  e.n(ie);
     // CONCATENATED MODULE: external "lodash/memoize"
     const se = require("lodash/memoize");
     var ce =  e.n(se);
@@ -613,8 +613,8 @@
     const ke = require("@splunk/react-ui/Text");
     var Ie =  e.n(ke);
     // CONCATENATED MODULE: external "@splunk/react-icons/CaretSmallDown"
-    const je = require("@splunk/react-icons/CaretSmallDown");
-    var _e =  e.n(je);
+    const _e = require("@splunk/react-icons/CaretSmallDown");
+    var je =  e.n(_e);
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Caret"
     const Ee = require("@splunk/react-icons/enterprise/Caret");
     var Me =  e.n(Ee);
@@ -627,41 +627,41 @@
             screenReaderText: null,
             hideDefaultTooltip: true,
             size: .5
-        }) :  r().createElement(_e(), null);
+        }) :  r().createElement(je(), null);
         return o;
     };
     /* harmony default export */    const Ve = Pe;
     // CONCATENATED MODULE: external "@splunk/react-icons/enterprise/Search"
     const Re = require("@splunk/react-icons/enterprise/Search");
-    var Te =  e.n(Re);
+    var De =  e.n(Re);
     // CONCATENATED MODULE: external "@splunk/react-icons/Magnifier"
-    const De = require("@splunk/react-icons/Magnifier");
-    var qe =  e.n(De);
+    const Te = require("@splunk/react-icons/Magnifier");
+    var qe =  e.n(Te);
     // CONCATENATED MODULE: ./src/Select/icons/Search.tsx
     var Ne = function e() {
         var t = (0, Ae.useSplunkTheme)(), n = t.isEnterprise, o = t.isCompact;
-        var i = (0, u._)("Search");
-        var a = o ? "20px" : "24px";
-        var l = n ?  r().createElement(Te(), {
+        var a = (0, u._)("Search");
+        var i = o ? "20px" : "24px";
+        var l = n ?  r().createElement(De(), {
             role: "presentation",
             size: "16px",
-            screenReaderText: i,
+            screenReaderText: a,
             hideDefaultTooltip: true
         }) :  r().createElement(qe(), {
             role: "presentation",
-            "aria-label": i,
-            width: a,
-            height: a
+            "aria-label": a,
+            width: i,
+            height: i
         });
         return l;
     };
     /* harmony default export */    const Be = Ne;
     // CONCATENATED MODULE: external "styled-components"
     const Le = require("styled-components");
-    var Ke =  e.n(Le);
+    var Fe =  e.n(Le);
     // CONCATENATED MODULE: external "@splunk/react-ui/Clickable"
-    const Fe = require("@splunk/react-ui/Clickable");
-    var $e =  e.n(Fe);
+    const Ke = require("@splunk/react-ui/Clickable");
+    var $e =  e.n(Ke);
     // CONCATENATED MODULE: external "@splunk/react-ui/Switch"
     const He = require("@splunk/react-ui/Switch");
     var ze =  e.n(He);
@@ -673,15 +673,15 @@
     }), Ae.variables.fontSizeSmall, (0, Ae.pick)({
         prisma: "16px"
     }));
-    var Ue = Ke().span.withConfig({
+    var Ue = Fe().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionBottom",
         componentId: "sc-4kc053-0"
     })([ "", ";display:block;" ], We);
-    var Ge = Ke().span.withConfig({
+    var Ge = Fe().span.withConfig({
         displayName: "ItemStyles__StyledItemDescriptionRight",
         componentId: "sc-4kc053-1"
     })([ "", ";float:right;padding-left:", ";max-width:50%;text-align:right;box-sizing:border-box;" ], We, Ae.variables.spacing);
-    var Je = Ke().div.withConfig({
+    var Je = Fe().div.withConfig({
         displayName: "ItemStyles__StyledItemSelectedIcon",
         componentId: "sc-4kc053-2"
     })([ "position:absolute;", " color:", ";" ], (0, Ae.pick)({
@@ -691,7 +691,7 @@
         prisma: Ae.variables.contentColorActive,
         enterprise: Ae.variables.accentColorL10
     }));
-    var Qe = Ke().span.withConfig({
+    var Qe = Fe().span.withConfig({
         displayName: "ItemStyles__StyledItemIcon",
         componentId: "sc-4kc053-3"
     })([ "flex:0 0 auto;padding-right:", ";min-width:10px;display:inline-block;text-align:center;vertical-align:", ";", "" ], (0, 
@@ -705,7 +705,7 @@
         prisma: (0, Le.css)([ "color:", ";display:inline-flex;align-items:center;min-width:20px;min-height:20px;& > svg{width:20px;height:20px;}" ], Ae.variables.contentColorMuted),
         enterprise: (0, Le.css)([ "transform:translateY(-1px);" ])
     }));
-    var Xe = Ke()($e()).withConfig({
+    var Xe = Fe()($e()).withConfig({
         displayName: "ItemStyles__StyledClickable",
         componentId: "sc-4kc053-4"
     })([ "display:block;position:relative;cursor:pointer;color:", ";word-wrap:break-word;max-width:100%;width:100%;padding:", ";", " ", " ", " &:not([disabled]){&:hover{background:", ";", "}&:focus{outline:0;box-shadow:", ";", "}", " ", "}&[disabled]{color:", ";cursor:not-allowed;", ",", "{color:inherit;}", "{cursor:not-allowed;color:", ";}", "}", "" ], (0, 
@@ -787,7 +787,7 @@
             Qe, Ae.variables.contentColorActive)
         });
     }));
-    var Ye = Ke()(ze()).withConfig({
+    var Ye = Fe()(ze()).withConfig({
         displayName: "ItemStyles__StyledSwitch",
         componentId: "sc-4kc053-5"
     })([ "position:absolute;left:", ";top:", ";" ], (0, Ae.pick)({
@@ -800,25 +800,25 @@
             compact: "2px"
         }
     }));
-    var Ze = Ke().span.withConfig({
+    var Ze = Fe().span.withConfig({
         displayName: "ItemStyles__StyledInnerWrapper",
         componentId: "sc-4kc053-6"
     })([ "display:flex;align-items:flex-start;" ]);
-    var et = Ke().span.withConfig({
+    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) {
         var t = e.$truncate;
         return t && (0, Le.css)([ "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" ]);
     }));
-    var tt = Ke().div.withConfig({
+    var tt = Fe().div.withConfig({
         displayName: "ItemStyles__StyledLabel",
         componentId: "sc-4kc053-8"
     })([ "overflow:inherit;white-space:inherit;text-overflow:inherit;max-width:100%;min-height:20px;", "" ], (function(e) {
         var t = e.$truncate;
         return t && (0, Le.css)([ "display:block;clear:both;" ]);
     }));
-    var nt = Ke().span.withConfig({
+    var nt = Fe().span.withConfig({
         displayName: "ItemStyles__StyledMatch",
         componentId: "sc-4kc053-9"
     })([ "border-bottom:1px solid ", ";" ], (0, Ae.pick)({
@@ -828,7 +828,7 @@
             light: Ae.variables.gray45
         }
     }));
-    var rt = Ke().span.withConfig({
+    var rt = Fe().span.withConfig({
         displayName: "ItemStyles__StyledSubmenu",
         componentId: "sc-4kc053-10"
     })([ "float:right;padding-left:", ";color:", ";", "" ], Ae.variables.spacingSmall, (0, 
@@ -839,11 +839,11 @@
         prisma: (0, Le.css)([ "& > svg{width:20px;height:20px;}" ])
     }));
     // CONCATENATED MODULE: ./src/Select/SelectAllOptionStyles.ts
-    var ot = Ke()(tt).withConfig({
+    var ot = Fe()(tt).withConfig({
         displayName: "SelectAllOptionStyles__StyledSelectAllLabel",
         componentId: "y6bn08-0"
     })([ "font-weight:", ";" ], Ae.variables.fontWeightBold);
-    var it = Ke()(M).withConfig({
+    var at = Fe()(M).withConfig({
         displayName: "SelectAllOptionStyles__StyledSelectAllOption",
         componentId: "y6bn08-1"
     })([ "padding-inline-start:", ";box-shadow:none;" ], (0, Ae.pick)({
@@ -851,26 +851,26 @@
         enterprise: "32px;"
     }));
     // CONCATENATED MODULE: ./src/Select/SelectAllOption.tsx
-    var at = {
-        active: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        id: i().string,
-        onClick: i().func,
-        selectAllLabel: i().string,
-        totalCount: i().number,
-        changedToggle: i().bool,
-        selected: i().oneOf([ false, true, "some" ])
+    var it = {
+        active: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        id: a().string,
+        onClick: a().func,
+        selectAllLabel: a().string,
+        totalCount: a().number,
+        changedToggle: a().bool,
+        selected: a().oneOf([ false, true, "some" ])
     };
     var lt =  r().forwardRef((function(e, t) {
-        var n = e.active, o = e.id, i = e.onClick, a = e.selectAllLabel, l = e.totalCount, s = e.changedToggle, c = e.selected;
+        var n = e.active, o = e.id, a = e.onClick, i = e.selectAllLabel, l = e.totalCount, s = e.changedToggle, c = e.selected;
         // When toggle is changed the total count is not displayed anymore so the count is now shown in the Select all menu item
                 var p = s ? " (".concat(l === null || l === void 0 ? void 0 : l.toString(), ")") : "";
         
-        return r().createElement(it, {
-            label: a,
+        return r().createElement(at, {
+            label: i,
             value: "selectAll",
             key: "selectAll",
-            onClick: i,
+            onClick: a,
             "data-test": "select-all",
             "aria-keyshortcuts": "Control+A",
             id: o,
@@ -895,15 +895,15 @@
             $truncate: false
         },  r().createElement(ot, {
             $truncate: false
-        }, a))));
+        }, i))));
     }));
-    lt.propTypes = at;
+    lt.propTypes = it;
     /* harmony default export */    const st = lt;
     // CONCATENATED MODULE: external "@splunk/react-ui/Button"
     const ct = require("@splunk/react-ui/Button");
     var ut =  e.n(ct);
     // CONCATENATED MODULE: ./src/Select/SelectBaseStyles.ts
-    var pt = Ke()(ut()).withConfig({
+    var pt = Fe()(ut()).withConfig({
         displayName: "SelectBaseStyles__StyledButton",
         componentId: "sc-16cj7sk-0"
     })([ "&[data-inline]{width:", ";}", "" ], (function(e) {
@@ -913,22 +913,22 @@
         var t = e.$multiple;
         return !t && "flex-grow: 0;";
     }));
-    var ft = Ke().span.withConfig({
+    var ft = Fe().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkIcon",
         componentId: "sc-16cj7sk-1"
     })([ "padding-right:2px;" ]);
-    var dt = Ke().span.withConfig({
+    var dt = Fe().span.withConfig({
         displayName: "SelectBaseStyles__StyledLinkCaret",
         componentId: "sc-16cj7sk-2"
     })([ "padding-left:2px;" ]);
-    var vt = Ke().div.withConfig({
+    var vt = Fe().div.withConfig({
         displayName: "SelectBaseStyles__StyledFilter",
         componentId: "sc-16cj7sk-3"
     })([ "padding:", ";min-width:160px;" ], (0, Ae.pick)({
         enterprise: "8px",
         prisma: "10px 16px"
     }));
-    var ht = Ke().span.withConfig({
+    var ht = Fe().span.withConfig({
         displayName: "SelectBaseStyles__StyledSearchIconWrapper",
         componentId: "sc-16cj7sk-4"
     })([ "color:", ";pointer-events:none;padding:", ";" ], (0, Ae.pick)({
@@ -941,21 +941,21 @@
         comfortable: "0 8px",
         compact: "0 6px"
     }));
-    var bt = Ke().span.withConfig({
+    var bt = Fe().span.withConfig({
         displayName: "SelectBaseStyles__StyledCount",
         componentId: "sc-16cj7sk-5"
     })([ "padding-right:", ";" ], (0, Ae.pick)({
         enterprise: Ae.variables.spacingQuarter,
         prisma: Ae.variables.spacingXSmall
     }));
-    var yt = Ke()(Se()).withConfig({
+    var yt = Fe()(Se()).withConfig({
         displayName: "SelectBaseStyles__StyledControlsLink",
         componentId: "sc-16cj7sk-6"
     })([ "margin-right:20px;", ";" ], (function(e) {
         var t = e.$disabled;
         return t && (0, Le.css)([ "color:", ";" ], Ae.variables.contentColorDisabled);
     }));
-    var mt = Ke().div.withConfig({
+    var mt = Fe().div.withConfig({
         displayName: "SelectBaseStyles__StyledToggleAllControls",
         componentId: "sc-16cj7sk-7"
     })([ "padding:", ";", "" ], (0, Ae.pick)({
@@ -982,7 +982,7 @@
         }
         var r = null;
         var o = false;
-        var i = t.filter((function(e) {
+        var a = t.filter((function(e) {
             var t = gt(e, n.index);
             if (t === n.value) {
                 o = true;
@@ -991,22 +991,22 @@
  // If we haven't found a match yet, keep track of the next closest match.
             // Secondary matching looks for the closest character of a higher value, and failing that, closest of a lower value.
                         if (!o) {
-                var i = gt(r, n.index);
-                if (!i) {
+                var a = gt(r, n.index);
+                if (!a) {
                     r = e;
                 } else if (t > n.value) {
-                    if (i < n.value) {
+                    if (a < n.value) {
                         r = e;
-                    } else if (i > t) {
+                    } else if (a > t) {
                         r = e;
                     }
-                } else if (t > i) {
+                } else if (t > a) {
                     r = e;
                 }
             }
             return false;
         }));
-        return i.length === 0 && r ? [ r ] : i;
+        return a.length === 0 && r ? [ r ] : a;
     };
     // CONCATENATED MODULE: ./src/utils/ssrDocument.ts
     /* eslint-disable @typescript-eslint/no-empty-function */
@@ -1145,30 +1145,30 @@
         return kt.apply(this, arguments);
     }
     function It(e, t) {
-        return Et(e) || _t(e, t) || Pt(e, t) || jt();
+        return Et(e) || jt(e, t) || Pt(e, t) || _t();
     }
-    function jt() {
+    function _t() {
         throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function _t(e, t) {
+    function jt(e, t) {
         if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(e))) return;
         var n = [];
         var r = true;
         var o = false;
-        var i = undefined;
+        var a = undefined;
         try {
-            for (var a = e[Symbol.iterator](), l; !(r = (l = a.next()).done); r = true) {
+            for (var i = e[Symbol.iterator](), l; !(r = (l = i.next()).done); r = true) {
                 n.push(l.value);
                 if (t && n.length === t) break;
             }
         } catch (e) {
             o = true;
-            i = e;
+            a = e;
         } finally {
             try {
-                if (!r && a["return"] != null) a["return"]();
+                if (!r && i["return"] != null) i["return"]();
             } finally {
-                if (o) throw i;
+                if (o) throw a;
             }
         }
         return n;
@@ -1184,26 +1184,26 @@
     }
     function Pt(e, t) {
         if (!e) return;
-        if (typeof e === "string") return Tt(e, t);
+        if (typeof e === "string") return Dt(e, t);
         var n = Object.prototype.toString.call(e).slice(8, -1);
         if (n === "Object" && e.constructor) n = e.constructor.name;
         if (n === "Map" || n === "Set") return Array.from(e);
-        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Tt(e, t);
+        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return Dt(e, t);
     }
     function Vt(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
     function Rt(e) {
-        if (Array.isArray(e)) return Tt(e);
+        if (Array.isArray(e)) return Dt(e);
     }
-    function Tt(e, t) {
+    function Dt(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var n = 0, r = new Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function Dt(e, t) {
+    function Tt(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
@@ -1242,20 +1242,20 @@
         };
         return Lt(e, t);
     }
-    function Kt(e) {
+    function Ft(e) {
         var t = Ht();
         return function n() {
             var r = zt(e), o;
             if (t) {
-                var i = zt(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = zt(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
-            return Ft(this, o);
+            return Kt(this, o);
         };
     }
-    function Ft(e, t) {
+    function Kt(e, t) {
         if (t && (Wt(t) === "object" || typeof t === "function")) {
             return t;
         }
@@ -1339,50 +1339,50 @@
         return e;
     }
     var Qt = {
-        allowKeyMatching: i().bool,
-        allowNewValues: i().bool,
-        animateLoading: i().bool,
-        appearance: i().oneOf([ "default", "link", "primary", "pill", "toggle", "flat" ]),
-        append: i().bool,
-        children: i().node,
-        defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
-        defaultValues: i().array,
-        describedBy: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        filter: i().oneOf([ false, true, "controlled" ]),
-        footerMessage: i().node,
-        inline: i().bool,
-        inputId: i().string,
-        inputRef: i().oneOfType([ i().func, i().object ]),
-        isLoadingOptions: i().bool,
-        labelledBy: i().string,
-        labelText: i().string,
-        loadingMessage: i().node,
-        menuStyle: i().object,
-        multiple: i().bool,
-        name: i().string,
-        noOptionsMessage: i().node,
-        onChange: i().func,
-        onClose: i().func,
-        onFilterChange: i().func,
-        onOpen: i().func,
-        onScroll: i().func,
-        onScrollBottom: i().func,
+        allowKeyMatching: a().bool,
+        allowNewValues: a().bool,
+        animateLoading: a().bool,
+        appearance: a().oneOf([ "default", "link", "primary", "pill", "toggle", "flat" ]),
+        append: a().bool,
+        children: a().node,
+        defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
+        defaultValues: a().array,
+        describedBy: a().string,
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        filter: a().oneOf([ false, true, "controlled" ]),
+        footerMessage: a().node,
+        inline: a().bool,
+        inputId: a().string,
+        inputRef: a().oneOfType([ a().func, a().object ]),
+        isLoadingOptions: a().bool,
+        labelledBy: a().string,
+        labelText: a().string,
+        loadingMessage: a().node,
+        menuStyle: a().object,
+        multiple: a().bool,
+        name: a().string,
+        noOptionsMessage: a().node,
+        onChange: a().func,
+        onClose: a().func,
+        onFilterChange: a().func,
+        onOpen: a().func,
+        onScroll: a().func,
+        onScrollBottom: a().func,
         /** @private. */
-        required: i().bool,
-        placeholder: i().string,
-        prefixLabel: i().string,
-        prepend: i().bool,
-        repositionMode: i().oneOf([ "none", "flip" ]),
-        selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
-        showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
-        suffixLabel: i().string,
-        tabConfirmsNewValue: i().bool,
-        values: i().array,
+        required: a().bool,
+        placeholder: a().string,
+        prefixLabel: a().string,
+        prepend: a().bool,
+        repositionMode: a().oneOf([ "none", "flip" ]),
+        selectAllAppearance: a().oneOf([ "buttongroup", "checkbox" ]),
+        showSelectedValuesFirst: a().oneOf([ "nextOpen", "immediately", "never" ]),
+        suffixLabel: a().string,
+        tabConfirmsNewValue: a().bool,
+        values: a().array,
         /** @private. */
-        virtualization: i().number
+        virtualization: a().number
     };
     var Xt = {
         allowKeyMatching: true,
@@ -1428,7 +1428,7 @@
     }
     var rn =  function(e) {
         Bt(o, e);
-        var t = Kt(o);
+        var t = Ft(o);
         Nt(o, null, [ {
             key: "validateAppearance",
             // @docs-props-type CompactPropsBase
@@ -1437,149 +1437,149 @@
             }
         } ]);
         function o(e) {
-            var i;
-            Dt(this, o);
-            i = t.call(this, e);
-            Jt($t(i), "activeItemId", void 0);
-            Jt($t(i), "activeValue", void 0);
-            Jt($t(i), "availableOptionCount", void 0);
-            Jt($t(i), "controlledExternally", void 0);
-            Jt($t(i), "displayedValues", void 0);
-            Jt($t(i), "dropdown", null);
-            Jt($t(i), "firstSelectedEnabledOption", null);
-            Jt($t(i), "firstSelectedOptionIndex", void 0);
-            Jt($t(i), "menuId", void 0);
-            Jt($t(i), "previousActiveIndex", null);
-            Jt($t(i), "selectedOptionCount", void 0);
-            Jt($t(i), "optionRefsByKey", void 0);
-            Jt($t(i), "matchCharacter", void 0);
-            Jt($t(i), "matchTimeout", void 0);
-            Jt($t(i), "currentMatchOptions", void 0);
-            Jt($t(i), "availableMatchOptions", void 0);
-            Jt($t(i), "optionSelection", void 0);
-            Jt($t(i), "resetMatches", (function() {
-                i.matchCharacter = null;
-                i.currentMatchOptions = [];
-                if (i.matchTimeout) {
-                    clearTimeout(i.matchTimeout);
+            var a;
+            Tt(this, o);
+            a = t.call(this, e);
+            Jt($t(a), "activeItemId", void 0);
+            Jt($t(a), "activeValue", void 0);
+            Jt($t(a), "availableOptionCount", void 0);
+            Jt($t(a), "controlledExternally", void 0);
+            Jt($t(a), "displayedValues", void 0);
+            Jt($t(a), "dropdown", null);
+            Jt($t(a), "firstSelectedEnabledOption", null);
+            Jt($t(a), "firstSelectedOptionIndex", void 0);
+            Jt($t(a), "menuId", void 0);
+            Jt($t(a), "previousActiveIndex", null);
+            Jt($t(a), "selectedOptionCount", void 0);
+            Jt($t(a), "optionRefsByKey", void 0);
+            Jt($t(a), "matchCharacter", void 0);
+            Jt($t(a), "matchTimeout", void 0);
+            Jt($t(a), "currentMatchOptions", void 0);
+            Jt($t(a), "availableMatchOptions", void 0);
+            Jt($t(a), "optionSelection", void 0);
+            Jt($t(a), "resetMatches", (function() {
+                a.matchCharacter = null;
+                a.currentMatchOptions = [];
+                if (a.matchTimeout) {
+                    clearTimeout(a.matchTimeout);
                 }
             }));
-            Jt($t(i), "handleSelectAll", (function(e) {
+            Jt($t(a), "handleSelectAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, s = a.children, c = a.multiple;
+                var i = a.props, l = i.name, s = i.children, c = i.multiple;
  // this doesn't make sense if we can't select multiple values
                                 if (!c) {
                     return;
                 }
-                var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
-                var p = de()(u.concat(i.displayedValues));
+                var u = (t = a.getCurrentValues()) !== null && t !== void 0 ? t : [];
+                var p = de()(u.concat(a.displayedValues));
                 p = r().Children.toArray(s).filter((function(e) {
                     return tn(e) && re()(p, e.props.value) && (!e.props.disabled || re()(u, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!i.isControlled()) {
-                    i.setState({
+                if (!a.isControlled()) {
+                    a.setState({
                         values: p
                     });
                 }
-                (n = (o = i.props).onChange) === null || n === void 0 ? void 0 : n.call(o, e, {
+                (n = (o = a.props).onChange) === null || n === void 0 ? void 0 : n.call(o, e, {
                     values: p,
                     name: l,
                     reason: "selectAll"
                 });
             }));
-            Jt($t(i), "handleClearAll", (function(e) {
+            Jt($t(a), "handleClearAll", (function(e) {
                 var t, n, o;
-                var a = i.props, l = a.name, s = a.children, c = a.multiple;
+                var i = a.props, l = i.name, s = i.children, c = i.multiple;
  // this doesn't make sense if we can't select multiple values
                                 if (!c) {
                     return;
                 }
-                var u = (t = i.getCurrentValues()) !== null && t !== void 0 ? t : [];
-                var p = he().apply(void 0, [ u ].concat(Mt(i.displayedValues)));
+                var u = (t = a.getCurrentValues()) !== null && t !== void 0 ? t : [];
+                var p = he().apply(void 0, [ u ].concat(Mt(a.displayedValues)));
  // this will unselect all selected values unless those values are disabled or hidden by the filter
                                 var f = r().Children.toArray(s).filter((function(e) {
                     return tn(e) && (re()(u, e.props.value) && e.props.disabled || re()(p, e.props.value));
                 })).map((function(e) {
                     return e.props.value;
                 }));
-                if (!i.isControlled()) {
-                    i.setState({
+                if (!a.isControlled()) {
+                    a.setState({
                         values: f
                     });
                 }
-                (n = (o = i.props).onChange) === null || n === void 0 ? void 0 : n.call(o, e, {
+                (n = (o = a.props).onChange) === null || n === void 0 ? void 0 : n.call(o, e, {
                     values: f,
                     name: l,
                     reason: "clearAll"
                 });
             }));
-            Jt($t(i), "handleTextKeyDown", (function(e) {
-                var t = i.props, r = t.children, o = t.onScrollBottom, a = t.tabConfirmsNewValue;
+            Jt($t(a), "handleTextKeyDown", (function(e) {
+                var t = a.props, r = t.children, o = t.onScrollBottom, i = t.tabConfirmsNewValue;
                 var l = (0, ge.keycode)(e.nativeEvent);
                 if (l === "tab") {
-                    if (a && !ie()(i.activeValue) && i.availableOptionCount <= 1) {
+                    if (i && !ae()(a.activeValue) && a.availableOptionCount <= 1) {
                         e.preventDefault();
-                        i.toggleValue(e, i.activeValue);
+                        a.toggleValue(e, a.activeValue);
                     }
                 }
                 if (e.shiftKey || e.metaKey || e.ctrlKey) {
                     if (l === "a" && (e.ctrlKey || e.metaKey)) {
                         // handle control + A
-                        if (i.optionSelection === "all") {
-                            i.handleClearAll(e);
+                        if (a.optionSelection === "all") {
+                            a.handleClearAll(e);
                         } else {
-                            i.handleSelectAll(e);
+                            a.handleSelectAll(e);
                         }
                     }
                     return;
                 }
                 if (l === "down") {
                     e.preventDefault();
-                    i.setState((function(e) {
+                    a.setState((function(e) {
                         return {
-                            activeIndex: Math.min(e.activeIndex + 1, i.props.selectAllAppearance === "checkbox" ? i.availableOptionCount : i.availableOptionCount - 1)
+                            activeIndex: Math.min(e.activeIndex + 1, a.props.selectAllAppearance === "checkbox" ? a.availableOptionCount : a.availableOptionCount - 1)
                         };
                     }));
                     if (r && o) {
                         var s;
-                        var c = n.Children.toArray(r).length - (2 + ((s = i.getCurrentValues()) !== null && s !== void 0 ? s : []).length);
-                        if (i.state.activeIndex === c) {
-                            i.handleScrollBottom(e);
+                        var c = n.Children.toArray(r).length - (2 + ((s = a.getCurrentValues()) !== null && s !== void 0 ? s : []).length);
+                        if (a.state.activeIndex === c) {
+                            a.handleScrollBottom(e);
                         }
                     }
                 }
                 if (l === "up") {
                     e.preventDefault();
-                    i.setState((function(e) {
+                    a.setState((function(e) {
                         return {
                             activeIndex: Math.max(e.activeIndex - 1, 0)
                         };
                     }));
                 }
-                if (l === "enter" && !ie()(i.activeValue) && i.state.open) {
-                    if (i.activeValue === "selectAll") {
-                        if (i.optionSelection === "all") {
-                            i.handleClearAll(e);
+                if (l === "enter" && !ae()(a.activeValue) && a.state.open) {
+                    if (a.activeValue === "selectAll") {
+                        if (a.optionSelection === "all") {
+                            a.handleClearAll(e);
                         } else {
-                            i.handleSelectAll(e);
+                            a.handleSelectAll(e);
                         }
                     } else {
                         e.preventDefault();
-                        i.toggleValue(e, i.activeValue);
+                        a.toggleValue(e, a.activeValue);
                     }
                 }
             }));
-            Jt($t(i), "handleMenuOptionClick", (function(e, t) {
+            Jt($t(a), "handleMenuOptionClick", (function(e, t) {
                 var n = t.value;
                 e.preventDefault();
-                if (!i.state.open) {
+                if (!a.state.open) {
                     return;
                 }
-                i.toggleValue(e, n);
+                a.toggleValue(e, n);
             }));
-            Jt($t(i), "handleMenuOptionKeyDown", (function(e, t) {
+            Jt($t(a), "handleMenuOptionKeyDown", (function(e, t) {
                 var n = e.nativeEvent.key;
  // Checking for a single character to avoid complications from double-byte languages and emojis.
                                 if (n.length === 1) {
@@ -1588,133 +1588,133 @@
                         index: 0,
                         value: n
                     };
-                    if (!i.matchCharacter) {
+                    if (!a.matchCharacter) {
                         if (n === " ") {
-                            i.resetMatches();
+                            a.resetMatches();
                             return;
                         }
-                        r = Ot(i.availableMatchOptions, o);
-                    } else if (i.currentMatchOptions.length > 1) {
-                        o.index = i.matchCharacter.index + 1;
-                        r = Ot(i.currentMatchOptions, o);
+                        r = Ot(a.availableMatchOptions, o);
+                    } else if (a.currentMatchOptions.length > 1) {
+                        o.index = a.matchCharacter.index + 1;
+                        r = Ot(a.currentMatchOptions, o);
                     }
                     if (r.length) {
-                        var a = 0;
+                        var i = 0;
  // If the active option is a first character match, cycle to the next matching option.
                                                 if (o.index === 0 && r.length > 1) {
-                            var l = r.indexOf(i.availableMatchOptions[t]);
+                            var l = r.indexOf(a.availableMatchOptions[t]);
                             if (l >= 0) {
-                                a = l === r.length - 1 ? 0 : l + 1;
+                                i = l === r.length - 1 ? 0 : l + 1;
                             }
                         }
-                        var s = r[a];
-                        var c = i.optionRefsByKey[nn(s.value, s.label)];
+                        var s = r[i];
+                        var c = a.optionRefsByKey[nn(s.value, s.label)];
                         if (c != null) {
                             var u;
                             (u = c.focus) === null || u === void 0 ? void 0 : u.call(c);
                         }
                     }
-                    i.currentMatchOptions = r;
-                    i.matchCharacter = o;
-                    if (i.matchTimeout) {
-                        clearTimeout(i.matchTimeout);
+                    a.currentMatchOptions = r;
+                    a.matchCharacter = o;
+                    if (a.matchTimeout) {
+                        clearTimeout(a.matchTimeout);
                     }
-                    i.matchTimeout = setTimeout(i.resetMatches, 500);
+                    a.matchTimeout = setTimeout(a.resetMatches, 500);
                     e.preventDefault();
                     e.stopPropagation();
                 }
             }));
-            Jt($t(i), "handleTextChange", (function(e, t) {
+            Jt($t(a), "handleTextChange", (function(e, t) {
                 var n, r;
                 var o = t.value;
-                i.setState({
+                a.setState({
                     filterKeyword: o,
                     open: true,
                     activeIndex: 0
                 });
-                (n = (r = i.props).onFilterChange) === null || n === void 0 ? void 0 : n.call(r, e, {
+                (n = (r = a.props).onFilterChange) === null || n === void 0 ? void 0 : n.call(r, e, {
                     keyword: o
                 });
             }));
-            Jt($t(i), "handleTextFocus", (function() {
-                i.setState({
+            Jt($t(a), "handleTextFocus", (function() {
+                a.setState({
                     textHasFocus: true
                 });
             }));
-            Jt($t(i), "handleTextBlur", (function() {
-                i.setState({
+            Jt($t(a), "handleTextBlur", (function() {
+                a.setState({
                     textHasFocus: false
                 });
             }));
-            Jt($t(i), "handleRequestOpen", (function(e) {
+            Jt($t(a), "handleRequestOpen", (function(e) {
                 var t = {
                     open: true,
-                    topValues: i.getTopValues()
+                    topValues: a.getTopValues()
                 };
  // SUI-3234: preserve existing behavior difference between <Select> and <Multiselect.Compact>
-                                if (i.props.multiple) {
+                                if (a.props.multiple) {
                     t.filterKeyword = "";
                 }
-                var n = i.state.filterKeyword;
-                i.setState(t, (function() {
+                var n = a.state.filterKeyword;
+                a.setState(t, (function() {
                     var t, r;
-                    (t = (r = i.props).onOpen) === null || t === void 0 ? void 0 : t.call(r);
-                    if (i.firstSelectedEnabledOption && !i.hasFilter()) {
-                        i.firstSelectedEnabledOption.focus();
+                    (t = (r = a.props).onOpen) === null || t === void 0 ? void 0 : t.call(r);
+                    if (a.firstSelectedEnabledOption && !a.hasFilter()) {
+                        a.firstSelectedEnabledOption.focus();
                     } else {
                         var o;
-                        i.setState({
-                            activeIndex: (o = i.firstSelectedOptionIndex) !== null && o !== void 0 ? o : 0
+                        a.setState({
+                            activeIndex: (o = a.firstSelectedOptionIndex) !== null && o !== void 0 ? o : 0
                         });
                     }
-                    if (n !== i.state.filterKeyword) {
-                        var a, l;
-                        (a = (l = i.props).onFilterChange) === null || a === void 0 ? void 0 : a.call(l, e, {
-                            keyword: i.state.filterKeyword
+                    if (n !== a.state.filterKeyword) {
+                        var i, l;
+                        (i = (l = a.props).onFilterChange) === null || i === void 0 ? void 0 : i.call(l, e, {
+                            keyword: a.state.filterKeyword
                         });
                     }
                 }));
             }));
-            Jt($t(i), "handleRequestClose", (function() {
-                i.setState({
+            Jt($t(a), "handleRequestClose", (function() {
+                a.setState({
                     open: false,
                     activeIndex: 0
                 }, (function() {
                     var e, t;
-                    i.previousActiveIndex = null;
-                    (e = (t = i.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
+                    a.previousActiveIndex = null;
+                    (e = (t = a.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
                 }));
             }));
-            Jt($t(i), "handleScrollBottom", (function(e) {
-                if (i.state.open && !i.props.isLoadingOptions) {
+            Jt($t(a), "handleScrollBottom", (function(e) {
+                if (a.state.open && !a.props.isLoadingOptions) {
                     var t, n;
-                    (t = (n = i.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
+                    (t = (n = a.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
                 }
             }));
-            Jt($t(i), "handleActiveOptionMount", (function(e) {
-                if (i.previousActiveIndex !== i.state.activeIndex) {
+            Jt($t(a), "handleActiveOptionMount", (function(e) {
+                if (a.previousActiveIndex !== a.state.activeIndex) {
                     e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
                 }
             }));
-            Jt($t(i), "handleOptionMount", (function(e, t, n) {
+            Jt($t(a), "handleOptionMount", (function(e, t, n) {
                 if (n) {
-                    i.firstSelectedEnabledOption = e;
+                    a.firstSelectedEnabledOption = e;
                 }
                 if (e == null) {
-                    delete i.optionRefsByKey[t];
+                    delete a.optionRefsByKey[t];
                 } else {
-                    i.optionRefsByKey[t] = e;
+                    a.optionRefsByKey[t] = e;
                 }
             }));
-            Jt($t(i), "createToggle", (function() {
+            Jt($t(a), "createToggle", (function() {
                 var e;
-                var t = i.props, a = t.toggle, l = t.appearance, s = t.children, p = t.describedBy, f = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, y = t.labelText, m = t.multiple, g = t.placeholder, O = t.prefixLabel, w = t.required, S = t.suffixLabel;
+                var t = a.props, i = t.toggle, l = t.appearance, s = t.children, p = t.describedBy, f = t.disabled, d = t.elementRef, v = t.error, h = t.inline, b = t.labelledBy, y = t.labelText, m = t.multiple, g = t.placeholder, O = t.prefixLabel, w = t.required, S = t.suffixLabel;
                 var C;
                 var x;
  // Generate buttonLabels
-                                var k = (e = i.getCurrentValues()) !== null && e !== void 0 ? e : [];
+                                var k = (e = a.getCurrentValues()) !== null && e !== void 0 ? e : [];
                 var I = n.Children.toArray(s);
-                var j = k.reduce((function(e, t, n, r) {
+                var _ = k.reduce((function(e, t, n, r) {
                     var o = Z()(I, (function(e) {
                         return tn(e) && e.props.value === t;
                     }));
@@ -1733,10 +1733,10 @@
                     }
                     return e;
                 }), []);
-                x = j;
+                x = _;
  // only apply prefix / suffix if the label is not empty
                                 if (x.length > 0) {
-                    x = i.wrapLabel({
+                    x = a.wrapLabel({
                         prefixLabel: O,
                         label: x,
                         suffixLabel: S
@@ -1749,11 +1749,11 @@
                 }))) {
                     x = Yt(g);
                 }
-                var _ = x;
+                var j = x;
  // If there's more than one item selected, read out the selected total
                 // rather than reading out each selected item
                                 if (x.length > 1) {
-                    _ = i.wrapLabel({
+                    j = a.wrapLabel({
                         prefixLabel: O,
                         label: [ "".concat(k.length, " items selected") ],
                         suffixLabel: S
@@ -1761,7 +1761,7 @@
                 }
                 var E = Gt({
                     "aria-describedby": p,
-                    "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(_),
+                    "aria-label": "".concat(y ? "".concat(y, ", ") : "").concat(j),
                     "aria-labelledby": y ? undefined : b,
                     "aria-multiselectable": m || undefined,
                     "aria-required": w,
@@ -1770,16 +1770,16 @@
                     disabled: f,
                     elementRef: d,
                     error: v
-                }, c()(i.props, le()(o.propTypes)));
+                }, c()(a.props, le()(o.propTypes)));
                 if (m) {
                     E["data-test-values"] = JSON.stringify(k);
                 } else {
                     var M = It(k, 1), A = M[0];
                     E["data-test-value"] = A;
                 }
-                if (a) {
+                if (i) {
                     
-                    return (0, n.cloneElement)(a, E);
+                    return (0, n.cloneElement)(i, E);
                 }
                 if (l === "link") {
                     
@@ -1797,61 +1797,61 @@
                     inline: h,
                     isMenu: true,
                     "aria-haspopup": "listbox",
-                    "aria-owns": i.menuId,
-                    onClick: i.props.onClick
-                }, pe()(i.props, o.invalidLinkAppearanceProps)), !!k.length && m &&  r().createElement(bt, {
+                    "aria-owns": a.menuId,
+                    onClick: a.props.onClick
+                }, pe()(a.props, o.invalidLinkAppearanceProps)), !!k.length && m &&  r().createElement(bt, {
                     "data-role": "count"
                 }, "(", k.length, ")"));
             }));
-            Jt($t(i), "createChildren", (function() {
-                var e = i.state, t = e.filterKeyword, o = e.textHasFocus, a = e.topValues;
-                var l = i.props, s = l.allowKeyMatching, c = l.allowNewValues, f = l.filter, d = l.multiple, v = l.selectAllAppearance, h = l.showSelectedValuesFirst, b = l.isLoadingOptions, y = l.onScrollBottom;
-                var m = i.getCurrentValues();
-                i.availableOptionCount = 0;
-                i.firstSelectedOptionIndex = undefined;
-                i.selectedOptionCount = 0;
-                i.activeValue = undefined;
-                i.availableMatchOptions = [];
+            Jt($t(a), "createChildren", (function() {
+                var e = a.state, t = e.filterKeyword, o = e.textHasFocus, i = e.topValues;
+                var l = a.props, s = l.allowKeyMatching, c = l.allowNewValues, f = l.filter, d = l.multiple, v = l.selectAllAppearance, h = l.showSelectedValuesFirst, b = l.isLoadingOptions, y = l.onScrollBottom;
+                var m = a.getCurrentValues();
+                a.availableOptionCount = 0;
+                a.firstSelectedOptionIndex = undefined;
+                a.selectedOptionCount = 0;
+                a.activeValue = undefined;
+                a.availableMatchOptions = [];
                 var g;
                 var O = 0;
                 var w = false;
  // used to avoid overwriting the selected item ref in multiple mode
                                 var S;
-                var C = h === "immediately" ? i.getTopValues() : a;
-                var x = n.Children.toArray(i.props.children).reduce((function(e, t, o) {
+                var C = h === "immediately" ? a.getTopValues() : i;
+                var x = n.Children.toArray(a.props.children).reduce((function(e, t, o) {
                     // ignore Headings and Dividers
                     if (!tn(t)) {
                         e.push(t);
                         return e;
                     }
  // Find out if the search string exactly matches a value
-                                        if (t.props.value === i.state.filterKeyword) {
+                                        if (t.props.value === a.state.filterKeyword) {
                         g = true;
                     }
-                    var a = m && m.indexOf(t.props.value) >= 0;
-                    var l = !!a && !t.props.disabled && !S;
+                    var i = m && m.indexOf(t.props.value) >= 0;
+                    var l = !!i && !t.props.disabled && !S;
                     var c = s && !d && !f && !b && !y;
                     var u = nn(t.props.value, t.props.label);
                     var v = -1;
                     if (c && !t.props.disabled && !t.props.hidden) {
-                        i.availableMatchOptions.push({
+                        a.availableMatchOptions.push({
                             label: t.props.label,
                             value: t.props.value
                         });
-                        v = i.availableMatchOptions.length - 1;
+                        v = a.availableMatchOptions.length - 1;
                     }
  // Format the Menu.Item
                                         var h =  (0, n.cloneElement)(t, {
                         key: t.key || o,
-                        onClick: i.handleMenuOptionClick,
+                        onClick: a.handleMenuOptionClick,
                         onKeyDown: c ? function(e) {
-                            return i.handleMenuOptionKeyDown(e, v);
+                            return a.handleMenuOptionKeyDown(e, v);
                         } : undefined,
-                        selected: a,
+                        selected: i,
                         multiple: d,
                         role: "option",
                         ref: function e(t) {
-                            return i.handleOptionMount(t, u, l);
+                            return a.handleOptionMount(t, u, l);
                         }
                     });
                     if (l) {
@@ -1878,7 +1878,7 @@
                             return tn(t) && t.props && t.props.value === e;
                         }));
                         if (!t) {
-                            if (e === i.state.filterKeyword) {
+                            if (e === a.state.filterKeyword) {
                                 g = true;
                             }
                             var n = C && C.indexOf(e) >= 0;
@@ -1894,7 +1894,7 @@
                                 label: String(e),
                                 value: e,
                                 key: "missing-value-".concat(e),
-                                onClick: i.handleMenuOptionClick,
+                                onClick: a.handleMenuOptionClick,
                                 multiple: d,
                                 selected: true
                             }));
@@ -1926,17 +1926,17 @@
                 }));
  // Add the option to add the new value
                                 if (c && !g && t) {
-                    var j = w ? O + 1 : O;
-                    x.splice(j, 0,  r().createElement(M, {
+                    var _ = w ? O + 1 : O;
+                    x.splice(_, 0,  r().createElement(M, {
                         label: "".concat(t, " (new value)"),
                         value: t,
                         key: "newValue",
                         multiple: d,
-                        onClick: i.handleMenuOptionClick
+                        onClick: a.handleMenuOptionClick
                     }));
                 }
  // When selectAll is a menu item, add an offset so that activeItem accounts for the extra selectAll option.
-                                var _ = v === "checkbox" && d && x.length > 1 ? 1 : 0;
+                                var j = v === "checkbox" && d && x.length > 1 ? 1 : 0;
                 var E = true;
  // Highlight the selected Items and remove hidden
                                 x = x.reduce((function(e, t) {
@@ -1949,13 +1949,13 @@
                                         if (t.props && t.props.hidden) {
                         return e;
                     }
-                    if (t.props.selected && !t.props.disabled && i.firstSelectedOptionIndex == null) {
-                        i.firstSelectedOptionIndex = i.availableOptionCount;
+                    if (t.props.selected && !t.props.disabled && a.firstSelectedOptionIndex == null) {
+                        a.firstSelectedOptionIndex = a.availableOptionCount;
                     }
-                    var r = _ === i.state.activeIndex;
-                    _ += 1;
-                    i.availableOptionCount += 1;
-                    i.selectedOptionCount += t.props.selected ? 1 : 0;
+                    var r = j === a.state.activeIndex;
+                    j += 1;
+                    a.availableOptionCount += 1;
+                    a.selectedOptionCount += t.props.selected ? 1 : 0;
                     if (t.key !== "newValue" && !t.props.disabled && !t.props.selected) {
                         E = false;
                     }
@@ -1964,22 +1964,22 @@
                         return e;
                     }
                     if (!t.props.disabled) {
-                        i.activeValue = t.props.value;
+                        a.activeValue = t.props.value;
                     }
-                    var a =  (0, n.cloneElement)(t, {
+                    var i =  (0, n.cloneElement)(t, {
                         active: r,
-                        id: i.activeItemId,
-                        ref: i.handleActiveOptionMount
+                        id: a.activeItemId,
+                        ref: a.handleActiveOptionMount
                     });
-                    e.push(a);
+                    e.push(i);
                     return e;
                 }), []);
-                i.optionSelection = i.selectedOptionCount === 0 && "none" || E && "all" || "some";
+                a.optionSelection = a.selectedOptionCount === 0 && "none" || E && "all" || "some";
  // add select all option
-                                if (v === "checkbox" && d && i.availableOptionCount > 0) {
+                                if (v === "checkbox" && d && a.availableOptionCount > 0) {
                     var A;
                     var P;
-                    if (i.optionSelection === "all") {
+                    if (a.optionSelection === "all") {
                         if (t === "") {
                             P = (0, u._)("Clear all");
                         } else {
@@ -1990,25 +1990,25 @@
                     } else {
                         P = (0, u._)("Select all matches");
                     }
-                    if (i.state.activeIndex === 0 && o) {
-                        i.activeValue = "selectAll";
+                    if (a.state.activeIndex === 0 && o) {
+                        a.activeValue = "selectAll";
                     }
                     x.unshift( r().createElement(st, {
                         key: "selectAllOption",
-                        selected: i.optionSelection === "all" || i.optionSelection !== "none" && "some",
+                        selected: a.optionSelection === "all" || a.optionSelection !== "none" && "some",
                         selectAllLabel: P,
-                        totalCount: (A = i.getCurrentValues()) === null || A === void 0 ? void 0 : A.length,
-                        changedToggle: !!i.props.toggle,
-                        onClick: i.optionSelection === "all" ? i.handleClearAll : i.handleSelectAll,
-                        id: i.state.activeIndex === 0 ? i.activeItemId : undefined,
-                        active: i.state.activeIndex === 0,
-                        ref: i.handleActiveOptionMount,
+                        totalCount: (A = a.getCurrentValues()) === null || A === void 0 ? void 0 : A.length,
+                        changedToggle: !!a.props.toggle,
+                        onClick: a.optionSelection === "all" ? a.handleClearAll : a.handleSelectAll,
+                        id: a.state.activeIndex === 0 ? a.activeItemId : undefined,
+                        active: a.state.activeIndex === 0,
+                        ref: a.handleActiveOptionMount,
                         tabIndex: -1
                     }),  r().createElement(p.Divider, {
                         key: "selectAllDivider"
                     }));
                 }
-                i.displayedValues = x.reduce((function(e, t) {
+                a.displayedValues = x.reduce((function(e, t) {
                     if (tn(t)) {
                         e.push(t.props.value);
                     }
@@ -2016,7 +2016,7 @@
                 }), []);
                 return x;
             }));
-            Jt($t(i), "wrapLabel", (function(e) {
+            Jt($t(a), "wrapLabel", (function(e) {
                 var t = e.prefixLabel, n = e.label, r = e.suffixLabel;
                 var o = n;
                 if (t) {
@@ -2027,10 +2027,10 @@
                 }
                 return o;
             }));
-            Jt($t(i), "handleDropdownMount", (function(e) {
-                i.dropdown = e;
+            Jt($t(a), "handleDropdownMount", (function(e) {
+                a.dropdown = e;
             }));
-            i.state = {
+            a.state = {
                 activeIndex: 0,
                 filterKeyword: "",
                 open: false,
@@ -2038,23 +2038,23 @@
                 topValues: [],
                 values: e.defaultValues || []
             };
-            i.controlledExternally = l()(e, "values");
-            i.displayedValues = [];
-            i.availableOptionCount = 0;
-            i.firstSelectedOptionIndex = undefined;
-            i.selectedOptionCount = 0;
-            i.matchCharacter = null;
-            i.matchTimeout = null;
-            i.currentMatchOptions = [];
-            i.availableMatchOptions = [];
-            i.optionRefsByKey = {};
-            i.optionSelection = "none";
+            a.controlledExternally = l()(e, "values");
+            a.displayedValues = [];
+            a.availableOptionCount = 0;
+            a.firstSelectedOptionIndex = undefined;
+            a.selectedOptionCount = 0;
+            a.matchCharacter = null;
+            a.matchTimeout = null;
+            a.currentMatchOptions = [];
+            a.availableMatchOptions = [];
+            a.optionRefsByKey = {};
+            a.optionSelection = "none";
             if (false) {}
             if (false) {}
             o.validateAppearance(e);
-            i.menuId = (0, be.createDOMID)("menu");
-            i.activeItemId = (0, be.createDOMID)("active-item");
-            return i;
+            a.menuId = (0, be.createDOMID)("menu");
+            a.activeItemId = (0, be.createDOMID)("active-item");
+            return a;
         }
         Nt(o, [ {
             key: "componentDidUpdate",
@@ -2090,16 +2090,16 @@
         }, {
             key: "toggleValue",
             value: function e(t, n) {
-                var r, o, i;
-                var a = (r = this.getCurrentValues()) !== null && r !== void 0 ? r : [];
-                var l = a.indexOf(n);
+                var r, o, a;
+                var i = (r = this.getCurrentValues()) !== null && r !== void 0 ? r : [];
+                var l = i.indexOf(n);
                 var s = this.props, c = s.name, u = s.multiple;
                 var p;
                 if (u) {
                     if (l >= 0) {
-                        p = [].concat(Mt(a.slice(0, l)), Mt(a.slice(l + 1)));
+                        p = [].concat(Mt(i.slice(0, l)), Mt(i.slice(l + 1)));
                     } else {
-                        p = a.concat([ n ]);
+                        p = i.concat([ n ]);
                     }
                 } else {
                     // non-multiple mode must always have a value
@@ -2126,7 +2126,7 @@
                     });
                     this.focus();
                 }
-                (o = (i = this.props).onChange) === null || o === void 0 ? void 0 : o.call(i, t, {
+                (o = (a = this.props).onChange) === null || o === void 0 ? void 0 : o.call(a, t, {
                     values: p,
                     name: c,
                     reason: "valueToggle"
@@ -2144,8 +2144,8 @@
             key: "renderControls",
             value: function e(t) {
                 var n = t.hasChildren, o = t.placement;
-                var i = this.state.filterKeyword;
-                var a = this.props, l = a.inputId, s = a.inputRef, c = a.multiple, p = a.selectAllAppearance;
+                var a = this.state.filterKeyword;
+                var i = this.props, l = i.inputId, s = i.inputRef, c = i.multiple, p = i.selectAllAppearance;
                 var f = (0, u._)("Select all options".concat(this.optionSelection === "all" ? " disabled" : ""));
                 var d = (0, u._)("Clear all options".concat(this.optionSelection === "none" ? " disabled" : ""));
  // only visually disable these as opposed to fully disabling to avoid losing keyboard focus - see SUI-2731
@@ -2157,19 +2157,19 @@
                     "aria-label": f,
                     onClick: this.handleSelectAll,
                     "data-test": "select-all"
-                }, i ? (0, u._)("Select all Matches") : (0, u._)("Select all")),  r().createElement(yt, {
+                }, a ? (0, u._)("Select all Matches") : (0, u._)("Select all")),  r().createElement(yt, {
                     $disabled: this.optionSelection === "none",
                     "aria-label": d,
                     onClick: this.handleClearAll,
                     "data-test": "clear-all"
-                }, i ? (0, u._)("Clear all Matches") : (0, u._)("Clear all")));
+                }, a ? (0, u._)("Clear all Matches") : (0, u._)("Clear all")));
                 return this.hasFilter() &&  r().createElement("div", {
                     key: "controls"
                 },  r().createElement(vt, {
                     key: "filter",
                     "data-test": "filter"
                 },  r().createElement(Ie(), {
-                    value: i,
+                    value: a,
                     autoCapitalize: "off",
                     autoComplete: "off",
                     autoCorrect: "off",
@@ -2193,10 +2193,10 @@
             key: "render",
             value: function e() {
                 var t, o = this;
-                var i = this.props, a = i.children, l = i.defaultPlacement, s = i.inputId, c = i.multiple, u = i.repositionMode, p = i.virtualization;
+                var a = this.props, i = a.children, l = a.defaultPlacement, s = a.inputId, c = a.multiple, u = a.repositionMode, p = a.virtualization;
                 var f = this.hasFilter();
                 var d = (t = this.getCurrentValues()) !== null && t !== void 0 ? t : [];
-                var v = n.Children.toArray(a);
+                var v = n.Children.toArray(i);
                 var h = d.some((function(e) {
                     var t = Z()(v, (function(t) {
                         return tn(t) && t.props.value === e;
@@ -2206,22 +2206,22 @@
                 var b = this.createChildren();
                 var y = this.createToggle();
                 var m = function e(t) {
-                    var n = t.anchorWidth, i = t.maxHeight, a = t.placement;
+                    var n = t.anchorWidth, a = t.maxHeight, i = t.placement;
                     var l = Zt({
                         anchorWidth: n,
                         isMultiple: o.props.multiple,
-                        maxHeight: i,
+                        maxHeight: a,
                         menuStyle: o.props.menuStyle
                     });
                     var s = d.length > 0 && !h && !o.hasFilter() ? 0 : undefined;
                     var u = Gt(Gt({
                         "aria-multiselectable": c || undefined,
                         childrenStart: o.renderControls({
-                            placement: a,
+                            placement: i,
                             hasChildren: !!b.length
                         }),
                         controlledExternally: o.hasFilter(),
-                        placement: a !== null && a !== void 0 ? a : undefined,
+                        placement: i !== null && i !== void 0 ? i : undefined,
                         onScrollBottom: o.props.onScrollBottom ? o.handleScrollBottom : undefined,
                         "data-test": "results-menu",
                         isLoading: o.props.isLoadingOptions,
@@ -2299,9 +2299,9 @@
         var n = cn(e, t);
         var r, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                r = i[o];
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
                 if (t.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
                 n[r] = e[r];
@@ -2313,9 +2313,9 @@
         if (e == null) return {};
         var n = {};
         var r = Object.keys(e);
-        var o, i;
-        for (i = 0; i < r.length; i++) {
-            o = r[i];
+        var o, a;
+        for (a = 0; a < r.length; a++) {
+            o = r[a];
             if (t.indexOf(o) >= 0) continue;
             n[o] = e[o];
         }
@@ -2365,8 +2365,8 @@
         return function n() {
             var r = gn(e), o;
             if (t) {
-                var i = gn(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = gn(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
@@ -2416,41 +2416,41 @@
         return e;
     }
     var wn = {
-        allowNewValues: i().bool,
-        animateLoading: i().bool,
-        children: i().node,
-        controlledFilter: i().bool,
-        defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
-        defaultValues: i().array,
-        describedBy: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        filter: i().oneOf([ false, true, "controlled" ]),
-        footerMessage: i().node,
-        inline: i().bool,
-        inputId: i().string,
-        inputRef: i().oneOfType([ i().func, i().object ]),
-        isLoadingOptions: i().bool,
-        labelledBy: i().string,
-        loadingMessage: i().node,
-        menuStyle: i().object,
-        name: i().string,
-        noOptionsMessage: i().node,
-        onChange: i().func,
-        onClose: i().func,
-        onFilterChange: i().func,
-        onOpen: i().func,
-        onScroll: i().func,
-        onScrollBottom: i().func,
-        placeholder: i().string,
-        repositionMode: i().oneOf([ "none", "flip" ]),
-        selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
-        showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
-        tabConfirmsNewValue: i().bool,
-        values: i().array,
+        allowNewValues: a().bool,
+        animateLoading: a().bool,
+        children: a().node,
+        controlledFilter: a().bool,
+        defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
+        defaultValues: a().array,
+        describedBy: a().string,
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        filter: a().oneOf([ false, true, "controlled" ]),
+        footerMessage: a().node,
+        inline: a().bool,
+        inputId: a().string,
+        inputRef: a().oneOfType([ a().func, a().object ]),
+        isLoadingOptions: a().bool,
+        labelledBy: a().string,
+        loadingMessage: a().node,
+        menuStyle: a().object,
+        name: a().string,
+        noOptionsMessage: a().node,
+        onChange: a().func,
+        onClose: a().func,
+        onFilterChange: a().func,
+        onOpen: a().func,
+        onScroll: a().func,
+        onScrollBottom: a().func,
+        placeholder: a().string,
+        repositionMode: a().oneOf([ "none", "flip" ]),
+        selectAllAppearance: a().oneOf([ "buttongroup", "checkbox" ]),
+        showSelectedValuesFirst: a().oneOf([ "nextOpen", "immediately", "never" ]),
+        tabConfirmsNewValue: a().bool,
+        values: a().array,
         /** @private */
-        virtualization: i().number
+        virtualization: a().number
     };
     var Sn = {
         allowNewValues: false,
@@ -2477,16 +2477,16 @@
             key: "render",
             // @docs-props-type CompactPropsBase
             value: function e() {
-                var t = this.props, o = t.defaultValues, i = t.children, a = t.controlledFilter, l = t.filter, s = t.values, c = sn(t, [ "defaultValues", "children", "controlledFilter", "filter", "values" ]);
+                var t = this.props, o = t.defaultValues, a = t.children, i = t.controlledFilter, l = t.filter, s = t.values, c = sn(t, [ "defaultValues", "children", "controlledFilter", "filter", "values" ]);
                 var u = true;
                 if (l != null) {
                     u = l;
                     if (false) {}
                 } else {
-                    u = a ? "controlled" : true;
+                    u = i ? "controlled" : true;
                 }
                 var p = {
-                    children: n.Children.toArray(i).map((function(e) {
+                    children: n.Children.toArray(a).map((function(e) {
                         if (tn(e)) {
                             
                             return r().createElement(M, ln({}, e.props, {
@@ -2521,8 +2521,8 @@
     const kn = require("lodash/defer");
     var In =  e.n(kn);
     // CONCATENATED MODULE: external "lodash/extend"
-    const jn = require("lodash/extend");
-    var _n =  e.n(jn);
+    const _n = require("lodash/extend");
+    var jn =  e.n(_n);
     // CONCATENATED MODULE: external "lodash/get"
     const En = require("lodash/get");
     var Mn =  e.n(En);
@@ -2533,8 +2533,8 @@
     const Vn = require("lodash/last");
     var Rn =  e.n(Vn);
     // CONCATENATED MODULE: external "lodash/pickBy"
-    const Tn = require("lodash/pickBy");
-    var Dn =  e.n(Tn);
+    const Dn = require("lodash/pickBy");
+    var Tn =  e.n(Dn);
     // CONCATENATED MODULE: external "@splunk/react-ui/Chip"
     const qn = require("@splunk/react-ui/Chip");
     var Nn =  e.n(qn);
@@ -2542,13 +2542,15 @@
     const Bn = require("@splunk/react-ui/Popover");
     var Ln =  e.n(Bn);
     // CONCATENATED MODULE: external "@splunk/react-ui/ScreenReaderContent"
-    const Kn = require("@splunk/react-ui/ScreenReaderContent");
-    var Fn =  e.n(Kn);
+    const Fn = require("@splunk/react-ui/ScreenReaderContent");
+    var Kn =  e.n(Fn);
+    // CONCATENATED MODULE: external "@splunk/ui-utils/format"
+    const $n = require("@splunk/ui-utils/format");
     // CONCATENATED MODULE: external "@splunk/react-ui/Box"
-    const $n = require("@splunk/react-ui/Box");
-    var Hn =  e.n($n);
+    const Hn = require("@splunk/react-ui/Box");
+    var zn =  e.n(Hn);
     // CONCATENATED MODULE: ./src/Multiselect/NormalStyles.ts
-    var zn = Ke()(Hn()).withConfig({
+    var Wn = Fe()(zn()).withConfig({
         displayName: "NormalStyles__StyledBox",
         componentId: "sc-1uwwpco-0"
     })([ "border-radius:", ";align-items:", ";flex-wrap:wrap;min-height:", ";max-height:300px;overflow-y:auto;border:1px solid ", ";padding:", ";", " ", " ", " ", " ", " &[data-inline]{width:400px;}[data-inline='true'] + &{margin-left:", "}" ], Ae.variables.borderRadius, (0, 
@@ -2597,11 +2599,11 @@
         enterprise: Ae.variables.spacingHalf,
         prisma: Ae.variables.spacingSmall
     }));
-    var Wn = Ke().div.withConfig({
+    var Un = Fe().div.withConfig({
         displayName: "NormalStyles__StyledInputWrapper",
         componentId: "sc-1uwwpco-1"
     })([ "flex:1 0 auto;max-width:100%;" ]);
-    var Un = Ke().input.withConfig({
+    var Gn = Fe().input.withConfig({
         displayName: "NormalStyles__StyledInput",
         componentId: "sc-1uwwpco-2"
     })([ "", ";min-width:100%;max-width:100%;line-height:12px;", "" ], Ae.mixins.reset("block"), (0, 
@@ -2615,7 +2617,7 @@
             compact: (0, Le.css)([ "padding:3px;" ])
         }
     }));
-    var Gn = Ke().div.withConfig({
+    var Jn = Fe().div.withConfig({
         displayName: "NormalStyles__StyledOverlay",
         componentId: "sc-1uwwpco-3"
     })([ "", "" ], (function(e) {
@@ -2629,7 +2631,7 @@
  * @param ref - The React callback or object ref. Can be `null` or `undefined`.
  * @param current - The new value of the ref.
  */
-    function Jn(e, t) {
+    function Qn(e, t) {
         if (e) {
             if (typeof e === "function") {
                 e(t);
@@ -2642,47 +2644,47 @@
         }
     }
     // CONCATENATED MODULE: ./src/Multiselect/Normal.tsx
-    function Qn(e) {
+    function Xn(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            Qn = function e(t) {
+            Xn = function e(t) {
                 return typeof t;
             };
         } else {
-            Qn = function e(t) {
+            Xn = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return Qn(e);
+        return Xn(e);
     }
-    function Xn(e) {
-        return tr(e) || er(e) || Zn(e) || Yn();
+    function Yn(e) {
+        return nr(e) || tr(e) || er(e) || Zn();
     }
-    function Yn() {
+    function Zn() {
         throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
     }
-    function Zn(e, t) {
+    function er(e, t) {
         if (!e) return;
-        if (typeof e === "string") return nr(e, t);
+        if (typeof e === "string") return rr(e, t);
         var n = Object.prototype.toString.call(e).slice(8, -1);
         if (n === "Object" && e.constructor) n = e.constructor.name;
         if (n === "Map" || n === "Set") return Array.from(e);
-        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return nr(e, t);
+        if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return rr(e, t);
     }
-    function er(e) {
+    function tr(e) {
         if (typeof Symbol !== "undefined" && Symbol.iterator in Object(e)) return Array.from(e);
     }
-    function tr(e) {
-        if (Array.isArray(e)) return nr(e);
+    function nr(e) {
+        if (Array.isArray(e)) return rr(e);
     }
-    function nr(e, t) {
+    function rr(e, t) {
         if (t == null || t > e.length) t = e.length;
         for (var n = 0, r = new Array(t); n < t; n++) {
             r[n] = e[n];
         }
         return r;
     }
-    function rr(e, t) {
+    function or(e, t) {
         var n = Object.keys(e);
         if (Object.getOwnPropertySymbols) {
             var r = Object.getOwnPropertySymbols(e);
@@ -2693,17 +2695,17 @@
         }
         return n;
     }
-    function or(e) {
+    function ar(e) {
         for (var t = 1; t < arguments.length; t++) {
             var n = arguments[t] != null ? arguments[t] : {};
             if (t % 2) {
-                rr(Object(n), true).forEach((function(t) {
-                    mr(e, t, n[t]);
+                or(Object(n), true).forEach((function(t) {
+                    gr(e, t, n[t]);
                 }));
             } else if (Object.getOwnPropertyDescriptors) {
                 Object.defineProperties(e, Object.getOwnPropertyDescriptors(n));
             } else {
-                rr(Object(n)).forEach((function(t) {
+                or(Object(n)).forEach((function(t) {
                     Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t));
                 }));
             }
@@ -2712,12 +2714,12 @@
     }
     function ir(e, t) {
         if (e == null) return {};
-        var n = ar(e, t);
+        var n = lr(e, t);
         var r, o;
         if (Object.getOwnPropertySymbols) {
-            var i = Object.getOwnPropertySymbols(e);
-            for (o = 0; o < i.length; o++) {
-                r = i[o];
+            var a = Object.getOwnPropertySymbols(e);
+            for (o = 0; o < a.length; o++) {
+                r = a[o];
                 if (t.indexOf(r) >= 0) continue;
                 if (!Object.prototype.propertyIsEnumerable.call(e, r)) continue;
                 n[r] = e[r];
@@ -2725,20 +2727,20 @@
         }
         return n;
     }
-    function ar(e, t) {
+    function lr(e, t) {
         if (e == null) return {};
         var n = {};
         var r = Object.keys(e);
-        var o, i;
-        for (i = 0; i < r.length; i++) {
-            o = r[i];
+        var o, a;
+        for (a = 0; a < r.length; a++) {
+            o = r[a];
             if (t.indexOf(o) >= 0) continue;
             n[o] = e[o];
         }
         return n;
     }
-    function lr() {
-        lr = Object.assign || function(e) {
+    function sr() {
+        sr = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -2749,14 +2751,14 @@
             }
             return e;
         };
-        return lr.apply(this, arguments);
+        return sr.apply(this, arguments);
     }
-    function sr(e, t) {
+    function cr(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function cr(e, t) {
+    function ur(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -2765,12 +2767,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function ur(e, t, n) {
-        if (t) cr(e.prototype, t);
-        if (n) cr(e, n);
+    function pr(e, t, n) {
+        if (t) ur(e.prototype, t);
+        if (n) ur(e, n);
         return e;
     }
-    function pr(e, t) {
+    function fr(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -2781,41 +2783,41 @@
                 configurable: true
             }
         });
-        if (t) fr(e, t);
+        if (t) dr(e, t);
     }
-    function fr(e, t) {
-        fr = Object.setPrototypeOf || function e(t, n) {
+    function dr(e, t) {
+        dr = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return fr(e, t);
+        return dr(e, t);
     }
-    function dr(e) {
-        var t = br();
+    function vr(e) {
+        var t = yr();
         return function n() {
-            var r = yr(e), o;
+            var r = mr(e), o;
             if (t) {
-                var i = yr(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = mr(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
-            return vr(this, o);
+            return hr(this, o);
         };
     }
-    function vr(e, t) {
-        if (t && (Qn(t) === "object" || typeof t === "function")) {
+    function hr(e, t) {
+        if (t && (Xn(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return hr(e);
+        return br(e);
     }
-    function hr(e) {
+    function br(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
         return e;
     }
-    function br() {
+    function yr() {
         if (typeof Reflect === "undefined" || !Reflect.construct) return false;
         if (Reflect.construct.sham) return false;
         if (typeof Proxy === "function") return true;
@@ -2826,13 +2828,13 @@
             return false;
         }
     }
-    function yr(e) {
-        yr = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function mr(e) {
+        mr = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return yr(e);
+        return mr(e);
     }
-    function mr(e, t, n) {
+    function gr(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -2845,42 +2847,42 @@
         }
         return e;
     }
-    var gr = {
-        allowNewValues: i().bool,
-        animateLoading: i().bool,
-        children: i().node,
-        controlledFilter: i().bool,
-        defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
-        defaultValues: i().array,
-        describedBy: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        footerMessage: i().node,
-        inline: i().bool,
-        inputId: i().string,
-        inputRef: i().oneOfType([ i().func, i().object ]),
-        isLoadingOptions: i().bool,
-        labelledBy: i().string,
-        loadingMessage: i().node,
-        menuStyle: i().object,
-        name: i().string,
-        noOptionsMessage: i().node,
-        onChange: i().func,
-        onClose: i().func,
-        onFilterChange: i().func,
-        onOpen: i().func,
-        onScroll: i().func,
-        onScrollBottom: i().func,
-        placeholder: i().string,
+    var Or = {
+        allowNewValues: a().bool,
+        animateLoading: a().bool,
+        children: a().node,
+        controlledFilter: a().bool,
+        defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
+        defaultValues: a().array,
+        describedBy: a().string,
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        footerMessage: a().node,
+        inline: a().bool,
+        inputId: a().string,
+        inputRef: a().oneOfType([ a().func, a().object ]),
+        isLoadingOptions: a().bool,
+        labelledBy: a().string,
+        loadingMessage: a().node,
+        menuStyle: a().object,
+        name: a().string,
+        noOptionsMessage: a().node,
+        onChange: a().func,
+        onClose: a().func,
+        onFilterChange: a().func,
+        onOpen: a().func,
+        onScroll: a().func,
+        onScrollBottom: a().func,
+        placeholder: a().string,
         /** @private. */
-        required: i().bool,
-        repositionMode: i().oneOf([ "none", "flip" ]),
-        tabConfirmsNewValue: i().bool,
-        useClickawayOverlay: i().bool,
-        values: i().array
+        required: a().bool,
+        repositionMode: a().oneOf([ "none", "flip" ]),
+        tabConfirmsNewValue: a().bool,
+        useClickawayOverlay: a().bool,
+        values: a().array
     };
-    var Or = {
+    var wr = {
         allowNewValues: false,
         animateLoading: false,
         defaultPlacement: "vertical",
@@ -2893,76 +2895,76 @@
         tabConfirmsNewValue: false,
         useClickawayOverlay: false
     };
-    var wr = ce()((function(e) {
+    var Sr = ce()((function(e) {
         return {
             flexBasis: e,
             width: e
         };
     }));
-    var Sr = ce()((function(e) {
+    var Cr = ce()((function(e) {
         var t = e.anchorWidth, n = e.maxHeight, r = e.menuStyle;
-        return _n()({
+        return jn()({
             maxHeight: n,
             overflow: "auto",
             width: Math.max(t !== null && t !== void 0 ? t : 0, 200)
         }, r);
     }));
  // TS: not typed controlled/uncontrolled, handled by Multiselect wrapper component
-        var Cr =  function(e) {
-        pr(o, e);
-        var t = dr(o);
+        var xr =  function(e) {
+        fr(o, e);
+        var t = vr(o);
         // @docs-props-type NormalPropsBase
                 function o(e) {
-            var i;
-            sr(this, o);
-            i = t.call(this, e);
-            mr(hr(i), "activeItemId", void 0);
-            mr(hr(i), "activeValue", void 0);
-            mr(hr(i), "availableOptionCount", void 0);
-            mr(hr(i), "children", void 0);
-            mr(hr(i), "controlledExternally", void 0);
-            mr(hr(i), "input", null);
-            mr(hr(i), "popoverId", void 0);
-            mr(hr(i), "previousActiveIndex", null);
-            mr(hr(i), "handleClick", (function() {
+            var a;
+            cr(this, o);
+            a = t.call(this, e);
+            gr(br(a), "activeItemId", void 0);
+            gr(br(a), "activeValue", void 0);
+            gr(br(a), "availableOptionCount", void 0);
+            gr(br(a), "children", void 0);
+            gr(br(a), "controlledExternally", void 0);
+            gr(br(a), "input", null);
+            gr(br(a), "popoverId", void 0);
+            gr(br(a), "previousActiveIndex", null);
+            gr(br(a), "handleClick", (function() {
                 var e;
-                (e = i.input) === null || e === void 0 ? void 0 : e.focus();
+                (e = a.input) === null || e === void 0 ? void 0 : e.focus();
             }));
-            mr(hr(i), "handleRequestRemove", (function(e, t) {
+            gr(br(a), "handleRequestRemove", (function(e, t) {
                 var n = t.value;
                 In()((function() {
-                    return i.removeValue(e, n);
+                    return a.removeValue(e, n);
                 }));
  // allow the event to bubble before removing.
                         }));
-            mr(hr(i), "handleInputFocus", (function(e) {
-                if (i.state.filterKeyword !== "") {
+            gr(br(a), "handleInputFocus", (function(e) {
+                if (a.state.filterKeyword !== "") {
                     var t, n;
-                    (t = (n = i.props).onFilterChange) === null || t === void 0 ? void 0 : t.call(n, e, {
+                    (t = (n = a.props).onFilterChange) === null || t === void 0 ? void 0 : t.call(n, e, {
                         keyword: ""
                     });
                 }
-                i.setState({
+                a.setState({
                     filterKeyword: "",
                     hasFocus: true,
                     open: true
                 }, (function() {
                     var e, t;
-                    (e = (t = i.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
+                    (e = (t = a.props).onOpen) === null || e === void 0 ? void 0 : e.call(t);
                 }));
             }));
-            mr(hr(i), "handleInputKeyDown", (function(e) {
+            gr(br(a), "handleInputKeyDown", (function(e) {
                 var t, r;
-                var o = i.props, a = o.children, l = o.onScrollBottom, s = o.tabConfirmsNewValue;
+                var o = a.props, i = o.children, l = o.onScrollBottom, s = o.tabConfirmsNewValue;
                 var c = (0, ge.keycode)(e.nativeEvent);
-                if (c === "tab" && i.state.open) {
-                    if (s && !ie()(i.activeValue) && i.availableOptionCount <= 1) {
+                if (c === "tab" && a.state.open) {
+                    if (s && !ae()(a.activeValue) && a.availableOptionCount <= 1) {
                         var u;
                         e.preventDefault();
-                        i.addValue(e, i.activeValue);
-                        (u = i.input) === null || u === void 0 ? void 0 : u.focus();
+                        a.addValue(e, a.activeValue);
+                        (u = a.input) === null || u === void 0 ? void 0 : u.focus();
                     } else {
-                        i.setState({
+                        a.setState({
                             open: false
                         });
                     }
@@ -2970,157 +2972,175 @@
                 if (e.shiftKey || e.metaKey || e.ctrlKey) {
                     return;
                 }
-                if (c === "end" && i.state.open) {
+                if (c === "end" && a.state.open) {
                     e.preventDefault();
-                    i.setState({
-                        activeIndex: i.availableOptionCount - 1
+                    a.setState({
+                        activeIndex: a.availableOptionCount - 1
                     });
                 }
-                if (c === "home" && i.state.open) {
+                if (c === "home" && a.state.open) {
                     e.preventDefault();
-                    i.setState({
+                    a.setState({
                         activeIndex: 0
                     });
                 }
                 if (c === "down") {
                     e.preventDefault();
-                    if (i.state.open) {
-                        i.setState((function(e) {
+                    if (a.state.open) {
+                        a.setState((function(e) {
                             return {
-                                activeIndex: Math.min(e.activeIndex + 1, i.availableOptionCount - 1)
+                                activeIndex: Math.min(e.activeIndex + 1, a.availableOptionCount - 1)
                             };
                         }));
                     } else {
-                        i.setState({
+                        a.setState({
                             activeIndex: 0,
                             open: true
                         });
                     }
-                    if (a && l) {
+                    if (i && l) {
                         var p;
-                        var f = n.Children.toArray(a).length - (2 + ((p = i.getCurrentValues()) !== null && p !== void 0 ? p : []).length);
-                        if (i.state.activeIndex === f) {
-                            i.handleScrollBottom(e);
+                        var f = n.Children.toArray(i).length - (2 + ((p = a.getCurrentValues()) !== null && p !== void 0 ? p : []).length);
+                        if (a.state.activeIndex === f) {
+                            a.handleScrollBottom(e);
                         }
                     }
                 }
                 if (c === "up") {
                     e.preventDefault();
-                    if (i.state.open) {
-                        i.setState((function(e) {
+                    if (a.state.open) {
+                        a.setState((function(e) {
                             return {
                                 activeIndex: Math.max(e.activeIndex - 1, 0)
                             };
                         }));
                     } else {
-                        i.setState({
+                        a.setState({
                             activeIndex: 0,
                             open: true
                         });
                     }
                 }
-                if (c === "enter" && !ie()(i.activeValue) && i.state.open) {
-                    i.addValue(e, i.activeValue);
+                if (c === "enter" && !ae()(a.activeValue) && a.state.open) {
+                    a.addValue(e, a.activeValue);
                 }
-                if (c === "backspace" && ((t = i.input) === null || t === void 0 ? void 0 : t.value) === "" && ((r = i.getCurrentValues()) === null || r === void 0 ? void 0 : r.length)) {
-                    i.removeValue(e, Rn()(i.getCurrentValues()));
+                if (c === "backspace" && ((t = a.input) === null || t === void 0 ? void 0 : t.value) === "" && ((r = a.getCurrentValues()) === null || r === void 0 ? void 0 : r.length)) {
+                    a.removeValue(e, Rn()(a.getCurrentValues()));
                 }
             }));
-            mr(hr(i), "handleInputChange", (function(e) {
+            gr(br(a), "handleInputChange", (function(e) {
                 var t, n;
-                i.setState({
+                a.setState({
                     filterKeyword: e.target.value,
                     open: true,
                     activeIndex: 0
                 });
-                (t = (n = i.props).onFilterChange) === null || t === void 0 ? void 0 : t.call(n, e, {
+                (t = (n = a.props).onFilterChange) === null || t === void 0 ? void 0 : t.call(n, e, {
                     keyword: e.target.value
                 });
             }));
-            mr(hr(i), "handleMenuOptionClick", (function(e, t) {
+            gr(br(a), "handleMenuOptionClick", (function(e, t) {
                 var n;
                 var r = t.value;
-                i.addValue(e, r);
-                (n = i.input) === null || n === void 0 ? void 0 : n.focus();
+                a.addValue(e, r);
+                (n = a.input) === null || n === void 0 ? void 0 : n.focus();
             }));
-            mr(hr(i), "handleInputBlur", (function(e) {
-                var t = document.getElementById(i.popoverId);
+            gr(br(a), "handleInputBlur", (function(e) {
+                var t = document.getElementById(a.popoverId);
                 var n = e.relatedTarget || document.activeElement;
  // IE11 doesn't support relatedTarget but sets activeElement
                                 var r = t && n && t.contains(n);
  // TS: target as Node is an unsafe assumption
-                                i.setState((function(e) {
+                                a.setState((function(e) {
                     return {
                         filterKeyword: r ? e.filterKeyword : "",
                         hasFocus: false
                     };
                 }));
                 if (!r) {
-                    var o, a;
-                    (o = (a = i.props).onFilterChange) === null || o === void 0 ? void 0 : o.call(a, e, {
+                    var o, i;
+                    (o = (i = a.props).onFilterChange) === null || o === void 0 ? void 0 : o.call(i, e, {
                         keyword: ""
                     });
                 }
             }));
-            mr(hr(i), "handleRequestClose", (function(e) {
+            gr(br(a), "handleRequestClose", (function(e) {
                 var t;
                 var n = e.reason, r = e.event;
-                if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !((t = i.state.el) === null || t === void 0 ? void 0 : t.contains(r.target))) {
-                    i.setState({
+                if (n === "escapeKey" || n === "offScreen" || n === "clickAway" && r !== undefined && !((t = a.state.el) === null || t === void 0 ? void 0 : t.contains(r.target))) {
+                    a.setState({
                         open: false
                     }, (function() {
                         var e, t;
-                        i.previousActiveIndex = null;
-                        (e = (t = i.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
+                        a.previousActiveIndex = null;
+                        (e = (t = a.props).onClose) === null || e === void 0 ? void 0 : e.call(t);
                     }));
                 }
                 if (n === "escapeKey") {
                     var o;
-                    (o = i.input) === null || o === void 0 ? void 0 : o.focus();
+                    (o = a.input) === null || o === void 0 ? void 0 : o.focus();
                 }
             }));
-            mr(hr(i), "handleScrollBottom", (function(e) {
-                if (i.state.open && !i.props.isLoadingOptions) {
+            gr(br(a), "handleScrollBottom", (function(e) {
+                if (a.state.open && !a.props.isLoadingOptions) {
                     var t, n;
-                    (t = (n = i.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
-                    i.setState({
-                        loadingMoreMessage: "".concat(i.availableOptionCount, " options, loading more options")
+                    (t = (n = a.props).onScrollBottom) === null || t === void 0 ? void 0 : t.call(n, e);
+                    a.setState({
+                        loadingMoreMessage: "".concat(a.availableOptionCount, " options, loading more options")
                     });
                 }
             }));
-            mr(hr(i), "handleMount", (function(e) {
-                i.setState({
+            gr(br(a), "handleMount", (function(e) {
+                a.setState({
                     el: e
                 });
-                Jn(i.props.elementRef, e);
+                Qn(a.props.elementRef, e);
             }));
-            mr(hr(i), "handleInputMount", (function(e) {
-                i.input = e;
-                Jn(i.props.inputRef, e);
+            gr(br(a), "handleInputMount", (function(e) {
+                a.input = e;
+                Qn(a.props.inputRef, e);
             }));
-            mr(hr(i), "handleActiveOptionMount", (function(e) {
-                if (i.previousActiveIndex !== i.state.activeIndex) {
+            gr(br(a), "handleActiveOptionMount", (function(e) {
+                if (a.previousActiveIndex !== a.state.activeIndex) {
                     e === null || e === void 0 ? void 0 : e.scrollIntoViewIfNeeded();
                 }
             }));
-            mr(hr(i), "renderMenu", (function(e) {
+            gr(br(a), "renderMenu", (function(e) {
                 var t = e.anchorWidth, n = e.maxHeight, o = e.placement;
-                var a = Sr({
+                var i = Cr({
                     anchorWidth: t,
                     maxHeight: n,
-                    menuStyle: i.props.menuStyle
+                    menuStyle: a.props.menuStyle
                 });
                 
-                return r().createElement(xe(), lr({
+                return r().createElement(xe(), sr({
                     controlledExternally: true,
                     placement: o !== null && o !== void 0 ? o : undefined,
-                    isLoading: i.props.isLoadingOptions,
-                    onScrollBottom: i.props.onScrollBottom ? i.handleScrollBottom : undefined
-                }, pe()(i.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll"), {
-                    style: a
-                }), i.children);
+                    isLoading: a.props.isLoadingOptions,
+                    onScrollBottom: a.props.onScrollBottom ? a.handleScrollBottom : undefined
+                }, pe()(a.props, "noOptionsMessage", "footerMessage", "animateLoading", "loadingMessage", "onScroll"), {
+                    style: i
+                }), a.children);
+            }));
+            gr(br(a), "getSelectedItemsContent", (function(e) {
+                return e.map((function(e) {
+                    var t = e;
+ // TS: faking props here
+                                        var n = t.props;
+                    if (n != null) {
+                        var o = n.children, a = n.label, i = n.value;
+                        
+                        return r().createElement("span", {
+                            key: i.toString()
+                        }, o || a, (0, $n.sprintf)((0, u._)(" selected")));
+                    }
+                    
+                    return r().createElement("span", {
+                        key: (0, be.createGUID)()
+                    },  r().createElement(r().Fragment, null, t, (0, $n.sprintf)((0, u._)(" selected"))));
+                }));
             }));
-            i.state = {
+            a.state = {
                 activeIndex: 0,
                 el: null,
                 filterKeyword: "",
@@ -3129,16 +3149,16 @@
                 values: e.defaultValues || [],
                 loadingMoreMessage: ""
             };
-            i.availableOptionCount = 0;
-            i.children = [];
-            i.controlledExternally = l()(e, "values");
-            i.activeItemId = (0, be.createDOMID)("active-item");
-            i.popoverId = (0, be.createDOMID)("popover");
+            a.availableOptionCount = 0;
+            a.children = [];
+            a.controlledExternally = l()(e, "values");
+            a.activeItemId = (0, be.createDOMID)("active-item");
+            a.popoverId = (0, be.createDOMID)("popover");
             if (false) {}
             if (false) {}
-            return i;
+            return a;
         }
-        ur(o, [ {
+        pr(o, [ {
             key: "componentDidUpdate",
             value: function e(t, n) {
                 if (false) {}
@@ -3174,19 +3194,19 @@
         }, {
             key: "addValue",
             value: function e(t, n) {
-                var r, o, i;
-                var a = ((r = this.getCurrentValues()) !== null && r !== void 0 ? r : []).concat([ n ]);
+                var r, o, a;
+                var i = ((r = this.getCurrentValues()) !== null && r !== void 0 ? r : []).concat([ n ]);
                 var l = this.props.name;
                 if (!this.isControlled()) {
                     this.setState({
-                        values: a,
+                        values: i,
                         activeIndex: 0,
                         open: true,
                         filterKeyword: ""
                     });
                 }
-                (o = (i = this.props).onChange) === null || o === void 0 ? void 0 : o.call(i, t, {
-                    values: a,
+                (o = (a = this.props).onChange) === null || o === void 0 ? void 0 : o.call(a, t, {
+                    values: i,
                     name: l
                 });
             }
@@ -3194,16 +3214,16 @@
             key: "removeValue",
             value: function e(t, n) {
                 var r, o;
-                var i = he()(this.getCurrentValues(), n);
-                var a = this.props.name;
+                var a = he()(this.getCurrentValues(), n);
+                var i = this.props.name;
                 if (!this.isControlled()) {
                     this.setState({
-                        values: i
+                        values: a
                     });
                 }
                 (r = (o = this.props).onChange) === null || r === void 0 ? void 0 : r.call(o, t, {
-                    values: i,
-                    name: a
+                    values: a,
+                    name: i
                 });
             }
         }, {
@@ -3214,40 +3234,54 @@
                                 return t.map((function(e) {
                     var t = e;
  // TS: faking props here
-                                        
+                                        var o = t.props;
+                    if (o != null) {
+                        var a = o.children, i = o.icon, l = o.label, s = o.selectedAppearance, c = o.selectedBackgroundColor, u = o.selectedForegroundColor, p = o.value;
+                        
+                        return r().createElement(Nn(), {
+                            "aria-selected": true,
+                            disabled: n.props.disabled,
+                            icon: i,
+                            key: p.toString(),
+                            "data-test": "selected-option",
+                            onRequestRemove: n.handleRequestRemove,
+                            role: "option",
+                            value: p,
+                            appearance: s,
+                            backgroundColor: c,
+                            foregroundColor: u
+                        },  r().createElement(r().Fragment, null, a || l));
+                    }
+                    
                     return r().createElement(Nn(), {
                         "aria-selected": true,
                         disabled: n.props.disabled,
-                        icon: t.props ? t.props.icon : undefined,
-                        key: (t.props ? t.props.value : t).toString(),
+                        key: (0, be.createGUID)(),
                         "data-test": "selected-option",
                         onRequestRemove: n.handleRequestRemove,
                         role: "option",
-                        value: t.props ? t.props.value : t,
-                        appearance: t.props ? t.props.selectedAppearance : undefined,
-                        backgroundColor: t.props ? t.props.selectedBackgroundColor : undefined,
-                        foregroundColor: t.props ? t.props.selectedForegroundColor : undefined
-                    },  r().createElement(r().Fragment, null, t.props ? t.props.children || t.props.label : t));
+                        value: t
+                    },  r().createElement(r().Fragment, null, t));
                 }));
             }
         }, {
             key: "render",
             value: function e() {
                 var t, o = this;
-                var i = this.props, a = i.allowNewValues, s = i.children, p = i.controlledFilter, f = i.defaultPlacement, d = i.describedBy, v = i.disabled, h = i.error, b = i.inline, y = i.inputId, m = i.labelledBy, g = i.placeholder, O = i.required, w = i.repositionMode, S = i.useClickawayOverlay, C = ir(i, [ "allowNewValues", "children", "controlledFilter", "defaultPlacement", "describedBy", "disabled", "error", "inline", "inputId", "labelledBy", "placeholder", "required", "repositionMode", "useClickawayOverlay" ]);
-                var x = or(or({}, Dn()(C, (function(e, t) {
+                var a = this.props, i = a.allowNewValues, s = a.children, p = a.controlledFilter, f = a.defaultPlacement, d = a.describedBy, v = a.disabled, h = a.error, b = a.inline, y = a.inputId, m = a.labelledBy, g = a.placeholder, O = a.required, w = a.repositionMode, S = a.useClickawayOverlay, C = ir(a, [ "allowNewValues", "children", "controlledFilter", "defaultPlacement", "describedBy", "disabled", "error", "inline", "inputId", "labelledBy", "placeholder", "required", "repositionMode", "useClickawayOverlay" ]);
+                var x = ar(ar({}, Tn()(C, (function(e, t) {
                     return t === "role" || t.indexOf("aria-") === 0;
                 }))), {}, {
                     "aria-describedby": d,
                     "aria-labelledby": m,
                     "aria-invalid": h || undefined
                 });
-                var k = or({}, Dn()(C, (function(e, t) {
+                var k = ar({}, Tn()(C, (function(e, t) {
                     return t === "aria-label" || t === "aria-describedby";
                 })));
                 var I = (t = this.getCurrentValues()) !== null && t !== void 0 ? t : [];
-                var j = I.slice(0);
-                var _ = I.indexOf(this.state.filterKeyword) >= 0;
+                var _ = I.slice(0);
+                var j = I.indexOf(this.state.filterKeyword) >= 0;
  // Map Options to selected values
                                 if (I && I.length) {
                     n.Children.toArray(s).filter(n.isValidElement).filter((function(e) {
@@ -3256,7 +3290,7 @@
                         if (e.type === J) {
                             var t = I.indexOf(e.props.value);
                             if (t !== -1) {
-                                j[t] = e;
+                                _[t] = e;
                             }
                         }
                     }));
@@ -3274,36 +3308,37 @@
                 this.availableOptionCount = 0;
                 this.activeValue = undefined;
                 this.children = n.Children.map(M, (function(e, t) {
-                    if (!e.props || !l()(e.props, "value")) {
+                    var r = e.props;
+                    if (!r || !l()(r, "value")) {
                         // ignore Headings and Dividers
                         return e;
                     }
-                    var r = e;
+                    var a = e;
+                    var i = a.props, s = i.children, c = i.label, u = i.matchRanges, f = i.value;
  // find out if the search string exactly matches a value
-                                        if (r.props.value === o.state.filterKeyword) {
-                        _ = true;
+                                        if (f === o.state.filterKeyword) {
+                        j = true;
                     }
  // remove items that are already selected
-                                        var i = I.indexOf(r.props.value);
-                    if (i >= 0) {
+                                        var d = I.indexOf(f);
+                    if (d >= 0) {
                         return null;
                     }
  // highlight matched text
-                                        var a = r.props, s = a.children, c = a.label, u = a.matchRanges;
-                    var f = s === undefined || Pn()(s);
-                    var d = f && !p && !u && E && (0, Oe.keywordLocations)(c, E);
+                                        var v = s === undefined || Pn()(s);
+                    var h = v && !p && !u && E && (0, Oe.keywordLocations)(c, E);
  // clone item
-                                        var v =  (0, n.cloneElement)(r, {
+                                        var b =  (0, n.cloneElement)(a, {
                         key: t,
                         onClick: o.handleMenuOptionClick,
-                        matchRanges: f && (u || d) || undefined
+                        matchRanges: v && (u || h) || undefined
                     });
-                    return v;
+                    return b;
                 })).filter((function(e) {
                     return e !== null;
                 }));
  // Add the option to add the new value
-                                if (a && !_ && this.state.filterKeyword) {
+                                if (i && !j && this.state.filterKeyword) {
                     this.children.unshift( r().createElement(J, {
                         label: "".concat(this.state.filterKeyword),
                         description: (0, u._)("(New value)"),
@@ -3316,35 +3351,37 @@
                 if (this.state.open) {
                     // highlight the selected Item
                     this.children = n.Children.map(this.children, (function(e) {
-                        if (!e.props || !l()(e.props, "value")) {
+                        var t = e.props;
+                        if (!t || !l()(t, "value")) {
                             // ignore Headings and Dividers
                             return e;
                         }
-                        var t = e;
-                        var r = o.availableOptionCount === o.state.activeIndex;
+                        var r = e;
+                        var a = r.props, i = a.disabled, s = a.value;
+                        var c = o.availableOptionCount === o.state.activeIndex;
                         o.availableOptionCount += 1;
-                        if (!r) {
-                            return t;
+                        if (!c) {
+                            return r;
                         }
-                        if (!t.props.disabled) {
-                            o.activeValue = t.props.value;
+                        if (!i) {
+                            o.activeValue = s;
                         }
-                        var i =  (0, n.cloneElement)(t, {
-                            active: r,
+                        var u =  (0, n.cloneElement)(r, {
+                            active: c,
                             id: o.activeItemId,
                             ref: o.handleActiveOptionMount
                         });
-                        return i;
+                        return u;
                     }));
                 }
-                var A = wr("".concat(this.state.filterKeyword.length * .8, "em"));
+                var A = Sr("".concat(this.state.filterKeyword.length * .8, "em"));
                 
-                return r().createElement(r().Fragment, null,  r().createElement(zn, lr({
+                return r().createElement(r().Fragment, null,  r().createElement(Wn, sr({
                     key: "control",
                     "data-test-values": JSON.stringify(I),
                     inline: b,
                     $hasfocus: this.state.hasFocus
-                }, c().apply(void 0, [ C, "animateLoading", "controlledFilter", "defaultValues", "footerMessage", "inputRef", "isLoadingOptions", "labelledBy", "menuStyle", "noOptionsMessage", "onChange", "onFilterChange", "onScroll", "onScrollBottom", "onClose", "onOpen", "values", "useClickawayOverlay" ].concat(Xn(le()(x)))), {
+                }, c().apply(void 0, [ C, "animateLoading", "controlledFilter", "defaultValues", "footerMessage", "inputRef", "isLoadingOptions", "labelledBy", "menuStyle", "noOptionsMessage", "onChange", "onFilterChange", "onScroll", "onScrollBottom", "onClose", "onOpen", "values", "useClickawayOverlay" ].concat(Yn(le()(x)))), {
                     onClick: v ? undefined : this.handleClick,
                     $disabled: v,
                     $error: h,
@@ -3357,13 +3394,13 @@
                     "aria-labelledby": m,
                     "aria-invalid": h,
                     "aria-multiselectable": "true"
-                }, k), this.renderButtons(j), !v &&  r().createElement(Wn, {
+                }, k), this.renderButtons(_), !v &&  r().createElement(Un, {
                     role: "combobox",
                     "aria-owns": this.state.open ? this.popoverId : undefined,
                     "aria-haspopup": true,
                     "aria-expanded": this.state.open,
                     "aria-controls": this.state.open ? this.popoverId : undefined
-                },  r().createElement(Un, lr({
+                },  r().createElement(Gn, sr({
                     "data-test": "textbox",
                     id: y,
                     ref: this.handleInputMount,
@@ -3390,40 +3427,43 @@
                     defaultPlacement: f,
                     repositionMode: w,
                     id: this.popoverId
-                }, this.renderMenu)),  r().createElement(Fn(), {
+                }, this.renderMenu)),  r().createElement(Kn(), {
                     role: "status",
-                    "aria-live": "polite"
-                }, this.state.loadingMoreMessage), S && this.state.open ?  r().createElement(Gn, {
+                    "aria-relevant": "text"
+                }, this.state.loadingMoreMessage), S && this.state.open ?  r().createElement(Jn, {
                     key: "overlay",
                     $popoveropen: this.state.open,
                     "data-test": "overlay"
-                }) : null);
+                }) : null,  r().createElement(Kn(), {
+                    role: "alert",
+                    "aria-relevant": "additions"
+                }, this.getSelectedItemsContent(_)));
             }
         } ]);
         return o;
     }(n.Component);
-    mr(Cr, "propTypes", gr);
-    mr(Cr, "defaultProps", Or);
-    mr(Cr, "Option", J);
-    mr(Cr, "Divider", p.Divider);
-    mr(Cr, "Heading", p.Heading);
-    /* harmony default export */    const xr = Cr;
+    gr(xr, "propTypes", Or);
+    gr(xr, "defaultProps", wr);
+    gr(xr, "Option", J);
+    gr(xr, "Divider", p.Divider);
+    gr(xr, "Heading", p.Heading);
+    /* harmony default export */    const kr = xr;
     // CONCATENATED MODULE: ./src/Multiselect/Multiselect.tsx
-    function kr(e) {
+    function Ir(e) {
         "@babel/helpers - typeof";
         if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-            kr = function e(t) {
+            Ir = function e(t) {
                 return typeof t;
             };
         } else {
-            kr = function e(t) {
+            Ir = function e(t) {
                 return t && typeof Symbol === "function" && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t;
             };
         }
-        return kr(e);
+        return Ir(e);
     }
-    function Ir() {
-        Ir = Object.assign || function(e) {
+    function _r() {
+        _r = Object.assign || function(e) {
             for (var t = 1; t < arguments.length; t++) {
                 var n = arguments[t];
                 for (var r in n) {
@@ -3434,14 +3474,14 @@
             }
             return e;
         };
-        return Ir.apply(this, arguments);
+        return _r.apply(this, arguments);
     }
     function jr(e, t) {
         if (!(e instanceof t)) {
             throw new TypeError("Cannot call a class as a function");
         }
     }
-    function _r(e, t) {
+    function Er(e, t) {
         for (var n = 0; n < t.length; n++) {
             var r = t[n];
             r.enumerable = r.enumerable || false;
@@ -3450,12 +3490,12 @@
             Object.defineProperty(e, r.key, r);
         }
     }
-    function Er(e, t, n) {
-        if (t) _r(e.prototype, t);
-        if (n) _r(e, n);
+    function Mr(e, t, n) {
+        if (t) Er(e.prototype, t);
+        if (n) Er(e, n);
         return e;
     }
-    function Mr(e, t) {
+    function Ar(e, t) {
         if (typeof t !== "function" && t !== null) {
             throw new TypeError("Super expression must either be null or a function");
         }
@@ -3466,35 +3506,35 @@
                 configurable: true
             }
         });
-        if (t) Ar(e, t);
+        if (t) Pr(e, t);
     }
-    function Ar(e, t) {
-        Ar = Object.setPrototypeOf || function e(t, n) {
+    function Pr(e, t) {
+        Pr = Object.setPrototypeOf || function e(t, n) {
             t.__proto__ = n;
             return t;
         };
-        return Ar(e, t);
+        return Pr(e, t);
     }
-    function Pr(e) {
+    function Vr(e) {
         var t = Tr();
         return function n() {
-            var r = Dr(e), o;
+            var r = qr(e), o;
             if (t) {
-                var i = Dr(this).constructor;
-                o = Reflect.construct(r, arguments, i);
+                var a = qr(this).constructor;
+                o = Reflect.construct(r, arguments, a);
             } else {
                 o = r.apply(this, arguments);
             }
-            return Vr(this, o);
+            return Rr(this, o);
         };
     }
-    function Vr(e, t) {
-        if (t && (kr(t) === "object" || typeof t === "function")) {
+    function Rr(e, t) {
+        if (t && (Ir(t) === "object" || typeof t === "function")) {
             return t;
         }
-        return Rr(e);
+        return Dr(e);
     }
-    function Rr(e) {
+    function Dr(e) {
         if (e === void 0) {
             throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
         }
@@ -3511,13 +3551,13 @@
             return false;
         }
     }
-    function Dr(e) {
-        Dr = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
+    function qr(e) {
+        qr = Object.setPrototypeOf ? Object.getPrototypeOf : function e(t) {
             return t.__proto__ || Object.getPrototypeOf(t);
         };
-        return Dr(e);
+        return qr(e);
     }
-    function qr(e, t, n) {
+    function Nr(e, t, n) {
         if (t in e) {
             Object.defineProperty(e, t, {
                 value: n,
@@ -3530,46 +3570,46 @@
         }
         return e;
     }
-    var Nr = {
-        allowNewValues: i().bool,
-        animateLoading: i().bool,
-        children: i().node,
-        compact: i().bool,
-        controlledFilter: i().bool,
-        defaultPlacement: i().oneOf([ "above", "below", "vertical" ]),
-        defaultValues: i().array,
-        describedBy: i().string,
-        disabled: i().bool,
-        elementRef: i().oneOfType([ i().func, i().object ]),
-        error: i().bool,
-        filter: i().oneOf([ false, true, "controlled" ]),
-        footerMessage: i().node,
-        inline: i().bool,
-        inputId: i().string,
-        inputRef: i().oneOfType([ i().func, i().object ]),
-        isLoadingOptions: i().bool,
-        labelledBy: i().string,
-        loadingMessage: i().node,
-        menuStyle: i().object,
-        name: i().string,
-        noOptionsMessage: i().node,
-        onChange: i().func,
-        onClose: i().func,
-        onFilterChange: i().func,
-        onOpen: i().func,
-        onScroll: i().func,
-        onScrollBottom: i().func,
-        placeholder: i().string,
-        repositionMode: i().oneOf([ "none", "flip" ]),
-        selectAllAppearance: i().oneOf([ "buttongroup", "checkbox" ]),
-        showSelectedValuesFirst: i().oneOf([ "nextOpen", "immediately", "never" ]),
-        tabConfirmsNewValue: i().bool,
-        useClickawayOverlay: i().bool,
-        values: i().array,
+    var Br = {
+        allowNewValues: a().bool,
+        animateLoading: a().bool,
+        children: a().node,
+        compact: a().bool,
+        controlledFilter: a().bool,
+        defaultPlacement: a().oneOf([ "above", "below", "vertical" ]),
+        defaultValues: a().array,
+        describedBy: a().string,
+        disabled: a().bool,
+        elementRef: a().oneOfType([ a().func, a().object ]),
+        error: a().bool,
+        filter: a().oneOf([ false, true, "controlled" ]),
+        footerMessage: a().node,
+        inline: a().bool,
+        inputId: a().string,
+        inputRef: a().oneOfType([ a().func, a().object ]),
+        isLoadingOptions: a().bool,
+        labelledBy: a().string,
+        loadingMessage: a().node,
+        menuStyle: a().object,
+        name: a().string,
+        noOptionsMessage: a().node,
+        onChange: a().func,
+        onClose: a().func,
+        onFilterChange: a().func,
+        onOpen: a().func,
+        onScroll: a().func,
+        onScrollBottom: a().func,
+        placeholder: a().string,
+        repositionMode: a().oneOf([ "none", "flip" ]),
+        selectAllAppearance: a().oneOf([ "buttongroup", "checkbox" ]),
+        showSelectedValuesFirst: a().oneOf([ "nextOpen", "immediately", "never" ]),
+        tabConfirmsNewValue: a().bool,
+        useClickawayOverlay: a().bool,
+        values: a().array,
         /** @private */
-        virtualization: i().number
+        virtualization: a().number
     };
-    var Br = {
+    var Lr = {
         allowNewValues: false,
         animateLoading: false,
         compact: false,
@@ -3584,44 +3624,44 @@
         tabConfirmsNewValue: false,
         useClickawayOverlay: false
     };
-    function Lr(e) {
+    function Fr(e) {
         return e && e.compact === true;
     }
     var Kr =  function(e) {
-        Mr(n, e);
-        var t = Pr(n);
+        Ar(n, e);
+        var t = Vr(n);
         function n() {
             jr(this, n);
             return t.apply(this, arguments);
         }
-        Er(n, [ {
+        Mr(n, [ {
             key: "render",
             // @docs-props-type MultiselectPropsBase
             // TODO: SUI-3402, this can be removed when ControlGroup no longer needs to inspect componentType
             value: function e() {
-                if (Lr(this.props)) {
+                if (Fr(this.props)) {
                     
-                    return r().createElement(xn, Ir({
+                    return r().createElement(xn, _r({
                         "data-test": "multiselect"
                     }, c()(this.props, "compact")));
                 }
                 if (false) {}
                 if (false) {}
                 
-                return r().createElement(xr, Ir({
+                return r().createElement(kr, _r({
                     "data-test": "multiselect"
                 }, c()(this.props, "compact")));
             }
         } ]);
         return n;
     }(n.Component);
-    qr(Kr, "propTypes", Nr);
-    qr(Kr, "defaultProps", Br);
-    qr(Kr, "componentType", "Multiselect");
-    qr(Kr, "Option", J);
-    qr(Kr, "Heading", p.Heading);
-    qr(Kr, "Divider", p.Divider);
-    /* harmony default export */    const Fr = Kr;
+    Nr(Kr, "propTypes", Br);
+    Nr(Kr, "defaultProps", Lr);
+    Nr(Kr, "componentType", "Multiselect");
+    Nr(Kr, "Option", J);
+    Nr(Kr, "Heading", p.Heading);
+    Nr(Kr, "Divider", p.Divider);
+    /* harmony default export */    const $r = Kr;
     // CONCATENATED MODULE: ./src/Multiselect/index.ts
     module.exports = t;
     /******/})();